HTML-eksempler

Contents

Other Summaries and Demos

• See my home page for other summaries and demos: APL, REXX, XEDIT, Perl, HTML, RGB Colors, HTTP Cookies, Email Forms, CGI Environment Variables, Server Side Includes, etc...

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 file name, 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.

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.

The URL attribute is a Netscape extension. 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, and the URL attribute to the file to load which defaults to reloading the same file. Netscape 1.1 also recognizes placing the URL inside the quotes which define the CONTENT value by using a semicolon following the number of seconds, then the URL=http://... text. For example:

• <META HTTP-EQUIV="refresh" CONTENT=30 URL="http://...">
• <META HTTP-EQUIV="refresh" CONTENT="30;URL=http://...">

  Some Web search engines look for the following META elements:

• <META NAME="description" CONTENT="text ...">
• <META NAME="keywords" CONTENT="kw, kw kw ...">

  You can avoid browser caching with one of the following:

• <META HTTP-EQUIV="Expires" CONTENT="Tue, 04 Dec 1993 21:29:02 GMT">
• <META HTTP-EQUIV="Pragma" CONTENT="no-cache">

  See http://vancouver-webpages.com/META/ for more details.

Comments

Single-Line Comments

HTML comments are coded as:

<!-- comment -->

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

Multi-Line Comments

Many browsers permit multi-line comments, coded as:

<!-- comment
...
comment -->

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

Headings

Note that headings automatically generate vertical spacing both above and below the heading.

<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 sizes range from 1 through 7. The base font size is normally 3; specifying +n or -n adjusts from there.

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

Base Font Size

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

<BASEFONT SIZE="+2">

Explicit Font Styles

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

Logical Font Styles

<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
<BLINK>...</BLINK>	Normal Blink 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
<XMP>...</XMP>	Normal XMP style Normal
	Note: tags within an XMP block are not interpreted! XMP: Here's an &amp; ampersand Normal: Here's an & ampersand

Lists

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>Level 3, Item 2 </UL> <LI>Level 2, Item 2 </UL> </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 PLAIN> ... </UL>	Item 1 Item 2 Item 3
Unordered List (with options)	<UL PLAIN COMPACT> ... </UL>	Item 1 Item 2 Item 3
Unordered List (with options)	<UL PLAIN 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
Unordered List (items without list)	<LI>Item 1 <LI>Item 2 <LI>Item 3	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>	Item 1 Item 2 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>Level 3, Item 2 </OL> <LI>Level 2, Item 2 </OL> </OL>	Level 1, Item 1 Level 2, Item 1 Level 3, Item 1 Level 3, Item 2 Level 2, Item 2
Ordered List (with option)	<OL TYPE="i"> ... </OL>	Item 1 Item 2 Item 3 Item 4 Item 5
Ordered List (with options)	<OL TYPE="I" START=6> ... </OL>	Item 1 Item 2 Item 3 Item 4 Item 5
Ordered List (with option)	<OL TYPE="a"> ... </OL>	Item 1 Item 2 Item 3 Item 4 Item 5
Ordered List (with option)	<OL TYPE="A"> ... </OL>	Item 1 Item 2 Item 3 Item 4 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
Definition List (with option)	<DL COMPACT> <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

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>, <DIVISION> 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.
Block Quote	<BQ> ... </BQ>	Netscape 1.22 and 2.01 do not support the <BQ> tag. Now there is a </BQ> immediately followed by a new <BQ> 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.

Notes

Note	<NOTE> ... </NOTE>	This is some text repeated a bunch of times. Netscape 1.22 and 2.01 do not seem to support this feature. 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.
Note (with option)	<NOTE ROLE=tip> ... </NOTE>	This is some text repeated a bunch of times. Netscape 1.22 and 2.01 do not seem to support this feature. 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.
Note (with option)	<NOTE ROLE=warning> ... </NOTE>	This is some text repeated a bunch of times. Netscape 1.22 and 2.01 do not seem to support this feature. 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.

Foototes

Footnote

<FN ID="..."> ... </FN>

