ASU Web Community

Input content as HTML

You can optionally format your entry in HTML. To use plain text or HTML, disable the rich-text editor. If you're a novice to HTML, don't worry—it's not as difficult as it sounds. Here's a quick primer:

  1. Forget about styles. Most sites now style text separately in CSS (cascading style sheet) files, which means styles are already set for you. It is strongly recommended to not add styling information into your text. Examples of styling information include those controlling font appearance or spacing:
    &lt;font style="15px arial bold"&gt;<br />
    &lt;font-family="arial" size="4" color="red"&gt;<br />
    &lt;br /&gt;&lt;br /&gt;&lt;br /&gt;&lt;br /&gt;<br />
    &lt;p&gt; &lt;/p&gt;

    Instead, mark up your text with standard HTML tags only.

  2. Bold: If you want something to be bold, just enclose it in <b> or <strong> tags, like this:
    &lt;b&gt;This text is bold for style or looks&lt;/b&gt;<br />
    &lt;strong&gt;This text is bold because it needs to be emphasized&lt;/strong&gt;

    Note that there is always an opening tag (no forward slash) and a closing tag (a forward slash before the tag name, indicating that you are "turning it off").

  3. Italics: To make something italic, put it in <i> or <em> tags:
    &lt;i&gt;This is in italics for style or looks&lt;/i&gt;<br />
    &lt;em&gt;This is italics because it needs to be emphasized&lt;/em&gt;

  4. Paragraphs: To put things nicely in paragraphs, enclose them in <p> tags:
    &lt;p&gt;This is a paragraph.&lt;/p&gt;

  5. Lists: To make a bulleted list, first open a list with a <ul> tag (that stands for "unordered list"), then put each list item in <li> (yes, for "list item") tags. Don't forget at the end to close off your items with a closing </li> tag and your list with a closing </ul> tag. Here's how it looks:
    &lt;ul&gt;<br />
    &lt;li&gt;This is the first bulleted item&lt;/li&gt;<br />
    &lt;li&gt;This is the second bulleted item&lt;/li&gt;<br />
    &lt;/ul&gt;

    The result is displayed below:

    • This is the first bulleted item
    • This is the second bulleted item

    For a numbered list, open and close your list with a <ol> </ol> tags (that stand for "ordered list". Here's how it looks:

    &lt;ol&gt;<br />
    &lt;li&gt;This is the first bulleted item&lt;/li&gt;<br />
    &lt;li&gt;This is the second bulleted item&lt;/li&gt;<br />
    &lt;/ol&gt;

    The result is displayed below:

    1. This is the first bulleted item
    2. This is the second bulleted item
  6. Links: To add a link you need to use the <a> (anchor) tag.
    &lt;a href="http://www.example.com"&gt;Example.com&lt;/a&gt;

    To add links to other pages within your Drupal site you do not need to add the full URL, you can simply refer to the node like so:
    &lt;a href="contact"&gt;Contact us&lt;/a&gt;<br />
    &lt;a href="/node/1222"&gt;My node&lt;/a&gt;

  7. Images: To add an image, use the img (image) tag.
    &lt;img src="images/hat.gif" /&gt;

    You can make an image "clickable" by wrapping it in an <a> (anchor) tag.
    &lt;a href="http://asu.edu" title="ASU Homepage"&gt;&lt;img src="images/hat.gif" /&gt;&lt;/a&gt;