surfin' HTML Quick Reference

Creating a document in HTML is a realitively simple procedure. Such a document is simply a combination of the desired text and commands. If you have worked with a macro based text processor (such as nroff), you will pick up HTML almost immediately. For examples of many of the HTML commands, just examine the source of this document!

There are several levels or versions of HTML. Version 1.0 is the core set. This version contains all the text formatting commands you are likely to need. Version 2.0 adds forms so that you can get input back from the people who are reading your document. Version 3.0 adds better support for tables.

Table of Contents

HTML 1.0 commands can be divided into 8 main categories. You do not need to use all of these categories. These commands are case-sensitive.

There is only one significant category of HTML 2.0 commands.

There is only one significant category of HTML 3.0 commands.

This reference is based upon the articles "An HTML Primer", "Tables for Your Home Page", and "Publishing HTML Forms on the Web" in the June 13, 1995, October 24, 1995, and December 5, 1995 issues, respectively, of PC Magazine.

Structural Commands

 These commands identify a valid HTML document and indicate the beginning and end of the logical sections within the document. Consider this to be the boilerplate of an HTML document. The structure is as follows: 
<HTML>
<HEAD>
<TITLE>
Window Title Text
</TITLE>
</HEAD>
<BODY>
Document content text...
</BODY>
</HTML>
Note that the "Window Title Text" will appear in browser window title bar. You will likely want to repeat the title as a header in the body of the document.

Text Flow Commands

 These handle paragraphs, line breaks, indentation, and preformatted text.

The <P> command ends a paragraph. You can also use this command to force extra vertical space. You do not need to use this if your text is followed by a header.

The <BR> command ends a line without ending a paragraph. This is how you force a newline in a formatted section of text.

The <HR> command draws a horizontal rule across the page. It has the added effect of acting like a <BR>.

The <PRE> and </PRE> commands are used to surround preformatted text which you do not want to be automatically justified. This can be used to present tabular information.

The <LISTING> and </LISTING> commands are very similar to the <PRE> and </PRE> commands. Listing denoted text is considered to be some type of source code listing. As such, a browser may display it differently from preformatted text.

The <BLOCKQUOTE> and </BLOCKQUOTE> commands are also very similar to the <PRE> and </PRE> commands. Blockquote denoted text is typically displayed with indentation and extra white space.

Heading Commands

Six levels of headings are supported. As is standard with denoted text, the commands must be used in pairs. The following code: 
<H3>This is a level 3 heading</H3>
<H4>This is a level 4 heading</H4>
<H5>This is a level 5 heading</H5>
<H6>This is a level 6 heading</H6>
produces this result:

This is a level 3 heading

This is a level 4 heading

This is a level 5 heading
This is a level 6 heading

Character Formatting Commands

 These are used to apply a physical or logical style to a stream of characters. There are two different categories of such character attributes: physical and logical. Physical attributes are similar to what you would do with a word processor. Logical attributes are preferred since they say something about the context. How a logical attribute is displayed depends on how a browser is configured.

Physical attributes:

Do NOT try to combine these attributes: not all browsers display such combinations appropriately.

Logical Attributes

One additional format is the comment form. Anything between a <! and the corresponding closing > is ignored by browsers.

List Commands

Three different kinds of formatted lists are supported: ordered lists, unordered lists, and definition lists. Sequential numbering is automatically applied for numbered lists. Unordered lists have a bullet tag per item. Definition lists provide dictionary like formatting. All of these are best illustrated by example. Note the use of <LI> in ordered and unordered lists to denote the items. In definition lists, <DD> and <DT> are used instead to denote the term and its definition, respectively.

Ordered List Example

<OL>
<LI>First item
<LI>Second item
<LI>Third item
</OL>
produces
  1. First item
  2. Second item
  3. Third item

Unordered List Example

<UL>
<LI>First item
<LI>Second item
<LI>Third item
</UL>
produces

Definition List Example

<DL>
<DT>First term
<DD>First definition
<DT>Second term
<DD>Second definition
<DT>Third term
<DD>Third definition
</DL>
produces
First term
First definition
Second term
Second definition
Third term
Third definition