This is a normal <P> paragraph with a footnote reference (coded as <A HREF="#fn1">footnote</A>). In theory, when you click on the reference, the footnote appears. Netscape 1.22 and 2.01 do not seem to support this feature. This is a footnote paragraph (coded as <FN ID="fn1">). his is some more of the footnote text. This is some more of the footnote text.

Banners

Banner

<BANNER> ... </BANNER>

This is a banner. Netscape 1.22 and 2.01 do not seem to support this feature.

Indenting Techniques

Unordered List (with no items)	<UL> ... </UL>	Text should be left-indented. 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.
Definition List (with no terms)	<DL> <DD>Defn </DL>	Text should be left-indented. 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.
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.

Colors

Try my Zoomable RGB Color Sampler.

Text Colors

Font colors may be specified as follows:

<FONT COLOR="#rrggbb">...</FONT>

In theory, there are 256 ³ or 16,777,216 possible colors.

Here are 27 samples of <FONT COLOR="#rrggbb">:

#000000: 000000 Sample (Black)
#000080: 000080 Sample
#0000FF: 0000FF Sample (Blue)
#008000: 008000 Sample

#008080: 008080 Sample
#0080FF: 0080FF Sample
#00FF00: 00FF00 Sample (Green)
#00FF80: 00FF80 Sample
#00FFFF: 00FFFF Sample (Cyan)
#800000: 800000 Sample

#800080: 800080 Sample
#8000FF: 8000FF Sample
#808000: 808000 Sample
#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 (Magenta)
#FF8000: FF8000 Sample

#FF8080: FF8080 Sample
#FF80FF: FF80FF Sample
#FFFF00: FFFF00 Sample (Yellow)
#FFFF80: FFFF80 Sample
#FFFFFF: FFFFFF Sample (White)

Background Colors

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

<BODY BGCOLOR="#rrggbb">

In theory, there are 256 ³ or 16,777,216 possible colors.

Another way to look at this: Doug Jacobson's RGB Hex Triplet 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> tag, as follows:

<BODY BGCOLOR="#rrggbb" TEXT="#rrggbb" LINK="#rrggbb" VLINK="#rrggbb" ALINK="#rrggbb">

Option	Sets color of...
BGCOLOR	Background
TEXT	Normal text
LINK	Link text (unvisited)
VLINK	Visited Link text
ALINK	Activated Link text (as link is clicked)

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>

This	is
a	table blah blah blah blah blah blah blah blah

<TABLE BORDER>

This	is
a	table blah blah blah blah blah blah blah blah

<TABLE BORDER=0>

This	is
a	table blah blah blah blah blah blah blah blah

<TABLE BORDER=1>

This	is
a	table blah blah blah blah blah blah blah blah

<TABLE BORDER=2>

This	is
a	table blah blah blah blah blah blah blah blah

<TABLE BORDER=4>

This	is
a	table blah blah blah blah blah blah blah blah

<TABLE BORDER=8>

This	is
a	table blah blah blah blah blah blah blah blah

<TABLE BORDER=16>

This	is
a	table blah blah blah blah blah blah blah blah

Table Width & Height

<TABLE BORDER=1>

This	is
a	table blah blah blah blah blah blah

<TABLE BORDER=1 WIDTH="50%">

This	is
a	table blah blah blah blah blah blah

<TABLE BORDER=1 WIDTH="90%">

This	is
a	table blah blah blah blah blah blah

<TABLE BORDER=1 WIDTH=200>

This	is
a	table blah blah blah blah blah blah

<TABLE BORDER=1 HEIGHT=200>

This	is
a	table blah blah blah blah blah blah

<TABLE BORDER=1 HEIGHT="25%">

This	is
a	table blah blah blah blah blah blah

Table Alignment

<TABLE BORDER=1>

This	is
a	table 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>

This	is
a	table 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>

This	is
a	table 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.


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>

This	is
a	table blah blah blah blah blah blah blah blah

<TABLE BORDER=1 CELLSPACING=16>

This	is
a	table blah blah blah blah blah blah blah blah

<TABLE BORDER=1 CELLPADDING=16>

This	is
a	table blah blah blah blah blah blah blah blah

<TABLE BORDER=1 CELLSPACING=16 CELLPADDING=16>

