Apache Server Survival Guide asgxd.htm

Previous Page TOC Next Page

D


HTML Reference Guide


Hypertext Markup Language (HTML) is the most important component of the Web. It is responsible for providing the "formatting" to the pages you see every day on the Web.

HTML does not provide the formatting control you would expect, simply because different browsers render HTML in different ways. The task has been to abuse and creatively use tags to provide a desired look to a page. Creative types will find that HTML is fairly limited in what it can do; however, it is amazing to see the level of quality that can be brought out given the current control. The markup language is rapidly evolving to allow for more page-oriented layout, while keeping with the device-independent intent of HTML. Designers will always find a way of getting their intentions across.

Early in the Web, there was a lot of concern with being compatible with low resolution browsers such as Lynx—a text-only browser. Lynx has been used for a long time as a way of testing HTML for universal compatibility. This meant that you could not rely in the nonstandard HTML tags for your formatting or on graphic items alone for navigation. This interest—while still kept active by many people—is quickly dying out. I know of many Web service providers that will implement sites with a compatibility set to Netscape or Microsoft Internet Explorer. I believe that there's room for everybody, but the implementation specifications should really be set by the owner of the site and the intended target audience. This is due mostly to the evolution of the Web and supporting technologies. Personal bandwidth has increased very quickly, with 28.8Kbps modems becoming the low end, and faster technologies enabling higher bandwidth than it was thought possible over standard copper wires a few years ago. With the advent of inexpensive high bandwidth, visitors will demand more complex sites that offer a variety of multimedia presentation systems.

While many people will disagree, the reality of the Web is that much of the interest is based on the graphic appeal of a Web site. For once the graphical user interface (GUI) provided by a particular page is appealing, letting the visual types have more fun. Although Lynx does provide a serviceable interface to information you need while behind a terminal, the use of graphical browsers such as Netscape and Internet Explorer are where the technology is at.

This means that the basic design target has been changed to accommodate the features implemented by these browsers, perhaps at the expense of losing usability on the lower-end browsers. However, this has always been the argument in computers. Before GUI applications were popular, the issues were why did you need a mouse. Now that GUIs are the standard, many people find it dreadful to downgrade to a command prompt, although it may be very helpful sometimes. The Web is not TV; it is interactive. A great deal of its power comes from the its multimedia capabilities and its ability to give a feeling of being there. This can only be accomplished with graphic-capable browsers.

So to what standard should you develop your pages? It really depends on who is your target audience. If your message is too important not have it seen by some users, yet you want an enhanced site, the solution is simple: You'll need to prepare two or three versions of your pages that can be used with different levels of richness. This way you won't limit or stifle the more advanced browsers. You'll be able to provide features that will make it easier for people visiting your site to navigate through it. If their browser doesn't provide the proper support, then you'll have a scaled down version of your Web site that provides the information more plainly.

This doesn't mean the site is less capable; it just means that you are giving your users options. This also gives you the opportunity to provide different bandwidth versions of your site, which will allow people with the bigger intakes to enjoy more complex pages. Bandwidth conservation should still be a priority. A site should be designed to use the least amount of bandwidth possible given the design intent. This will allow your material to zip through. Your users will love it, and your server will be able to serve more users.

With that thought in mind, here's an HTML reference manual. This appendix is not intended as an HTML style guide. It assumes that you have a basic understanding of HTML. Most of the options you see will only work with Netscape or Microsoft Internet Explorer. At the current time of this writing, Microsoft just released, (Aug 13, 1996), Internet Explorer 3.0. Netscape, following suit, also will unleash their new Navigator. As I see it now, the competition is red hot. Both products have their advantages, and they offer an almost 99 percent feature match. I like them both equally well. However, I think in terms of the future, Netscape will have to be much further ahead to justify its price. Explorer is free and will ship with every new PC, giving it the price and distribution advantage.

HTML Formatting Tag Structure


HTML is a markup language, which means that text is marked up with tags to produce the desired results. You can create HTML with any good text editor. However, there are many editors specially made for editing and marking up HTML. HTML is fairly easy to learn. HTML markup tags surround text or other items that they affect. Tags are a formatting directive enclosed in angle brackets (< and >). Most tags have an opening and a closing tag. Opening tags are just the name of the directive. Closing tags prefix a forward slash (/) to the name of the directive. If the closing tag is optional, it is better to close them anyway in most cases. This will make your HTML style more consistent and readable, and will reduce problems associated with a missing close tag. Here's the basic syntax of any HTML tag: 


<tag>some object</tag>

Some tags may contain additional options. For example, the <P> tag, which defines a new paragraph, allows some simple formatting in some browsers. These options are specified as <P ALIGN=center>...</P>. This simply says that the paragraph should align center. The closing tag never takes any arguments.

Formatting tags can be nested with other tags to produce compound results. However, the nesting order is important. Some tags don't like to be nested. Each tag described in this appendix will include an elements allowed within and an element is allowed inside table. The first lists all the HTML elements that can nest inside the currently described element. The second lists all the HTML elements that can contain the currently described element.

HTML Document Structure


HTML documents have a very precise structure; they have a head and a body. In addition, HTML 3.2 requires that the first line of any HTML document you write contains the following line: 


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 3.2//EN">

This specifies the version of HTML that you are using among other things. The basic structure for an HTML document is: 


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 3.2//EN">

<HTML>

<HEAD>

infomration about your document

</HEAD>

<BODY>

content, what users see

</BODY>

</HTML>

The first thing you do is set the document type. Then that the document contains HTML markup. The HTML surrounds your document's content. Notice that HTML contains the HEAD and BODY sections.

The HEAD element of an HTML document contains information about the document itself. This information is only usable by the browser and other programs. For example, browsers render the title of your document based on a TITLE element inside the HEAD section.

The BODY element contains your content—information you want displayed to your users. This is what you see on your browser.

The simplest HTML page you could write that does something useful is HelloWorld.html. This is what such a page would look like in HTML: 


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 3.2//EN">

<HTML>

<HEAD>

<TITLE>Hello World in HTML </TITLE>

</HEAD>

<BODY>

<P>Hello World!</P>

</BODY>

</HTML>

This example does a couple of things. It sets up the basic structure of the document and uses the TITLE element in the HEAD section. The TITLE element titles the document, and the browser uses this information to put a title in the windows title bar.

