|
|
by Stephen Le Hunte
The vast range of HTML markup currently supported by available HTML user agents (Web browsers, such as Netscape, Mosaic, and so on) can be broadly divided into the following sections. Some elements described may not be supported by all browsers. Where an element is known to be supported by specific browsers, the element description will be labelled as such.
This appendix is divided into the following sections:
Document Structure Elements
Anchor Element
Block Formatting Elements
Character Data
Dynamic HTML Documents
Form Elements
Frames
Image Element
Information Type and Character Formatting Elements
List Elements
Table Elements
Table B.1 on the previous pages provides a list of these sections as well as all the tags described in each section. Page numbers are provided so you can find what you need quickly.
| Note |
Stephen Le Hunte (cmlehunt@swan.ac.uk), the author of this appendix, is an independent software developer and freelance technical author specializing in HTML and WinHelp. He is currently studying for his Ph.D. at the University of Wales Swansea. |
These elements are required within an HTML document. Apart from the prologue document identifier, they represent the only HTML elements that are explicitly required for a document to conform to the standard.
The essential document structure elements are
<HTML>...</HTML>
<HEAD>...</HEAD>
<BODY>...</BODY>
In order to identify a document as HTML, each HTML document should start with the prologue:
<!DOCTYPE HTML PUBLIC "-//IETF//DTD HTML 2.0//EN">
However, it is worth noting that if the document does not contain this type declaration, a browser should infer it. The above document identifier identifies the document as conforming to the HTML 2.0 DTD.
The <HTML> element identifies the document as containing HTML elements. It should immediately follow the prologue document identifier, and it serves to surround all of the remaining text, including all other elements. Browsers use the presence of this element at the start of an HTML document to ensure that the document is actually HTML, according to the text/html MIME type. The document should be constructed as follows:
<!DOCTYPE HTML PUBLIC "-//IETF//DTD HTML 2.0//EN"> <HTML> The rest of the document should be placed here. </HTML>
The HTML element is not visible upon browser rendering and can contain only the <HEAD> and <BODY> elements.
The <HEAD> element of an HTML document is used to provide information about the document. It requires the <TITLE> element between <HEAD> and </HEAD> tags:
<HEAD> <TITLE>Introduction to HTML</TITLE>
</HEAD>
The <HEAD> and </HEAD> tags do not directly affect the look of the document when rendered.
The following elements are related to the <HEAD>
element. Although they don't directly affect the look of the document
when rendered, you can use them to provide important information
to the browser. To do so, you employ the following elements, all
of which should be included within the <HTML>...</HTML>
tags.
| <BASE> | Allows the base address of HTML document to be specified |
| <ISINDEX> | Allows keyword searching of the document |
| <LINK> | Indicates relationships between documents |
| <META> | Specifies document information usable by server/clients |
| <NEXTID> | Creates unique document identifiers |
| <STYLE> | Specifies styles within the document when used by browsers that support use of style sheets |
| <TITLE> | Specifies the title of the document |
| Note |
The <TITLE> element is the only element described here that is required as part of the <HEAD> of an HTML document for conformance to any HTML standard. |
The body of an HTML document, as its name suggests, contains all the text and images that make up the page, together with all the HTML elements that provide the control and formatting of the page. The format is
<BODY> The rest of the document included here </BODY>
The <BODY>...</BODY> tags should be directly enclosed by the <HTML>...</HTML> tags.
The <BODY> and </BODY> tags themselves do not directly affect the look of the document when rendered, but they are required in order for the document to conform to the specification standard. Various attributes of the opening <BODY> tag can be used to set up various page-formatting settings.
The ability to specify background images and colors for HTML documents was first implemented by Netscape and has since been implemented by most other browsers. It should be noted that the following elements may not be supported by every browser.
Recent versions of the proposed HTML 3.2 specification have added a BACKGROUND attribute to the <BODY> element. The purpose of this attribute is to specify a URL pointing to an image that is to be used as a background for the document. In most browsers, this background image is used to tile the full background of the document-viewing area. Consider the following code:
<BODY BACKGROUND="imagename.gif"> Rest of the document goes here </BODY>
It would cause whatever text, images, and so on that appeared in the body of the document to be placed on a background consisting of the imagename.gif graphics file, being tiled to cover the viewing area (like bitmaps are used for Windows wallpaper). Most browsers that support this attribute allow the use of .gif and .JPG images for document backgrounds, whereas Internet Explorer supports those, plus Windows .BMP files.
The BGCOLOR attribute to BODY is not currently in the proposed HTML 3.2 specification, but is supported by Netscape, the Internet Explorer, ncSA Mosaic, and many other browsers, and is being considered for inclusion in HTML 3.2. It allows the setting of the color of the background without having to specify a separate image that requires another network access to load. The format is
<BODY BGCOLOR="#rrggbb"> Rest of document goes here </BODY>
where #rrggbb is a hexadecimal (base 16) red-green-blue triplet used to specify the background color.
Recently, browsers have begun allowing the use of special names to define certain colors. Appendix D, "Color Table," presents a list of all the color names recognized by popular browsers and also includes their corresponding hexadecimal triplet values.
Note that using color names is browser specific, so you have greater control over the displayed colors if you use the #rrggbb values instead.
If you change the background colors or patterns within a presentation, remember to verify that the foreground still looks good on the new background.
| Note |
Color Considerations Most graphical browsers allow the downloading of embedded images to be turned off to allow for faster downloading and display of the HTML document. If you turn off downloading for embedded images, background images will not be loaded or displayed. If this happens and no BGCOLOR attribute was specified, all of the foreground text and link-color attributes (TEXT, LINK, VLINK, and ALINK) will be ignored. This is so that documents are not rendered illegibly if the text color scheme authored for use over the set image clashes with the default browser background. |
In Internet Explorer, you can watermark HTML documents by fixing a background image so that it doesn't scroll as a normal background image does. To give a page with a background image a watermarked background, add BGPROPERTIES=FIXED to the <BODY> element as follows:
<BODY BACKGROUND="filename.gif" BGPROPERTIES=FIXED>
This Internet Explorer attribute allows you to set the left margin of the document. For example
<BODY LEFTMARGIN="40">This document is indented 40 pixels from the left-hand edge of the browser window</BODY>
If you set LEFTMARGIN to 0, the page will start at the very left-hand side of the page.
These link attributes allow you to control the color of link text. VLINK stands for visited link, and ALINK stands for active link (this sets the color that the link text will be for the time that it is clicked on). Generally, the default colors of these attributes are LINK=blue (#0000FF), VLINK=purple (#800080), and ALINK=red (#FF0000). The format for these attributes is the same as that for BGCOLOR and TEXT:
<BODY LINK="#rrggbb" VLINK="#rrggbb" ALINK="#rrggbb"> Rest of document goes here
</BODY>
You can also use color names rather than hexadecimal values for these attributes. See Appendix D for a complete list of color names and their hexadecimal values.
The TEXT attribute can be used to control the color of all the normal text in the document. This basically consists of all text that is not specially colored to indicate a link. The format of TEXT is the same as that of BGCOLOR:
<BODY TEXT="#rrggbb"> Rest of document goes here
</BODY>
You can also use color names rather than hexadecimal values for these attributes. See Appendix D for a complete list of color names and their hexadecimal values.
This Internet Explorer-specific attribute allows the top margin of the document to be set. For example,
<BODY TOPMARGIN="40">This document is indented 40 pixels from the top hand edge of the browser window</BODY>
If you set TOPMARGIN to 0, the page will start at the very top of the page.
The <BASE...> element allows you to set the URL of the document itself, to help browsers in situations where the document might be read out of context. It is especially useful in allowing browsers to determine any partial URLs or relative paths that might be specified (for example, in <A HREF> elements or in paths used to specify <IMG SRC=> (images)). The <BASE> element should appear within the bounds of the <HEAD> element only.
Where the base address is not specified, the browser uses the URL it used to access the document to resolve any relative URLs.
The <BASE> element has one standard attribute, HREF, that identifies the URL. The URL should be fully qualified as in this example:
<BASE HREF="http://www.myhost.com/">
This code specifies www.myhost.com to be the base from which all relative URLs should be determined.
Netscape (from version 2.0) and Internet Explorer (from version 3.0) add one other attribute to the <BASE> element. With the introduction of targeted windows, you can use the TARGET attribute as you use it in anchors (<A>). This allows you to pick a default-named target window for every link in a document that does not have an explicit TARGET attribute. Its format is
<BASE TARGET="default_target">
The <ISINDEX> element tells the browser that the document is an index document. As well as reading it, the reader can use a keyword search.
Readers can query the document with a keyword search by adding a question mark to the end of the document address, followed by a list of keywords separated by plus signs.
| Note |
The <ISINDEX> element is usually generated automatically by a server. If added manually to an HTML document, the browser assumes that the server can handle a search on the document. To use the <ISINDEX> element, the server must have a search engine that supports this element. |
Netscape provides the ACTION attribute for the <ISINDEX> element. When used in the <ISINDEX> element, it explicitly specifies the CGI script or program to which the text string in the input box should be passed. For example:
<ISINDEX ACTION="Websearch">
This code passes the text entered into the input box on the page to the CGI script Websearch.
| Note |
Websearch in the preceding example is a hypothetical CGI script. The ACTION attribute must point to a properly configured script on the host machine. |
Netscape provides the PROMPT attribute for the <ISINDEX> element. PROMPT allows you to specify text that should be placed before the text-input field of the index. The syntax is
<ISINDEX PROMPT="Any_text_string: ">
where Any_text_string is the text you want to be displayed before the input box.
The <LINK> element indicates a relationship between the document and some other object. A document may have any number of <LINK> elements.
The <LINK> element is empty (does not have a closing element), but takes the same attributes as the Anchor element. (For example REL, REV, METHODS, TITLE, HREF and so on.)
The <LINK> element would typically be used to provide pointers to related indexes, or glossaries. Links can also be used to indicate a static tree structure in which the document was authored by pointing to a parent, next, and previous document, for example.
Servers may also allow links to be added by those who do not have the right to alter the body of a document.
The <LINK> element represents one of the primary style sheet inclusion mechanism elements. It can be used to specify the location of the style sheet that is to be used for the document. For example:
<HTML> <HEAD> <TITLE>This HTML document uses a style sheet</TITLE> <LINK REL="stylesheet" TYPE="text/css" HREF="http://www.stylesheets.com/sheets/formal.css" TITLE="formal"> </HEAD> <BODY> Rest of the document goes here </BODY> </HTML>
In the preceding HTML fragment, the <LINK> element points to the file "formal.css" at the given URL. It tells the browser that:
| Note |
The above HTML fragment represents part of a "work in progress" specification of the W3C (World Wide Web Consortium). |
For more information about these specific attributes, see the <A> section, and for more general information about style sheets, see the style sheets section.
The <NEXTID> element, included in old HTML specifications, is not widely supported and its use is not recommended. Previously, it could be used to provide information about the name of new <A> elements when a document is being edited.
Every HTML document must have a <TITLE> element. As its name suggests, it is used to specify the title of the document in question. Unlike headings, titles are not typically rendered in the text of a document itself. Normally, browsers will render the text contained within the <TITLE>...</TITLE> elements in the title bar of the browser window.
The <TITLE> element must occur within the head of the document and may not contain anchors, paragraph elements, or highlighting. Only one title is allowed in a document.
| Note |
Although the length of the text specified in the <TITLE>...</TITLE> elements is unlimited, for display reasons, most browsers will truncate it. For this reason, title text should be kept short but should be enough to uniquely identify the document. For instance, a short title such as Introduction may be meaningless out of context, but if the title were An Introduction to HTML Elements, then it would be obvious what the document is about. |
This is the only element that is required within the <Head> element.
<HEAD> <TITLE>Welcome to the HTML Reference</TITLE>
</HEAD>
The <META> element is used within the <Head> element to embed document meta-information not defined by other HTML elements. Such information can be extracted by servers/clients for use in identifying, indexing, and cataloguing specialized document meta-information.
Although it is generally preferable to use named elements that have well-defined semantics for each type of meta-information, such as title, this element is provided for situations where strict SGML parsing is necessary and the local DTD is not extensible.
In addition, HTTP servers can read the content of the document head to generate response headers corresponding to any elements defining a value for the attribute HTTP-EQUIV. This provides document authors a mechanism (not necessarily the preferred one) for identifying information that should be included in the response headers for an HTTP request.
Attributes of the <META> element are listed in the following sections.
The meta-information content to be associated with the given name and/or HTTP response header.
If the document contains
<META HTTP-EQUIV="Expires" CONTENT="Sat, 06 Jan 1990 00:00:01 GMT"> <META HTTP-EQUIV="From" CONTENT="nick@htmlib.com">
<META HTTP-EQUIV="Reply-to" CONTENT="stephen@htmlib.com"
then the HTTP response header would be
Expires: Sat, 06 Jan 1990 00:00:01 GMT From: nick@htmlib.com Reply-to: stephen@htmlib.com
Commonly, HTML documents can be seen to contain a listing of repeated terms. Some Web search/indexing engines use the "Keywords" information generated either from the server, or from those specified in <META HTTP-EQUIV="Keywords" CONTENT="..."> markup to determine the content of the specified document and to calculate their "relevance rating" (how relevant the document is to the specific search string) for the search results.
When the HTTP-EQUIV attribute is not present, the server should not generate an HTTP response header for this meta-information. For example,
<META NAME="IndexType" CONTENT="Service">
Do not use the <META> element to define information that should be associated with an existing HTML element.
The following is an inappropriate use of the <META> element
<META NAME="Title" CONTENT="Welcome to the HTML Reference">
Do not name an HTTP-EQUIV equal to a responsive header that should typically only be generated by the HTTP server. Some inappropriate names are "Server," "Date," and "Last-modified." Whether a name is inappropriate depends on the particular server implementation. It is recommended that servers ignore any <META> elements that specify HTTP-equivalents equal (case-insensitively) to their own reserved response headers.
The <META> element is particularly useful for constructing Dynamic documents via the Client Pull mechanism. This uses the following syntax:
<META HTTP-EQUIV="Refresh" CONTENT="x">
which causes the browser to believe that the HTTP response when the document was retrieved from the server included the following header:
Refresh: x
and causes the document to be re-loaded in x seconds.
| Note |
In the preceding example, where the document refreshes, loading itself, the browser will infinitely reload the same document over and over. The only way out of this situation would be for the user to either activate some hyperlink on the page, loading a different document, or to press the "Back" button to reload a previous document. |
This can be useful to provide automatic redirection of browsers. For instance, if the element was
<META HTTP-EQUIV="Refresh" CONTENT="2; URL=http://some.site.com/otherfile.html">
then the Refresh directive would cause the file at http://some.site.com/otherfile.html to be loaded after 2 seconds. Although this generally works if the URL specified is partial, you should use a fully qualified URL to ensure its proper functioning.
This attribute binds the element to an HTTP response header. If the semantics of the HTTP response header named by this attribute is known, then the contents can be processed based on a well-defined syntactic mapping whether or not the DTD includes anything about it. HTTP header names are not case-sensitive. 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.
Meta-information name. If the name attribute is not present, then name can be assumed equal to the value HTTP-EQUIV.
The Anchor text is probably the single most useful HTML element. It is the element that is used to denote hyperlinks-the entire essence of HTML as a hypertext application.
Anchor elements are defined by the <A> element. The <A> element accepts several attributes, but either the NAME or HREF attribute is required.
Attributes of the <A> element are decribed in the following sections.
If the HREF (Abbreviated from Hypertext REFerence) attribute is present, the text between the opening and closing anchor elements becomes a hypertext link. If this hypertext is selected by readers, they are moved to another document, or to a different location in the current document, whose network address is defined by the value of the HREF attribute. Typically, hyperlinks specified using this element would be rendered in underlined blue text, unless the LINK attribute of the <BODY> element has been specified.
See <A HREF="http://www.htmlib.com/">HTMLib</A> for more information about the HTML Reference.
In this example, selecting the text "HTMLib"
takes the reader to a document located at
http://www.htmlib.com.
With the HREF attribute, the form HREF="#identifier" can refer to another anchor in the same document, or to a fragment of another document, that has been specified using the NAME attribute (see below).
The <A HREF="document.html#pre"><PRE></A> provides details about the preformatted text element.
In this example, selecting "<PRE>"
(< and >
are character data elements and render as <
and >, respectively. In
this case they are used so that <PRE>
is actually rendered on the screen, (so that the browser doesn't
think that the following text is preformatted text). Selecting
the link takes the reader to another anchor (that is, <A
NAME="pre"><PRE></A>)
in a different document (document.html).
The NAME attribute is described
below. If the anchor is in another document, the HREF
attribute may be relative to the document's address or the specified
base address, or can be a fully qualified URL.
| <A HREF="http://..."> | Makes a link to another document located on a World Wide Web server. |
| <A HREF="ftp://..."> | Makes a link to an FTP site. Within an HTML document, normally a connection to an anonymous FTP site would be made. Some browsers, however, allow connections to private FTP sites. In this case, the anchor should take the form ftp://lehunte@htmlib.com and the browser would then prompt the user for a password for entry to the site. |
| <A HREF="gopher://...> | Makes a link to a Gopher server. |
| <A HREF="mailto:..."> | Activating such a link would bring up the browsers mailing dialogue box (providing it has mailing capabilities; otherwise, whatever default e-mail software is installed on the system should be activated) allowing the user to send mail
messages to the author of the document, or whoever's address is specified in the mailto attribute. ncSA Mosaic supports use of the TITLE attribute for the anchor element when used with mailto: links. It allows the author to
specify the subject of the mail message that will be sent. Netscape allows specification of the subject line by using the following syntax:
<A HREF="mailto:lehunte@htmlib.com? subject=The HTML Reference is fantastic"> link text</A> |
| <A HREF="news:..."> | Makes a link to a Usenet newsgroup. Care should be taken in using such links because the author cannot know what newsgroups are carried by the local news server of the user. |
| <A HREF="newsrc:..."> | Makes a link to a specific newsrc file. The newsrc file is used by Usenet news reading software to determine what groups, carried by the news server, the reader subscribes to. |
| <A HREF="nntp://..."> | Can be used to specify a different news server to that which the user may normally use. |
| <A HREF="telnet://..."> | Activating such a link would initiate a Telnet session (using an external application) to the machine specified after the telnet:// label. |
| <A HREF="wais://..."> | Makes a link that connects to a specified WAIS index server. |
The METHODS attributes of anchors and links provide information about the functions that the user may perform on an object. These are more accurately given by the HTTP protocol when it is used, but it may, for similar reasons as for the TITLE attribute, be useful to include the information in advance in the link. For example, the browser may choose a different rendering as a function of the methods allowed; for example, something that is searchable may get a different icon or link text display method.
The value of the METHODS attribute is a comma-separated list of HTTP methods supported by the object for public use.
If present, the NAME attribute allows the anchor to be the target of a link. The value of the NAME attribute is an identifier for the anchor, which may be any arbitrary string but must be unique within the HTML document.
<A NAME="pre"><PRE></A> gives information about...
Another document can then make a reference explicitly to this anchor by putting the identifier after the address, separated by a hash sign as follows:
<A HREF="document.html#pre">
The REL attribute gives the relationship(s) described by the hypertext link from the anchor to the target. The value is a comma-separated list of relationship values, which will have been registered by the HTML registration authority. The REL attribute is only used when the HREF attribute is present.
The REV attribute is the same as the REL attribute, but the semantics of the link type are in the reverse direction. A link from A to B with REL="X" expresses the same relationship as a link from B to A with REV="X". An anchor may have both REL and REV attributes.
TARGET
With the advent of Frame page formatting, browser windows can now have names associated with them. Links in any window can refer to another window by name. When you click on the link, the document you asked for will appear in that named window. If the window is not already open, Netscape will open and name a new window for you.
The syntax for the targeted windows is
<A HREF="download.html" TARGET="reference">Download information</A>
This would load the document download.html in the frame that has been designated as having the name reference. If no frame has this name, then Netscape will open a new browser window to display the document in.
| Note |
The use of targeted browser windows is supported by those browsers that currently support the use of <FRAME> page layout (Netscape and Internet Explorer). If the targetted document is part of a frameset, there are various reserved names that can be used to allow smooth window transition. For more information, see <FRAMES>. |
The TITLE attribute is informational only. If present, the TITLE attribute should provide the title of the document whose address is given by the HREF attribute.
This may be useful as it allows the browser to display the title of the document being loaded as retrieval starts-providing information before the new document can be viewed. It is up to individual browsers to specify how they display the title information, but usually, it is displayed in the title bar at the top of the browser window. Some documents (such as gopher or ftp directory listings) do not themselves contain title information within the document. The TITLE attribute can be used to provide a title to such documents. As mentioned earlier, Mosaic supports use of the TITLE attribute to specify the subject of a mail message sent when the user activates a <A HREF="mailto:..."> link.
If present, the URN attribute specifies a uniform resource name (URN) for a target document. The precise specification for URNs has not yet been defined and so its use is not recommended.
Block formatting elements are used for the formatting of whole blocks of text within an HTML document, rather than single characters. They should all (if present) be within the body of the document (that is, within the <BODY>...</BODY> elements).
The essential block formatting elements are
| <ADDRESS>...</ADDRESS> | Format an address section |
| <BASEFONT SIZE=...> | Specifying the default font size for the document |
| <BLOCKQUOTE>...</BLOCKQUOTE> | To quote text from another source |
| <BR> | Force a line break |
| <CENTER>...</CENTER> | Centering text on the page |
| <COMMENT>...</COMMENT> | To enclose text as a comment |
| <DFN>...</DFN> | Defining Instance |
| <DIV>...</DIV> | Allow centering, or left/right justification of text |
| <FONT ...>...</FONT> | Setting/changing the font size, color, and type |
| <HR> | Renders a sizeable hard line on the page |
| <Hx>...</Hx> | Format six levels of heading |
| <LISTING>...</LISTING> | Text formatting |
| <MARQUEE> | Highlighted scrolling text |
| <NOBR> | Specifying that words aren't to be broken |
| <P>...</P> | Specify what text constitutes a paragraph and its alignment |
| <PLAINTEXT> | For text formatting |
| <PRE>...</PRE> | Use text already formatted |
| <WBR> | Specifying that a word is to be broken if necessary |
| <XMP>...</XMP> | Text formatting |
As its name suggests, the <ADDRESS>...</ADDRESS> element can be used to denote information such as addresses, authorship credits, and so on.
Typically, an address is rendered in an italic typeface and may be indented, though the actual implementation is at the discretion of the browser. The <ADDRESS> element implies a paragraph break before and after, as shown in the following:
<ADDRESS> Mr. Cosmic Kumquat<BR> SSL Trusters Inc.<BR> 1234 Squeamish Ossifrage Road<BR> Anywhere<BR> NY 12345<BR> U.S.A. </ADDRESS>
This changes the size of the <BASEFONT> that all relative <FONT SIZE=+...> changes are based on. It defaults to 3, and has a valid range of 1-7.
<BASEFONT SIZE=5>
This attribute allows changing of the face of the HTML document <BASEFONT> exactly as it works for <FONT FACE= ...>.
| Note |
This attribute is Internet Explorer specific. |
This allows the <BASEFONT> color for the HTML document to be set (as such it is similar to the TEXT attribute of the <BODY> element). Colors can either be set by using one of the reserved color names or as a hex rrggbb triplet value.
| Note |
The <BASEFONT SIZE=...> element is supported only by Netscape and the Internet Explorer, with the ...FACE and ...COLOR attributes being Internet Explorer specific. This kind of presentation markup can also be specified within a style sheet. |
The <BLOCKQUOTE> element can be used to contain text quoted from another source.
Typically, <BLOCKQUOTE> rendering would be a slight extra left and right indent, and possibly rendered in an italic font. The <BLOCKQUOTE> element causes a paragraph break, and provides space above and below the quote.
In "Hard Drive", a former Microsoft project manager has said, <BLOCKQUOTE> "Imagine an extremely smart, billionaire genius who is 14 years old and subject to temper tantrums" </BLOCKQUOTE>
The line break element specifies that a new line must be started at the given point. The amount of line space used is dependent on the particular browser, but is generally the same as it would use when wrapping a paragraph of text over multiple lines.
| Note |
Some browsers may collapse repeated <BR> elements, to render as if only one had been inserted. <P> |
With the addition of floating images (that is, the ability to align an embedded image to the left or right of the browser display window, allowing text flow around the image) it became necessary to expand the <BR> element. Normal <BR> still just inserts a line break. A CLEAR attribute was added to <BR>, so:
The CLEAR attribute (as well as floating images) are currently only supported by Netscape and the Internet Explorer.
All lines of text between the begin and end of the <CENTER> element are centered between the current left and right margins. This element was introduced by the Netscape authors because it was claimed that using <P ALIGN=CENTER> "broke" existing browsers when the <P> element was used as a container (that is, with a closing </P> element).
The element is used as shown below and any block of text (including any other HTML elements) can be enclosed between the centering elements.
<CENTER>All this text would be centered in the page</CENTER>
| Note |
Most browsers will internally work around this element to produce the desired format, but it is an element introduced by Netscape authors. |
The <COMMENT> element can be used to "comment" out text. As such, it is similar to the <!-- ... --> element.
Any text placed between the <COMMENT> and </COMMENT> elements will not render on the screen, allowing comments to be placed in HTML documents. For example,
<COMMENT>This text won't render. I can say what I like here, it won't appear </COMMENT>
would not render on the screen.
| Note |
This element is only supported by Internet Explorer and Mosaic. |
Use of the <DFN> element is currently only supported by Internet Explorer.
The <DFN> element can be used to mark the Defining Instance of a term. For example, the first time some text is mentioned in a paragraph.
Typically, it will render italicized; for example,
<DFN>Internet Explorer</DFN> is Microsoft's Web browser.
would render as
Internet Explorer is Microsoft's Web browser.
| Note |
Use of the <DIV> element is currently only supported by Netscape (after version 2.0). |
The <DIV> element, as described in the HTML 3.2 specification, should be used with a CLASS attribute, to name a section of text as being of a certain style as specified in a style sheet. Netscape has implemented the DIV element to work as the <P ALIGN= ...> element. Essentially, text surrounded by the <DIV>...</DIV> elements will be formatted according to the description attached to the ALIGN attribute within the <DIV> elements. For example:
<DIV ALIGN="left">This text will be displayed left aligned in the browser window.</DIV> <DIV ALIGN="center">This text will be centered.</DIV> <DIV ALIGN="right">This text will be displayed aligned to the right of the browser window.</DIV>
Netscape 1.0 (and above) and Microsoft's Internet Explorer support different sized fonts within HTML documents. This should be distinguished from Headings.
The element is <FONT SIZE=value>. Valid values range from 1-7. The default FONT size is 3. The value given to size can optionally have a + or - character in front of it to specify that it is relative to the document <BASEFONT>. The default <BASEFONT SIZE= ...> is 3, and is specified with the <BASEFONT SIZE ...> element.
<FONT SIZE=4>changes the font size to 4</FONT> <FONT SIZE=+2>changes the font size to BASEFONT SIZE ... + 2</FONT>
| Note |
The <FONT SIZE=...> element is currently only supported by Netscape and Internet Explorer. |
Microsoft's Internet Explorer supports the ability to change the font color as well as face type. It adds COLOR and FACE attributes to the <FONT> element. Netscape will support the use of the COLOR attribute only.
The color attribute sets the color for the text that will appear on the screen. #rrggbb is a hexadecimal color denoting an RGB color value. Alternately, the color can be set to one of the available predefined colors (see Table B.1). These color names can be used for the BGCOLOR, TEXT, LINK, ALINK, and VLINK attributes of the <BODY> tag as well.
<FONT COLOR="#ff0000">This text is red.</FONT>
or
<FONT COLOR="Red">This text is also red.</FONT>
| Note |
The use of names for coloring text is currently only supported by the Microsoft Internet Explorer and Netscape. Also, it should be noted that HTML attributes of this kind (that format the presentation of the content) can also be controlled via the use of style sheets. |
The FACE attribute sets the typeface that will be used to display the text on the screen. The typeface displayed must already be installed on the user's computer. Substitute typefaces can be specified in case the chosen type face is not installed on the user's computer. If no exact font match can be found, the text will be displayed in the default type that the browser uses for displaying normal text.
<FONT FACE="Courier New, Comic Sans MS"> This text will be displayed in either Courier New, or Comic Sans MS, depending on which fonts are installed on the browsers system. It will use the default 'normal' font if neither are installed. </FONT>
| Note |
When using this element, care should be taken to try to use font types that will be installed on the user's computer if you want the text to appear as desired. Changing the font face is Internet Explorer specific and can also be set within a style sheet. |
A Horizontal Rule element is a divider between sections of text such as a full-width horizontal rule or equivalent graphic.
<HR> <ADDRESS>April 12, 1996, Swansea</ADDRESS>
</BODY>
The <HR> element specifies that a horizontal rule of some sort (the default being a shaded engraved line) be drawn across the page. It is possible to control the format of the horizontal rule.
Because horizontal rules do not have to be the width of the page, it is necessary to allow the alignment of the rule to be specified. Using the above values, rules can be set to display centered, left-aligned, or right-aligned.
Internet Explorer allows the specifying of the hard rule color. Accepted values are any of the Internet Explorer supported color names, or any acceptable rrggbb hex triplet.
For those times when a solid bar is required, the NOSHADE attribute lets the author specify that the horizontal rule should not be shaded at all.
The SIZE attribute lets the author give an indication of how thick they wish the horizontal rule to be. The number value specifies how thick the rule will be, in pixels.
The default horizontal rule is always as wide as the page. With the WIDTH attribute, the author can specify an exact width in pixels, or a relative width measured in percent of the browser display window.
HTML defines six levels of heading. A Heading element implies all the font changes, paragraph breaks before and after, and white space necessary to render the heading.
The highest level of headings is <H1>, followed by <H2>...<H6>.
Example of use:
<H1>This is a first level heading heading</H1> Here is some normal paragraph text <H2>This is a second level heading</H2> Here is some more normal paragraph text.
The rendering of headings is determined by the browser, but typical
renderings (as defined in the HTML 2.0 specification) are
| <H1>...</H1> | Bold, very large font, centered. One or two blank lines above and below. |
| <H2>...</H2> | Bold, large font, flush-left. One or two blank lines above and below. |
| <H3>...</H3> | Italic, large font, slightly indented from the left margin. One or two blank lines above and below. |
| <H4>...</H4> | Bold, normal font, indented more than H3. One blank line above and below. |
| <H5>...</H5> | Italic, normal font, indented as H4. One blank line above. |
| <H6>...</H6> | Bold, indented same as normal text, more than H5. One blank line above. |
| Note |
Heading alignments described above can be overriden by the use of <CENTER> elements, or by ALIGNing the heading (see below). |
Although heading levels can be skipped (for example, from H1 to H3), this practice is not recommended as skipping heading levels may produce unpredictable results when generating other representations from HTML. For example, much talked about automatic contents/index generation scripts could use heading settings to generate contents "trees" where <H2> would be considered to label the start of a section that is a sub-section of a section denoted by a <H1> element and so on.
Included in the HTML 3.2 specification is the ability to align Headings.
ALIGN=left|center|right can be added to the <H1> through to <H6> elements. For example,
<H1 ALIGN=center>This is a centered heading</H1>
would align a heading of style 1 in the center of the page.
| Note |
This element is currently only supported by Mosaic and Netscape. The Internet Explorer supports only the center value, centering the heading. |
The <LISTING> element can be used to presents blocks of text in fixed-width font, and so is suitable for text that has been formatted on screen. As such, it is similar to the <PRE> and <XMP> elements, but has a different syntax.
Typically, it will render as fixed width font with white space separating it from other text. It should be rendered such that 132 characters fit on the line.
| Note |
Only Netscape actually complies with this. |
The following
Some might say<LISTING>that two heads</LISTING>are better than one
would render as
Some might say that two heads are better than one.
| Note |
The Internet Explorer and Netscape will translate any special characters included within <LISTING> elements. That is, if characters such as <, >, are used, they will be translated to < and >. Mosaic treats the text contained within the elements literally. |
| Note |
This element is currently only supported by Microsoft Internet Explorer. |
The <MARQUEE> element allows the author to create a region of text that can be made to scroll across the screen (much like the Windows Marquee screen saver):
<MARQUEE>This text will scroll from left to right slowly</MARQUEE>
This attribute can be set to TOP, MIDDLE, or BOTTOM and specifies that the text around the marquee should align with the top, middle, or bottom of the marquee.
<MARQUEE ALIGN=TOP>Hello in browser land.</MARQUEE>Welcome to this page
The text "Welcome to this page'" would be aligned with the top of the Marquee (which scrolls the text "Hello in browser land" across the screen).
| Note |
Until the Marquee width is limited by setting the WIDTH attribute, the Marquee will occupy the whole width of the browser window and any following text will be rendered below the Marquee. |
This can be set to SCROLL, SLIDE, or ALTERNATE. It specifies how the text displayed in the Marquee should behave. SCROLL (the default) makes the Marquee test start completely off one side of the browser window, scroll all the way across and completely off the opposite side, then start again. SLIDE causes the text to scroll in from one side of the browser window, then stick at the end of its scroll cycle. ALTERNATE means bounce back and forth within the marquee.
<MARQUEE BEHAVIOR=ALTERNATE>This marquee will "bounce" across the screen</ MARQUEE>
This specifies a background color for the marquee, either as an rrggbb hex triplet or as one of the reserved color names. (See <BODY BGCOLOR> for more information.)
This specifies in which direction the <MARQUEE> text should scroll. The default is LEFT, which means that the text will scroll to the left from the right-hand side of the <MARQUEE>. This attribute can also be set to RIGHT, which would cause the marquee to scroll from the left to the right.
This specifies the height of the marquee, either in pixels (HEIGHT=n) or as a percentage of the screen height (HEIGHT=n%).
This attribute is the same as that for <IMG> (images). It is used to specify the number of pixels of free space at the left- and right-hand sides of the <MARQUEE> so that the text that flows around it doesn't push up against the sides.
LOOP=n specifies how many times a marquee will loop when activated. If n=-1, or LOOP=INFINITE is specified, the marquee action will loop indefinitely.
| Note |
If text is enclosed in a <MARQUEE>...</MARQUEE> element set, then it defaults to an infinite loop action. |
Specifies the number of pixels between each successive draw of the marquee text. That is, the amount for the text to move between each draw.
SCROLLDELAY specifies the number of milliseconds between each successive draw of the marquee text. That is, it controls the speed at which text draw takes place.
<MARQUEE SCROLLDELAY=1 SCROLLAMOUNT=75>Hello.</MARQUEE>
This marquee would be extremely fast.
This attribute is the same as that for <IMG> (images). It is used to specify the number of pixels of free space at the top and bottom edges of the <MARQUEE> so that the text that flows around it doesn't push up against the sides.
| Note |
If you wish to set the <FONT> to be displayed in the <MARQUEE>, then the <MARQUEE> definition should be enclosed inside the <MARQUEE>. <FONT FACE="Comic Sans MS"><MARQUEE>Hello!</MARQUEE></FONT> |
This specifies the width of the marquee, either in pixels (WIDTH=n) or as a percentage of the screen height (WIDTH=n%).
The <NOBR> element stands for NO BReak. This means all the text between the start and end of the <NOBR> elements cannot have line breaks inserted. Although <NOBR> may be essential for those character sequences that don't want to be broken, it should be used carefully; long text strings inside of <NOBR> elements can look rather odd, especially if during viewing, the user adjusts the page size by altering the window size.
| Note |
The <NOBR> element is supported only by Netscape and Internet Explorer. |
The paragraph element indicates a paragraph of text. No specification has ever attempted to define exactly the indentation of paragraph blocks and this may be a function of other elements, style sheets, and so on.
Typically, paragraphs should be surrounded by a vertical space of between one and one and a half lines. With some browsers, the first line in a paragraph may be indented.
<H1>The Paragraph element</H1> <P>The paragraph element is used to denote paragraph blocks</P>.
<P>This would be the second paragraph.</P>
Included in the HTML 3.2 specification is the ability to align paragraphs.
Basically, the ALIGN=left|center|right attribute and values have been added to the <P> element.
<P ALIGN=LEFT> ... </P>
All text with in the paragraph will be aligned to the left side of the page layout. This setting is equal to the default <P> element.
<P ALIGN=CENTER> ... </P>
All text within the paragraph will be aligned to the center of
the page. (See also <CENTER>...
</CENTER>.)
<P ALIGN=RIGHT> ... </P>
All text will be aligned to the right side of the page.
| Note |
Internet Explorer supports only the use of the left and center values, while Mosaic and Netscape support the use of all three values. |
The <PLAINTEXT> element can be used to represent formatted text. As such, it is similar to the <XMP> and <LISTING> element. However, the <PLAINTEXT> element should be an open element, with no closing element. Only Netscape supports this element according to any HTML specification. Internet Explorer and Mosaic will both allow the use of a </PLAINTEXT> closing element. Netscape will treat the closing element literally and display it.
Typically, it will render as fixed width font with white space separating it from other text.
I live<PLAINTEXT>in the rainiest part of the world.
would render as
I live in the rainiest part of the world.
As said above, anything following the opening <PLAINTEXT> element should be treated as text. Only Netscape behaves like this. Internet Explorer and Mosaic will allow the use of a closing </PLAINTEXT> element, allowing discrete blocks of <PLAINTEXT> formatted text to be displayed.
The Preformatted Text element presents blocks of text in fixed-width font, and so is suitable for text that has been formatted on screen, or formatted for a mono-spaced font.
The <PRE> element may be used with the optional WIDTH attribute, which is an HTML Level 1 feature. The WIDTH attribute specifies the maximum number of characters for a line and allows the browser to determine which of its available fonts to use and how to indent the text (if at all). If the WIDTH attribute is not present, a width of 80 characters is assumed. Where the WIDTH attribute is supported, widths of 40, 80 and 132 characters should be presented optimally, with other widths being rounded up.
Within preformatted text, any line breaks within the text are rendered as a move to the beginning of the next line. The <P> element should not be used, but if it is found, it should be rendered as a move to the beginning of the next line. It is possible to use Anchor elements and character highlighting elements are allowed. Elements that define paragraph formatting (headings, address, and so on) must not be used. The horizontal tab character (encoded in US-ASCII and ISO-8859-1 as decimal 9) represents a special formatting case. It should be interpreted as the smallest positive nonzero number of spaces which will leave the number of characters so far on the line as a multiple of 8. (However, despite being allowed, its use is not recommended.)
| Note |
It is at the discretion of individual browsers how to render preformatted text, and where "beginning of a new line" is to be implied, the browser can render that new line indented if it sees fit. |
Example of use:
<PRE WIDTH="80"> This is an example of preformatted text. </PRE>
| Note |
Within a preformatted text element, the constraint that the rendering must be on a fixed horizontal character pitch may limit or prevent the ability of the browser to render highlighting elements specially. |
The <WBR> element stands for Word BReak. This is for the very rare case when a <NOBR> section requires an exact break. Also, it can be used any time the browser can be helped by telling it where a word is allowed to be broken. The <WBR> element does not force a line break (<BR> does that); it simply lets the browser know where a line break is allowed to be inserted if needed.
| Note |
<WBR> is supported only by Netscape and the Internet Explorer. |
The <XMP> element can be used to presents blocks of text in fixed-width font, and so is suitable for text that has been formatted on screen. As such, it is similar to the <PRE> and <LISTING> elements, but has a different syntax.
Typically, it will render as fixed-width font with white space separating it from other text. It should be rendered such that 80 characters fit on the line. For example,
The <XMP>Netscape Navigator</XMP>supports colored tables.
would render as:
The Netscape Navigator doesn't support colored tables.
| Note |
The Internet Explorer will translate any special characters included within <XMP> elements. That is, if characters such as <, > and so on are used, they will be translated to < and >. Netscape and Mosaic treat the text contained within the elements literally. |
Within an HTML document, any characters between the HTML elements represent text. An HTML document (including elements and text) is encoded by means of a special character set described by the charset parameter as specified in the text/html MIME type. Essentially, this is restricted to a character set known as US-ASCII (or ISO-8859-1), which encodes the set of characters known as Latin Alphabet No. 1 (commonly abbreviated to Latin-1). This covers the characters from most Western European Languages. It also covers 25 control characters, a soft hyphen indicator, 93 graphical characters and 8 unassigned characters.
It should be noted that non-breaking space and soft hyphen indicator characters are not recognized and interpreted by all browsers, and due to this, their use is discouraged.
There are 58 character positions occupied by control characters. See Control Characters for details on the interpretation of control characters.
Because certain special characters are subject to interpretation and special processing, information providers and browser implementors should follow the guidelines in the Special Characters section.
In addition, HTML provides character entity references and numerical character references to facilitate the entry and interpretation of characters by name and by numerical position.
Because certain characters will be interpreted as markup, they must be represented by entity references as described in character and/or numerical references.
Many of the Latin-1 set of printing characters may be represented within the text of an HTML document by a character entity.
The reasons why it may be beneficial to use character entity references instead of directly typing the required characters are as described in the numerical entity references. That is, character entity references compensate for keyboards that don't contain the required characters (such as characters common in many European languages) and where the characters may be recognised as SGML coding.
A character entity is represented in an HTML document as an SGML entity whose name is defined in the HTML DTD. The HTML DTD includes a character entity for each of the SGML markup characters and for each of the printing characters in the upper half of Latin-1, so that one may reference them by name if it is inconvenient to enter them directly:
the ampersand (&), double quotes ("), lesser (<) and greater (>) characters
Kurt Gödel was a famous logician and mathematician.
| Note |
To ensure that a string of characters is not interpreted as markup, represent all occurrences of <, >, and & by character or entity references. |
Table B.3 contains the possible numeric and character entities for the ISO-Latin-1 (ISO8859-1) character set. Where possible, the character is shown.
| Note |
Not all browsers can display all characters, and some browsers may even display characters different from those that appear in the table. Newer browsers seem to have a better track record for handling character entities, but be sure to test your HTML files extensively with multiple browsers if you intend to use these entities. |
| Description | ||||
| Unused | ||||
| Horizontal tab | ||||
| Line feed | ||||
| Unused | ||||
| Space | ||||
| Exclamation mark | ||||
| Quotation mark | ||||
| Number sign | ||||
| Dollar sign | ||||
| Percent sign | ||||
| Ampersand | ||||
| Apostrophe | ||||
| Left parenthesis | ||||
| Right parenthesis | ||||
| Asterisk | ||||
| Plus sign | ||||
| Comma | ||||
| Hyphen | ||||
| Period (fullstop) | ||||
| Solidus (slash) | ||||
| Digits 0-9 | ||||
| Colon | ||||
| Semicolon | ||||
| Less than | ||||
| Equals sign | ||||
| Greater than | ||||
| Question mark | ||||
| Commercial at | ||||
| Letters A-Z | ||||
| Left square bracket | ||||
| Reverse solidus | ||||
| Right square bracket | ||||
| Caret | ||||
| Horizontal bar | ||||
| Grave accent | ||||
| Letters a-z | ||||
| Left curly brace | ||||
| Vertical bar | ||||
| Right curly brace | ||||
| Tilde | ||||
| Unused | ||||
| Inverted exclamation point | ||||
| Cent sign | ||||
| Pound sterling | ||||
| General currency sign | ||||
| Yen sign | ||||
| Broken vertical bar | ||||
| Section sign | ||||
| Umlaut (dieresis) | ||||
| Copyright | ||||
| Feminine ordinal | ||||
| Left angle quote, guillemot left | ||||
| Not sign | ||||
| Soft hyphen | ||||
| Registered trademark | ||||
| Macron accent | ||||
| Degree sign | ||||
| Plus or minus | ||||
| Superscript two | ||||
| Superscript three | ||||
| Acute accent | ||||
| Micro sign | ||||
| Paragraph sign | ||||
| Middle dot | ||||
| Cedilla | ||||
| Superscript one | ||||
| Masculine ordinal | ||||
| Right angle quote, guillemot right | ||||
| Fraction one-fourth | ||||
| Fraction one-half | ||||
| Fraction three-fourths | ||||
| Inverted question mark | ||||
| Capital A, grave accent | ||||
| Capital A, acute accent | ||||
| Capital A, circumflex accent | ||||
| Capital A, tilde | ||||
| Capital A, dieresis or umlaut mark | ||||
| Capital A, ring | ||||
| Capital AE dipthong (ligature) | ||||
| Capital C, cedilla | ||||
| Capital E, grave accent | ||||
| Capital E, acute accent | ||||
| Capital E, circumflex accent | ||||
| Capital E, dieresis or umlaut mark | ||||
| Capital I, grave accent | ||||
| Capital I, acute accent | ||||
| Capital I, circumflex accent | ||||
| Capital I, dieresis or umlaut mark | ||||
| Capital Eth, Icelandic | ||||
| Capital N, tilde | ||||
| Capital O, grave accent | ||||
| Capital O, acute accent | ||||
| Capital O, circumflex accent | ||||
| Capital O, tilde | ||||
| Capital O, dieresis or umlaut mark | ||||
| Multiply sign | ||||
| Capital O, slash | ||||
| Capital U, grave accent | ||||
| Capital U, acute accent | ||||
| Capital U, circumflex accent | ||||
| Capital U, dieresis or umlaut mark | ||||
| Capital Y, acute accent | ||||
| Capital THORN, Icelandic | ||||
| Small sharp s, German (sz ligature) | ||||
| Small a, grave accent | ||||
| Small a, acute accent | ||||
| Small a, circumflex accent | ||||
| Small a, tilde | ||||
| Small a, dieresis or umlaut mark | ||||
| Small a, ring | ||||
| Small ae dipthong (ligature) | ||||
| Small c, cedilla | ||||
| Small e, grave accent | ||||
| Small e, acute accent | ||||
| Small e, circumflex accent | ||||
| Small e, dieresis or umlaut mark | ||||
| Small i, grave accent | ||||
| Small i, acute accent | ||||
| Small i, circumflex accent | ||||
| Small i, dieresis or umlaut mark | ||||
| Small eth, Icelandic | ||||
| Small n, tilde | ||||
| Small o, grave accent | ||||
| Small o, acute accent | ||||
| Small o, circumflex accent | ||||
| Small o, tilde | ||||
| Small o, dieresis or umlaut mark | ||||
| Division sign | ||||
| Small o, slash | ||||
| Small u, grave accent | ||||
| Small u, acute accent | ||||
| Small u, circumflex accent | ||||
| Small u, dieresis or umlaut mark | ||||
| Small y, acute accent | ||||
| Small thorn, Icelandic | ||||
| Small y, dieresis or umlaut mark |
Control characters are non-printable characters that are typically used for communication and device control, as format effectors, and as information separators.
In SGML applications, the use of control characters is limited in order to maximise the chance of successful interchange over heterogenous networks and operating systems. In HTML, only three control characters are used: Horizontal Tab (HT, encoded as 9 decimal in US-ASCII and ISO-8859-1), Carriage Return, and Line Feed.
Horizontal Tab is interpreted as a word space in all contexts except preformatted text. Within preformatted text, the tab should be interpreted to shift the horizontal column position to the next position which is a multiple of 8 on the same line; that is, col := ((col+8) div8) * 8 (where div is integer division).
Carriage Return and Line Feed are conventionally used to represent end of line. For Internet Media Types defined as text/*, the sequence CR/LF is used to represent an end of line. In practice, text/html documents are frequently represented and transmitted using an end of line convention that depends on the conventions of the source of the document; frequently, that representation consists of CR only, LF only, or CR/LF combination. In HTML, end of line in any of its variations is interpreted as a word space in all contexts except preformatted text. Within preformatted text, HTML interpreting agents should expect to treat any of the three common representations of end-of-line as starting a new line.
In addition to any mechanism by which characters may be represented by the encoding of the HTML document, it is possible to explicitly reference the printing characters of the Latin-1 character encoding using a numeric character reference.
There are two principle cases for using a numeric character reference. Firstly, some keyboards may not provide the necessary characters (such as those that use accents, cedilla's, dieresis marks and so on,) commonly used in European languages. Secondly, some characters would be interpreted as SGML coding (for example, the ampersand &, double quotes " and lesser < and greater than > characters) and so should be referred to by numerical references.
Numeric character references are represented in an HTML document as SGML entities whose name is number sign (#) followed by a numeral from 32-126 and 161-255. The HTML DTD includes a numeric character for each of the printing characters of the Latin-1 encoding, so that one may reference them by number if it is inconvenient to enter them directly: the ampersand (&), double quotes ("), lesser (<), and greater (>) characters.
The following entity names are used in HTML, always prefixed by an ampersand (&) and followed by a semicolon. See Table B.2.
Certain characters have special meaning in HTML documents. There are two printing characters which may be interpreted by an HTML application to have an effect on the format of the text.
This is interpreted as a single word space (the section of a paragraph of text where the text can be broken if necessary-for example, where lines can be broken for text wrapping) except where it is used within <PRE>...</PRE> elements. Within preformatted text elements, a space is interpreted as a nonbreaking space.
This is interpreted as a hyphen glyph in all contexts.
The following entity names are used in HTML, always prefixed by
an ampersand (&) and followed by a semicolon. They represent
particular graphic characters which have special meanings in places
in the markup, or may not be part of the character set available
to the writer.
| Name | Syntax | Description | |
| lt | < | Less than sign | |
| gt | > | Greater than sign | |
| amp | & | Ampersand | |
| quot | " | Double quote sign |
| Note |
Two different elements now exist for employing in-line sound directly in an HTML document. The first is BGSOUND; this element is currently only supported by Microsoft Internet Explorer. The other is SOUND, which is currently only supported by ncSA Mosaic. Mosaic does also support a limited version of Microsoft's BGSOUND element. Netscape can support in-line sound via the plug-in mechanism. See <EMBED> for more details. |
The BGSOUND element allows authors to create pages that will play sound clips, or background soundtracks while the page is being viewed. Sounds can either be samples (.WAV or .AU format) or MIDI (.MID format).
The HTML used to insert a background sound into a page is
<BGSOUND SRC="start.wav">
The BGSOUND element accepts the following attributes.
This attribute specifies the address of a sound to be played.
This attribute specifies how many times a sound will loop when activated. If n=-1 or LOOP=INFINITE is specified, the sound will loop indefinitely.
Mosaic supports use of the SOUND element for playing inline sound. This element allows the playing of *.WAV files in pages.
| Note |
The SOUND element is only supported by Mosaic. |
The syntax is
<SOUND SRC="filename.wav">
The <SOUND> element supports the following attributes:
LOOP=infinite and DELAY=sec.
LOOP=infinite will play the sound sample continuously while the page is being viewed.
DELAY=sec will delay playing of the sound file for the specified number of seconds after the page and sound file have finished loading.
| Note |
Although Mosaic will support the use of the BGSOUND element (for .WAV file), it will not play in-line *.MID MIDI files without launching an external application as defined in the Helper Application set up. |
Recent advances in browser technology have been pushing the idea of active content. To this end, there are a number of methods that HTML authors should be aware of:
Server-push allows for dynamic document updating via a server to client connection that is kept open. This method (as opposed to client-pull) is totally controlled by the server, but the perpetual open connection occupies valuable server resources. Its main advantage over client- pull is that using server-push, it is possible to replace a single inline image in a page repeatedly. All that is needed is that the SRC attribute of the image to be updated points to a URL that continually pushes image data through the open HTTP connection.
The exact server-push mechanism is technically complex and is outside the scope of this reference. What is presented below is a brief outline of the method. Those that are interested in utilizing server-push in CGI scripts or Web server-based executable applications should visit the Netscape Web site (http://home.netscape.com/) for more information. Note that only Netscape supports the use of server-push.
When a Web server receives a request for an HTML document, it typically sends a single set of data (the actual HTML document). Many pieces of data can be sent encapsulated in a single message by using the MIME type multipart/mixed. The message is split into separate data sections, each provided with its own MIME type (given in the content header) so that the browser can distinguish between the different data in the different sections of the message. Server-push utilizes a variation on this MIME type, called multipart/x-mixed-replace (the x- represents the fact that the MIME type is experimental and has not achieved standardized use). It is by virtue of the "replace" section that certain sections of the message can be replaced. Essentially, the server does not push down the entire message at once. It will send down sections (data-chunks) of the message when it sees fit (or as controlled by the server-push script or application). When the browser sees a separator (sent down in the multipart/x-mixed-replace message), it just sits and waits for the next data object to be sent, which it then uses to replace the data previously sent by the server.
Perhaps the biggest advance that the HTML 2.0 specification made over its predecessors was the inclusion of elements that allowed for users to input information. These elements are the <FORM> elements. They provide for the inclusion of objects like text boxes, choice lists, and so on and have proved invaluable for recent HTML applications, particularly search engines, database query entries, and the like.
It should be noted that while these HTML elements can be used to easily define the presentation of the form to the user, the real value behind any form is in what it does with the information that is entered. For a form to do anything more than send a straight text dump of the form data (including control characters) to an e-mail address, the form data will need to be passed to some kind of CGI script, or server-based executable for processing. (CGI scripting is outside of the scope of this reference; ample reference material is available elsewhere for those interested.)
The following elements are used to create forms:
| <FORM>...</FORM> | A form within a document |
| <INPUT ...>...</INPUT> | One input field |
| <OPTION> | One option within a Select element |
| <SELECT>...<SELECT> | A selection from a finite set of options |
| <TEXTAREA ...>...</TEXTAREA> | A multi-line input field |
Each variable field is defined by an INPUT, TEXTAREA, or OPTION element and must have a NAME attribute to identify its value in the data returned when the form is submitted.
A very simple form for eliciting user response would be:
<H1 ALIGN="center">Comment Form</H1>
<FORM METHOD="POST" ACTION="http://www.htmlib.com/formscript.cgi">
<CENTER>
Your name: <INPUT NAME="name" size="20">
Your e-mail address: <INPUT NAME="email" size="20">
<P>I think the HTML Reference is:
<SELECT NAME="Choice">
<OPTION>Outstanding
<OPTION>Very good
<OPTION>Good
<OPTION>Average
<OPTION>Below Average
<OPTION>Awful
<OPTION SELECTED>My response would be "indecent" under the CDA Act.
</SELECT>
<P>If you have any further comments, please enter them here:<BR>
<TEXTAREA NAME="Comments" ROWS="10" COLS="40" WRAP="Virtual">
</TEXTAREA>
<P><INPUT TYPE=SUBMIT> <INPUT TYPE=RESET>
</CENTER>
</FORM>
Different platforms will have different native systems for navigating within the input fields of a form. (For example,Windows users can use the Tab key to move from one field to the next through the order that the fields appear within the form.) Different browsers may also display different text on any buttons included in the form. For example, Netscape defaults to displaying '"Submit Query" for a button specified by <INPUT TYPE=SUBMIT>, while Internet Explorer and Mosaic display just "Submit" on such a button. Figure B.1 shows the form resulting from the preceding HTML fragment.
It is possible to write forms that ask for files as input, rather than data input by input boxes and other simple elements such as checkboxes and radio buttons.
An example of such a form would be:
<FORM EncTYPE="multipart/form-data" ACTION="_URL_" METHOD=POST> Send this file: <INPUT NAME="userfile" TYPE="file"> <INPUT TYPE="submit" VALUE="Send File"> </FORM>
| Note |
This method of file upload is Netscape specific and is essentially adoption of another IETF Internet Draft by the Netscape authors. The Internet Draft in question, "Form based file upload in HTML," details adding the FILE option to the TYPE attribute of the INPUT element, allowing an AccEPT attribute for the INPUT element (which would be a list of MIME types-essentially detailing what files are allowed to be uploaded as the contents of the form) and allowing the EncTYPE of a form to be multipart/form-data. This MIME type essentially wraps the form data (including that presented in any other input fields) as a data stream, with discrete boundaries between the information sections. For a more detailed description, readers should check the HTTP file upload specification. |
The display method is largely at the discretion of the browsers that support this method. Netscape (Windows versions) display a "Browse…" button beside the input box, which brings up the standard open/save dialog box, allowing the choice of any local file for upload.
The <FORM> element is used to delimit a data input form. There can be several forms in a single document, but the <FORM> element can not be nested. (That is, a form can't contain another form.)
<FORM ACTION="_URL_" METHOD="GET|POST" EncTYPE="MIME type">
The ACTION attribute is a URL specifying the location to which the contents of the form data fields are submitted to elicit a response. As mentioned before, this could be simply a direction to an e-mail address, but generally, would be used to point towards some kind of server-based CGI script/application that handles the forwarding of form data. If the ACTION attribute is missing, the URL of the document itself is assumed. The way data is submitted varies with the access protocol of the URL to which the form data is sent and with the values of the METHOD and EncTYPE attributes.
Generally, the METHOD attribute specifies a method of accessing the URL specified in the ACTION attribute. Generally, the method will be either GET or POST. The GET method is ideal for form submission where the use of the form data does not require external processing. For example, with database searches, there is no lasting effect caused by the query of the form (that is, the query runs its search through the database and reports the results). However, when the form is used to provide information, for example, that updates a database, then the POST method should be used, with the ACTION attribute pointing to a CGI script that executes the form data pro-cessing.
The EncTYPE specifies the media type used to encode the form data. The default EncTYPE is the MIME type application/x-www-form-urlencoded.
The <INPUT> element represents a field whose contents may be edited or activated by the user. Attributes of the <INPUT> element are listed in the following sections.
To be used with the TYPE=IMAGE setting, this attribute specifies the alignment of the image. It takes the same values as the ALIGN in the <IMG> element.
To be used with a TYPE=chECKBOX or TYPE=RADIO setting, this indicates that the checkbox or radio button is selected.
To be used with TYPE=TEXT setting, this indicates the maximum number of characters that can be entered into a text field. This can be greater than specified by the SIZE attribute, in which case the field will scroll appropriately. The default number of characters is unlimited.
This attribute represents the name that will be used for the data when transferring the form's contents. The NAME attribute is required for most input types and is normally used to provide a unique identifier for a field, or for a logically related group of fields.
Specifies the size or precision of the field according to its type. For example, to specify a field with a visible width of 24 characters:
INPUT TYPE=text SIZE="24"
To be used with the TYPE=IMAGE, this attribute represents a URL specifying the desired image.
Defines the type of data the field accepts. Defaults to free text. Several types of fields can be defined with the type attribute:
BUTTON
This can be used to embed buttons directly into HTML documents, that add functionality when used in conjunction with Visual Basic Script. The NAME attribute is used to give the button a unique name, which can be used to set its function in the script. The VALUE attribute specifies the text that is displayed on the button in the document.
chECKBOX
Used for simple Boolean attributes (where a field will be chosen, or not) or for attributes that can take multiple values at the same time. The latter is represented by a number of checkbox fields, each of which has the same name. Each selected checkbox generates a separate name/value pair in the submitted data, even if this results in duplicate names. The default value for checkboxes is "on." This field type requires the NAME and VALUE attributes; chECKED is an optional attribute.
FILE
Netscape now supports a FILE option to the TYPE attribute of the INPUT element, allowing an AccEPT attribute for the INPUT element (which is a list of media types or type patterns allowed for the input) and allowing the EncTYPE of a form to be multipart/form-data. This allows the inclusion of files with form information, which could prove invaluable, for example, for companies providing technical support, or service providers, requesting data files.
HIDDEN
With this input type, no field is presented to the user, but the content of the field is sent with the submitted form. This value may be used to transmit state information about client/server interaction.
IMAGE
An image field upon which you can click with a pointing device, causing the form to be immediately submitted. The coordinates of the selected point are measured in pixel units from the upper-left corner of the image, and are returned (along with the other contents of the form) in two name/value pairs. The x-coordinate is submitted under the name of the field with .x appended, and the y-coordinate is submitted under the name of the field with .y appended. The NAME attribute is required. The image itself is specified by the SRC attribute, exactly as for the Image element.
| Note |
In a future version of the HTML specification, the IMAGE functionality may be folded into an enhanced SUBMIT field. |
PASSWORD
PASSWORD is the same as the TEXT attribute, except that text is not displayed as it is entered.
RADIO
RADIO is used for attributes that accept a single value from a set of alternatives. Each radio button field in the group should be given the same name. Only the selected radio button in the group generates a name/value pair in the submitted data. Radio buttons require an explicit VALUE and NAME attribute. chECKED is an optional attribute and can be used to specify which options are selected for initial form display.
RESET
RESET is a button that, when pressed, resets the form's fields to their specified initial values. The label to be displayed on the button may be specified just as for the SUBMIT button.
SUBMIT
SUBMIT is a button that, when pressed, submits the form. You can use the VALUE attribute to provide a non-editable label to be displayed on the button. The default label is browser-specific. If a SUBMIT button is pressed in order to submit the form, and that button has a NAME attribute specified, then that button contributes a name/value pair to the submitted data. Otherwise, a SUBMIT button makes no contribution to the submitted data.
TEXT
TEXT is used for single-line text-entry fields. It should be used in conjunction with the SIZE and MAXLENGTH attributes to set the maximum amount of text that can be entered. For textual input that requires multiple lines, use the <TEXTAREA> element for text fields which can accept multiple lines. Explicit VALUE and NAME attributes are also required.
TEXTAREA
TEXTAREA is used for multiple-line text-entry fields. Use in conjunction with the SIZE and MAXLENGTH attributes.
When used with TYPE= ... attributes, this attribute sets the initial displayed value of the field if it displays a textual or numerical value. If the TYPE= ... attribute is one which only allows Boolean values (that is, chosen or not chosen) then this specifies the value to be returned when the field is selected.
The <OPTION> element can only occur within a <SELECT> element. It represents one choice, and can take these attributes:
Indicates that this option is initially selected.
When present indicates the value to be returned if this option is chosen. The returned value defaults to the contents of the <OPTION> element.
The contents of the <OPTION> element is presented to the user to represent the option. It is used as a returned value if the VALUE attribute is not present.
The <SELECT> element allows the user to chose one of a set of alternatives described by textual labels. Every alternative is represented by the <OPTION> element.
Attributes used with the <SELECT> are listed in the following sections.
The MULTIPLE attribute is needed when users are allowed to make several selections, for example, <SELECT MULTIPLE>.
Specifies the name that will submitted as part of a name/value pair.
Specifies the number of visible items. If this is greater than one, then the resulting form control will be a list.
The SELECT element is typically rendered as a pull down or pop-up list. For example:
<SELECT NAME="Choice"> <OPTION>Outstanding <OPTION>Very good <OPTION>Good <OPTION>Average <OPTION>Below Average <OPTION>Awful <OPTION SELECTED>My response would be "indecent" under the CDA Act.
</SELECT>
The TEXTAREA element lets users enter more than one line of text.
Any text included up to the end element (</TEXTAREA>) is used to initialize the field's value. This end element is always required even if the field is initially blank. When submitting a form, lines in a TEXTAREA should be terminated using CR/LF.
In a typical rendering, the ROWS and COLS attributes determine the visible dimension of the field in characters. The field is rendered in a fixed-width font. Browsers should allow text to extend beyond these limits by scrolling as needed.
Recent versions of Netscape (from version 2.0) have introduced
the WRAP attribute in the
TEXTAREA element: Now it is possible to specify how to handle
word-wrapping display in text input areas in forms.
| <TEXTAREA WRAP=OFF> | The default setting. Wrapping doesn't happen. Lines are sent exactly as typed. |
| <TEXTAREA WRAP=VIRTUAL> | The display word-wraps, but long lines are sent as one line without new-lines. |
| <TEXTAREA WRAP=PHYSICAL> | The display word-wraps, and the text is transmitted at all wrap points. |
| Note |
Word wrapping in a TEXTAREA text box is supported by Netscape only. |
| Note |
The use of Frames is currently only supported by recent versions of Netscape (from version 2.0) and Internet Explorer (3.0 and above). |
Frames allow the browser display window to be subdivided into separate sections. Each section can be updated or have new documents loaded into it separately from the remaining frame sections. As such, a frame-based layout can be especially useful for HTML applications where some information is required across a whole range of pages (such as a table of contents or title graphics)
Frames are generated by three elements: <FRAMESET>, <FRAME> elements, and <FRAME>.
A frame document has a basic structure very much like a normal HTML document, except the BODY container is replaced by a FRAMESET container which describes the sub-HTML documents, or Frames, that will make up the page.
<HTML> <HEAD> </HEAD> <FRAMESET> </FRAMESET> </HTML>
No HTML that would normally be included within the <BODY> section of an HTML document should be included within the <FRAMESET> ... </FRAMESET> elements.
<FRAMESET>
This is the main container for a frame. It has two attributes ROWS and COLS. The <FRAMESET> element has a matching end element, and within the FRAMESET you can only have other nested <FRAMESET>, <FRAME>, or <NOFRAMES> elements.
ROWS="row_height_value_list"
This takes a list of values, separated by comma marks. They can represent either absolute pixel, percentage, or relative scaling values. The total set by the values given in the ROWS attribute should not exceed 100% (as the total rows are extended across the whole available browser display window).
If any of the values are single numerical values, then these are considered to be absolute pixel values. It is not recommended to fix a frameset by using a complete set of pixel values, because browsers use a variety of different screen resolutions when viewing documents, and the layout may become distorted. Percentage values can be given for this attribute. If the total percentage values given exceed 100% then all values will be scaled down by the browser so that the total is 100%. The remaining value option is to use a * character. This tells the browser that the frame is a relative size frame and should be displayed accordingly. Numerical values can be used with the * character, to scale the relative frame sections within the browser window.
To specify a three-part, vertical framed layout where the first section uses 20 percent of the display window, the second uses 100 pixels, and the third section uses the remaining screen, use:
<FRAMESET ROWS="20%, 100, *>
To split the layout into two vertical frames, the first using a quarter of the display window, the second using three-quarters of the window, use:
<FRAMESET ROWS="25%, 75%>
This would be exactly the same as using <FRAMESET ROWS="*, 3*">.
COLS="column_width_list"
The COLS attribute takes as its value a comma separated list of values that is of the exact same syntax as the list described above for the ROWS attribute.
The <FRAMESET> element can be nested. In this way, frame sections can be set up where the display window can be split into either horizontal or vertical sections, with any of these being further sub-divided by nested <FRAMESET> elements.
<FRAME>
This element defines a single frame in a frameset. It has eight possible attributes: SRC, NAME, MARGINWIDTH, MARGINHEIGHT, SCROLLING, NORESIZE, FRAMEBORDER and FRAMESPACING. The <FRAME> element is not a container, so it has no matching end tag.
SRC="url"
This attribute is used to specify the HTML document that will be used as the display in the particular frame section of the frameset.
NAME="frame_name"
The NAME attribute is used to assign a name to a frame so it can be targeted by links in other documents, by using <A HREF="_URL_" TARGET="frame_name">. (These would usually be from other documents in the same frameset.) The NAME attribute is optional; by default all windows are unnamed.
Names must begin with an alphanumeric character. Several reserved names have been defined, which start with an underscore.
These are currently:
| _blank | Always load this link into a new, unnamed window. |
| _self | Always load this link over the document that originated the link. |
| _parent | Always load this link over the parent frame. (becomes self if the frame has no parent, or is the parent frame). |
| _top | Always load this link at the top level (becomes self if the frame is the top frame). |
| Note |
Although these are reserved names for the NAME attribute of the <FRAME> element, they should only be referred to using an anchor target. That is, used to target specific windows, allowing smoother transition between framed documents and between framed and non-framed documents (for example, when providing a link to documents on a foreign server that may not be framed documents). Although Internet Explorer supports the naming of frames for document navigation and hyperlinking, it doesn't support the use of the _blank reserved name for opening a document in a new browser window. Also, unlike Netscape, Internet Explorer will not open a new window for a link whose TARGET value has not been defined by a NAME attribute. |
MARGINWIDTH="value"
This accepts an absolute pixel value and forces indentation from the left- and right-hand side of the frame pane according to the number of pixels. It cannot be set to a value less than 1 as this would cause the contents of the frame to be displayed right up against the left-hand margin. By default, the browser will choose its own MARGINWIDTH when trying to produce the best possible display.
MARGINHEIGHT="value"
This is analogous to the MARGINWIDTH attribute, but it controls the top and bottom margins.
SCROLLING="yes|no|auto"
This attribute can be used to control the appearance of any scrollbars that may appear as a result of the frame contents being too much to display in the set pane. Using "no" may be dangerous, because the HTML author cannot know the resolution/display window size of the client browser and so information may not be displayable.
NORESIZE
By default, all frames specified in a framed document can be resized by the client. Setting this flag (it requires no value) prevents the frame from being resized.
FRAMEBORDER="yes|no"
This is an Internet Explorer-specific attribute, which allows control of the frame border display. With this attribute set to "no," the borders for the specific frame are not drawn.
FRAMESPACING="value"
This attribute is also Internet Explorer-specific and allows the setting of extra space around frames, to give the appearance of floating frames. The "value" should be the distance required around the frame in pixels.
<FRAME FRAMESPACING="40" ...>
would present the frame with an invisible "border" of 55 pixels.
<NOFRAMES>
This element is provided for HTML authors who want to create alternative content for browsers that cannot display frames. This is especially useful if the author is making the very first document of the site a framed document. It should be noted that this element is not actually recognized by non-frame capable browsers. As with any HTML, if the browser does not recognize the element, it ignores it. Browsers that cannot display frames would ignore all the <FRAMESET> and <FRAME> elements, but will display whatever is enclosed in the <NOFRAMES> ... </NOFRAMES> elements, which can be any HTML at all, because that is what it recognizes. On the other hand, frame-capable browsers will preferentially display what is set up by the frame elements, unless they provide any mechanism where the display of frames can be turned off, in which case they may display this alternative content.
The main document that sets up the example frame is as follows:
<HTML> <!--HTMLIB.htm--> <HEAD> <TITLE>The HTML Reference Library</TITLE> </HEAD> <BASEFONT SIZE=3> <FRAMESET ROWS="85,*,65"> <FRAME SCROLLING="no" NAME="title" NORESIZE SRC="title.htm"> <FRAMESET COLS="40%,60%"> <FRAME SCROLLING="yes" NAME="toc" SRC="toc.htm"> <FRAME SCROLLING="yes" NAME="main page" SRC="main.htm"> </FRAMESET> <FRAME SCROLLING="no" NAME="HLP buttons" NORESIZE SRC="buttons.htm"> <NOFRAME> </NOFRAME> </FRAMESET> </HTML>
<FRAMESET ROWS="85,*,65">
This line divides the page into three regions, the top region being 85 pixels in height, the bottom region being 65 pixels in height, the middle region occupying the rest of the browser window.
<FRAME SCROLLING="no" NAME="title" NORESIZE SRC="title.htm">
This line sets the top region of the window (the region that is 85 pixels high) to be a non-scrolling, non-resizable region. Its name is title (so, any other link that specifies "title" with its TARGET attribute would be displayed in this region).
<FRAMESET COLS="40%,60%">
This is a nested <FRAMESET> element and splits the middle region of the browser window into two sections horizontally. The left-hand section being 40 percent of the frame width, the right- hand section being the remaining 60 percent of the frame width. (This could also have been achieved using <FRAMESET COLS="2*, 3*>.)
<FRAME SCROLLING="yes" NAME="toc" SRC="toc.htm"> <FRAME SCROLLING="yes" NAME="main page" SRC="main.htm">
These two lines (as the other <FRAME> line above) set the attributes for the two middle sections of the page. That is, they name the regions toc and main page, respectively, and link the regions to the two pages to be displayed in the regions.
</FRAMESET>
This line closes the subframes that were opened in the middle
section of the main framed
regions.
<FRAME SCROLLING="no" NAME="buttons" NORESIZE SRC="buttons.htm">
This line defines the properties of the remaining main region of the window, the bottom region that is 65 pixels high. It defines it as a non-scrolling, non-resizable region (ideal for navigation tools).
| Note |
This document contains no mark up relevant to the use of the frames, but has been included for reasons of completeness. |
This document is the Title for the paged document. It resides in the top frame, which is a non-scrolling, non-resizeable frame. Hence the title will always be displayed in the same place. Note that for frame subdocuments, titles are not required. The title of the site will always be taken from the main frame page.
<HTML> <!--TITLE.htm--> <BODY> <BASEFONT SIZE=3> <CENTER> <H2 ALIGN=center>Hello and Welcome to the HTML Reference Library</H2> <BR> </CENTER> </BODY> </HTML>
This is the Table of Contents page. It appears on the left scrolling frame region. This section has been used (in this example) for a stationary table of contents.
<HTML> <!--TOC.htm--> <BODY> <BASEFONT SIZE=2> <CENTER> Please Select a Volume<BR><BR> <A HREF="lang.htm" TARGET="main page"><B>1) The HTML Language</B></A><BR> <A HREF="qr.htm" TARGET="main page"><B>2) Quick Reference Guide</B></A><BR> <A HREF="author.htm" TARGET="main page"><B>3) Contacting the Author</B></A><BR> <A HREF="new.htm" TARGET="main page"><B>4) New in this version</B></A><BR> </CENTER> </BODY>
</HTML>
The use of the TARGET attribute in the anchor means that when each link is activated, the document accessed will be displayed in the frame region named main page. Thus, any documents accessed from the table of contents will appear in the framed region to the right of the table of contents.
| Note |
This document contains no mark up relevant to the use of the frames, but has been included for reasons of completeness. |
This document is the document that appears in the right hand framed region of the page the first time the page is accessed.
<HTML> <!--MAIN.htm--> <BODY> This reference, using the Internet Draft as an information base is an on-line reference library of currently supported HTML elements - their syntax, and use.<BR> It assumes that the user has knowledge of the World Wide Web and the various browsers available. Information on specific browsers, or the broader topic of 'The World Wide Web' can be obtained by reading the World Wide Web FAQ.<BR> </BODY>
</HTML>
| Note |
This document contains no mark up relevant to the use of the frames, but has been included for reasons of completeness. |
This document resides at the bottom of the framed document. This region is a non-scrollable, non-resizable region. As such, it is ideal for a set of navigation buttons or other tools, as these could be. For the purposes of this example, the buttons are just a graphic image.
<HTML> <!--BUTTONS.htm--> <BODY> <CENTER> <IMG SRC="buttons.gif"><BR> <FONT SIZE=1>© Stephen Le Hunte 1995</FONT> </CENTER> </BODY>
</HTML>
| Note |
This document contains no mark up relevant to the use of the frames, but has been included for reasons of completeness. |
This document is accessed by choosing the first option from the table of contents. When accessed, it would be displayed in the right-hand section of the middle regions.
<HTML> <!--LANG.htm--> <BODY> <CENTER><B>The HTML Language</B></CENTER> <BR> The vast range of HTML MarkUp currently supported by available browsers (Web browsers, such as Netscape, Mosaic etc.) can be divided into the following sections. Some elements featured here may not be supported by all browsers. Where an element is known to be supported by specific browsers, the element description will be labeled as such.<BR> </BODY> </HTML>
Recently, the <IMG> element has undergone the largest enhancements of all HTML 2.0 elements, on the way to newer HTML standardization. This is due to the <IMG> element being probably the second most important markup element (behind the Anchor element) as it handles all embedded graphical content in HTML documents.
The attributes commonly supported by the <IMG> element have had some recent additions to allow client-side image maps, embedded inline video clips, and embedded inline VRML worlds.
| Note |
Formats Netscape and Mosaic (and most other browsers) will only support use of .gif and .JPG images within HTML documents. This can be extended with Netscape, by embedding image formats within pages, providing the format is one that the user will have software to handle installed on their system, or they have a plug-in module specifically to handle that type of image (see <EMBED>). Also, Netscape natively supports (that is, the browser can display) progressive JPEG images. Internet Explorer will allow the use of gif, JPEG, progressive JPEG images, PNG (portable network graphics) images and also BMP files, giving the author a wider variety of image formats from which to choose. Netscape now fully supports the gif89a format, which means that multi-image gif files can be used to create animation sequences. Users are encouraged to seek out the gif Construction Kit for more details and tools for the preparation of multi-image gif files. |
The Image element is used to incorporate inline graphics (typically icons or small graphics) into an HTML document. This element cannot be used for embedding other HTML text. Browsers that cannot render inline images ignore the Image element unless it contains the ALT attribute.
The Image element, which is empty (no closing element), has these attributes:
The ALIGN attribute accepts the values left, right, top, texttop, middle, absmiddle, baseline, bottom, and absbottom, which specifies the alignment of the image and that of the following line of text.
| Note |
Not all browsers support the left and right alignment of images and will render embedded images on their own paragraph space in the browser window. |
These attribute values to the ALIGN option require some explanation. First, the values "left" and "right". Images with those alignments are a floating image type.
ALIGN=left will align the image on the left-hand edge of the browser display window and subsequent text will wrap around the right-hand side of that image.
ALIGN=right will align the image on the right-hand edge of the browser display window and subsequent text will wrap around the left-hand side of that image.
The use of floating images and wrap around text can cause some formatting problems. Using <BR CLEAR=left|right|all> is recommended to achieve the desired page formatting effect.
ALIGN=top allows any text following the image to align itself with the top of the tallest item in the line. (That is, the top of the image.)
ALIGN=texttop allows any text following the image to align itself with the top of the tallest text in the line (this is usually but not always the same as ALIGN=top).
ALIGN=middle aligns the baseline of the current line with the middle of the image.
ALIGN=absmiddle aligns the middle of the current line with the middle of the image.
ALIGN=baseline aligns the bottom of the image with the baseline of the current line.
ALIGN=bottom aligns the bottom of the image with the baseline of the current line.
ALIGN=absbottom aligns the bottom of the image with the bottom of the current line.
This attribute allows the setting of text as an alternative to the graphic for rendering in non-graphical environments, or when the user has de-activated the auto-loading of images. Alternate text should be provided by the browser whenever the graphic is not rendered.
<IMG SRC="triangle.gif" ALT="Warning:"> Be sure to read these instructions.
Internet Explorer uses any ALT text that is set as a "Tool Tip" that is displayed whenever the mouse pauses over an image for which the ALT text has been specified.
This lets the document author control the thickness of the border around an image displayed.
It is useful is the image is to be a hyperlink, in that the BORDER can be set to 0 to avoid the display of the standard blue hypertext link border.
The ISMAP (is map) attribute identifies an image as an image map. Image maps are graphics in which certain regions are mapped to other documents. By clicking on different regions, different resources can be accessed from the same graphic. Example of use:
<A HREF="http://machine/htbin/imagemap/sample"> <IMG SRC="sample.gif" ISMAP></A>
| Note |
To be able to employ this type of image map in HTML documents, the HTTP server which will be controlling document access must have the correct cgi-bin software installed to control image map behavior. That is, the document must have access to an image map handling script and the map file defining the graphic hot-spots. |
Recent browsers allow a simpler form of image map, known as client-side image maps. Although this is currently a proposed extension to HTML, it is widely supported by browsers. For details, see Client Side Image Maps.
Using the LOWSRC attribute, it is possible to use two images in the same space. The syntax is
<IMG SRC="hiquality.gif" LOWSRC="lowquality.gif">
Browsers that do not recognize the LOWSRC attribute cleanly ignore it and simply load the image specified by the SRC attribute.
Browsers that support this attribute, however, will load the image called lowquality.gif on their first layout pass through the document. When the rest of the document has been completely loaded and formatted on the page, the browser will then redraw the page and load the image specified by the standard SRC attribute. This allows the author to specify a low-resolution (or smaller file size version of the main image-perhaps a grayscale version) image to be displayed initially while the document is loading, which is later replaced by the higher quality version.
Any graphic file format that the browser supports can be used interchangeably within the LOWSRC and SRC attributes. You can also specify width and height values in the IMG element, and both the high-resolution and low-resolution versions of the image will be appropriately scaled to match. However, if no width and height values have been set, the values used for the LOWSRC image (that is, the dimensions of that image) will be used to re-scale the SRC image. This is to minimize page format disruption that would be caused by the browser trying to load two different sized images into the same page space.
<IMG ALIGN="left" SRC="mosaic.gif" HSPACE="20" ALT="Mosaic logo">Mosaic, from the <B>N</B>ational <B>C</B>entre for <B>S</B>upercomputing <B>A</B>pplications represents the original graphical browser which Netscape development was based on. <BR CLEAR="all"> <HR> <IMG ALIGN="right" SRC="netscape.gif" HSPACE="20" ALT="Netscape logo">Netscape, from <B>Netscape Communications</B>, after initial development from Mosaic, stormed away and became more or less the <I>de facto</I> Web browser. <BR CLEAR="all"> <HR> <IMG ALIGN="left" SRC="iexplore.gif" HSPACE="20" ALT="Internet Explorer logo"> Internet Explorer, from <B>Microsoft</B>, exhibits Microsoft's serious intentions to enter the Web browser market and compete head-to-head with Netscape. <BR CLEAR="all"> <HR>
The value of the SRC attribute is the URL of the image to be displayed. Its syntax is the same as that of the HREF attribute of the <A> element. SRC is the only mandatory attribute of the <IMG> element. Image elements are allowed within anchors.
<IMG SRC ="warning.gif">Be sure to read these instructions.
The SRC attribute can accept fully qualified, or partial, relative URL's, or even just image names (providing the image is located in the same directory as the HTML document).
For the floating images (that is, those displayed with an ALIGN=left|right attribute) it is likely that the author does not the text wrapped around the image to be pressed up against the image. VSPACE controls the vertical space above and below the image, while HSPACE controls the horizontal space to the left and right of the image. Value should be a pixel value.
The WIDTH and HEIGHT attributes allow the browser to determine the text layout surrounding images before the entire image has been downloaded, which can significantly speed up display of the document text. If the author specifies these, the viewer of the document will not have to wait for the image to be loaded over the network and its size to be calculated. Internet Explorer uses image placement mechanisms, so that if the display of in-line images has been turned off, the space that the images would occupy in the page is marked as if the image were there (with any ALT text being displayed in the place holder). This allows authors to be sure that the text layout on the page will be as desired, even if the user is not displaying the images.
Before this image map method was implemented by browsers, using image maps required communication with the Web server on which the HTML documents were located in order to determine the action to be taken when an area of the image had been clicked on. This produced unnecessary server-side overheads. The client-side image map specification (designed by Spyglass) allows for all of the processing of the image map action to be done by the browser. It allows the use of image maps within HTML documents that are not being distributed by conventional means (that is, from a Web server). For example, using client-side image maps allows image map functionality for HTML documents on CD-ROMs and so on.
Basically, adding the USEMAP attribute to an <IMG> element indicates that the image is a client-side image map. The USEMAP attribute can be used with the ISMAP attribute to indicate that the image can be processed as either a client-side or server-side image map (useful to ensure browser independence of HTML documents). The value used in the USEMAP attribute specifies the location of the map definition to use with the image, in a format similar to the HREF attribute on anchors. If the argument to USEMAP starts with a #, the map description is assumed to be in the same document as the IMG tag.
<IMG SRC="../images/image.gif" USEMAP="maps.html#map1">
This would use the map described as "map1" in maps.html as the overlay for the image file image.gif. The map definition (see below) can be included either within the HTML document itself where the image is embedded, or in a completely separate file.
The different active regions of the image are described using MAP and AREA elements.
The map describes each region in the image and indicates the location of the document to be retrieved when the defined area is activated. The basic format for the MAP element is as follows:
<MAP NAME="name"> <AREA [SHAPE="shape"] COORDS="x,y,..." [HREF="reference"] [NOHREF]>
</MAP>
The name specifies the name of the map so that it can be referenced by an <IMG USEMAP=> element. The shape gives the shape of the specific area. Currently the only shape defined is "RECT", but the syntax is defined in such a way to allow other region types to be added. If the SHAPE attribute is omitted, SHAPE="RECT" is assumed. The COORDS attribute gives the coordinates of the shape, using image pixels as the units. For a rectangle, the coordinates are given as "left,top,right,bottom". The rectangular region defined includes the lower-right corner specified, that is, to specify the entire area of a 100x100 image, the coordinates would be "0,0,99,99".
The NOHREF attribute indicates that clicks in this region should perform no action. An HREF attribute specifies where a click in that area should lead. Note that a relative anchor specification will be expanded using the URL of the map description as a base, rather than using the URL of the document from which the map description is referenced. If a BASE tag is present in the document containing the map description, that URL will be used as the base to resolve partial URLs.
An arbitrary number of AREA elements may be specified. If two areas intersect, the one which appears first in the map definition takes precedence in the overlapping region. For example, a button bar in a document might use a 200 pixel by 80 pixel image and appear like this:
<MAP NAME="buttonbar"> <AREA SHAPE="RECT" COORDS="10,10,40,70" HREF="../index.html"> <AREA SHAPE="RECT" COORDS="60,10,90,70" HREF="../download.html"> <AREA SHAPE="RECT" COORDS="110,10,140,70" HREF="../email.html"> <AREA SHAPE="RECT" COORDS="160,10,190,70" HREF="../reference.html"> </MAP> <IMG SRC="../images/tech/bar.gif" USEMAP="#buttonbar">
| Note |
The TARGET attribute can be used within the <AREA> element, allowing the use of client-side image maps within framed dcouments. For more information about the use of TARGET attributes, see the <FRAME> section. |
Microsoft's Internet Explorer allows the user to embed .AVI (Audio Video Interleave) video clips in HTML documents. This is done by adding several new attributes, notably DYNSRC (Dynamic Source) to the <IMG> element. Using the <IMG> element for this purpose makes it possible to add video clips to pages, but also have browsers not enabled for video display still images in their place.
| Note |
In future versions of Internet Explorer, proprietary additions by Microsoft are to be deprecated (that is, their support will be removed) in favor of open standard mechanisms for the embedding of objects, such as video and executable content. Netscape can support the embedding of video clips through its plug-in mechanism using the <EMBED> element. See <EMBED> for more details. |
This attribute has no values. It is a flag that if set, displays the standard Windows AVI control panel to allow the user to control the display of the video clip.
This attribute specifies the address of a video clip to be displayed in the window. It stands for Dynamic Source.
<IMG SRC="filmclip.gif" DYNSRC="filmclip.avi">
Internet Explorer will display the movie filmclip.avi; other browsers will display the image filmclip.gif.
The attributes used to control the playing of the video clip are as follows.
Specifies how many times a video clip will loop when activated. If n=-1, or if LOOP=INFINITE is specified, the video will loop indefinitely.
Specifies, in milliseconds, how long a video clip will wait between play loops.
| Note |
As seen in the first example on this page, because the DYNSRC is an attribute of the IMG element, other attributes of the IMG element, such as HEIGHT, WIDTH, HSPACE, VSPACE, BORDER, and so on, are also acceptable and, if specified, will format the display window for the video clip. |
This attribute specifies when the video clip should start playing. It accepts values of FILEOPEN or MOUSEOVER. FILEOPEN means that the video will start playing as soon as it has finished downloading from the Web server, or distribution source. This is the default value. MOUSEOVER means start playing when the user moves the mouse cursor over the animation. It is possible to specify both of these values together.
| Note |
As with other <IMG> related object embedding mechanisms (that is, inline video), future versions of the Internet Explorer will support open standard object embedding mechanisms, instead of relying on proprietary extensions as detailed here. |
Microsoft's Internet Explorer (from version 2) has added the ability to include inline embedded VRML viewable by installing the Virtual Explorer plug-in module, available from the Microsoft Windows 95 Web site (http://www.microsoft.com/windows ). It does this by adding the VRML attribute to the <IMG> element.
As the attribute is used in the <IMG> element, it supports many of the other attributes of the <IMG> element, such as HEIGHT, WIDTH, VSPACE, HSPACE, and so on.
For example;
<IMG SRC="picture.gif" VRML="world.wrl" HEIGHT=250 WIDTH=300>
The preceding example would embed the VRML world, world.wrl, into the HTML document, with the navigation controls below the embedding pane. The pane is displayed according to the dimensions specified. For browsers other than Virtual Explorer (Internet Explorer with the VRML add-on), the picture picture.gif would be displayed.
| Note |
Embedding of VRML worlds is also supported by Netscape, using the Netscape Live3D plug-in module and the <EMBED> element. See <EMBED> for more details. |
The following information type and character formatting elements
are supported by most
browsers.
| Note |
Different information type elements may be rendered in the same way. The following are what are sometimes called logical formatting elements. They suggest to the browser that the enclosed text should be rendered in a way set by the browser, rather than physically fixing the display type. Elements that do this are character formatting elements (see below, also known as physical elements) that produce strict rendering of the text. |
Information type elements:
| <CITE>...</CITE> | Citation |
| <CODE>...</CODE> | An example of code |
| <EM>...</EM> | Emphasis |
| <KBD>...</KBD> | User-typed text |
| <SAMP>...</SAMP> | A sequence of literal characters |
| <STRONG>...</STRONG> | Strong typographic emphasis |
| <VAR>...</VAR> | Indicates a variable name |
| <!-- ... --> | Defining comments |
Character formatting elements:
| <B>...</B> | Boldface type |
| <BIG>...</BIG> | Big text |
| <BLINK>...</BLINK> | Blinking text |
| <I>...</I> | Italics |
| <SMALL>...</SMALL> | Small text |
| <STRIKE>...</STRIKE> (or <S>...</S>) | Text that has been struck through |
| <SUB>...</SUB> | Subscript |
| <SUP>...</SUP> | Superscript |
| <TT>...</TT> | TypeType (or Teletype) |
| <U>...</U> | Underlined text |
Although character formatting elements (physical elements) may be nested within the content of other character formatting elements, browsers are not required to render nested character- level elements distinctly from non-nested elements:
plain <B>bold <I>italic</I></B>
may be rendered the same as
plain <B>bold </B><I>italic</I>
To include comments in an HTML document that will be ignored by the browser, surround them with <!-- and -->. After the comment delimiter, all text up to the next occurrence of --> is ignored. Hence comments cannot be nested. White space is allowed between the closing -- and >, but not between the opening <! and --. Comments can be used anywhere within an HTML document and are generally used as markers to improve the readability of complex HTML documents.
For example:
<HEAD> <TITLE>The HTML Reference</TITLE> <!-- Created by Stephen Le Hunte, April 1996 --> </HEAD>
| Note |
Some browsers incorrectly consider a > sign to terminate a comment. |
The Bold element specifies that the text should be rendered in boldface, where available. Otherwise, alternative mapping is allowed.
The instructions <B>must be read</B> before continuing.
would be rendered as:
The instructions must be read before continuing.
The <BIG> element specifies that the enclosed text should be displayed, if practical, using a big font (compared with the current font). This is an HTML 3.0 element and may not be widely supported.
This is normal text, with <BIG>this bit</BIG> being big text.
would be rendered as:
This is normal text, with this bit being big text.
| Note |
Use of this element is currently supported by Netscape and the Internet Explorer only. They also allow the <BIG>...</BIG> element to be used surrounding the <SUB>...</SUB> and <SUP>...</SUP> elements to force rendering of the sub/superscript text as normal size text as opposed to the default slightly smaller text normally used. |
The exact appearance of the big text will change depending on any <FONT SIZE=...> and <BASEFONT SIZE=...> settings, if specified.
Surrounding any text with this element will cause the selected text to blink on the viewing page. This can serve to add extra emphasis to selected text.
<BLINK>This text would blink on the page</BLINK>.
| Note |
The <BLINK>...</BLINK> element is currently only supported by Netscape. |
The Citation element specifies a citation and is typically rendered in an italic font. For example, the following
This sentence contains a <CITE>citation reference</CITE>.
would look like:
This sentence contains a citation reference.
The Code element should be used to indicate an example of code and is typically rendered in a monospaced font. This should not be confused with the Preformatted Text (<PRE>) element.
The formula is: <CODE>x=(-b+/-(b^2-4ac)^1/2)/2a</CODE>.
It would look like:
The formula is: x=(-b+/-(b^2-4ac)^1/2)/2a.
The Emphasis element indicates typographic emphasis and is typically
rendered in an
italic font.
The <EM>Emphasis</EM> element typically renders as Italics.
would render:
The Emphasis element typically renders as Italics.
The Italic element specifies that the text should be rendered in italic font, where available. Otherwise, alternative mapping is allowed.
Anything between the <I>I elements</I> should be italics.
would render as:
Anything between the I elements should be italics.
The Keyboard element can be used to indicate text to be typed by a user and is typically rendered in a monospaced font. It might commonly be used in an instruction manual.
To login to the system, enter <KBD>"GUEST"</KBD> at the command prompt.
would render as:
To login to the system, enter "GUEST" at the command prompt.
The Sample element can be used to indicate a sequence of literal characters and is typically rendered in a monospaced font.
A sequence of <SAMP>literal characters</SAMP> commonly renders in a monospaced font.
would render as:
A sequence of literal characters commonly renders in a monospaced font.
The <SMALL> element specifies that the enclosed text should be displayed, if practical, using a small font (compared with the current font). This is an HTML 3.2 element and may not be widely supported.
This is normal text, with <SMALL>this bit</SMALL> being small text.
would be rendered as:
This is normal text, with this bit being small text.
| Note |
Use of this element is currently supported by Netscape and the Internet Explorer only. They also allow the <SMALL>...</SMALL> element to be used surrounding the <SUB>...</SUB> and <SUP>...</SUP> elements to force rendering of the sub/superscript text as text even smaller than the default slightly smaller (compared to the normal) text normally used. |
The exact appearance of the small text will change depending on any <FONT SIZE=...> and <BASEFONT SIZE=...> settings, if specified.
The <STRIKE>...</STRIKE> element states that the enclosed text should be displayed with a horizontal line striking through the text. Alternative mappings are allowed if this is not practical. This is an HTML 3.2 element and may not be widely supported.
This text would be <STRIKE>struck through</STRIKE>.
would be rendered as:
This text would bestruck through.
| Note |
Although use of the <STRIKE> element is currently supported by Netscape and Mosaic, the element contained in current versions of the HTML 3.2 specification, is <S>...</S>, which is supported by Mosaic, but not Netscape. The Microsoft Internet Explorer supports either version of the element. |
The Strong element can be used to indicate strong typographic emphasis and is typically rendered in a bold font.
The instructions <STRONG>must be read</STRONG> before continuing.
would be rendered as:
The instructions must be read before continuing.
The <SUB> element specifies that the enclosed text should be displayed as a subscript, and, if practical, using a smaller font (compared with normal text). This is an HTML 3.2 element and may not be widely supported.
This is the main text, with <SUB>this bit</SUB> being subscript.
This is the main text, with this bit being subscript.
| Note |
The selected text will be made a superscript to the main text, formatting the selected text slightly smaller than the normal text. Netscape and the Internet Explorer can be forced to make subscripts even smaller by compounding the <SUB>...</SUB> element with the <SMALL>...</SMALL> element, or be forced to render the subscript the same size as the normal text, by compounding the <SUB>...</SUB> element with the <BIG>...</BIG> element. |
The exact appearance of the subscript text will change depending on any <FONT SIZE=...> and <BASEFONT SIZE=...> settings, if specified.
The <SUP> element specifies that the enclosed text should be displayed as a superscript, and, if practical, using a smaller font (compared with normal text). This is an HTML 3.2 element and may not be widely supported.
This is the main text, with <SUP>this bit</SUP> being superscript.
This is the main text, with this bit being superscript.
| Note |
The selected text will be made a superscript to the main text, formatting the selected text slightly smaller than the normal text. Netscape and the Internet Explorer can be forced to make superscripts even smaller by compounding the <SUP>...</SUP> element with the <SMALL>...</SMALL> element, or be forced to render the superscript the same size as the normal text, by compounding the <SUP>...</SUP> element with the <BIG>...</BIG> element. |
The exact appearance of the superscript text will change depending on any <FONT SIZE=...> and <BASEFONT SIZE=...> settings, if specified.
The Teletype element specifies that the text should be rendered in fixed-width typewriter font where available. Otherwise, alternative mapping is allowed.
Text between the <TT> typetype elements</TT> should be rendered in fixed-width typewriter font.
would render as:
Text between the typetype elements should be rendered in fixed-width typewriter font.
The <U>...</U> elements state that the enclosed text should be rendered, if practical, underlined. This is an HTML 3.2 element and may not be widely supported.
The <U>main point</U> of the exercise...
would be rendered as:
The main point of the exercise...
| Note |
As yet, Netscape doesn't support use of the <U> element. |
The Variable element can be used to indicate a variable name and is typically rendered in an italic font.
When coding, <VAR>LeftIndent()</VAR> must be a variable.
would render as:
When coding, LeftIndent() must be a variable.
HTML supports several types of lists, all of which may be nested.
If used they should be present in the <BODY>
of an HTML document.
| <DL>...</DL> | Definition list |
| <DIR>...</DIR> | Directory list |
| <MENU>...</MENU> | Menu list |
| <OL>...</OL> | Ordered list |
| <UL>...</UL> | Unordered list |
A Directory List element can be used to present a list of items, which may be arranged in columns, typically 24 characters wide. Some browsers will attempt to optimize the column width as a function of the widths of individual elements.
A directory list must begin with the <DIR> element which is immediately followed by a <LI> (list item) element:
<DIR> <LI>A-H <LI>I-M <LI>M-R <LI>S-Z </DIR>
Definition lists are typically rendered by browsers, with the definition term <DT> flush left in the display window with the definition data <DD> rendered in a separate paragraph, indented after the definition term. Individual browsers may also render the definition data on a new line, below the definition term.
Example of use:
<DL> <DT><PRE><DD>Allows for the presentation of preformatted text. <DT><P><DD>This is used to define paragraph blocks. </DL>
The layout of the definition list is at the discretion of individual browsers. However, generally, the <DT> column is allowed one-third of the display area. If the term contained in the <DT> definition exceeds this in length, it may be extended across the page with the <DD> section moved to the next line, or it may be wrapped onto successive lines of the left-hand column.
Single occurrences of a <DT> element without a subsequent <DD> element are allowed and have the same significance as if the <DD> element had been present with no text.
The opening list element must be <DL> and must be immediately followed by the first term (<DT>).
The definition list type can take the COMPACT attribute, which suggests that a compact rendering be used, so as to minimize inefficient display window space. Generally, this will be displayed as a table, with the definition terms and data being rendered on the same line.
<DL COMPACT> <DT><PRE><DD>Allows for the presentation of preformatted text. <DT><P><DD>This is used to define paragraph blocks. </DL>
Menu lists are typically rendered as discrete items on a single line. This arrangement is more compact than the rendering of an unordered list. Typically, a menu list will be rendered as a bulleted list, but this is at the discretion of the browser.
A menu list must begin with a <MENU> element which is immediately followed by a <LI> (list item) element:
<MENU> <LI>First item in the list. <LI>Second item in the list. <LI>Third item in the list.
</MENU>
The Ordered List element is used to present a numbered list of items, sorted by sequence or order of importance and is typically rendered as a numbered list, but this is at the discretion of individual browsers.
| Note |
The list elements are not sorted by the browser when displaying the list. (This sorting should be done manually when adding the HTML elements to the desired list text.) Ordered lists can be nested. |
An ordered list must begin with the <OL> element which is immediately followed by a <LI> (list item) element:
<OL> <LI>Click on the desired file to download. <LI>In the presented dialog box, enter a name to save the file with. <LI>Click 'OK' to download the file to your local drive.
</OL>
The Ordered List element can take the COMPACT attribute, which suggests that a compact rendering be used.
As mentioned above, the average ordered list counts 1, 2, 3, ...
and so on. The TYPE attribute
allows authors to specify whether the list items should be marked
with:
| Capital letters. For example, A, B, C ... | |
| Small letters. For example, a, b, c ... | |
| Large Roman numerals. For example, I, II, III ... | |
| Small Roman numerals. For example, i, ii, iii ... | |
| The default numbers. For example, 1, 2, 3 ... |
For lists that wish to start at values other than 1, the new attribute START is available.
START is always specified in the default numbers and will be converted based on TYPE before display. Thus START=5 would display either an E, e, V, v, or 5 based on the TYPE attribute. For examples, changing the preceding example to:
<OL TYPE=a START=3> <LI>Click on the desired file to download. <LI>In the presented dialog box, enter a name to save the file with. <LI>Click 'OK' to download the file to your local drive.
</OL>
would present the list as using lower-case letters, starting at c.
To give even more flexibility to lists, the TYPE attribute can be used with the <LI> element. It takes the same values as <OL> and it changes the list type for that item and all subsequent items. For ordered lists, the VALUE attribute is also allowed, which can be used to set the count for that list item and all subsequent items.
| Note |
The TYPE attribute used in the <OL> element and the <LI> element and the START attribute in the <OL> element are supported only by Netscape and Internet Explorer. |
The Unordered List element is used to present a list of items which is typically separated by white space and/or marked by bullets, but this is at the discretion of individual browsers.
An unordered list must begin with the <UL> element, which is immediately followed by a <LI> (list item) element: Unordered lists can be nested.
<UL> <LI>First list item <LI>Second list item <LI>Third list item
</UL>
The Unordered List element can take the COMPACT attribute, which suggests that a compact rendering be used.
The basic bulleted list has a default progression of bullet types that changes-from a solid disc, to a circle, to a square-as you move through indented levels. The TYPE attribute can be used in the <UL> element so that no matter what the indent level the bullet type can be specified thus:
TYPE=disc TYPE=circle TYPE=square
To give even more flexibility to lists, the TYPE attribute to the <LI> element is also allowed. It takes the same values as <UL> and it changes the list type for that item and all subsequent items.
| Note |
The TYPE attribute when used in the <UL> and <LI> elements is supported by Netscape only. |
At present, the table HTML elements are
| <TABLE>...</TABLE> | The table delimiter |
| <TR ...>...</TR> | Used to specify number of rows in a table |
| <TD ...>...</TD> | Specifies table data cells |
| <TH ...>...</TH> | Table header cell |
| <CAPTION ...>...</CAPTION> | Specifies the table caption |
Internet Explorer has introduced support for various HTML 3.0 table elements. Those introduced are
| <THEAD>...</THEAD> | Specifies the Table head |
| <TBODY>...</TBODY> | Specifies the Table body |
| <TFOOT>...</TFOOT> | Specifies the Table footer |
| <COLGROUP>...</COLGROUP> | Used to group column alignments |
| <COL>...</COL> | Used to specify individual column alignments |
Also, some new attributes have been introduced. These are
| <TABLE BACKGROUND="..."> | Specifies a background image for the table |
| <TH BACKGROUND="..."> | Specifies a background image for the table header |
| <TD BACKGROUND="..."> | Specifies a background image for table data cell |
| <TABLE FRAME="..."> | Specifies the appearance of the Table frame |
| <TABLE RULES="..."> | Specifies the appearance of the Table dividing lines |
This is the main wrapper for all the other table elements, and other table elements will be ignored if they aren't wrapped inside of a <TABLE>...</TABLE> element. By default, if tables have no borders, borders will be added if the BORDER attribute is specified.
The <TABLE> element has the following attributes.
Some browsers (Internet Explorer and Netscape) support the ALIGN attribute to the <TABLE> element. Like that used for floating images, it allows a table to be aligned to the left or right of the page, allowing text to flow around the table. Also, as with floating images, it is necessary to have knowledge of the <BR CLEAR=...> element to be able to organize the text display so as to minimize poor formatting.
Internet Explorer supports the placing of images in the <TABLE> element. (Also in the <TD> and <TH> elements) If used in the <TABLE> element, the image in question will be tiled behind all of the table cells. Any of the supported graphic file formats can be used as a graphic behind a table.
Internet Explorer and Netscape support use of this attribute (also supported in the <BODY> element). It allows the background color of the table to be specified, using either the specified color names or a rrggbb hex triplet.
This attribute can be used to both control and set the borders to be displayed for the table. If present, then a border will be drawn around all data cells. The exact thickness and display of this default border is at the discretion of individual browsers. If the attribute isn't present, then the border is not displayed, but the table is rendered in the same position as if there were a border (that is, allowing room for the border). It can also be given a value, that is, BORDER=<value>, which specifies the thickness of the table border. The border value can be set to 0, which regains all the space that the browser has set aside for any borders (as in the case where no border has been set).
Internet Explorer includes support for this attribute which sets the border color of the table. Any of the predefined color names can be used, as well as any color defined by a rrggbb hex triplet. It is necessary for the BORDER attribute to be present in the main <TABLE> element for border coloring to work.
Internet Explorer allows the use of the BORDERCOLORDARK attribute to independently set the darker color to be displayed on a 3D <TABLE> border. It is the opposite of BORDERCOLORLIGHT. Any of the predefined color names can be used, as well as any color defined by a rrggbb hex triplet. It is necessary for the BORDER attribute to be present in the main <TABLE> element for border coloring to work.
| Note |
The BGCOLOR, BORDERCOLOR, BORDERCOLORLIGHT and BORDERCOLORDARK attributes can also be used in <TH>, <TR>, and <TD> elements, with the color defined in the last element overriding those defined before. For example, if a <TD> element contains a BORDERCOLOR attribute setting, the setting specified will be used instead of any color settings that may have been specified in the <TR> element, which in turn overrides any color settings in the <TABLE> element. |
Internet Explorer allows use of the BORDERCOLORLIGHT attribute to independently set the lighter color to be displayed on a 3D <TABLE> border. It is the opposite of BORDERCOLORDARK. Any of the pre-defined color names can be used, as well as any color defined by a rrggbb hex triplet. It is necessary for the BORDER attribute to be present in the main <TABLE> element for border coloring to work.
The CELLPADDING is the amount of white space between the borders of the table cell and the actual cell data (whatever is to be displayed in the cell). It defaults to an effective value of 1. This example gives the most compact table possible:
<TABLE BORDER=0 CELLSPACING=0 CELLPADDING=0>
The CELLSPACING is the amount of space inserted between individual table data cells. It defaults to an effective value of 2.
Only Internet Explorer supports the use of this attribute. It requires the BORDER attribute to be set and affects the display of the table borders. It can accept any of the following values:
| void | This removes all the external borders. |
| Above | This displays external borders at the top of the table only. |
| Below | This displays external borders at the bottom of the table only. |
| Hsides | This displays external borders at the horizontal sides of the table. That is, at the top and bottom of the table. |
| Lhs | This displays external borders at the left-hand edges of the table only. |
| Rhs | This displays external borders at the right-hand edges of the table only. |
| Vsides | This displays external borders at both left- and right-hand edges of the table. |
| Box | This displays a box around the table (that is, top, bottom, left- and right-hand sides). |
If used, this attribute can specify either the exact height of the table in pixels, or the height of the table as a percentage of the browser display window.
Internet Explorer supports this new attribute. It requires the BORDER value to be set and may only be used in tables where the <THEAD>, <TBODY>, and <TFOOT> sections have been set. It affects the display of the internal table borders ("rules"). It can accept the following values:
| none | This removes all the internal rules. |
| basic | This displays horizontal borders between the <THEAD>, <TBODY> and <TFOOT> sections. |
| rows | This displays horizontal borders between all rows. |
| cols | This displays horizontal borders between all columns. |
| all | This displays all the internal rules. |
The Internet Explorer supports this attribute that specifies the vertical alignment of the text displayed in the table cells. The default (which is also used if the attribute is not set) is centeraligned.
If used, this attribute can specify either the exact width of the table in pixels, or the width of the table as a percentage of the browser display window.
This represents the caption for a table. <CAPTION> elements should appear inside the <TABLE> but not inside table rows or cells. The caption accepts an alignment attribute that defaults to ALIGN=top but can be explicitly set to ALIGN=bottom. Like table cells, any document body HTML can appear in a caption. Captions are, by default, horizontally centered with respect to the table, and they may have their lines broken to fit within the width of the table.
The <CAPTION> element can accept the following attributes.
The ALIGN attribute controls whether the caption appears above or below the table, using the top and bottom values, defaulting to top. The Internet Explorer allows the <CAPTION> element to be left, right or center aligned. For the Internet Explorer to set the <CAPTION> at the top or bottom of the table, it is necessary to use the VALIGN attribute.
The Internet Explorer allows use of the VALIGN attribute inside the <CAPTION> element. It specifies whether the caption text should be displayed at the top or bottom of the table.
This element, which is Internet Explorer-specific, can be used to specify the text alignment for table columns. It accepts the following attributes.
This sets the text alignment within the column group. The default value is "center".
This can be used to set the number of columns upon which the ALIGN attribute is to act.
This element, which is Internet Explorer-specific, can be used to group columns together to set their alignment properties. It accepts the following attributes:
This sets the text alignment within the column group. The default value is "center".
This can be used to set the number of columns upon which the ALIGN and VALIGN attributes are to act.
This sets the vertical text alignment within the column group.
This element, which is Internet Explorer-specific, is used to specify the body section of the table. It is somewhat analogous to the <BODY> element. It does directly affect the rendering of the table on the screen, but is required if you want RULES to be set in the <TABLE> .
This stands for table data, and specifies a standard table data cell. Table data cells must only appear within table rows. Each row need not have the same number of cells specified, as short rows will be padded with blank cells on the right. A cell can contain any of the HTML elements normally present in the body of an HTML document.
Internet Explorer will allows the use of <TD></TD> to specify a blank cell, that will be rendered with a border (providing a border has been set). Other browsers will require some character within a data cell for it to be rendered with a border.
<TD ...>...</TD> can accept the following attributes.
This attribute controls whether text inside the table cell(s) is aligned to the left, right or center.
Internet Explorer supports the placing of images inside the <TD> element. (Also in the <TABLE>, <TD>, and <TH> elements.) If used in the <TD> element, the image in question will be tiled behind the particular data cell. Any of the supported graphic file formats can be used as a graphic behind a table.
Internet Explorer and Netscape support use of this attribute (also supported in the <BODY> element). It allows the background color of the data cell to be specified, using either the specified color names or a rrggbb hex triplet.
Internet Explorer includes support for this attribute which sets the border color of the data cell. Any of the pre-defined color names can be used, as well as any color defined by a rrggbb hex triplet. It is necessary for the BORDER attribute to be present in the main <TABLE> element for border coloring to work.
Internet Explorer allows use of the BORDERCOLORDARK attribute to independently set the darker color to be displayed on a 3D <TD> border. It is the opposite of BORDERCOLORLIGHT. Any of the predefined color names can be used, as well as any color defined by a rrggbb hex triplet. It is necessary for the BORDER attribute to be present in the main <TABLE> element for border coloring to work.
| Note |
The BGCOLOR, BORDERCOLOR, BORDERCOLORDARK and BORDERCOLORLIGHT attributes can also be used in <TABLE>, <TH>, and <TR> elements, with the color defined in the last element over-riding those defined before. For example, if a <TD> element contains a BORDERCOLOR attribute setting, the setting specified will be used instead of any color settings that may have been specified in the <TR> element, which in turn overrides any color settings in the <TABLE> element. |
Internet Explorer allows use of the BORDERCOLORLIGHT attribute to independently set the lighter color to be displayed on a 3D <TD> border. It is the opposite of BORDERCOLORDARK. Any of the predefined color names can be used, as well as any color defined by a rrggbb hex triplet. It is necessary for the BORDER attribute to be present in the main <TABLE> element for border coloring to work.
This attribute can appear in any table cell (<TH> or <TD>) and it specifies how many columns of the table this cell should span. The default COLSPAN for any cell is 1.
If used, this attribute can specify either the exact height of the data cell in pixels, or the height of the data cell as a percentage of the browser display window. Only one data cell can set the height for an entire row, typically being the last data cell to be rendered.
If this attribute appears in any table cell (<TH> or <TD>) it means the lines within this cell cannot be broken to fit the width of the cell. Be cautious in use of this attribute as it can result in excessively wide cells.
This attribute can appear in any table cell (<TH> or <TD>) and it specifies how many rows of the table this cell should span. The default ROWSPAN for any cell is 1. A span that extends into rows that were never specified with a <TR> will be truncated.
The VALIGN attribute controls whether text inside the table cell(s) is aligned to the top, to the bottom, or vertically centered within the cell. It can also specify that all the cells in the row should be vertically aligned to the same baseline.
If used, this attribute can specify either the exact width of the data cell in pixels, or the width of the data cell as a percentage of the table being displayed. Only one data cell can set the width for an entire column, typically being the last data cell to be rendered.
This element, which is Internet Explorer-specific, is used to specify the footer section of the table. It does directly affect the rendering of the table on the screen, but is required if you want RULES to be set in the <TABLE> .
This stands for table header. Header cells are identical to data cells in all respects, with the exception that header cells are in a bold font, and have a default ALIGN=center.
<TH ...>...</TH> can contain the following attributes:
This attribute controls whether text inside the table cell(s) is aligned to the left, right or center of the cell.
Internet Explorer supports the placing of images inside the <TH> element. (Also in the <TABLE>, <TD> and <TH> elements) If used in the <TH> element, the image in question will be tiled behind the particular data cell. Any of the supported graphic file formats can be used as a graphic behind a table.
Internet Explorer and Netscape support use of this attribute (also supported in the <BODY> element). It allows the background color of the header cell to be specified, using either the specified color names or a rrggbb hex triplet.
Internet Explorer includes support for this attribute which sets the border color of the header cell. Any of the pre-defined color names can be used, as well as any color defined by a rrggbb hex triplet. It is necessary for the BORDER attribute to be present in the main <TABLE> element for border coloring to work.
Internet Explorer allows use of the BORDERCOLORDARK attribute to independently set the darker color to be displayed on a 3D <TH> border. It is the opposite of BORDERCOLORLIGHT. Any of the predefined color names can be used, as well as any color defined by a rrggbb hex triplet. It is necessary for the BORDER attribute to be present in the main <TABLE> element for border coloring to work.
| Note |
The BGCOLOR, BORDERCOLOR, BORDERCOLORDARK and BORDERCOLORLIGHT attributes can also be used in <TABLE>, <TD>, and <TR> elements, with the color defined in the last element over-riding those defined before. For example, if a <TD> element contains a BORDERCOLOR attribute setting, the setting specified will be used instead of any color settings that may have been specified in the <TR> element, which in turn overrides any color settings in the <TABLE> element. |
Internet Explorer allows use of the BORDERCOLORLIGHT attribute to independently set the lighter color to be displayed on a 3D <TH> border. It is the opposite of BORDERCOLORDARK. Any of the predefined color names can be used, as well as any color defined by a rrggbb hex triplet. It is necessary for the BORDER attribute to be present in the main <TABLE> element for border coloring to work.
This attribute can appear in any table cell (<TH> or <TD>) and it specifies how many columns of the table this cell should span. The default COLSPAN for any cell is 1.
If used, this attribute can specify either the exact height of the data cell in pixels, or the height of the data cell as a percentage of the browser display window. Only one data cell can set the height for an entire row, typically being the last data cell to be rendered.
This attribute specifies that the lines within this cell cannot be broken to fit the width of the cell. Be cautious in use of this attribute as it can result in excessively wide cells.
This attribute can appear in any table cell (<TH> or <TD>) and it specifies how many rows of the table this cell should span. The default ROWSPAN for any cell is 1. A span that extends into rows that were never specified with a <TR> will be truncated.
The VALIGN attribute controls whether text inside the table cell(s) is aligned to the top or bottom or vertically centered within the cell. It can also specify that all the cells in the row should be vertically aligned to the same baseline.
If used, this attribute can specify either the exact width of the data cell in pixels, or the width of the data cell as a percentage of the table being displayed. Only one data cell can set the width for an entire column, typically being the last data cell to be rendered.
This element, which is Internet Explorer-specific, is used to specify the head section of the table. It is somewhat analogous to the <HEAD> element. It does directly affect the rendering of the table on the screen, but is required if you want RULES to be set in the <TABLE> .
This stands for table row. The number of rows in a table is exactly specified by how many <TR> elements are contained within it, regardless of cells that may attempt to use the ROWSPAN attribute to span into non-specified rows.
The <TR> element can have the following attributes.
This controls whether text inside the table cell(s) is aligned to the left, right or center of the cell.
Internet Explorer and Netscape support use of this attribute (also supported in the <BODY> element). It allows the background color of the table to be specified, using either the specified color names or a rrggbb hex triplet.
Internet Explorer includes support for this attribute which sets the border color of the row. Any of the predefined color names can be used, as well as any color defined by a rrggbb hex triplet. It is necessary for the BORDER attribute to be present in the main <TABLE> element for border coloring to work.
Internet Explorer allows use of the BORDERCOLORDARK attribute to independently set the darker color to be displayed on a 3D <TR> border. It is the opposite of BORDERCOLORLIGHT. Any of the predefined color names can be used, as well as any color defined by a rrggbb hex triplet. It is necessary for the BORDER attribute to be present in the main <TABLE> element for border coloring to work.
| Note |
The BGCOLOR, BORDERCOLOR, BORDERCOLORLIGHT and BORDERCOLORDARK attributes can also be used in <TABLE>, <TH>, and <TD> elements, with the color defined in the last element overriding those defined before. For example, if a <TD> element contains a BORDERCOLOR attribute setting, the setting specified will be used instead of any color settings that may have been specified in the <TR> element, which in turn overrides any color settings in the <TABLE> element. |
Internet Explorer allows use of the BORDERCOLORLIGHT attribute to independently set the lighter color to be displayed on a 3D <TR> border. It is the opposite of BORDERCOLORDARK. Any of the predefined color names can be used, as well as any color defined by a rrggbb hex triplet. It is necessary for the BORDER attribute to be present in the main <TABLE> element for border coloring to work.
This attribute controls whether text inside the table cell(s) is aligned to the top, to the bottom, or vertically centered within the cell. It can also specify that all the cells in the row should be vertically aligned to the same baseline.
Here are some sample HTML <TABLE> fragments with accompanying screenshots.
<TABLE BORDER> <TR> <TD>Data cell 1</TD><TD>Data cell 2</TD> </TR> <TR> <TD>Data cell 3</TD><TD>Data cell 4</TD> </TR> </TABLE>
Figure B.2 : A simple four-cell table.
<TABLE BORDER> <TR> <TD ROWSPAN=2>This cell spans two rows</TD> <TD>These cells</TD><TD>would</TD> </TR> <TR> <TD>contain</TD><TD>other data</TD> </TR>
</TABLE>
Figure B.3 : A table with spanning rows.
<TABLE BORDER> <TR> <TD>Data cell 1</TD> <TD COLSPAN=2>This cell spans 2 columns</TD> </TR> <TR> <TD>Data cell 2</TD><TD>Data cell 3</TD><TD>Data cell 4</TD> </TR>
</TABLE>
Figure B.4 : A table with spanning columns.
<TABLE BORDER> <TR> <TH>Netscape</TH><TH>Internet Explorer</TH><TH>Mosaic</TH> </TR> <TR> <TD>X</TD><TD>X</TD><TD>-</TD> </TR> <TR> <TD>X</TD><TD>-</TD><TD>X</TD> </TR>
</TABLE>
<TABLE BORDER> <TR> <TD><TH ROWSPAN=2></TH> <TH COLSPAN=3>Browser</TH></TD> </TR> <TR> <TD><TH>Netscape</TH><TH>Internet Explorer</TH><TH>Mosaic</TH></TD> </TR> <TR> <TH ROWSPAN=2>Element</TH> <TH><DFN></TH><TD>-</TD><TD>X</TD><TD>-</TD> </TR> <TR> <TH><DIR></TH><TD>X</TD><TD>X</TD><TD>X</TD> </TR> </TABLE>
This table adds ALIGN and VALIGN attributes to the preceding example to improve the layout of the table.
<TABLE BORDER> <TR> <TD><TH ROWSPAN=2></TH> <TH COLSPAN=3>Browser</TH></TD> </TR> <TR> <TD><TH>Netscape</TH><TH>Internet Explorer</TH><TH>Mosaic</TH></TD> </TR> <TR> <TH ROWSPAN=2 VALIGN=top>Element</TH> <TH><DFN></TH> <TD ALIGN=center>-</TD> <TD ALIGN=center>X</TD> <TD ALIGN=center>-</TD> </TR> <TR> <TH><DIR></TH> <TD ALIGN=center>X</TD> <TD ALIGN=center>X</TD> <TD ALIGN=center>X</TD> </TR> </TABLE>
Figure B.7 : Improving the layout of a table.
To show that tables can be nested within each other. This table uses the ROWSPAN table, including the "simple" table inside one of the data cells.
<TABLE BORDER> <TR> <TD ROWSPAN=2>This cell spans two rows <TABLE BORDER> <TR> <TD>Data cell 1</TD><TD>Data cell 2</TD> </TR> <TR> <TD>Data cell 3</TD><TD>Data cell 4</TD> </TR> </TABLE> </TD> <TD>These cells</TD><TD>would</TD> </TR> <TR> <TD>contain</TD><TD>other data</TD> </TR> </TABLE>
Figure B.8 : Nesting one table inside another.
<TABLE ALIGN=left BORDER WIDTH=50%> <TR> <TD>This is a two row table</TD> </TR> <TR> <TD>It is aligned to the left of the page</TD> </TR> </TABLE> This text will be to the right of the table, and will fall neatly beside the table <BR CLEAR=all> <HR> <TABLE ALIGN=right BORDER WIDTH=50%> <TR> <TD>This is a two row table</TD> </TR> <TR> <TD>It is aligned to the right of the page</TD> </TR> </TABLE> This text will be to the left of the table, and will fall neatly beside the table <BR CLEAR=all> <HR>
Figure B.9 : Tables that can float in the document.
<TABLE BORDER BGCOLOR=Silver BORDERCOLOR=Black WIDTH=50%> <TR> <TD>This is the first cell</TD> <TD>This is the second cell</TD> </TR> <TR BORDERCOLOR=Red BGCOLOR=Green> <TD>This is the third cell</TD> <TD>This is the fourth cell</TD> </TR> <TR BORDERCOLOR=Red BGCOLOR=Green> <TD BORDERCOLOR=Yellow>This is the fifth cell</TD> <TD BGCOLOR=White>This is the sixth cell</TD> </TR> </TABLE>
Figure B.10: Color can be added to cells.
| Note |
The following HTML table is at present only supported by Internet Explorer. |
<TABLE BORDER FRAME=hsides RULES=cols> <COL ALIGN=left> <COLGROUP SPAN=3 ALIGN=center VALIGN=middle> <THEAD> <CAPTION ALIGN=center><FONT SIZE=+1><B>A section of the Comparison Table</B> </FONT> </CAPTION> <TR> <TD>Element</TD><TD><B>Internet Explorer</B></TD><TD><B>Netscape</B> </TD><TD><B>Mosaic</B></TD> </TR> </THEAD> <TBODY> <TR> <TD><B></TD><TD>X</TD><TD>X</TD><TD>X</TD> </TR> <TR> <TD><BASE ...></TD><TD>X</TD><TD>X</TD><TD>X</TD> </TR> <TR> <TD> ...HREF</TD><TD>X</TD><TD>X</TD><TD>X</TD> </TR> <TR> <TD> ...TARGET</TD><TD>X</TD><TD>X</TD><TD></TD> </TR> <TR> <TD><BASEFONT ...></TD><TD>X</TD><TD>X</TD><TD></TD> </TR> <TR> <TD VALIGN=top> ...SIZE</TD><TD>X<BR><FONT SIZE=-1> (only visible<BR>when FONT<BR>SIZE= used<BR>as well)</FONT></TD><TD VALIGN=top>X</TD> <TD></TD> </TR> <TR> <TD> ...FACE</TD><TD>X</TD><TD></TD><TD></TD> </TR> <TR> <TD VALIGN=top><BGSOUND ...></TD><TD VALIGN=top>X</TD><TD> </TD><TD>X<BR><FONT SIZE=-1>(will spawn<BR>player for<BR>.mid files) </FONT></TD> </TR> </TBODY> <TFOOT></TFOOT> </TABLE>
Figure B.11: A complex table created for Internet Explorer.