Special Character Escape Sequences

 These are used to display symbols or characters that cannot be entered as a normal keyboard character or which would be confused with an HTML command. Either symbolic or numeric (ISO 8859 code) sequences are allowed. When possible, symbolic sequences should be used instead of numeric sequences.

Symbolic Sequences

Numeric Sequences

  • &#60; displays as <
  • &#62; displays as >
  • &#38; displays as &
  • &#34; displays as "
  • &#169; displays as ©
  • &#174; displays as ®

Inline Graphic Commands

 These commands reference another file which contains the actual graphics which are to be displayed as part of the document. This is done by use of an image tag of the form: 
<IMG SRC="URL" [ALIGN=TOP|MIDDLE|BOTTOM] [ALT="text"]>

The URL for the image may be relative or absolute. Typically, you would either have your images in the same directory as your HTML text or an an images subdirectory. Files using the .gif format are common and are supported by all browsers. The ALT parameter specifies text to be used in place of the image (such as for text-only browsers).

If you do not have your image separated from your text (such as via a <BR> or <P>), part of a line of text will be associated with the image. See the image at the start of this document as an example. The ALIGN parameter controls the vertical position of the text relative to the image.

Please try to keep your graphic images under 20K in size to account for those who are using lower bandwidth links.

Anchor Commands

These commands are either the starting point of a hyperlink or the target of a hyperlink. This is done by use of a tag of the form: 
<A HREF="URL#label">some text</A>

