HTML Quick Reference

The best HTML reference on the WWW: http://www.eskimo.com/~bloo/indexdot/html/index.html

Tags and Attributes

The HTML commands you use to tell web browsers how to display text are called tags. All tags are enclosed in angle braces: < >.

Some tags go around text. For these tags, you must include a beginning and an ending tag, like this: <h1>Some text</h1>. Note the "/" in the ending tag -- that's what makes it an ending tag instead of a beginning tag.

Some tags work by themselves and don't need an ending tag; for instance, <hr>.

Some tags allow options, called attributes, that change how the tag works. Attributes go inside the angle brackets with the tag name and usually have the form name=value. For instance, <body bgcolor="white"> specifies that the background color of the document body should be white. Most attributes are entirely optional (i.e. you can leave out the attributes and and the tag will still work). Attributes are also specific to tags, or to a group of tags (i.e. just because tag a has attribute q does not mean that tag b also has attribute q).

Comments

Comments begin with . For example:

<!-- This a comment
     on more than one line -->

Page header

Page usually begins with code like this:

<html>
<head>
<title>This title goes in the browser's title bar</title> 
</head> 

<body background="image.gif" bgcolor=#ffffff link=#0000ff vlink=#ff00ff>

Formatting Text

<h1> </h1>, <h2> </h2>, . . . <h6> </h6>	Headings of different sizes (h1 is largest)
<u> </u>	Underline
<em> </em>	Emphasis (italics)
<b> </b>	Bold
<font size="+2"> </font>	Font size relative
<font size=6> </font>	Font size absolute
<font point-size=20> </font>	Font point size
<font color="#ff0000"> </font>	Font color
<tt> </tt>	Print text in teletype font and exactly as typed (e.g. preserve tabs). Useful for printing source code.
<pre> </pre>	Same as above except works over multiple lines

Layout

<p>	Leave a blank line
<br>	Move to the next line (line break)
<hr width="30%" align="center" size=3 noshade color="#0000ff">	Horizontal line
	Blank space

Tabbing: Inserting a tab with the tab key in an HTML document will have the same effect as a space. If you must create tabs, use several  's in a row or use a table.

Images

<img src=http://www.domain.com/path 
    alt="alternate text" height=20 width=30 border=3>

src is the only required attribute, but you should include alt text for text-based browser, people with graphics turned off, and blind people using screen readers.

Lists

<ol>
    <li> Item 1 </li>
    <li> Item 2 </li>
    <li> Item 3</li>
</ol>

For an unordered list, use <ul> </ul> instead of ol.

Here is an example of a definition list:

<dl>
<dt>Term 1</dt>
    <dd> Term 1 definition</dd>
<dt>Term 2</dt>
    <li> Term 2 definition </li>
</dl>

Tables

This code:

<table border="2" align="left" cellpadding="5" 
        bordercolor="#ff0000" width="75%">
    <caption align=top>A table </caption>
    <tr> <th> Column 1 </th> <th>Column 2</th> </tr>
    <tr> <td> Data 1,1 </td> <td>Data 1, 2</td> </tr>
    <tr> <td> Data 2,1 </td> <td>Data 2, 2</td> </tr>
    <tr> <td colspan=2 valign=top> Note: this is just a small 
        sample. </td> </tr>
</table>

Produces this table:

A table
Column 1 Column 2

Data 1,1 Data 1, 2

Data 2,1 Data 2, 2

Note: this is just a small sample.

Note that none of the attributes in the table tag are required.

Forms

This code:

<form method="get" action="http://www.shodor.org/cgi-bin/script.cgi">
    Enter your name: <input type="text" name="name" size="10"><br>
    <input type="radio" value=1 name="Position" checked>Student<br>
    <input type="radio" value=2 name="Position">Teacher <br>
    <input type=submit value="Submit information now"><br>
</form>

Will generate this form:

Some input types are:
button, checkbox, hidden (nothing will be displayed on the page, but your script will see hidden input values), password (like text, but prints stars or something instead of letters as text is entered), radio, reset (a button that clears the form), submit, text.

Applets

The simplest applet tag is:

<applet code="MyClass.class" width=200 height=200></applet>

The following demonstrates a more complete set of options:

<applet codebase="http://www.shodor.org/applets" archive="MyApplet.jar" 
        code="MyClass.class" width=200 height=200>
    <param name=param1 value=value1>
    <param name=param2 value=3>
    <param name=param3 value="Some text">

    <h1>Oh no!</h1>
    Your browser doesn't support Java!
</applet>

Special Characters

Character	Code
<	<
>	>
&	&
"	"
®	®
©	©
Non-Breaking Space

Colors

The two most common methods for specifying colors are with RGB Color Components or Windows VGA Color Names. Either of these methods can be used whenever a tag allows a "color" attribute.

RGB Color Components
Colors are given as a six-digit hexadecimal number preceded by a # sign. The first two digits give the red, the second two the green, and the last two the blue components. Values for each component can range from 00 to FF.
Example: <body bgcolor="#ff802d">
Using only the following hexadecimal values for each color will create colors that will not dither on a 256-color display:
00, 33, 66, 99, cc, ff

Windows VGA Color Names
You can specify some colors by simply naming the color, e.g.
<body bgcolor="blue">
The allowed color names are:
black, white, red, yellow, lime, aqua, blue, fuchsia, gray, silver, maroon, olive, green, teal, navy, purple.