This	is
a	table 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>

---

Links and Anchors

Use <A HREF=...> to hyperlink to another page. The following line is coded as:
See my <A HREF="index.html">home page</A> for details.
See my home page for details.

You can jump to somewhere else on the current page by first defining an "anchor":
<A NAME="colors"></A>
and then specifying that anchor in the link:
See <A HREF="#colors">Colors</A> above.

See Colors above.

Or you can jump into the middle of another page by combining a URL and an "anchor":
See <A HREF="aplinfo.html#stschist">STSC History</A>.

See STSC History.

Forms

The easiest way to submit a form is via e-mail. This demonstration form is coded as:

<FORM METHOD=post ACTION="mailto:rex@example.com">
... form elements ...
</FORM>

The alternative is to have the form invoke a CGI program, which would be coded as either:

<FORM METHOD=get  ACTION="http://www.example.com/foo.cgi">
or:
<FORM METHOD=post ACTION="http://www.example.com/foo.cgi">

The get method sends the name=value pairs along with the specified URL -- the user would see something like http://www.example.com/foo.cgi?first=Rex&last=Swain as foo.cgi was invoked, and (if written in Perl) foo.cgi would receive GET via $ENV{'REQUEST_METHOD'} and first=Rex&last=Swain via $ENV{'QUERY_STRING'}.

The post method sends the name=value pairs via STDIN (standard input) -- the user would see something like http://www.example.com/foo.cgi as foo.cgi was invoked, and (if written in Perl) foo.cgi would receive POST via $ENV{'REQUEST_METHOD'} and the length of the standard input via $ENV{'CONTENT_LENGTH'} and first=Rex&last=Swain via STDIN.

Text Elements

Here is an <INPUT TYPE="text" SIZE=30 NAME="name1"> element:
Enter your name:


Here is an <INPUT TYPE="text" SIZE=30 NAME="name2" VALUE="Initialize Me"> element:

Enter your name:


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

Enter something up to 10 characters long:


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

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

This is a <TEXTAREA ROWS=3 COLS=40 NAME="comment1"></TEXTAREA> element:

Your comments, please:


This is a <TEXTAREA ROWS=2 COLS=40 NAME="comment2">Initialize Me</TEXTAREA> element:

Your comments, please:
Initialize Me

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

• WRAP=off (the default) disables word wrap. Text the user types is displayed and returned exactly as typed.
• WRAP=hard or WRAP=physical cause word wrap, and the line breaks are included when the form is submitted.
• WRAP=soft or WRAP=virtual cause word wrap, but the line breaks are not included when the form is submitted.

Regardless of the WRAP parameter, whenever the user explicitly inserts a line break, a CR/LF pair (%0D%0A) is returned embedded in the text.

Radio Buttons

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

<INPUT TYPE="radio" NAME="sex" VALUE="M" CHECKED>Male
<INPUT TYPE="radio" NAME="sex" VALUE="F">Female

What gender are you?
Male
Female

Note that you use the same NAME parameter for a group of buttons. If one button has a CHECKED option, it will be selected by default. If the form is submitted as is, sex=M would be sent.

Checkboxes

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

<INPUT TYPE="checkbox" NAME="tv" CHECKED>TV
<INPUT TYPE="checkbox" NAME="vcr" CHECKED>VCR
<INPUT TYPE="checkbox" NAME="cd">CD Player

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

Note that you use different NAME parameters for each checkbox. Any checkboxes that have a CHECKED option will be selected by default. If the form is submitted as is, tv=on&vcr=on would be sent.

Selection Lists

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

<SELECT NAME="country">
<OPTION SELECTED>USA
<OPTION>France
<OPTION>Germany
<OPTION>United Kingdom
<OPTION>Other
</SELECT>

Where are you?
USA France Germany United Kingdom Other

Note that this appears as a drop-down selection box, and you may select only one item.

Here's the same sort of thing with SIZE=4 and MULTIPLE options added:

<SELECT SIZE=4 MULTIPLE NAME="os">
<OPTION>DOS
<OPTION SELECTED>Windows 3.1
<OPTION>Windows 95
<OPTION SELECTED>OS/2
<OPTION>Other
</SELECT>

