Original comes from http://www.pcnet.com/~rhswain/sampler.html, but it has been modified by me (Nicolas Dade) because I didn't agree with everything Rex had to say, because some of his HTML code was just plain wrong, and because it was originally based on HTML 3.0, and that has been replaced by 3.2, so I removed the 3.0-only entries that I found, and added some 3.2 ones that I felt were important.


Rex Swain's HTML Sampler

See how your browser renders various HTML elements
Last updated (by Rex) 1 July 1996

Contents

HEAD Elements

The HEAD contains general information about the document. None of the elements authorized to exist in the contents of the HEAD are displayed; the displayed material is found within the BODY.

TITLE

<TITLE>...</TITLE>

The TITLE is not part of the document text. Often the title is used by a browser to label the display window. Some Web search engines only search the title of Web pages. Therefore the text of the TITLE should be kept short but sufficient to identify the document.

BASE

<BASE HREF="..." TARGET="...">

The BASE element provides the absolute URL base to be used for any relative URL links in this document. It must be a complete URL, including the file name (for #abc style references), and is usually the original URL of this document. If this file is moved, having the BASE set to the original URL eliminates the need to also move all the documents which are identified by relative URL links in this document. This is especially useful for files sent by email, or copied to many places (for example, your resume).

Netscape 2.0 defines the TARGET attribute to define a default named target window for every link in a document that does not have an explicit TARGET attribute.

META

<META HTTP-EQUIV="..." NAME="..." CONTENT="...">

The META element is used within the HEAD element to embed document meta-information not defined by other HTML elements. Such information may be extracted by servers/browsers. The HTTP-EQUIV attribute binds the element to an HTTP response header. If not present, the NAME attribute should be used to identify this meta-information and it should not be used within an HTTP response header. If the NAME attribute is not present, the name can be assumed equal to the value of HTTP-EQUIV. The CONTENT attribute defines the meta-information content to be associated with the given name and/or HTTP response header.

Netscape 1.1 has added a automatic refresh capability using the META element by setting the HTTP-EQUIV attribute to "REFRESH", the CONTENT attribute to a number of seconds, a semicolon, and the URL attribute to the file to load which defaults to reloading the same file. For example,

<META HTTP-EQUIV="refresh" CONTENT="30;URL=http://www.pcnet.com/~rhswain">

Another http header that is useful is the expiration time. This alows you to prevent the viewer's browser from caching the page too long.

<META HTTP-EQUIV="expires" CONTEXT="Tue, 20 Aug 1999 20:00:00 GMT">

Many Web search engines look for the following META elements:

<META NAME="description" CONTENT="Rex Swain's HTML Sampler, modified by Nicolas Dade">
(this text will be shown to the user, along with the <TITLE> of the page in the search's results)
<META NAME="keywords" CONTENT="html, help, ...">
(a comma delimited list of keywords)

And you can tell the world who made the page with

<META NAME="Author" CONTENT="Nicolas S. Dade">

Note that if you want to include your email address, the better way is to use LINK.

LINK

<LINK HREF="..." REL="..." TITLE="...">
<LINK HREF="..." REV="..." TITLE="...">

The LINK element is used within the HEAD element to embed links related to the document being viewed. There are two kinds of links: forward links (from this document to the linked entity), and reverse links (from the linked entity to this document). Forward links use REL to denote the relationship of the linked entity to the present document. Reverse links use REV. Both denote the same set of relationships. The TITLE is optional, and discribes a title for the linked entity.

Some of the standard relationships are
<LINK REV=made HREF="mailto:me@provider.net">a link to the author of the page (the author's homepage is another possibility here)
<LINK REL=contents HREF="toc.html">a link to a table of contents
<LINK REL=index HREF="indexpage.html">a link to an index page
<LINK REL=glossary HREF="glossary.html">a link to a glossary
<LINK REL=help HREF="help.html">a link to help information
<LINK REL=search HREF="search.html">a link to a search form
<LINK REL=top HREF="titlepage.html">a link to the top of the set of pages
<LINK REL=next HREF="page4.html">a link to the next page in a set of pages
<LINK REL=previous HREF="page2.html">a link to the previous page in a set of pages

Note that not many browsers make use of the information embedded in the LINK tag, unfortunately.

Comments

HTML comments are coded as:

<!-- comment -->

Here comes one now (you should not see "This Is A Comment" below):

Headings

The proper use of headings is for delimiting the head of sections of a page. The level N header denotes the head of a subsection of the section headed by a level N-1 header. This is why headings are placed on a line of their own, with blank space before and after them. Headings are not a way to get a bigger font; use <FONT SIZE=nnn> for that; it's much more controlable. When heading are properly used they form an outline of the page, and some browsers will show this outline in a little window, allowing the the viewer to jump about the page to the headings. This is true of many browsers for the blind.

<H1>...</H1>Normal

Heading 1

Normal
<H2>...</H2>Normal

Heading 2

Normal
<H3>...</H3>Normal

Heading 3

Normal
<H4>...</H4>Normal

Heading 4

Normal
<H5>...</H5>Normal
Heading 5
Normal
<H6>...</H6>Normal
Heading 6
Normal

Fonts

Font Sizes

<FONT SIZE="+7">...</FONT>Normal Plus 7 Normal
<FONT SIZE="+6">...</FONT>Normal Plus 6 Normal
<FONT SIZE="+5">...</FONT>Normal Plus 5 Normal
<FONT SIZE="+4">...</FONT>Normal Plus 4 Normal
<FONT SIZE="+3">...</FONT>Normal Plus 3 Normal
<FONT SIZE="+2">...</FONT>Normal Plus 2 Normal
<FONT SIZE="+1">...</FONT>Normal Plus 1 Normal
<FONT SIZE="+0">...</FONT>Normal Plus 0 Normal
<FONT SIZE="-0">...</FONT>Normal Minus 0 Normal
<FONT SIZE="-1">...</FONT>Normal Minus 1 Normal
<FONT SIZE="-2">...</FONT>Normal Minus 2 Normal
<FONT SIZE="-3">...</FONT>Normal Minus 3 Normal
<FONT SIZE="-4">...</FONT>Normal Minus 4 Normal
<FONT SIZE="-5">...</FONT>Normal Minus 5 Normal
<FONT SIZE="-6">...</FONT>Normal Minus 6 Normal
<FONT SIZE="-7">...</FONT>Normal Minus 7 Normal

Note that the font size can also be absolute-- <FONT SIZE=5> --but this is a very bad idea because it overrides the viewer's prefered font size. If the viewer wants to view the page with a large font, they probably have a reason (ie. they are 75 years old and can't read your 8 point type). When you use absolute sizes you override the viewer's preferences, and that gives the viewer an unpleasant experience.

Base Font Size

The BASEFONT element may be used to change the default font size from this point on. For example:

<BASEFONT SIZE="+2">

Again, just like with temporary font size changes, it is a very bad idea to use absolute sizes.

Font Faces

The FACE element may be used to change the default font face. It contains a comma delimited list of font face names, ordered from most prefered to least prefered. The browser scans the list, looking for each font in turn. If no local font matches, the default font is used. Also some browsers contain some smarts concerning which fonts resemble each other (ie Helvetica and Arial are similar). Be sure that your page still is intellegible even if the font face attributes aren't handled by the browser.

Here are some commonly used fonts:
<FONT FACEE="Helvetica">...</FONT>Normal Helvetica Normal
<FONT FACE="Arial">...</FONT>Normal Arial Normal
<FONT FACE="Courier">...</FONT>Normal Courier Normal
<FONT FACE="Roman">...</FONT>Normal Roman Normal
<FONT FACE="Times">...</FONT>Normal Times Normal
<FONT FACE="Script">...</FONT>Normal Script Normal

Explicit Font Styles

<B>...</B>Normal Bold style
<I>...</I>Normal Italic style
<U>...</U>Normal Underlined style

Logical Font Styles

Logical styles are used to denote what the enclosed text is, not how it should be rendered. This is one of the beauties of HTML: you don't have to say "I want this in italics", you can say "This is a citation," and let the viewer's browser render that as it knows best to render citations (ie small font, different color, italics, etc...). Some browsers allow the user to control how a logical style is rendered.

The flip-side of this is that you should not use logical styles in order to achieve a controllable style (ie. italics), because you don't know how the viewer's browser is rendering a logical style. If you want italics, use the explicit style <I>. That will always be rendered as italics.
<CAPTION>...</CAPTION> style
<ABBREV>...</ABBREV>Normal Abbreviation style Normal
<ACRONYM>...</ACRONYM>Normal Acronym style Normal
<ADDRESS>...</ADDRESS>Normal
Address style
Normal
<AU>...</AU>Normal Author style Normal
<BIG>...</BIG>Normal Big style Normal
<CITE>...</CITE>Normal Citation style Normal
<CODE>...</CODE>Normal Code style Normal
<DEL>...</DEL>Normal Deleted style Normal
<DFN>...</DFN>Normal Defining Instance style Normal
<EM>...</EM>Normal Emphasis style Normal
<INS>...</INS>Normal Inserted style Normal
<KBD>...</KBD>Normal Keyboard style Normal
<LISTING>...</LISTING>Normal Listing style Normal
<PERSON>...</PERSON>Normal Person style Normal
<PRE>...</PRE>Normal
Preformatted style
Normal
<Q>...</Q>Normal Quotation style Normal
<S>...</S>Normal Strikethrough style Normal
<SAMP>...</SAMP>Normal Sample style Normal
<SMALL>...</SMALL>Normal Small style Normal
<STRIKE>...</STRIKE>Normal Strikethrough style Normal
<STRONG>...</STRONG>Normal Strong style Normal
<SUB>...</SUB>Normal Subscripted style Normal
<SUP>...</SUP>Normal Superscripted style Normal
<TT>...</TT>Normal TeleType style Normal
<VAR>...</VAR>Normal Variable style Normal

Lists

Note: Netscape 3.0 and lower has bugs in its HTML parser that effect the parsing of nested lists. The bug occurs when the list items are implicitly terminated (no </LI>). Therefore, if you are dealing with nested lists it is best to explicitly terminate each item in the list with a </LI>.

Unordered Lists

Unordered List <UL>
<LI>Item 1
<LI>Item 2
<LI>Item 3
</UL>
  • Item 1
  • Item 2
  • Item 3
Unordered List
(multi-level)
<UL>
<LI>Level 1, Item 1
<UL>
<LI>Level 2, Item 1
<UL>
<LI>Level 3, Item 1</LI>
<LI>Level 3, Item 2</LI>
</UL></LI>
<LI>Level 2, Item 2</LI>
</UL></LI>
</UL>
  • Level 1, Item 1
    • Level 2, Item 1
      • Level 3, Item 1
      • Level 3, Item 2
    • Level 2, Item 2
Unordered List
(with option)
<UL WRAP=horiz>
...
</UL>
  • Item 1
  • Item 2
  • Item 3
Unordered List
(with List Heading)
<UL>
<LH>Heading</LH>
<LI>Item 1
<LI>Item 2
</UL>
    Heading
  • Item 1
  • Item 2
Unordered List
(with bullet style option)
<UL TYPE=circle>
...
</UL>
  • Item 1
  • Item 2
Unordered List
(with bullet style option)
<UL TYPE=square>
...
</UL>
  • Item 1
  • Item 2
Unordered List
(with bullet style option)
<UL TYPE=disc>
...
</UL>
  • Item 1
  • Item 2
Unordered List
(with bullet style options)
<UL>
<LI TYPE=circle>...
<LI TYPE=square>...
<LI TYPE=disc>...
</UL>
  • Item 1
  • Item 2
  • Item 3
Directory List
(like an unordered list)
Items should be less
than 20 characters long
<DIR>
<LI>Item 1
<LI>Item 2
<LI>Item 3
</DIR>
  • Item 1
  • Item 2
  • Item 3
  • Menu List
    (like an unordered list)
    Presents an interactive list
    (?)
    <MENU>
    <LI>Item 1
    <LI>Item 2
    <LI>Item 3
    </MENU>
  • Item 1
  • Item 2
  • Item 3
  • Ordered Lists

    Ordered List <OL>
    <LI>Item 1
    <LI>Item 2
    <LI>Item 3
    </OL>
    1. Item 1
    2. Item 2
    3. Item 3
    Ordered List
    (multi-level)
    <OL>
    <LI>Level 1, Item 1
    <OL>
    <LI>Level 2, Item 1
    <OL>
    <LI>Level 3, Item 1</LI>
    <LI>Level 3, Item 2</LI>
    </OL></LI>
    <LI>Level 2, Item 2</LI>
    </OL></LI>
    </OL>
    1. Level 1, Item 1
      1. Level 2, Item 1
        1. Level 3, Item 1
        2. Level 3, Item 2
      2. Level 2, Item 2
    Ordered List
    (with option)
    <OL TYPE="i">
    ...
    </OL>
    1. Item 1
    2. Item 2
    3. Item 3
    4. Item 4
    5. Item 5
    Ordered List
    (with options)
    <OL TYPE="I" START=6>
    ...
    </OL>
    1. Item 1
    2. Item 2
    3. Item 3
    4. Item 4
    5. Item 5
    Ordered List
    (with option)
    <OL TYPE="a">
    ...
    </OL>
    1. Item 1
    2. Item 2
    3. Item 3
    4. Item 4
    5. Item 5
    Ordered List
    (with option)
    <OL TYPE="A">
    ...
    </OL>
    1. Item 1
    2. Item 2
    3. Item 3
    4. Item 4
    5. Item 5

    Definition Lists

    Definition List <DL>
    <DT>Term 1
    <DD>Defn 1
    <DT>Term 2
    <DD>Defn 2
    ...
    </DL>
    This is the <DT> text.
    This is the <DD> text.
    Here's a second hunk of <DT> text repeated three times. Here's a second hunk of <DT> text repeated three times. Here's a second hunk of <DT> text repeated three times.
    Here's a second hunk of <DD> text repeated three times. Here's a second hunk of <DD> text repeated three times. Here's a second hunk of <DD> text repeated three times.
    DT
    DD following very short DT
    DT
    DD following very short DT

    Other Lists

    Directory List
    (like an unordered list)
    Items should be less
    than 20 characters long
    <DIR>
    <LI>Item 1
    <LI>Item 2
    <LI>Item 3
    </DIR>
  • Item 1
  • Item 2
  • Item 3
  • Menu List
    (like an unordered list)
    Presents an interactive list
    (?)
    <MENU>
    <LI>Item 1
    <LI>Item 2
    <LI>Item 3
    </MENU>
  • Item 1
  • Item 2
  • Item 3
  • Text Flow

    Paragraph vs. Break

    Paragraph...
    <P>
    ...
    This is some text repeated a bunch of times. This is some text repeated a bunch of times. Note that a closing </P> is optional in most browsers, and is not used here. Here comes a <P> ...

    This is the beginning of another paragraph. Note that <P> inserts a blank line. This is some text repeated a bunch of times. This is some text repeated a bunch of times. This is some text repeated a bunch of times.

    Paragraph
    (with closing tag)
    <P>
    ...
    </P>

    Netscape adds a blank line after a paragraph which ends with a </P>. This is some text repeated a bunch of times. This is some text repeated a bunch of times. Here comes a </P> and then another <P> ...

    This is the beginning of another paragraph. This is some text repeated a bunch of times. This is some text repeated a bunch of times. Here comes a </P>.

    Break...
    <BR>
    ...
    This is some text repeated a bunch of times. This is some text repeated a bunch of times. Here comes a <BR> ...
    Note that <BR> does NOT insert a blank line. This is some text repeated a bunch of times. This is some text repeated a bunch of times.

    No Break

    Normal ... This is some text repeated three times. This is some text repeated three times. This is some text repeated three times.
    No Break <NOBR>
    ...
    </NOBR>
    This is some text repeated three times. This is some text repeated three times. This is some text repeated three times.

    If necessary, reduce the width of your browser's window. Notice that NOBR prevents the text from breaking (word-wrapping).

    Word Break

    Use the <WBR> tag to insert an optional word break in the middle of a very long "word".

    In the examples below, there are 52 letters (A through Z repeated twice). In the first case, there are no spaces; in the second case, there is a <WBR> word break between the first Z and second A.

    ABCDEFGHIJKLMNOPQRSTUVWXYZABCDEFGHIJKLMNOPQRSTUVWXYZ

    ABCDEFGHIJKLMNOPQRSTUVWXYZABCDEFGHIJKLMNOPQRSTUVWXYZ

    If the browser window is wide enough to display the entire word, it appears without any space or break. If the window is not wide enough, the <WBR> tag tells the browser where it may break the word. (You may have to reduce the width of your browser's window to see the difference.)

    This is particularly useful for citing very long URLs.

    Paragraph Alignment

    Paragraph
    (with alignment option)
    <P ALIGN=left>
    ...

    This is some text repeated a bunch of times. This is some text repeated a bunch of times. This is some text repeated a bunch of times. This is some text repeated a bunch of times. This is some text repeated a bunch of times.

    Paragraph
    (with alignment option)
    <P ALIGN=right>
    ...

    This is some text repeated a bunch of times. This is some text repeated a bunch of times. This is some text repeated a bunch of times. This is some text repeated a bunch of times. This is some text repeated a bunch of times.

    Paragraph
    (with alignment option)
    <P ALIGN=center>
    ...

    This is some text repeated a bunch of times. This is some text repeated a bunch of times. This is some text repeated a bunch of times. This is some text repeated a bunch of times. This is some text repeated a bunch of times.

    Centering

    Note: <CENTER> has been superceded in HTML 3.2 by the more general <DIV ALIGN=center>. However <CENTER> has been grandfathered in because it's use is so widespread.

    Center<CENTER>
    ...
    </CENTER>
    Note that <CENTER> can center nearly anything: headings, text, tables, etc. This is some text repeated a bunch of times. This is some text. Here comes a <H4> heading...

    A Heading

    This is some more text repeated a bunch of times. This is some text. This is some text repeated a bunch of times.

    Division Alignment

    Like <CENTER>, <DIV> may be used to align blocks of other elements.

    This is the beginning of a <DIV ALIGN=left> block

    This is an H4 heading

    An unordered list:
    • One
    • Two
    • Three, etc.
    This is the end of the division; here comes </DIV>

    This is the beginning of a <DIV ALIGN=center> block

    This is an H4 heading

    An unordered list:
    • One
    • Two
    • Three, etc.
    This is the end of the division; here comes </DIV>

    This is the beginning of a <DIV ALIGN=right> block

    This is an H4 heading

    An unordered list:
    • One
    • Two
    • Three, etc.
    This is the end of the division; here comes </DIV>

    Block Quotes

    Block Quote<BLOCKQUOTE>
    ...
    </BLOCKQUOTE>
    Text should be both left- and right-indented. Some browsers render the text in italics. Now there is a </BLOCKQUOTE> immediately followed by a new <BLOCKQUOTE> and then some more text; there is NOT a <P>.
    This is some text repeated a bunch of times. This is some text repeated a bunch of times. This is some text repeated a bunch of times. This is some text repeated a bunch of times.

    Indenting Techniques

    <BLOCKQUOTE> and hacks involving <TABLE> are the only HTML-compliant ways of indenting that I know of.

    <DL>, <MENU>, <UL> & <OL> and other tags that indent as a side effect of how they present data should not be used to indent. The reason is that since these tags indent as a side-effect, they can't be relied on to always indent (you can easily image a <UL> rendering that doesn't indent). In addition, achieving just an indentation of some sort with these tags, without showing their other features (for example, the bullets on a list) means using non-HTML complient code. For example, if you use <UL> to indent but you don't want the bullet to show, you wind up placing the indented text outside any <LI>'s. The fact that some browsers render this text is a side effect of their parsers: the official spec is that anything inside a <UL> that isn't inside <LI>'s can be ignored.

    Block Quote <BLOCKQUOTE>
    ...
    </BLOCKQUOTE>
    Text should be both left- and right-indented. Some browsers render the text in italics. This is some text repeated a bunch of times. This is some text repeated a bunch of times.
    Table with empty first column <TABLE><TR><TD WIDTH=75></TD><TD>
    ...
    </TD></TR></TABLE>
    Text should be left-indented by 75 pixels. This is some text repeated a bunch of times. This is some text repeated a bunch of times.

    Tables

    Table Elements

    This is a <CAPTION> Caption
    This is a <TH> Table Heading
    This is <TD> Table Data
    This is <TD> Table Data that is long to expand the table horizontally.
    This is <TD> Table Data

    The table above is coded as:

    <TABLE BORDER=1>
    <CAPTION>This is ...</CAPTION>
    <TH>This is ...
    <TR><TD>This is ...
    <TR><TD>This is ...
    <TR><TD>This is ...
    </TABLE>

    Caption Alignment

    This is a <CAPTION> Caption
    This is <TD> Table Data that is long to expand the table horizontally.

    This is a <CAPTION ALIGN=bottom> Caption
    This is <TD> Table Data that is long to expand the table horizontally.

    Table Borders

    <TABLE>
    Thisis
    atable blah blah blah blah blah blah blah blah

    <TABLE BORDER>
    Thisis
    atable blah blah blah blah blah blah blah blah

    <TABLE BORDER=0>
    Thisis
    atable blah blah blah blah blah blah blah blah

    <TABLE BORDER=1>
    Thisis
    atable blah blah blah blah blah blah blah blah

    <TABLE BORDER=2>
    Thisis
    atable blah blah blah blah blah blah blah blah

    <TABLE BORDER=4>
    Thisis
    atable blah blah blah blah blah blah blah blah

    <TABLE BORDER=8>
    Thisis
    atable blah blah blah blah blah blah blah blah

    <TABLE BORDER=16>
    Thisis
    atable blah blah blah blah blah blah blah blah

    Table Width & Height

    <TABLE BORDER=1>
    Thisis
    atable blah blah blah blah blah blah

    <TABLE BORDER=1 WIDTH="50%">
    Thisis
    atable blah blah blah blah blah blah

    <TABLE BORDER=1 WIDTH="90%">
    Thisis
    atable blah blah blah blah blah blah

    <TABLE BORDER=1 WIDTH=200>
    Thisis
    atable blah blah blah blah blah blah

    <TABLE BORDER=1 HEIGHT=200>
    Thisis
    atable blah blah blah blah blah blah

    <TABLE BORDER=1 HEIGHT="25%">
    Thisis
    atable blah blah blah blah blah blah

    Table Alignment

    <TABLE BORDER=1>
    Thisis
    atable blah blah blah blah blah blah blah blah
    This text follows the </TABLE> tag. This text should not flow around the table because the table is neither left- or right-ALIGNed. This text should not flow around the table because the table is neither left- or right-ALIGNed.

    <TABLE BORDER=1 ALIGN=right>
    Thisis
    atable blah blah blah blah blah blah blah blah
    This text follows the </TABLE> tag. This text should flow around the right-aligned table. This text should flow around the right-aligned table. This text should flow around the right-aligned table. This text should flow around the right-aligned table. This text should flow around the right-aligned table. This text should flow around the right-aligned table. This text should flow around the right-aligned table. This text should flow around the right-aligned table.

    <TABLE BORDER=1 ALIGN=left>
    Thisis
    atable blah blah blah blah blah blah blah blah
    This text follows the </TABLE> tag. This text should flow around the left-aligned table. This text should flow around the left-aligned table. This text should flow around the left-aligned table. This text should flow around the left-aligned table. This text should flow around the left-aligned table. This text should flow around the left-aligned table. This text should flow around the left-aligned table. This text should flow around the left-aligned table.

    <DIV ALIGN=center><TABLE BORDER=1>... <TD><DIV ALIGN=left>... </DIV>... </TABLE></DIV>
    This
    is
    a
    table blah blah blah blah blah blah blah blah
    This text follows the </DIV> tag. The table is centered by placing it in a division, and centering that. This must be done because before version 4.0 Netscape didn't allow ALIGN=center for tables. Then each TD contains a division that resets the alignment to be left-bound. This must be done because browsers that understand DIV but not TABLE will wind up centering everything in the table if you don't.

    Horizontal Cell Alignment

    This is a <TH> Table Heading
    This is a <TH ALIGN=left> Table Heading
    This is a <TH ALIGN=right> Table Heading
    This is <TD> Table Data that is long to expand the table horizontally.
    This is <TD> Table Data
    This is <TD ALIGN=right> Table Data
    This is <TD ALIGN=center> Table Data

    Vertical Cell Alignment

    Some text.
    Some text.
    <TD VALIGN=top> <TD VALIGN=baseline>
    This is some text repeated a bunch of times. This is some text repeated a bunch of times. This is some text repeated a bunch of times. This is some text repeated a bunch of times. This is some text repeated a bunch of times. <TD VALIGN=middle> <TD VALIGN=bottom>

    Cell Spacing & Padding

    <TABLE BORDER=1>
    Thisis
    atable blah blah blah blah blah blah blah blah

    <TABLE BORDER=1 CELLSPACING=16>
    Thisis
    atable blah blah blah blah blah blah blah blah

    <TABLE BORDER=1 CELLPADDING=16>
    Thisis
    atable blah blah blah blah blah blah blah blah

    <TABLE BORDER=1 CELLSPACING=16 CELLPADDING=16>
    Thisis
    atable blah blah blah blah blah blah blah blah

    Column Width

    Percentages
    <TD WIDTH="75%"> <TD WIDTH="25%">

    Pixels
    <TD WIDTH=200> <TD WIDTH=50>

    NOWRAP

    Without NOWRAP
    <TD> below <TD> below
    blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah

    With NOWRAP
    <TD> below <TD NOWRAP> below
    blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah

    Row/Column Span

    This is a <CAPTION> Caption
    This is a <TH COLSPAN=3> Table Heading
    This is <TD ROWSPAN=2> Table Data This is <TD> Table Data This is <TD> Table Data
    This is <TD COLSPAN=2> Table Data

    The table above is coded as:

    <TABLE BORDER=1>
    <CAPTION>This is ...</CAPTION>
    <TH COLSPAN=3>This is ...
    <TR>
    <TD ROWSPAN=2>This is ...
    <TD>This is ...
    <TD>This is ...
    <TR>
    <TD COLSPAN=2>This is ...
    </TABLE>

    Horizontal Rules

    <HR>
    <HR WIDTH="75%">
    <HR WIDTH="50%" ALIGN=left>
    <HR WIDTH="50%" ALIGN=right>
    <HR SIZE=1>
    <HR SIZE=1 NOSHADE>
    <HR SIZE=2>
    <HR SIZE=2 NOSHADE>
    <HR SIZE=4>
    <HR SIZE=4 NOSHADE>
    <HR SIZE=8>
    <HR SIZE=8 NOSHADE>
    <HR SIZE=16>
    <HR SIZE=16 NOSHADE>

    Form Elements

    Here is an <INPUT TYPE="text" SIZE=30> element:

    Enter your name:

    Here is an <INPUT TYPE="text" SIZE=20 MAXLENGTH=10> element:

    Enter something up to 10 characters long:

    Here is an <INPUT TYPE="password" SIZE=8> element:

    Guess the secret word:
    Any characters typed here appear as asterisks

    This is a <TEXTAREA ROWS=5 COLS=40> element:

    Your comments, please:

    This is a <TEXTAREA ROWS=2 COLS=25 WRAP=soft> element:

    WRAP=soft adds word-wrap handling:

    Other options are WRAP=physical and WRAP=virtual, but it's not clear to me how these differ from WRAP=soft. Netscape 2.02 treats all three the same: if the user does not press Enter, the text is returned with spaces between words (even if the text was automatically wrapped); if the user does press Enter, a CR/LF pair (%0D%0A) is returned embedded in the text.

    This is a <SELECT> element (with 5 <OPTION> elements):

    Where are you?

    This is a <SELECT SIZE=5> element (with 5 <OPTION> elements, one of which is an <OPTION SELECTED> element):

    What operating system are you using right now?
    You may select only one item

    This is a <SELECT SIZE=3 MULTIPLE> element (with 5 <OPTION> elements, two of which are <OPTION SELECTED> elements):

    What operating systems have you ever used?
    You may select several items

    Here are two <INPUT TYPE="radio"> elements:

    What gender are you?
    Male
    Female

    Here are three <INPUT TYPE="checkbox"> elements:

    Which of the following do you own?
    TV
    VCR
    CD Player

    Here is an <INPUT TYPE="hidden"> element (you should not see anything):

    Here is an <INPUT TYPE="image"> element:

    I believe this acts like a SUBMIT button.

    Here is an <INPUT TYPE="reset"> and an <INPUT TYPE="submit"> element:

    Colors

    Text Colors

    Font colors may be specified as follows:

    <FONT COLOR="built-in color name">
    <FONT COLOR="#rrggbb">

    Colors are specified like in X-Windows. Either a common color is named (ie. "green") or explicit 8-bit red, green and blue values are given in hexadecimal (ie. "#00ee00").

    The red-green-blue specification is a little difficult for the non-techy, so charts have been developed to help. Here's an example of several common colors, including their names when they have one.

    #000000: 000000 Sample (Black)
    #808080: 808080 Sample (Grey)
    #C0C0C0: C0C0C0 Sample (Silver)
    #000080: 000080 Sample (Navy)
    #0000FF: 0000FF Sample (Blue)
    #008000: 008000 Sample
    #008080: 008080 Sample (Teal)
    #0080FF: 0080FF Sample
    #00FF00: 00FF00 Sample (Green)
    #00FF80: 00FF80 Sample
    #00FFFF: 00FFFF Sample (Aqua)
    #800000: 800000 Sample (Maroon)
    #800080: 800080 Sample (Purple)
    #8000FF: 8000FF Sample
    #808000: 808000 Sample (Olive)
    #808080: 808080 Sample
    #8080FF: 8080FF Sample
    #80FF00: 80FF00 Sample
    #80FF80: 80FF80 Sample
    #80FFFF: 80FFFF Sample
    #FF0000: FF0000 Sample (Red)
    #FF0080: FF0080 Sample
    #FF00FF: FF00FF Sample (Fuchsia)
    #FF8000: FF8000 Sample
    #FF8080: FF8080 Sample
    #FF80FF: FF80FF Sample
    #FFFF00: FFFF00 Sample (Yellow)
    #FFFF80: FFFF80 Sample
    #FFFFFF: FFFFFF Sample (White)
    

    The exact definition of a color expressed in RGB canbe found in The sRGB Definition.

    Background Colors

    Background color may be specified as an option in the <BODY> tag, as follows:

    <BODY BGCOLOR="#rrggbb">

    The chart below was lifted from Doug Jacobson's RGB Hex Triplet Color Chart at http://www.phoenix.net/~jacobson/rgb.html

    Color Chart Click on the thumbnail image to see the full chart (61k).

    Text, Background & Link Colors

    Various custom colors may be specified as options in the <BODY>, <TR> and <TD> tags, as follows:

    <BODY BGCOLOR="built-in color name" TEXT="#rrggbb" LINK="#rrggbb" VLINK="#rrggbb" ALINK="built-in color name">
    <TD BGCOLOR="#rrggbb">

    The TR and TD tags only support BGCOLOR attribute. BODY supports the whole set.

    OptionSets color of...
    <TR BGCOLOR=green>Background of an entire row
    <TD BGCOLOR=red>Background of one cell
    TEXTNormal text
    LINKLink text (unvisited)
    VLINKVisited Link text
    ALINKActivated Link text (as link is clicked)

    Images

    Vertical Image Alignment

    <IMG SRC="mtviso.jpg"> This is some text with no long words: is is is is is is is is is is is is is is is is is is is is is is is is is is is is is is is is is.
    <IMG SRC="mtviso.jpg" ALIGN=bottom>
    Aligns bottom of image with baseline of line
    This is some text with no long words: is is is is is is is is is is is is is is is is is is is is is is is is is is is is is is is is is.
    <IMG SRC="mtviso.jpg" ALIGN=baseline>
    Aligns bottom of image with baseline of line (same as ALIGN=bottom)
    This is some text with no long words: is is is is is is is is is is is is is is is is is is is is is is is is is is is is is is is is is.
    <IMG SRC="mtviso.jpg" ALIGN=absbottom>
    Aligns bottom of image with lowest item on line
    This is some text with no long words: is is is is is is is is is is is is is is is is is is is is is is is is is is is is is is is is is.
    <IMG SRC="mtviso.jpg" ALIGN=middle>
    Aligns middle of image with baseline of text
    This is some text with no long words: is is is is is is is is is is is is is is is is is is is is is is is is is is is is is is is is is.
    <IMG SRC="mtviso.jpg" ALIGN=absmiddle>
    Aligns middle of image with middle of text
    This is some text with no long words: is is is is is is is is is is is is is is is is is is is is is is is is is is is is is is is is is.
    <IMG SRC="mtviso.jpg" ALIGN=top>
    Aligns top of image with tallest item on line
    This is some text with no long words: is is is is is is is is is is is is is is is is is is is is is is is is is is is is is is is is is.
    <IMG SRC="mtviso.jpg" ALIGN=texttop>
    Aligns top of image with tallest text on line
    This is some text with no long words: is is is is is is is is is is is is is is is is is is is is is is is is is is is is is is is is is.

    Horizontal Image Alignment

    <IMG SRC="mtviso.jpg" ALIGN=right> This is some text with no long words: is is is is is is is is is is is is is is is is is is is is is is is is is is is is is is is is is is is is is is is is is is is is is is is is is is is is is is is is is is is is is is is is is is is is is is is is is is is is is is is is is is is is is is is is is is is is is is is is is is is is is is is is is is is is is is is is is is is is is is is is is is is is is is is is is is is is is is is is is is is is is is is is is is is is.
    <IMG SRC="mtviso.jpg" ALIGN=left> This is some text with no long words: is is is is is is is is is is is is is is is is is is is is is is is is is is is is is is is is is is is is is is is is is is is is is is is is is is is is is is is is is is is is is is is is is is is is is is is is is is is is is is is is is is is is is is is is is is is is is is is is is is is is is is is is is is is is is is is is is is is is is is is is is is is is is is is is is is is is is is is is is is is is is is is is is is is is.
    <IMG SRC="mtviso.jpg" ALIGN=left>
    and
    <IMG SRC="mtviso.jpg" ALIGN=right>
    This is some text with no long words: is is is is is is is is is is is is is is is is is is is is is is is is is is is is is is is is is is is is is is is is is is is is is is is is is is is is is is is is is is is is is is is is is is is is is is is is is is is is is is is is is is is is is is is is is is is is is is is is is is is is is is is is is is is is is is is is is is is is is is is is is is is is is is is is is is is is is is is is is is is is is is is is is is is is.

    Image Space & Border

    <IMG SRC="mtviso.jpg" ALIGN=left BORDER=1> This is some text with no long words: is is is is is is is is is is is is is is is is is is is is is is is is is is is is is is is is is is is is is is is is is is is is is is is is is is is is is is is is is is is is is is is is is is is is is is is is is is is is is is is is is is is is is is is is is is is is is is is is is is is is is is is is is is is is is is is is is is is is is is is is is is is is is is is is is is is is is is is is is is is is is is is is is is is is.
    <IMG SRC="mtviso.jpg" ALIGN=left VSPACE=16 HSPACE=32 BORDER=4> This is some text with no long words: is is is is is is is is is is is is is is is is is is is is is is is is is is is is is is is is is is is is is is is is is is is is is is is is is is is is is is is is is is is is is is is is is is is is is is is is is is is is is is is is is is is is is is is is is is is is is is is is is is is is is is is is is is is is is is is is is is is is is is is is is is is is is is is is is is is is is is is is is is is is is is is is is is is is.

    Image Alternate Text

    <IMG SRC="nosuch.gif"> This is some text.
    <IMG SRC="nosuch.gif" ALT="Ooops">
    Try this with Netscape's "Auto Load Images"
    option turned off
    Ooops This is some text.

    Image Size & Scale

    <IMG SRC="mtviso.jpg">
    Image size unknown until browser retrieves file
    <IMG SRC="mtviso.jpg" WIDTH=63 HEIGHT=44>
    Browser can allocate space before file is retrieved

    Using WIDTH and HEIGHT that do not match the actual size of the image has different effects in different browsers and is a bad practice.

    Internal Images

    Internal images are used by the browser when it displays something without the assistance of a httpd server. For example, netscape uses its internal images when it displays a directory. Unfortunately there is no standard set of supported images, so using them in your web pages is bound to lead to trouble.

    <IMG SRC="internal-gopher-binary"> page with 0's and 1's
    <IMG SRC="internal-gopher-index"> binoculars
    <IMG SRC="internal-gopher-image"> page with symbols
    <IMG SRC="internal-gopher-menu"> file folder
    <IMG SRC="internal-gopher-movie"> strip of film
    <IMG SRC="internal-gopher-sound"> page with speaker
    <IMG SRC="internal-gopher-text"> page with text
    <IMG SRC="internal-gopher-telnet"> PC icon
    <IMG SRC="internal-gopher-unknown">blank page

    Client-Side Image Maps

    To the Top To the Bottom Pass your mouse over the picture and keep an eye on your browser's status line.

    If your browser supports client-side image maps, you should see a reference to GOTOTOP while over the top half of the picture, and GOTOBOTTOM while over the bottom half. (These links are not active, so if you actually click on the picture, you'll get an error message saying that the link cannot be found.)

    If your browser does not support client-side image maps, if you click on the picture, nothing will happen.


    The HTML code for this is:

    <IMG SRC=mtviso.jpg WIDTH=63 HEIGHT=44 USEMAP="#mymap" ALIGN=right>
    ...
    <MAP NAME="mymap">
    <AREA SHAPE="rect" HREF="GOTOTOP.html"    COORDS="0,0,62,21"     ALT="To the Top">
    <AREA SHAPE="rect" HREF="GOTOBOTTOM.html" COORDS="0,22,62,43"    Alt="To the Bottom">
    </MAP>
    Blah blah blah
    

    The image map can be anywhere in the <BODY>, and some browsers support having it in a different file (the USEMAP then specifies the full URL to the file). Note however that putting the map in a different file make the page load more slowly. On the other hand, it lets you edit the image and the corresponding image map by editing two files, instead of editing every page that imbedded the image.

    Multiple images can use the same image map, if it works out that such a thing makes sense to do (it rarely does).

    Background Image

    A background image may be specified as an option in the <BODY> tag, as follows:

    <BODY BACKGROUND="path/filename.gif">

    Character Entities

    The chart below was lifted from Martin Ramsch's ISO8859-1 Table at http://www.uni-passau.de/~ramsch/iso8859-1.html
    Description                               Code            Entity name
    ===================================       ============    ==============
    quotation mark                            &#34;  --> "    &quot;   --> "
    ampersand                                 &#38;  --> &    &amp;    --> &
    less-than sign                            &#60;  --> <    &lt;     --> <
    greater-than sign                         &#62;  --> >    &gt;     --> >
    
    Description                          Char Code            Entity name
    ===================================  ==== ============    ==============
    non-breaking space                       &#160; -->      &nbsp;   -->  
    inverted exclamation                     &#161; --> ¡    &iexcl;  --> ¡
    cent sign                                &#162; --> ¢    &cent;   --> ¢
    pound sterling                           &#163; --> £    &pound;  --> £
    general currency sign                    &#164; --> ¤    &curren; --> ¤
    yen sign                                 &#165; --> ¥    &yen;    --> ¥
    broken vertical bar                      &#166; --> ¦    &brvbar; --> ¦
    section sign                             &#167; --> §    &sect;   --> §
    umlaut (dieresis)                        &#168; --> ¨    &uml;    --> ¨
    copyright                                &#169; --> ©    &copy;   --> ©
    feminine ordinal                         &#170; --> ª    &ordf;   --> ª
    left angle quote, guillemotleft          &#171; --> «    &laquo;  --> «
    not sign                                 &#172; --> ¬    &not;    --> ¬
    soft hyphen                              &#173; --> ­    &shy;    --> ­
    registered trademark                     &#174; --> ®    &reg;    --> ®
    macron accent                            &#175; --> ¯    &macr;   --> ¯
    degree sign                              &#176; --> °    &deg;    --> °
    plus or minus                            &#177; --> ±    &plusmn; --> ±
    superscript two                          &#178; --> ²    &sup2;   --> ²
    superscript three                        &#179; --> ³    &sup3;   --> ³
    acute accent                             &#180; --> ´    &acute;  --> ´
    micro sign                               &#181; --> µ    &micro;  --> µ
    paragraph sign                           &#182; --> ¶    &para;   --> ¶
    middle dot                               &#183; --> ·    &middot; --> ·
    cedilla                                  &#184; --> ¸    &cedil;  --> ¸
    superscript one                          &#185; --> ¹    &sup1;   --> ¹
    masculine ordinal                        &#186; --> º    &ordm;   --> º
    right angle quote, guillemotright        &#187; --> »    &raquo;  --> »
    fraction one-fourth                      &#188; --> ¼    &frac14; --> ¼
    fraction one-half                        &#189; --> ½    &frac12; --> ½
    fraction three-fourths                   &#190; --> ¾    &frac34; --> ¾
    inverted question mark                   &#191; --> ¿    &iquest; --> ¿
    capital A, grave accent                  &#192; --> À    &Agrave; --> À
    capital A, acute accent                  &#193; --> Á    &Aacute; --> Á
    capital A, circumflex accent             &#194; --> Â    &Acirc;  --> Â
    capital A, tilde                         &#195; --> Ã    &Atilde; --> Ã
    capital A, dieresis or umlaut mark       &#196; --> Ä    &Auml;   --> Ä
    capital A, ring                          &#197; --> Å    &Aring;  --> Å
    capital AE diphthong (ligature)          &#198; --> Æ    &AElig;  --> Æ
    capital C, cedilla                       &#199; --> Ç    &Ccedil; --> Ç
    capital E, grave accent                  &#200; --> È    &Egrave; --> È
    capital E, acute accent                  &#201; --> É    &Eacute; --> É
    capital E, circumflex accent             &#202; --> Ê    &Ecirc;  --> Ê
    capital E, dieresis or umlaut mark       &#203; --> Ë    &Euml;   --> Ë
    capital I, grave accent                  &#204; --> Ì    &Igrave; --> Ì
    capital I, acute accent                  &#205; --> Í    &Iacute; --> Í
    capital I, circumflex accent             &#206; --> Î    &Icirc;  --> Î
    capital I, dieresis or umlaut mark       &#207; --> Ï    &Iuml;   --> Ï
    capital Eth, Icelandic                   &#208; --> Ð    &ETH;    --> Ð
    capital N, tilde                         &#209; --> Ñ    &Ntilde; --> Ñ
    capital O, grave accent                  &#210; --> Ò    &Ograve; --> Ò
    capital O, acute accent                  &#211; --> Ó    &Oacute; --> Ó
    capital O, circumflex accent             &#212; --> Ô    &Ocirc;  --> Ô
    capital O, tilde                         &#213; --> Õ    &Otilde; --> Õ
    capital O, dieresis or umlaut mark       &#214; --> Ö    &Ouml;   --> Ö
    multiply sign                            &#215; --> ×    &times;  --> ×
    capital O, slash                         &#216; --> Ø    &Oslash; --> Ø
    capital U, grave accent                  &#217; --> Ù    &Ugrave; --> Ù
    capital U, acute accent                  &#218; --> Ú    &Uacute; --> Ú
    capital U, circumflex accent             &#219; --> Û    &Ucirc;  --> Û
    capital U, dieresis or umlaut mark       &#220; --> Ü    &Uuml;   --> Ü
    capital Y, acute accent                  &#221; --> Ý    &Yacute; --> Ý
    capital THORN, Icelandic                 &#222; --> Þ    &THORN;  --> Þ
    small sharp s, German (sz ligature)      &#223; --> ß    &szlig;  --> ß
    small a, grave accent                    &#224; --> à    &agrave; --> à
    small a, acute accent                    &#225; --> á    &aacute; --> á
    small a, circumflex accent               &#226; --> â    &acirc;  --> â
    small a, tilde                           &#227; --> ã    &atilde; --> ã
    small a, dieresis or umlaut mark         &#228; --> ä    &auml;   --> ä
    small a, ring                            &#229; --> å    &aring;  --> å
    small ae diphthong (ligature)            &#230; --> æ    &aelig;  --> æ
    small c, cedilla                         &#231; --> ç    &ccedil; --> ç
    small e, grave accent                    &#232; --> è    &egrave; --> è
    small e, acute accent                    &#233; --> é    &eacute; --> é
    small e, circumflex accent               &#234; --> ê    &ecirc;  --> ê
    small e, dieresis or umlaut mark         &#235; --> ë    &euml;   --> ë
    small i, grave accent                    &#236; --> ì    &igrave; --> ì
    small i, acute accent                    &#237; --> í    &iacute; --> í
    small i, circumflex accent               &#238; --> î    &icirc;  --> î
    small i, dieresis or umlaut mark         &#239; --> ï    &iuml;   --> ï
    small eth, Icelandic                     &#240; --> ð    &eth;    --> ð
    small n, tilde                           &#241; --> ñ    &ntilde; --> ñ
    small o, grave accent                    &#242; --> ò    &ograve; --> ò
    small o, acute accent                    &#243; --> ó    &oacute; --> ó
    small o, circumflex accent               &#244; --> ô    &ocirc;  --> ô
    small o, tilde                           &#245; --> õ    &otilde; --> õ
    small o, dieresis or umlaut mark         &#246; --> ö    &ouml;   --> ö
    division sign                            &#247; --> ÷    &divide; --> ÷
    small o, slash                           &#248; --> ø    &oslash; --> ø
    small u, grave accent                    &#249; --> ù    &ugrave; --> ù
    small u, acute accent                    &#250; --> ú    &uacute; --> ú
    small u, circumflex accent               &#251; --> û    &ucirc;  --> û
    small u, dieresis or umlaut mark         &#252; --> ü    &uuml;   --> ü
    small y, acute accent                    &#253; --> ý    &yacute; --> ý
    small thorn, Icelandic                   &#254; --> þ    &thorn;  --> þ
    small y, dieresis or umlaut mark         &#255; --> ÿ    &yuml;   --> ÿ