This reference is not even remotely all-inclusive. Instead, it contains
some of the harder-to-remember elements of HTML that I often find myself
looking up. I hope you also find it to be useful.
Standard Colors
There are sixteen standard color names as defined by the HTML 4.0 standard.
| | aqua |
| black |
| blue |
| fuchsia |
| gray |
| green |
| lime |
| maroon |
| | navy |
| olive |
| purple |
| red |
| silver |
| teal |
| yellow |
| white |
Body
Creating a page with no margins, this is non-standard, but it works just fine. However if your
browser supports it, I recommend using CSS to do this instead.
<body leftmargin="0" topmargin="0">
Form Elements
The form
<form action="cgi.php" method="get|post">
hidden, text, password, submit, and image submit
<input type="hidden" name="form" value="survey" />
<input type="text" name="age" value="68" maxlength="5" size="7" />
<input type="password" name="passkey" />
<input type="submit" name="button" value="Submit Me!" />
<input type="image" src="foo.gif" />
Radio buttons and Checkboxes
<input type="radio" name="sex" value="Male" />
<input type="radio" name="sex" value="Female" />
<input type="checkbox" name="penguin" value="yes" />
Text boxes
<textarea name="essay" cols="40" rows="20">Type here
</textarea>
Drop-down menus
<select name="pet">
<option value="dog">Dog</option>
<option value="cat" selected="selected">Cat</option>
</select>
List boxes
<select name="pet" size="3" multiple="multiple">
...
</select>
Labels and fieldsets
<fieldset>
<legend>Your stuff</legend>
<label>Name: <input type="text"></label>
<label>Email: <input type="text"></label>
</fieldset>
<span> vs <div>
Both <span> and <div> tags can be used to apply CSS styles to a document.
However, 'div' stands for 'division' and is a block element. It will create line-breaks above and below
the selected area. The <span> tag is an inline tag and does not break content onto multiple lines.
Line one
<div class="bigger">Line two</div>
Line three
All <span class="weirder">one</span> line
Images
Alignment
<img src="foo.gif" align="left" />
Alignments: top | middle | bottom | left | right
Image maps (client-side)
<img src="foo.gif" usemap="#map1" />
<map name="map1">
<area coords="0, 0, 50, 50" href="p1.html" />
<area coords="50, 0, 90, 50" href="p2.html" />
</map>
Lists
Unordered lists
<ul>
<li>List item 1</li>
<li>List item 2, etc...</li>
</ul>
Ordered lists
The optional type and start parameters for the <ol> tag can specify the
sequence style and the beginning value of the list.
Valid type values: A, a, I, i, 1
<ol type="I" start="5">
<li>List item V</li>
<li>List item VI, etc...</li>
</ol>
Misc.
pre
<pre>
for(i=0;i<10;i++){
echo "foo";
}
</pre>
tt
<tt>This will be monospaced.</tt>
acronym
<acronym title="Get Goat Milk">GGM</acronym>
sub and sup
H<sub>2</sub>O
e=mc<sup>2</sup>
Character Entities
The
'<', '>', and '&' symbols must always be written as character
entities (
<, >, and &) or they will be interpreted by
the browser as HTML. In addition, there are other character that cannot be
typed on the keyboard which can be summoned as character entities. Some of these are:
| & | & |
¡ | ¡ |
> | > |
¥ | ¥ |
§ | § |
| · | · |
º | º |
» | » |
« | « |
< | < |
| ¢ | ¢ |
© | © |
ª | ª |
® | ® |
¿ | ¿ |
| ¼ | ¼ |
½ | ½ |
¾ | ¾ |
à | à |
£ | £ |
| ° | ° |
± | ± |
µ | µ |
Æ | Æ |
æ | æ |
| × | × |
÷ | ÷ |
| |
à | à |
ü | ü |
| ß | ß |
Ø | Ø |
ö | ö |
ñ | ñ |
¶ | ¶ |
Url Encodings
The following characters must be encoded when used as part of a URL.
| ; | %3b |
@ | %40 |
> | %3e |
{ | %7b |
| %5c |
[ | %5b |
| / | %2f |
= | %3d |
" | %22 |
} | %7d |
^ | %5e |
] | %5d |
| ? | %3f |
& | %26 |
# | %23 |
| | %7c |
~ | %7e |
` | %60 |
| : | %3a |
< | %3c |
% | %25 |
|
Framesets and frames
Just don't do it.
Please.