What operating systems have you ever used?
DOS Windows 3.1 Windows 95 OS/2 Other

Note that this appears as a scrolling selection box, and you may select several items.

Hidden Fields

Here is an <INPUT TYPE="hidden" NAME="Hidden" VALUE="Invisible"> element:

You will not see anything, but when the form is submitted, Hidden=Invisible will be sent.

Submit/Reset Buttons

Here are vanilla Submit and Reset buttons:

<INPUT TYPE="submit">
<INPUT TYPE="reset">

Submit submits the form (i.e., sends the form to the URL specified in the form's ACTION attribute). Reset restores all form elements to their default values.

You may change the text on the button faces by specifying VALUE= parameters:

<INPUT TYPE="submit" VALUE="Send!">
<INPUT TYPE="reset" VALUE="Clear Form">

Here is an <INPUT TYPE="image" SRC="undercon.gif"> element:

This acts like a Submit button.

Images

Vertical Image Alignment

<IMG SRC="undercon.gif">	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="undercon.gif" 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="undercon.gif" 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="undercon.gif" 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="undercon.gif" 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="undercon.gif" 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="undercon.gif" 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="undercon.gif" 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="undercon.gif" 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="undercon.gif" 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="undercon.gif" ALIGN=left> and <IMG SRC="undercon.gif" 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="undercon.gif" 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="undercon.gif" 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	This is some text.

Image Size & Scale

<IMG SRC="undercon.gif"> Image size unknown until browser retrieves file
<IMG SRC="undercon.gif" WIDTH=40 HEIGHT=40> Browser can allocate space before file is retrieved
<IMG SRC="undercon.gif" WIDTH=80 HEIGHT=80> Browser scales image to specified size
<IMG SRC="undercon.gif" WIDTH=20 HEIGHT=20> Browser scales image to specified size
<IMG SRC="undercon.gif" WIDTH=20 HEIGHT=80> Browser scales image to specified size

Internal Images

Netscape 1.22 and 2.01 support these internal images:

<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

(Try these on your own server -- each view of this page generated 9 records in my server's error log.
RHS 26 July 1999)

Client-Side Image Maps

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=rexc.gif WIDTH=168 HEIGHT=221 USEMAP="#csimap" ALIGN=right>
<MAP NAME="csimap">
<AREA SHAPE="rect" HREF="GOTOTOP.html"    COORDS="0,0,167,110">
<AREA SHAPE="rect" HREF="GOTOBOTTOM.html" COORDS="0,111,167,220">
</MAP>
Blah blah blah

Background Image

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

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

(Personally, I think that the use of this feature is just about as obnoxious as <BLINK>!)

Figure Element

<FIG> is an HTML3 feature. If no image appears, your browser does not support figures. FYI, Netscape 2.01 does not support figures.

This is the caption. This is a figure (<FIG ALIGN=right>) element with <CAPTION> and <CREDIT> and <OVERLAY> tags. You should see a photo of me with the under-construction icon overlaid in its center. This is the credit.


The HTML code for this is:

<FIG SRC="rexc.gif" WIDTH=168 HEIGHT=221 ALIGN=right>
<OVERLAY SRC="undercon.gif" WIDTH=40 HEIGHT=40 X=64 Y=80>
<CAPTION>This is the caption.</CAPTION>
Blah blah blah
<CREDIT>This is the credit.</CREDIT>

</FIG>

Thanks to Larry Aronson (author of HTML3 Manual of Style) for information on this.

Character Entities

The chart below was lifted from Martin Ramsch's ISO8859-1 Table

Description                               Code            Entity name
===================================       ============    ==============
quotation mark                            "  --> "    "   --> "
ampersand                                 &  --> &    &    --> &

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; --> ¦

                                                          &brkbar; --> &brkbar;
section sign                         §    &#167; --> §    &sect;   --> §
umlaut (dieresis)                    ¨    &#168; --> ¨    &uml;    --> ¨

                                                          &die;    --> ¨
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;   --> ¯
                                                          &hibar;  --> &hibar;

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;    --> Ð

                                                          &Dstrok; --> Đ
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;   --> ÿ