HTML Cheat Sheet

HTML Cheat Sheet

Notes for using HTML in Drupal

Drupal has three editing modes, which you can set using the "Input Format" link located below each editing area. The three modes are:

  1. Filtered HTML
  2. PHP Code
  3. Full HTML

The "Filtered HTML" mode only allows you to use a strictly limited number of HTML tags, for example, "a" for links (also called anchors), "em" for emphasis (italics), and "strong" for bold. Filtered HTML mode will insert line and paragraph breaks automatically based on where you've pressed "return" while editing. The tags that this mode supports are listed in the "Input Format" box.

The "Full HTML" mode allows any and all HTML tags. However, it still inserts line breaks and paragraph breaks automatically, as in the Filtered HTML mode.

The last mode is for "PHP code." This allows full HTML, and does NOT insert line breaks automatically. It allows for the greatest amount of control over how your content is formatted. You do not actually need to know PHP code in order to use PHP mode. In fact, don't attempt to enter any actual PHP unless you have a very good idea what you're doing, since it's both powerful and comparatively difficult. By the same token, do not allow your students or anyone else access to PHP mode, because it can be abused.

Basic Text Formatting

<strong>Bold text</strong>:
Bold text

This tag is allowed in Filtered mode.

<em>Emphasis</em>
Emphasis.

This tag is allowed in Filtered Mode.

The "br" tag inserts a <br /> line break
The "br" tag inserts a
line break.

This tag does not work in Filtered mode, because it is inserted automatically when you press "enter." It can be used in Full HTML mode, but the results are hard to control because Drupal still inserts this tag in that mode, so you wind up with extra ones.

<p>This is a paragraph.</p>
<p>And so is this.</p>
<p style="text-indent: 2em;">This one is indented.</p>

This is a paragraph.

And so is this.

This one is indented.

Like <br />, this tag does not work in Filtered mode, because it is added based on carriage returns. It can be used in Full HTML mode, but the results are hard to control because Drupal still inserts this tag in that mode, so you wind up with extra ones.

Lists

Lists are automatically indented. All of the list tags can be used in Filtered mode.

<ol> <li>"ol" stands for "<b>o</b>rdered <b>l</b>ist"</li> <li>"li" stands for "list item"</li> <li>Item 3</li> </ol>
  1. "ol" stands for "ordered list"
  2. "li" stands for "list item"
  3. Item 3
<ul> <li>"ul" stands for "<b>un</b>ordered <b>l</b>ist"</li> <li>"li" stands for "list item"</li> <li>Item 3</li> </ul>
  • "ul" stands for "unordered list"
  • "li" stands for "list item"
  • Item 3

Links and Images

<a href="http://www.google.com/" title="Click to visit Google">Google</a>
Google

This tag can be used in Filtered mode. The "title" attribute is a description of the link. This is used by screen reading software for the blind. In visual browsers like Internet Explorer or Firefox, the title attribute will pop up if like a "tooltip" if you hold your mouse over the link.

<img src="http://www.cwrl.utexas.edu/files/profile-large.png" width="138" height="200" alt="A statue in profile" /> <p>Text will not wrap around this image.</p>
A statue in profile

Text will not wrap around this image. "Width" and "height" are the dimensions of the image, in pixels. "Alt" should be a textual description of the image. If the image fails to load, the alt text will be used in its place. Also, screen-reading software for the blind uses the alt text to describe the image aloud. This tag cannot be used in Filtered mode.

<img src="http://www.cwrl.utexas.edu/files/profile-left.png" width="28" height="50" alt="A statue facing right" style="float: left;" /> <p><strong>This image will float on the left.</strong> (Further text.)</p>
A statue facing right

This image will float on the left. (Cannot be used in Filtered mode.) ipse negat nocuisse tibi sua tela Cupido, Myrrha, facesque suas a crimine vindicat isto; stipite te Stygio tumidisque adflavit echidnis e tribus una soror: scelus est odisse parentem, hic amor est odio maius scelus.—undique lecti te cupiunt proceres, totoque Oriente iuventus ad thalami certamen adest: ex omnibus unum elige, Myrrha, virum, dum ne sit in omnibus unus. illa quidem sentit foedoque repugnat amori et secum "quo mente feror? quid molior?" inquit "di, precor, et pietas sacrataque iura parentum, hoc prohibete nefas scelerique resistite nostro, si tamen hoc scelus est. sed enim damnare negatur hanc Venerem pietas: coeunt animalia nullo cetera dilectu, nec habetur turpe iuvencae ferre patrem tergo, fit equo sua filia coniunx, quasque creavit init pecudes caper, ipsaque, cuius semine concepta est, ex illo concipit ales.

<img src="http://www.cwrl.utexas.edu/files/profile-right.png" width="28" height="50" alt="A statue facing left" style="float: right;" /> <p><strong>This image will float on the right.</strong> (Further text.)</p>
A statue facing left

This image will float on the right. (Cannot be used in Filtered mode.) ipse negat nocuisse tibi sua tela Cupido, Myrrha, facesque suas a crimine vindicat isto; stipite te Stygio tumidisque adflavit echidnis e tribus una soror: scelus est odisse parentem, hic amor est odio maius scelus.—undique lecti te cupiunt proceres, totoque Oriente iuventus ad thalami certamen adest: ex omnibus unum elige, Myrrha, virum, dum ne sit in omnibus unus. illa quidem sentit foedoque repugnat amori et secum "quo mente feror? quid molior?" inquit "di, precor, et pietas sacrataque iura parentum, hoc prohibete nefas scelerique resistite nostro, si tamen hoc scelus est. sed enim damnare negatur hanc Venerem pietas: coeunt animalia nullo cetera dilectu, nec habetur turpe iuvencae ferre patrem tergo, fit equo sua filia coniunx, quasque creavit init pecudes caper, ipsaque, cuius semine concepta est, ex illo concipit ales.

Tables

<table cellspacing="2" cellpadding="2" border="2"> <tr> <td>Column 1</td> <td>Column 2</td> </tr> <tr> <td>Column 1</td> <td>Column 2</td> </tr> </table>
Column 1 Column 2
Column 1 Column 2

Note: These tags cannot be used in Filtered mode. TR stands for Table Row. TD stands for Table Data. The tabs shown in this example are not necessary, they just make the code easier to read. "Cellspacing" will adjust the distance between the edges of adjacent cells. "Cellpadding" will adjust the distance between the edges of a cell and its contents. "Border" defines the width (in pixels) of the border around each cell. Setting "border" to zero will make the borders go away.

Credits

Statue image courtesy of waterlily. Original photo distributed under the Creative Commons Attribution License 2.0.

Example text in the floating image entries taken from Ovid's Metamorphoses, Book 10, lines 311 to 328.