Again the URL for the image may be relative or absolute. (Ignore the #label part for now.) The text after the URL can even contain an IMAGE tag. The text can even be omitted and replaced by just an IMAGE tag.

An extension of this type of tag allows one to set up scrolling marks within the existing document. At least two tags must be set up: the one which gets you to the destination, and the one marking the destination. These take the form:

Source 
<A NAME="label">some text</A>
Destination 
<A HREF="#label">some text</A>

Finally, you can even combine the HREF and NAME forms to provide a way to move from one scrolling mark to another. This document uses this feature to provide quick access to topics from the initial introduction.

Forms

Forms are the mechanism by which you can get information back form someone who is reading your HTML document. To keep from confusing the user, it is best to limit your yourself to at most one form per HTML document. When implementing forms, you need to be aware that some of the attributes and their uses are not consistent across the different forms mechanisms. Thus, a little more care than normal is required.

All of the forms in this document are functional examples. Go ahead and try them out!

A form is created using the <FORM> and </FORM> tag pair. A single such tag pair must surround the entire set of form constructs. Since you can have any other type of HTML constructs within a form, I would recommend placing the tag pair around the entire body of your document (just within the <BODY> and </BODY> tag pair.

There are three potential modifiers to the <FORM> tag. As all of these three deal with how to get the data to the server, discussion of these will be delayed until after we see how to construct a form.

The main tag used within a form is <INPUT>. This tag has several possible attributes, some of which are seldom needed. This document presents only the most useful ones.

The most important attribute is NAME, which associates a name for the data when it is sent to the server. The next attribute used is TYPE, which which controls the type of input to the form.

Let's start with an example of a simple text block. We will learn additional tags and attributes as we go. The sequence 

What is the air speed of a laden swallow?
<INPUT TYPE="text" NAME="quest" Value="African or European?"
SIZE="40" MAXLENGTH="80">

produces:

What is the air speed of a laden swallow?

This gives us a 40 character wide text box which will automatically scroll to allow for up to 80 characters of text data. The VALUE attribute is used to set a default value for an input item. Using a TYPE of password in place of text simply uses '*' to echo the characters to the user.

The <TEXTAREA> and </TEXTAREA> tag pair is used to create a multiple line text entry area. Unlike the <INPUT> tag, the default value text is simply placed between the tag pair (the VALUE attribute is meaningless for this tag pair). The sequence 

Enter your mailing address:
<TEXTAREA NAME="address"
COLS="40" ROWS="8">
1234 Whereweisat Street
Somewhere, CA 9540i
</TEXTAREA>

produces

Enter your mailing address:

The next two types of forms, radio buttons and checkboxes, are very similar. The main difference is that only one of a set of radio buttons can be selected, whereas any number of a set of checkboxes can be selected. You can use the normal text flow controls to position these forms in a column or let them wrap. Let's start with a radio button example. Note that the NAME attribute is the same for all of the <INPUT> items for a particular set of radio buttons. This lets the browser handle the mutual exclusion. The sequence 

What would you like for lunch?
<BR>
<INPUT TYPE="radio" NAME="lunch" VALUE="hamburger">Hamburger<BR>
<INPUT TYPE="radio" NAME="lunch" VALUE="pizza" CHECKED>Pizza<BR>
<INPUT TYPE="radio" NAME="lunch" VALUE="cafeteria">Breaded leather<BR>

produces

What would you like for lunch?
Hamburger
Pizza
Breaded leather

Note that the text displayed next to the buttons is not a part of the <INPUT> tag. Also note the use of the CHECKED attribute to select a default value (only one per set, please).

Checkboxes are created in a similar fashion. The main difference is the TYPE and the fact that each item must have a different NAME. The sequence 

What would you like on your pizza?
<BR>
<INPUT TYPE="checkbox" NAME="pepperoni" CHECKED>Pepperoni<BR>
<INPUT TYPE="checkbox" NAME="mushroom" CHECKED>Mushroom<BR>
<INPUT TYPE="checkbox" NAME="onion" CHECKED>Onion<BR>
<INPUT TYPE="checkbox" NAME="armadillo">Armadillo<BR>
<INPUT TYPE="checkbox" NAME="habaneros" CHECKED>Habaneros<BR>

produces

What would you like on your pizza?
Pepperoni
Mushroom
Onion
Armadillo
Habaneros

Again, note the use of the CHECKED attribute to select a default values. Unlike radio buttons, any number of checkboxes can be initialized to CHECKED.

Menus and pick lists are another pair of similar input mechanisms. The <SELECT> and </SELECT> tag pair is used to build these items. The <OPTION> tag is used for each selection option, and the SELECTED attribute is used for the initial choice (They should have just reused CHECKED for this or else used SELECTED in place of CHECKED. But then, they didn't ask me.) The SIZE attribute determines how many choices are visible at once (the default size is 1). If there are more than SIZE choices, a drop-down or scrolling box (as appropriate) will automatically be provided.

The MULTIPLE attribute can be used to allow multiple selections from a list, but in such a case a checkbox is probably a more appropriate (and easier to process) input mechanism. Once again, an example illustrates this best. The sequence 

What is your favorite color?
<SELECT NAME="favorite_color">
<OPTION>Green
<OPTION SELECTED>Blue
<OPTION>Red
<OPTION>Yellow
<OPTION>Vanilla
</SELECT>

produces

What is your favorite color?

To display this same set of items as a list box, we need only add the SIZE attribute. The following is the same example with the SELECT line changed to 

<SELECT NAME="favorite_color" SIZE="3">

Again, what is your favorite color?

The last two <INPUT> tag types, RESET and SUBMIT, are practically required for any form. These types provide a mechanism to reset the form to the default values and to finally submit a completed form. The VALUE attribute is used to label the appropriate button. (Please don't actually "submit" this demonstration form!) The sequences 

<INPUT TYPE="submit" VALUE="Ship it!">
<INPUT TYPE="reset" VALUE="Start Over">

produce

When the SUBMIT button is selected, all of the form data is sent as NAME=DATA pairs to the server. The way in which this is done is controlled by the METHOD attribute of the <FORM> tag.

Warning! Do not use the select button if you do not have the <FORM> submission METHOD set up properly. You can crash your browser!

Now it is time to discuss FORM modifiers. ACTION is URL of program on server that will process the form data. METHOD is GET or POST and defines how data is sent to server. ENCTYPE is for encryption (and will not be discussed here). If the WWW server at your site supports mailto as a forms method, you can get the information mailed to you. Otherwise, you will need to have a CGI (Common Gateway Interface) program to receive and process the data. CGI is far too complex a topic for this document.

Tables

 Tables may occur only in the body of the document. The <TABLE> and </TABLE> commands are used to surround the tabular data. Tables can be nested within other tables. You can use <TABLE BORDER> in place of </TABLE> to have borders around the cells of the table.

The <CAPTION> and </CAPTION> tags can be used to add a caption to a table. Place this sequence just after the opening <TABLE> tag. You can add an ALIGN=TOP|BOTTOM parameter within the <CAPTION> tag to control the placement of the caption.

Within a <TABLE> tag pair, each row is delimited by <TR> and </TR> tags and each cell within a row is delimited by <TD> and </TD> tags. Headings are similar to data cells, except the tags are <TH> and </TH>. An example is in order. The sequence 

<TABLE BORDER>
<CAPTION ALIGN=TOP>Example Table</CAPTION>
<TR>
<TH>Column Heading 1</TH>
<TH>Column Heading 2</TH>
</TR>
<TR>
<TD>1st cell text</TD>
<TD>2nd cell text</TD>
</TR>
</TABLE>
produces
Example Table
Column Heading 1 Column Heading 2
1st cell text 2nd cell text

The Text Flow, Heading, and Character Formatting commands can all be used within a table cell. Even Inline Graphics and Anchor commands can be used within a cell.

To provide additional control over the format of the text within a cell, three additional tag modifiers are available. Each of these modifiers may be used with the <TH>, <TR>, and <TD> tags. If one of these modifiers is used in a <TR> tag, the modification will be applied to all cells in that row. A modifier in a <TD> tag will override a modifier in an enclosing <TR> tag.

The first of these modifiers is NOWRAP. This modifier turns off automatic text reflow within a cell. As this limits a browser's ability to adjust the display of the table, use of this modified is discouraged.

The other modifiers are ALIGN=LEFT|CENTER|RIGHT and VALIGN=TOP|MIDDLE|BOTTOM|BASELINE. These modifiers control the horizontal and vertical placement of text, respectively. The only tricky case here is the case of VALIGN=baseline. This modifier, which makes sense only in a <TR> tag, causes all of the text in a row's cells to be oriented to a single baseline. You likely won't need to use this particular form.

Finally, there is a way to allow a cell to span multiple rows and/or columns. This is done by adding modifiers to a <TD> tag. The full form is <TD [ROWSPAN="x"] [COLSPAN="y"]>, where x and y indicate the number of rows and columns, respectively, that the cell must span. An omitted modifier has a default spanning value of 1. Be careful if you use spanning: an incorrect value can cause unpredictable results.

With all of this additional information, it's time for another table example. The sequence 

<TABLE BORDER>
<CAPTION>Example Table with Row and Column Spanning</CAPTION>
<TR><TH>Column 1</TH><TH>Column 2</TH><TH>Column 3</TH></TR>
<TR ALIGN=LEFT VALIGN=TOP>
<TD COLSPAN="2">column 1, row 2:<BR>spanning 2 columns</TD>
<TD>column 3, row 2</TD>
</TR>
<TR ALIGN=LEFT>
<TD>column 1, row 3</TD>
<TD>column 2, row 3</TD>
<TD ROWSPAN="2">column 3, row 3:<BR>spanning 2 rows</TD>
</TR>
<TR ALIGN=LEFT>
<TD>column 1, row 4</TD>
<TD>column 2, row 4</TD>
</TR>
</TABLE>
produces
Example Table with Row and Column Spanning
Column 1Column 2Column 3
column 1, row 2:
spanning 2 columns		 column 3, row 2
column 1, row 3 column 2, row 3 column 3, row 3:
spanning 2 rows
column 1, row 4 column 2, row 4

Closing Comments

You may have noticed that I have omitted image maps, forms, mail-to, font and cell size and spacing control, and a whole slew of other fancy features. Simply put, you likely won't really need these for most documents that you will want to prepare. Furthermore, not all browsers handle all of these features, some of these features are not yet standard (I don't give a damn what Netscrape does), and some servers even require different implementations.

What I have tried to present here is a minimal set that will work with all browsers and servers. I hope you find this to be a useful reference. For more information, I recommend "Setting Up a Home Page on the World-Wide Web" from UniForum.

Last Modified: Sun Apr 21 19:52:39 PST 1996
tar@sr.hp.com