In the BODY section, our small sample starts a paragraph with the <P> tag, and then prints the words Hello World!. It finishes the paragraph with the optional close paragraph tag, </P>. There are many more elements that will help you control the organization and formatting of your document, but they all basically work in the same form.

The list of elements that follows describes most, if not all, the elements as of HTML 3.2 that are implemented in the two most popular graphic browsers (Netscape and Internet Explorer). In the interest of saving space, all of the figures will show the HTML element's use with IE 3.0.

A (Anchor)


The A element defines a hyperlink anchor that references a resource. The referenced resource, or destination, can be located in the current document or in a different uniform resource locator (URL) altogether. The A element is the fundamental building element of the Web. It allows you to easily jump from one document to another.

The basic syntax of the A element specifies an anchor address or Uniform Resource Identifier (URI). The URI is optionally followed by a pound symbol (#) and a token called a fragment identifier, which specifies a particular location within the referenced resource (a bookmark).

The HREF attribute sets the target to be a URI or a local reference within the same document. Local references are specified by prefixing a token with a # symbol. Destinations or fragment identifiers are specified by using another <A> tag with the NAME attribute.

Activating a local reference will jump the browser to the location of the reference be it by scrolling the current document or by loading the referenced URL. Anchors are represented graphically by underlined text, but this visual clue is user controlled and can be turned off in most browsers. The A element requires a closing tag. A elements cannot nest. See Figure D.1 for an example of the A element.

Figure D.1. The A element.
Syntax: <A HREF=url NAME=#token REL=relation REV=relation TARGET=window-name TITLE=title>...</A>

The A element has the following options:
Option Description
HREF=url Specifies a destination address. Resources are specified in URL format or as #name for a reference within the current document.
NAME=name Defines a named anchor for use as a hyperlink destination.
REL=relation Defines a relationship of the HREF (source) to the anchor (destination), which is authorized and recognized by the source document.
REV=relation Defines a relationship anchor (destination) to the HREF (source), which is desired and claimed by the destination, but needs to be verified by the source.
TITLE=title Informational token, used to describe the HREF
TARGET=window Netscape 2.0 Extension that defines the window name for use by the retrieved hyperlink. If the named window is not yet open, Navigator will open a new window and assign this name to it.

The A element is allowed within these elements:

The element is allowed inside the following:


Example of A



<A NAME="accesslink">This is a text hyperlink to <A HREF="http://www.accesslink.com">accessLINK, inc.</A>

<P>

Graphics can be clickable images with a border:

<A HREF="#accesslink"><IMG SRC="websiteby.gif" ALT="Web Site By AccessLink"></A>

<P>

Or without: <A HREF="http://www.accesslink.com"><IMG SRC="websiteby.gif" BORDER=0></A>

ADDRESS


The ADDRESS element is used to render multiline contact information (such as a name, address, and signature). This element acts much like a paragraph; it automatically puts breaks before and after itself. The ADDRESS element requires a closing tag.

Figure D.2. The ADDRESS element.
Syntax: <ADDRESS>...</ADDRESS>

The ADDRESS element is allowed within these elements:

The element is allowed inside the following:


Example of ADDRESS



<ADDRESS>

accessLINK, inc. <BR>

N70 W6340 Bridge Rd.<BR>

Cedarburg, WI 53012 <BR>

Voice: 414.376.4590

</ADDRESS>

APPLET


The APPLET element specifies the Java application to load and execute for Java-enabled browsers. This element allows you to embed a Java applet right into HTML documents. Java applets are usually used to dynamically provide additional functionality to a browser, often in the form of an animation or some other adornment. However, Java applets can also be used to provide client-side processing, such as verification, to ensure that all items on a form have been completed by the visitor prior to sending it back to the server. The content of the APPLET element is displayed if the applet cannot be executed.

Parameters can be passed to an applet by using the PARAM element inside the APPLET element. You can specify multiple PARAM elements to provide multiple parameters to the applet. The APPLET element requires a closing tag.

Figure D.3. The LED applet.
Syntax: <APPLET ALIGN=alignment ALT=text CODEBASE=url CODE=appletFile HEIGHT=n HSPACE=n NAME=appletInstance VSPACE=n HSPACE=n WIDTH=n>...</APPLET>

Options for APPLET include the following:
Option Description
ALIGN=alignment Specifies the alignment in the applet window. The various legal options are TOP, MIDDLE, BOTTOM, LEFT, RIGHT.
ALT=text Sets the alternate text displayed when the applet cannot be loaded.
CODE=appletFile Specifies the Java class to load and execute.
CODEBASE=url Specifies the base URL of the applet—the directory where the applet is located.
HEIGHT=n Sets the initial suggested height of the applet window in pixels
HSPACE=n Sets the horizontal space (in pixels) reserved for a gutter around the applet.
NAME=appletInstance Name of the applet instance. This name allows multiple applets on the same page to communicate.
VSPACE=n Sets the vertical space (in pixels) reserved for a gutter around the applet specified in pixels.
WIDTH=n Sets the initial suggested width of the applet window in pixels.

The APPLET element is allowed within these elements:

The element is allowed inside the following:


Example of APPLET



...

<applet codebase="../LED" code="LED.class" width=500 height=48 align=center>

<param name="script" value="../scripts/Demo.led">

<param name="border" value="2">

<param name="bordercolor" value="100,130,130">

<param name="spacewidth" value="3">

<param name="wth" value="122">

<param name="ht" value="9">

<param name="font" value="../fonts/default.font">

<param name="ledsize" value="3">

<hr>

If you were using a Java-enabled browser,

you would see an animated scrolling text sign that looks like this:

<BR>

<IMG SRC="LEDSign.gif">

<hr>

</applet>

...

AREA


The AREA element is used to implement client-side image maps. The various elements allow you to define regions in an image that, when activated, will hyperlink the resource identified by the HREF attribute. When multiple AREA elements in the same MAP overlap, the first encountered takes precedence. This can be useful to define complex areas.

The AREA element is allowed within a MAP element only. The AREA closing tag is optional.
Syntax: <AREA SHAPE=shape COORDS=coords HREF=url|NOHREF [TARGET=window]>

Options for AREA include the following:
Option Description
ALT=text Sets the alternate text displayed if the browser doesn't accept images.
COORDS=coords A comma-separated list of coordinates. Format is dependent on the shape used.

RECT: x,y,w,h: Upper-left corner x,y with a width and height w,h.

CIRCLE: x,y,r: Circle centered at x,y with radius r.

POLY: x1,y1,x2,y2...xi,yi: Ordered coordinate pairs that define a closed polygon.
HREF=url Specifies the hypertext destination of the specified area.
NOHREF Specifies an area that has no action.
SHAPE=shape Specifies the shape of the area. Possible values are

RECT: rectangle

CIRCLE: circle

POLY: polygon
TARGET=window Specifies that the target be loaded into the specified window. Possible values for window are

window: Specifies to load the link into the named window.

blank: Creates the frame in a new unnamed window.

self: Loads the frame in the parent window.

parent: Loads in the parent window.

top: Loads in the top window.
The AREA element is allowed within the following element: MAP
The element is allowed inside the following: None. The AREA element is not a container.

Example of AREA


Note that the USEMAP option requires a # sign (just like a local HREF) before the name of the fragment containing the map coordinates: 


<AREA SHAPE=RECT COORDS="56,7,106,86" HREF="#b" ALT=b>

<AREA SHAPE=CIRCLE COORDS="219,63,23" HREF="#e" ALT=e>

B (Bold)


The B element provides emphasis by rendering its contents in boldface. The B element requires a closing tag.

Figure D.4. The B element.
Syntax: <B>...</B>

The B element is allowed within these elements:

B is allowed inside the following:


Example of B



<B>Bold</B> can be used on normal text.<BR>

<PRE>

You can also use <B>Bold</B> on preformatted text.

</PRE>

<BR>

You can even use <B>Bold</B> and <I>Italics</I> <B><I>together</I></B>!<BR>

BASE


The BASE element provides an absolute URL from which to interpret any relative URL links specified in the document. This allows the original document to be moved, while preserving all relative links. The default base address is the URL used to access the document; however, when the document is moved or copied elsewhere, the default base URL is not correct. The BASE element is very useful in ensuring that hyperlinks don't break when a page is moved or is mirrored by an user.

This element is only allowed within a HEAD element.
Syntax: <BASE HREF=url [TARGET=window]>

Options include the following:
Option Description
HREF Specifies the base URL
TARGET Netscape 2.0 extension that allows to define a named target window for each hyperlink in the document that doesn't set an explicit TARGET attribute.

The BASE element is allowed within these elements:

The element is allowed inside the following:


Example of BASE



<BASE HREF="http://www.somewhere.com/files/">

<BASE HREF="http://www.somewhere.com/files/ TARGET=_blank>

BASEFONT


The BASEFONT element alters the base font that is used as a default for any nonspecifically formatted text.

Figure D.5. The BASEFONT element.
Syntax: <BASEFONT COLOR=color NAME=name SIZE=n>

Options include the following:
COLOR=color Specifies the color of the base font. Colors are specified using hexadecimal notation for each component in the RGB channel in the following format: #RRGGBB, or by specifying one of the Microsoft Internet Explorer predefined colors: Aqua, Black, Blue, Fuchsia, Gray, Green, Lime, Maroon, Navy, Olive, Purple, Red, Silver, Teal, Yellow, White.
NAME=name Specifies the name of the font.
SIZE=n Specifies the size of the base font to be one of seven predefined sizes. The default size is 3, and the largest is 7. You can specify sizes relative to BASEFONT using the FONT element. n can range in size from 1 to 7, inclusive.

The BASEFONT element is allowed within these elements:

BASEFONT is allowed inside the following:


Example of BASEFONT



Here is some unadultered normal text (no basefont).

<P>

<BASEFONT SIZE=4>

This is some text after BASEFONT size is set to 4.

<BR>

<FONT SIZE=+1>Here is size +1.</FONT><BR>

<FONT SIZE=+2>Here is size +2.</FONT><BR>

<FONT SIZE=+3>Here is size +3.</FONT><BR>

BGSOUND (Background Sound)


The BGSOUND element is a Microsoft Internet Explorer 2.0 extension which defines the audio file to be played as a background to the document.
Syntax: <BGSOUND SRC=url LOOP=n>

Options for BSOUND include the following:
SRC=url Specifies the URL of the audio file to play.
LOOP=n|INFINITE Specifies the number of times the source sound will play while the document is displayed. The default is to play once, but you can also specify infinite for unlimited playback. There's no way of disabling the audio, except for turning off the volume or traveling to another page.

The BGSOUND element is allowed within these elements:

The element is allowed inside the following:


Example of BGSOUND




<BGSOUND SRC="/sounds/my.mid" LOOP=INFINITE>

BIG


The BIG element specifies that the enclosed text be rendered one size larger than the current font. The BIG element requires a closing tag.

Figure D.6. The BIG element.
Syntax: <BIG>...</BIG>

The BIG element is allowed within these elements:

BIG is allowed inside the following:


Example of BIG



...

Big is good for initial caps, but it can also be used for emphasis.

<BR><BIG>B</BIG>ig is good for initial caps, but it can also be used for <BIG>emphasis</BIG>.

...

BLINK


The BLINK element specifies that the enclosed text be rendered using a blinking font. BLINK is a Netscape only extension. The BLINK element requires a closing tag.
Syntax: <BLINK>...</BLINK>

The BLINK element is allowed within these elements:

BLINK is allowed inside the following:


Example of BLINK




<P>This is normal text. <BLINK>Hello, this text blinks!</BLINK>

BLOCKQUOTE


The BLOCKQUOTE element specifies that the enclosed text represents a block quote. Block quotes are rendered by indenting both the left and right margins. The BLOCKQUOTE element requires a closing tag.

Figure D.7. The BLOCKQUOTE element.
Syntax: <BLOCKQUOTE>...</BLOCKQUOTE>

The BLOCKQUOTE element is allowed within these elements:

BLOCKQUOTE is allowed inside the following:


Example of BLOCKQUOTE



...

<BLOCKQUOTE>

"I said what I meant, and meant what I said. An elephant is faithful - 100 per cent"

- Horton the Elephant

</BLOCKQUOTE>

...

BODY


The BODY element contains the content of a document. It specifies the beginning and end of the document body. This contrasts with the HEAD of a document, which contains information about the document. All displayable elements should be included within the BODY section. The opening and closing of the BODY element is inferred, so it is optional. However, it is considered good style to open and close it.

Figure D.8. Some changes to the standard BODY settings.
Syntax: <BODY ALINK=color BAGROUND=url BGCOLOR=color BGPROPERTIES=FIXED LEFTMARGIN=n LINK=color TEXT=color TOPMARGIN=n VLINK=color>...</BODY>

The options available for BODY include the following:
ALINK=color Specifies the color of the active link. Colors are specified in the HEX, 00-FF for each component of the RGB channel in the #RRGGBB format.
BACKGROUND=url Specifies an image to be used as the background.
BGCOLOR=color Specifies the background color of the document. Colors are specified in the HEX, 00-FF for each component of the RGB channel in the #RRGGBB format, or by specifying one of the Microsoft Internet Explorer predefined colors: Aqua, Black, Blue, Fuchsia, Gray, Green, Lime, Maroon, Navy, Olive, Purple, Red, Silver, Teal, Yellow, White.
BGPROPERTIES=FIXED Specifies that the BACKGROUND image be used as a watermark. The image is not replicated and remains stationary in the center of the window.
LEFTMARGIN=n Sets the margin for the left of the page. When set to zero, the left margin is set on the left edge of the window.
LINK=color Specifies the color of a normal link. Colors are specified in the HEX, 00-FF for each component of the RGB channel in the #RRGGBB format.
TEXT=color Specifies the color of normal text. Colors are specified in the HEX, 00-FF for each component of the RGB channel in the #RRGGBB format.
TOPMARGIN=n Sets the margin for the top of the page. When set to zero, the top margin is set on the top edge of the window.
VLINK=color Specifies the color of a visited or viewed link. Colors are specified in the HEX, 00-FF for each component of the RGB channel in the #RRGGBB format.

The BODY element is allowed within these elements:

The element is allowed inside the following:


Example of BODY



<BODY BGCOLOR="#FFFFFF" TEXT="#FF3333" LINK="00FF00" VLINK="#00FF00" ALINK="#00FF00">

<H1>BODY</H1>

<HR>

Here is a <A HREF="http://www.microsoft.com">link</A> to Microsoft.

<P>(We changed the default text color to red, and the link color to green).

</BODY>

BR (Break)


The BR element inserts a line break and continues the rendering of objects that follow in the next line.

Figure D.9. The BR element.
Syntax: <BR CLEAR=align-type>

Options include the following:
CLEAR The CLEAR attribute forces the line to break clear of floating images or tables. Possible values for the CLEAR attribute are

LEFT: Move down until the left margin is clear.

ALL: Move down until all margins are clear.

RIGHT: Move down until the right margin is clear.

NONE: Do not clear the margins.

The BR element is allowed within these elements:

BR is allowed inside the following:


Example of BR



<IMG SRC="websiteby.gif" ALT="Web Site By AccessLink" ALIGN=LEFT HSPACE=5>

The BR element inserts a line break and continues<BR> rendering of objects

that follow in the next line. The CLEAR attribute forces the line to break

'clear' of floating images or tables. This example uses a break element

without a CLEAR attribute. The break is on the word 'continues.'

<P>

<IMG SRC="websiteby.gif" ALT="Web Site By AccessLink" ALIGN=LEFT HSPACE=5>

The BR element inserts a line break and continues <BR CLEAR=ALL> rendering

of objects that follow in the next line. The CLEAR attribute forces the line

to break 'clear' of floating images or tables. This is an example of using

a break element with a CLEAR attribute. Note how the text after the andlt;BRandgt;

element is cleared past the image, as opposed to the previous example,

where the text continued flowing around the image after the break.

CAPTION


The CAPTION element is used to label a table. The ALIGN attribute specifies the alignment of the caption. The CAPTION element requires a closing tag.

Figure D.10. The CAPTION element.
Syntax: <CAPTION ALIGN=align-type>...</CAPTION>

Options for CAPTION include the following:
ALIGN The ALIGN attribute specifies what edge to place the caption relative of.

LEFT: Places captions on the left.

RIGHT: Places captions on the right.

TOP: Places caption at the top.

BOTTOM: Places captions at the bottom of the image. This is the default setting.

The CAPTION element is allowed within these elements:

CAPTION is allowed inside the following:


Example of CAPTION



...

<CAPTION ALIGN=TOP>This is a caption on the top.</CAPTION>

<TR>

<TH>Name</TH> <TH>Address</TH> <TH>Telephone</TH>

</TR>

<TR>

<TD>John Doe <TD>500 Elm Street <TD>555-1212

</TR>

</TABLE>

<P>

<TABLE BORDER=1>

<CAPTION ALIGN=BOTTOM>This is a caption on the bottom.</CAPTION>

<TR>

<TH>Name</TH> <TH>Address</TH> <TH>Telephone</TH>

</TR>

<TR>

</TR>

</TABLE>

...

CENTER


The CENTER element centers objects between the left and right margin. The CENTER element requires a closing tag.

Figure D.11. The CENTER element.
Syntax: <CENTER>...</CENTER>

The CENTER element is allowed within these elements:

CENTER is allowed inside the following:


Example of CENTER



<CENTER>

<P>

This text is centered.

</CENTER>

CITE


The CITE element renders its contents—a reference to a book, paper, or other published materials—as a citation. The CITE element requires a closing tag.

Figure D.12. The CITE element.
Syntax: <CITE>...</CITE>

The CITE element is allowed within these elements:

CITE is allowed inside the following:


Example of CITE




<CITE>Randall L. Schwartz - Learning Perl </CITE>

CODE


The CODE element renders its contents as computer code. It is intended for short words or phrases. Multiline listings should use the PRE element instead. CODE is usually rendered in a monospaced font. The CODE element requires a closing tag.

Figure D.13. The CODE element.
Syntax: <CODE>...</CODE>

The CODE element is allowed within these elements:

The element is allowed inside the following:


Example of CODE



<CODE>

% gcc -Wall -o run *.o -L./ -lcgic

</CODE>

COL (Column Properties)


The COL element sets the properties of one or more columns on a table. It is used together with the COLGROUP element to set the properties of columns within a group. The end tag is not required.

Figure D.14. The COL element.
Syntax: <COL ALIGN=align-type SPAN=n>

Options include the following:
ALIGN=align-type Specifies the alignment of text in the column. Legal values are
CENTER: Centers text in the column.
LEFT: Text is left aligned in the column.

RIGHT: Text is right aligned in the column.
SPAN=n Specifies the number of consecutive columns that this property affects.

The COL element is allowed within these elements:

The element is allowed inside the following:


Example of COL



...

<TABLE WIDTH=600 BORDER=1>

<COLGROUP>

<COL ALIGN=LEFT>

<COL ALIGN=CENTER>

<COL ALIGN=RIGHT>

<TBODY>

<TR>

<TD>I am aligned on the left

<TD>I am centered

<TD>I am on the right

</TR>

<TR>

<TD>I am aligned on the left

<TD>I am centered

<TD>I am on the right

</TR>

</TABLE>

...

COLGROUP (Column Group)


The COLGROUP element sets properties for one or more columns. A closing tag is not required.

Figure D.15. The COLGROUP element.
Syntax: <COLGROUP ALIGN=align-type SPAN=n>

Options include the following:
ALIGN=align-type Specifies the alignment of text in the column. Legal values are

CENTER: Centers text in the column.

LEFT: Text is left aligned in the column.

RIGHT: Text is right aligned in the column.
SPAN=n Specifies the number of consecutive columns that this property affects.

The COLGROUP element is allowed within these elements:

The element is allowed inside the following:


Example of COLGROUP



...

<TABLE BORDER=1 WIDTH=600>

<COLGROUP ALIGN=LEFT SPAN=2>

<COLGROUP ALIGN=RIGHT SPAN=2>

<TBODY>

<TR>

<TD>I am aligned on the left

<TD>I am aligned on the left

<TD>I am on the right

<TD>I am on the right

</TR>

<TR>

<TD>I am aligned on the left

<TD>I am aligned on the left

<TD>I am on the right

<TD>I am on the right

</TR>

</TABLE>

...

COMMENT


This element defines a comment. The text it contains is ignored unless it contains HTML code.
Syntax: <COMMENT>...</COMMENT>

The COMMENT element is allowed within these elements:

The element is allowed inside the following:


Example of COMMENT




<COMMENT>This is a comment</COMMENT>

If you really need comments, you may want to use SGML-style comments, which are supported by all browsers. SGML comments follow this syntax: <!-- comment -->. Any text inside the comment brackets won't print, and it can handle multiple lines of text between the tags: 


<!-- some comment

More comments

-->

DD (Definition)


The DD (definition) element is used to provide a definition for a DT (definition term) within a DL (definition list) element. The closing tag is optional.

Figure D.16. The DD element.
Syntax: <DD>...</DD>

The DD element is allowed within these elements:

The element is allowed inside the following:


Example of DD



<DL>

<DT>Tree<DD>Vegetable

<DT>Dog<DD>Animal

<DT>Diamond<DD>Expensive mineral

</DL>

DFN (Definition)


The DFN element renders its content as a definition. The DFN closing element is required.

Figure D.17. The DFN element.
Syntax: <DFN>...</DFN>

The DFN element is allowed within these elements:

The element is allowed inside the following:


Example of DFN




<P>Oxymoron: <DFN>"A combination of contradictory or incongruous words"</DFN>

DIR (Directory)


The DIR element specifies a directory list of items, each starting with a LI element and none containing more than 20 characters. The list should display in columns (current third generation browsers don't). Ending tag is required.

Figure D.18. The DIR element.
Syntax: <DIR><LI>...<LI>...<LI>......</DIR>

The DIR element is allowed within this element:

The element is allowed inside the following:


Example of DIR



<DIR>

<LI>UNO


<LI>DOS

<LI>TRES

<LI>CUATRO

<LI>CINCO

<LI>SEIS

<LI>SIETE

<LI>OCHO

<LI>NUEVE

<LI>DIEZ!

</DIR>

DIV (Division)


The DIV element is used to create divisions or groupings of related elements. The DIV element is intended to represent different kinds of containers (such as a chapter, section, abstract, or appendix) when used with the CLASS attribute. DIV allows the enclosed group of elements to be given a distinctive style. The closing tag is required.
Syntax: <DIV ALIGN=align-type CLASS=container-type>...</DIV>

Figure D.19. The DIV element.

Options include the following:
ALIGN=align-type Specifies the horizontal alignment of text.
align-type can be:

LEFT:
Text is placed flush to the left margin. This is the default value.

CENTER:
Text is placed center between the margins.

RIGHT:
Text is placed flush to the right margin.
CLASS=container-type Specifies the type of container.

container-type can be set to different kinds of containers, such as a chapter, section, abstract, or appendix.

The DIV element is allowed within these elements:

The element is allowed inside the following:


Example of DIV



<DIV>This is section ONE</DIV>

<DIV>This is section TWO</DIV>

DL (Definition List)


The DL element defines a definition list. A definition list is used to build two-column lists for terms and their corresponding definitions. The closing tag is required.
Syntax: <DL><DT>...<DD>...</DL>

Options include the following:
COMPACT This setting suggests that items in the list are rendered in a compact way, by using a smaller font size or by reducing the vertical spacing between items in the list whenever possible.

The DL element is allowed within these elements:

The element is allowed inside the following:


Example of DL



<DL>

<DT>Tree<DD>Vegetable

<DT>Dog<DD>Animal

<DT>Diamond<DD>Expensive mineral

</DL>

DT (Definition Term)


The DT element specifies a term within a definition list (DL) element. The closing tag is optional.
Syntax: <DT>...</DT>

The DT element is allowed within these elements:

The element is allowed inside the following:


Example of DT



<DL>

<DT>Tree<DD>Vegetable

<DT>Dog<DD>Animal

<DT>Diamond<DD>Expensive mineral

</DL>

EM (Emphasis)


The EM is used for text that should be rendered with emphasis; usually it is rendered in italics. The EM element doesn't have any attributes.

Figure D.20. The EM element.
Syntax: <EM>...</EM>

The EM element is allowed within these elements:

The element is allowed inside the following:


Example of EM



<H1><EM>This title is emphasized, and should be shown italized</EM></H1>

<EM>This text is emphasized, and should be shown italized</EM>

<P>

<STRONG><EM>This text is emphasized and strong,

and should be shown italized and strong</EM></STRONG>

EMBED


The EMBED element allows the insertion of arbitrary objects directly into an HTML page. Embedded objects obtain support via plug-ins and allow arbitrary attributes that plug-ins support. You should consider using the OBJECT element.
Syntax: <EMBED HEIGHT=n NAME=name OPTIONAL PARAM="value" PALETTE="option" SRC=url WIDTH=n>

Options for EMBED include the following:
HEIGHT=n Sets the height of the object in pixels.
NAME=name Sets the name of the object.
OPTIONAL PARAM=value Sets parameters sent to the object. You can have as many of these as you need.
PALETTE=foreground|background Sets the color palette for the foreground and background.
SRC=url Sets the URL of any data to be inputted into the object.
WIDTH=n Specifies the width of the object in pixels.

Example of EMBED



<EMBED WIDTH=300 HEIGHT=180 SRC="foo.wrl">

</EMBED>

FONT


The FONT element changes the font size and color.

Figure D.21. The FONT element.
Syntax: <FONT COLOR=color FACE=name SIZE=n>

Options for FONT include the following:
COLOR=color Specifies the color of the font. Colors are specified in the HEX, 00-FF for each component of the RGB channel in the following format: #RRGGBB
FACE=name Sets the font. A list of comma-separated fonts can be provided. The system will search for the first available match. If none are available, the default font is used.
SIZE=n Specifies the size of the font. Font size ranges from 1-7 inclusive, with 7 being the largest. Prefixing n with a + or - sign specifies a relative font size based on the base font (usually set to 3).

The FONT element is allowed within these elements:

The element is allowed inside the following:


Example of FONT



<FONT SIZE=7 FACE="Helvetica" COLOR=RED> Helvetica Size +7, Red</FONT>

<BR>

<FONT SIZE=6 FACE="Times" COLOR=BLUE> Times Size +6, Blue </FONT>

<BR>

<FONT SIZE=5 FACE="Times"> Times Size +5</FONT>

<BR>

<FONT SIZE=4 FACE="Times"> Times Size +4</FONT>

<BR>

<FONT SIZE=3 FACE="Times"> Times Size +3</FONT>

<BR>

<FONT SIZE=2 FACE="Times"> Times Size +2</FONT>

<BR>

<FONT SIZE=1 FACE="Times"> Times Size +1</FONT>

FORM


The FORM element is used to create fill-out forms. The browser will permit the user to enter data into the fields provided and will send the entered data to the CGI program specified in the URL by the ACTION option. Closing tags are required.

Figure D.22. The FORM element.
Syntax: <FORM ACTION=url ENCTYPE="application/x-www-form-urlencoded" METHOD=GET|POST TARGET=window>...</FORM>

Options for FORM include the following:
ACTION A URL that specifies the location to submit the contents.
ENCTYPE MIME-content type for encoding (application/x-www-form-urlencoded).
METHOD Specifies variations in the protocol to send form contents.

GET
Information is passed via an environment variable.

POST
Information is passed via the programs stdin.
TARGET=window Specifies that the target is loaded into the specified window. Possible values for window are

window: Specifies to load the link into the named window.

blank: Creates the frame in a new unnamed window.

self: Loads the frame in the parent window.

parent: Loads in the parent window.

top: Loads in the top window.

The FORM element is allowed within these elements:

The element is allowed inside the following:


Example of FORM



…

<FORM ACTION="http://localhost/cgi-bin/printenv" METHOD="GET">

<INPUT TYPE="text" NAME="name" SIZE=30>

<P>

<INPUT TYPE=checkbox NAME=foo> Foo

<BR>

<INPUT TYPE="submit" VALUE="Submit">

</FORM>

...

FRAME


The FRAME element defines a frame in a FRAMESET. The SRC attribute value is the URL of the document to be displayed inside the frame. If the SRC attribute is not specified, leave the frame blank.

Figure D.23. The FRAME element.
Syntax: <FRAME ALIGN=align-type FRAMEBORDER=0|1 MARGINHEIGHT=n MARGINWIDTH=n NAME=name SCROLLING=YES|NO SRC=url>

Options for FRAME include the following:
ALIGN=align-type Specifies the alignment of the frame with respect to the surrounding text. Possible values are

TOP: Places the top of the image at the text baseline.

MIDDLE: Centers the image on the text baseline.

BOTTOM: Places the bottom of the image at the text baseline.

LEFT: Image is aligned flush with the left margin.

RIGHT: Image is flush with the right margin.
FRAMEBORDER=0|1 Draws a tridimensional border. If 1, the default draws it. If 0, it doesn't display a border.
SCROLLING=YES|NO This attribute specifies whether a scrollbar will be provided for the frame. This attribute accepts three values: YES, NO, or AUTO. AUTO is the default value.
MARGINWIDTH=n Horizontal margin size in pixels.
MARGINHEIGHT=n Vertical margin size in pixels.
NAME=name The name attribute specifies a name for using as the destination of a hyperlink (similar to the A element). Netscape has reserved the following values for NAME:

blank: Creates the frame in a new unnamed window

self: Loads the frame in the parent window.

parent: Loads in the parent window.

top: Loads in the top window.
NORESIZE NORESIZE prevents the user from resizing the frame.
SRC=url This specifies the URL for the document that will be displayed inside the frame. If this value is not defined, the frame is left blank.

The FRAME element is allowed within these elements:

The element is allowed inside the following:


Example of FRAME



<FRAME SRC="frame2.html">

<FRAME SRC="frame3.html">

FRAMESET


The FRAMESET element takes the place of the BODY element. It hosts the FRAME, FRAMESET, and NOFRAME elements. FRAMESET is used in HTML documents whose purpose is to define the layout of a FRAME-based document—one that includes additional HTML documents into specified areas of a window. FRAMESETs are specified as a list of comma-separated values.
Syntax: <FRAMESET COLS=n FRAMEBORDER=1|0 FRAMESPACING=n ROWS=n>

Options for FRAMESET include the following:
ROWS=n Specifies the height of the FRAMESET.

Values are specified as integers with optional subfix modifiers:

A % specifies a percentage of the window size. Legal values are between 1-100.

A * specifies a multiplier of the width height.

A plain number (no subfix) specifies the size in pixels. This is the default setting.

A single * with no number specifies whatever is left of the window.
COLS=n Specifies the width of the FRAMESET.

Values are specified as integers with optional subfix modifiers:

A % specifies a percentage of the window size. Legal values are between 1-100.

A * specifies a multiplier of the width height.

A plain number (no subfix) specifies the size in pixels. This is the default setting.

A single * with no number specifies whatever is left of the window.
FRAMEBORDER=0|1 Draws a tridimensional border. If 1, the default draws it. If 0, displays no border.
FRAMESPACING=n Adds additional spacing (specified in pixels) between frames.

Example of FRAMESET



<FRAMESET ROWS=100%>

<NOFRAMES>

<BODY>

You don't have frames!

</BODY>

</NOFRAMES>

<FRAMESET COLS=25%,75%>

<FRAME SRC="frame1.html">

<FRAMESET ROWS=25%,75%>

<FRAME SRC="frame2.html">

<FRAME SRC="frame3.html">

</FRAMESET>

</FRAMESET>

</FRAMESET>

Hn (Heading)


The heading elements H1-H6 specify the size of a header in varying levels. The biggest header is H1, the smallest is H6, and all the others are in descending order between those two.

Figure D.24. H1 through H6 as rendered by Microsoft Internet Explorer.
Syntax: <Hn>...</Hn>

Options for Hn include the following:
n Is the heading size. Possible values are 1-6 with 1 being the largest heading size.
ALIGN=align-type This attribute specifies the horizontal alignment of the header. Possible values are

LEFT: Header is set flush with the left margin.

CENTER: Header is centered.

RIGHT: Header is set flush with the right margin.

The Hn element is allowed within these elements:

The element is allowed inside the following:


Example of Hn



<H1>Heading 1</H1>

<H2>Heading 2</H2>

<H3>Heading 3</H3>

<H4>Heading 4</H4>

<H5>Heading 5</H5>

<H6>Heading 6</H6>

HEAD


The HEAD element of an HTML document contains information about the document itself. None of the elements that legally belong on the HEADER section are displayed for the user. All displayed elements should appear in the BODY section. In addition to the following elements that are allowed within the HEAD, you can also use META tags. META tags provide additional information useful to indexing robots or to caching proxy servers.

The HEAD element is allowed within these elements:

The element is allowed inside the following:


Example of HEAD



<HEAD>

<TITLE="This is my document">

<META NAME="created" CONTENT="AUG, 12 Mon 1996 22:46:36 CST">

<META HTTP-EQUIV="Content-Language" CONTENT="en-us">

<META HTTP-EQUIV="Last-Modified" CONTENT="AUG, 12 Mon 1996 22:46:36 CST">

<BASE HREF="http://www.someaddress.com/ TARGET=_blank>

</HEAD>

HR (Horizontal Rule)


The HR element is used for drawing horizontal rules or lines. Horizontal rules can be used to visually divide sections.

Figure D.25. The HR element.
Syntax: <HR ALIGN=align-type COLOR=color NOSHADE SIZE=n WIDTH=n>

Options include the following:
ALIGN=align-type Specifies alignment of the rule. Allowed values are

LEFT: Rule is aligned to the left margin.

CENTER: Rule is centered.

RIGHT: Rule is aligned to the right margin.
COLOR=color Specifies the color of the base font. Colors are specified using hexadecimal notation for each component in the RGB channel in the following format: #RRGGBB, or by specifying one of the Microsoft Internet Explorer predefined colors: Aqua, Black, Blue, Fuchsia, Gray, Green, Lime, Maroon, Navy, Olive, Purple, Red, Silver, Teal, Yellow, White.
NOSHADE Specifies that no shading should be used on the rule and that it should be displayed as a plain line.
SIZE The thickness of the rule in pixels.
WIDTH The width of a rule. Allowed values are

number: width in pixels.

percentage (number%): Specifies width of the rule as a percentage of the width of the window.

The HR element is allowed within these elements:

The element is allowed inside the following:


Example of HR



WIDTH=50%<HR WIDTH=50%>

SIZE=15<HR SIZE=15>

COLOR=red<HR COLOR="#FF0000">

No Shading<HR NOSHADE>

HTML


The HTML element encloses an entire HTML document; they are the outermost elements and should not be nested inside any other element. While their specification is not required, it is considered good practice to do it.
Syntax: <HTML>...</HTML>

The HTML element is allowed within these elements:

The element is allowed inside the following:


Example



<HTML>

<HEAD>

<TITLE>This is HTML</TITLE>

</HEAD>

<BODY>

<H1>This is HTML</H1>

</BODY>

</HTML>

I (Italics)


The I element specifies that its contents are rendered in italics.

Figure D.26. The I element.
Syntax: <I>...</I>

The I element is allowed within these elements:

The element is allowed inside the following:


Example of I



<H2>Here is a normal header</H2>

<H2><I>Same header size, but italicized</I></H2>

Here is some normal text<BR>

<I>Here is some text with italics</I><BR>

IMG (Image)


The IMG element is used to insert inline graphics into an HTML document. The closing tag is optional.

Syntax: <IMG ALIGN=align-type ALT=text BORDER=n CONTROLS DYNSRC=url HEIGHT=n HSPACE=n ISMAP LOOP=n SRC=address START=start-event USEMAP=map-name VSPACE=n WIDTH=n>

Figure D.27. The IMG element.

Options include the following:
ALIGN=align-type Specifies the vertical alignment of the image with respect to the text line, possible values are

TOP: Places the top of the image at the text baseline.

MIDDLE: Centers the image on the text baseline.

BOTTOM: Places the bottom of the image at the text baseline.

LEFT: The image is aligned flush with the left margin and text flows around it.

RIGHT: The image is flush with the right margin and text flows around it.
ALT=text Specifies a description that will be displayed on nongraphical browsers or when pictures are turned off.
BORDER=n Specifies a border to be displayed around the image in pixels if the image is a hyperlink.
CONTROLS If the image is a video clip, a set of controls is displayed under the clip.
DYNSRC=url (Dynamic Source); Specifies the address of the video clip or Virtual Reality Modeling Language (VRML) world.
HEIGHT=n Specifies the height of the image in pixels. This value together with the width allows the browser to layout the page more quickly because it can reserve space for the image beforehand. If you specify a different size than the actual size of the image, the image is scaled to fit into the specified dimension.
HSPACE=n Specifies a horizontal margin or gutter that gets added to the picture in pixels. The n amount is split between the left and right sides of the image.
ISMAP Is used to identify the image as a server-side image map.
LOOP=n Specifies how many times the video clip will loop when the page is activated. If set to INFINITE or -1, the clip will loop forever.
SRC Specifies the URI of the image to be inserted.
START=start-event Starts playing the file specified by DYNSRC. start-event can be one of the following:

FILEOPEN: Starts playing as soon as the file is downloaded (default setting).

MOUSEOVER: Starts playing when the user moves the mouse over the animation.
USEMAP=map Specifies that the image is a client-side image map and specifies that map should be used for defining the hotspots. Maps are defined using the MAP element.
VSPACE Specifies a vertical margin or gutter in pixels around the image. It's split between the top and bottom sides of the image.
WIDTH Specifies the width of the image in pixels. This value, together with the height, allows the browser to lay out the page more quickly because it can reserve space for the image beforehand. If you specify a different size than the actual size of the image, the image is scaled to fit into the specified dimension.

The IMG element is allowed within these elements:

The element is allowed inside the following:


Example of IMG



<A HREF="http://localhost"><IMG SRC="websiteby.gif" WIDTH=156 HEIGHT=39

ALT="WBAL" BORDER=15 ALIGN=TOP></A> BORDER=15

Aligned to the top of the image.<BR CLEAR=ALL>

<P>

<IMG SRC="websiteby.gif" WIDTH=156 HEIGHT=39 ALT="WBAL" VSPACE=10 ALIGN= MIDDLE>

Vertical Spacing of 10, and aligned to the middle <BR CLEAR=ALL>

<P>

<IMG SRC="websiteby.gif" WIDTH=156 HSPACE=10 HEIGHT=39 ALT="WBAL" ALIGN=RIGHT>

Right aligned. Additional space provided by HSPACE.

Text flows around the image until it hits the BR CLEAR.<BR CLEAR=ALL>

<P>

<IMG SRC="websiteby.gif" WIDTH=312 HEIGHT=78 ALT="WBAL" ALIGN=BOTTOM>

Doubled in size and bottom aligned!<BR CLEAR=ALL>

INPUT


INPUT specifies a form control that the user can use to return values to a program on the server.

Figure D.28. The INPUT element.
Syntax: <FORM ALIGN=align-type [CHECKED] MAXLENGTH=n NAME=name SIZE=n SRC=url TYPE=type VALUE=value>

Options for INPUT include the following:
ALIGN=align-type Used when the TYPE is set to image. It specifies how the following line of text will be aligned with the image. Valid alignment types are

TOP: Text is aligned with the top of the image.

MIDDLE: Text is aligned with the center of the image.

BOTTOM: Text is aligned with the bottom of the image.
CHECKED Sets a check box or radio control to selected setting when the form is initially loaded.
MAXLENGTH=n Specifies the maximum number of characters that the input field will accept.
NAME=name Sets the name of the control.
SIZE=size Specifies the size of the control in characters.
SRC=url Specifies the URL for an image type control.
TYPE=type Specifies the type of control to use. It can be any of the following:

CHECKBOX: A simple control that allows ON or OFF relationships. The default setting is set to YES.

HIDDEN: The input field is hidden from the user; however, the contents of the field are returned to the server. Hidden fields can be used for passing values between your CGI and the browser without having them displayed in the browser window.

IMAGE: Sets the input field to be a graphic that when clicked submits the form. The coordinates where the user clicked are returned to the server with the upper-left corner of the image being the origin. Coordinates are returned as two values matching the name of the field with the coordinate designator ".x" or ".y" appended to it.

PASSWORD: Specifies a text field where the user can enter a password or other information that should not be echoed back in the form.

RADIO: A radio button allows the user to select one of several options. Each radio button part of a group should be named the same. Only the selected button will return a value, which should be explicitly set using the VALUE option.

RESET: A button that when activated will reset the contents of the form to their default settings. You can specify a different name for the RESET button using the VALUE option.

SUBMIT: A button that when activated will submit the contents of the form. You can rename the button with the VALUE option. If the NAME option is set, the SUBMIT button will contribute the value set in NAME to the submitted data.

TEXT: A single line text entry field. This is the default control type.
VALUE=value Sets the default value for text or numerical controls.

The INPUT element is allowed within these elements:

The element is allowed inside the following:


Example of INPUT



<FORM ACTION="http://www.accesslink.com/cgi-bin/envvar" METHOD="GET">

Name: <INPUT TYPE="text" NAME="name" SIZE=40>

Password: <INPUT TYPE="password" NAME="passwd" SIZE=30>

<HR>

Food:

<INPUT TYPE=radio NAME="food" VALUE="chicken"> Chicken

<INPUT TYPE=radio NAME="food" VALUE="fish"> Fish

<INPUT TYPE=radio NAME="food" VALUE="beef"> Beef

<INPUT TYPE=radio NAME="food" VALUE="vegies"> Vegan

<HR>

Equipment Compatibility:<BR>

<INPUT TYPE=checkbox NAME=equip VALUE="cd-rom">CD-ROM

<INPUT TYPE=checkbox NAME=equip VALUE="audio">Audio

<INPUT TYPE=checkbox NAME=equip VALUE="networking">Ethernet

<INPUT TYPE=checkbox NAME=equip VALUE="battery">DC

<HR>

Pick Your Ride:<BR>

<SELECT NAME="car" MULTIPLE>

<OPTION SELECTED VALUE="pacer"> Pacer

<OPTION VALUE="ferrari"> Ferrari

<OPTION VALUE="small convertible"> Small Vintage British Sports Cars

<OPTION VALUE="luxurious german sendan"> Mercedes Benz

</SELECT>

<P>

<INPUT TYPE="submit" VALUE="Deliver my Toys!">

</FORM>

ISINDEX


The ISINDEX element is a precursor of the FORM element. It informs the browser that the document is searchable. This element automatically generates an input field for the user.

Figure D.29. The ISINDEX element.
Syntax: <ISINDEX ACTION=url PROMPT=prompt>

Op