Important Information

Author contact
If you have any problems or questions regarding the HTMLib, please direct them to the author at htmlib@htmlib.demon.co.uk.

Required ActiveX controls
This version of the HTMLib requires Internet Explorer 4.0x (4.01 recommended, with Shell Integration enabled) with the HtmlHelp 1.1 ActiveX controls installed for its basic functionality. Other ActiveX controls are employed throughout the HTMLib (for examples), but these are controls that should be installed with the Internet Explorer package (the label, timer, HTML Layout controls). The HtmlHelp controls are installed with Internet Explorer 4.01, but should the contents/index etc. not work, then download the HtmlHelp runtime control package from http://www.microsoft.com/workshop/author/htmlhelp/.

Back/History operation
The HTMLib 'Back' button will navigate back through the last 50 topics viewed. If you want to return to a previously viewed topic older than the 50 entries navigable by the back button, then use the History bar . This stores the last 2,000 topics viewed and any topic listed can be reached from there. Simply select the topic you wish to view and press 'Enter'. Note that re-loading the HTMLib (from the File menu) causes the History list and topics available by the 'Back' button to be flushed (i.e. they won't be available).

Thanks for using the HTMLib

© 1995-1998, Stephen Le Hunte


Introduction

The HTML Reference Library is the most definitive reference for currently useable HTML elements. It directly supports Internet Explorer, Netscape and Mosaic

Please read the Important Information topic if this is the first time you've used the HTMLib.

© 1995-1998, Stephen Le Hunte


Introduction to the HTMLib

To access information about any HTML element, locate it via the Index (accessible from the Index button, or View menu) and its details and examples will be displayed in this window. If you are just browsing the information, then use the 'Contents' page (accessible from the Contents button, or View menu) to go to overviews of HTML sections.

HTML Reference Library Conventions
In all of the reference pages, I have tried to make it easy to distinguish example code from the explanatory text, by displaying any example HTML code in an italic green font, with the relevant code being described being bold text. Also, on a page detailing an element that has several attributes, the first time each attribute is mentioned, it will be in a Bold, Maroon font.

Within the HTMLHelp HTMLib, there are two types of hyperlinks. Internal hyperlinks are those that take you to a different topic inside the HTMLib. They appear like this. External links are links that take you to a remote Web site. For these links, a separate copy of Internet Explorer will navigate to the remote link, leaving the HTMLib still available. External links appear like this. Note that only one external Internet Explorer will be used by the HTMLib, with the running instance being 'Stopped' before the new external link is loaded. If you want more than one external copy of Internet Explorer running at any one time, then open a separate copy manually and use the URL given in the HTMLib for the new document. If you already have Internet Explorer running when any HTMLib external links are activated, a new instance (under the control of the HTMLib) of Internet Explorer will be used to navigate to the links given in the HTMLib.

Where a page uses examples that are completely browser dependant and no display workaround was possible, then a graphic for the particular browser required will be visible at the top of the page, surrounding the heading. I hope this doesn't cause too many problems.

What the HTMLib is and isn't
The HTMLib is the most comprehensive guide to currently useable HTML elements available. Where other reference material falls down is that it details (normally without examples) all HTML elements covered in various HTML specifications originating from the World Wide Web Consortium (W3C). While most of the elements in such specifications have been adopted by browsers, a lot haven't (particularly in the case of the ill-fated HTML 3.0 specification). There is no point in documenting such elements in a useable reference. So, the HTMLib covers only those elements that have been adopted by browsers and attempts to detail the level of support for those elements. Its secondary aim is to provide a single location for such documentation, to eliminate the need for expensive on-line checking of browser support for HTML elements.

The HTMLib isn't designed to replace any of the W3C specification documents, or documentation provided by browser vendors. This is particularly the case when considering the HTMLib Scripting reference. Scripting is largely the programming side of HTML and as such relies on the imagination and skill of the script author to produce almost limitless effects. While you are still constrained by browser support for scripting capabilities, this gap is less than the cavernous gulf between the HTML capabilities of browsers. Where external links to other reference material are given, the reader is encouraged to check the documentation, as such links imply that the particular section of information in the HTMLib is condensed.

Contacting the Author
If you have any questions regarding the HTMLib please direct them to me at htmlib@htmlib.demon.co.uk. If you have any general HTML related questions, please try the HTMLibrd - a web based discussion group for the HTMLib. To be included on the HTMLib mailing list (to obtain release notes, news about new releases etc.) mail the author. Note : This is not an auto-reply address and there are no subscription instructions. Just send a message saying that you want to be included on the mailing list. Also note that this mailing list is not disclosed to any third parties.

Licensing terms
The HTMLib is provided AS IS and WITHOUT WARRANTIES as to performance or merchantability or any other warranties expressed or implied. Use of the HTMLib constitutes an agreement that the HTMLib will not be used (in whole, or in part) as the basis for any other on-line or printed reference material, web-site, or other publication. Support, by e-mail, of the HTMLib is entirely at the authors discretion. Blah blah blah, does anyone ever read licence agreements anyway? (Yes, I did mean this bit to stay in).

Redistribution terms
The HTMLib may be redistributed on any publicly accessible web, ftp or gopher site, providing the authors permission has been obtained prior to redistribution. The only condition for redistribution in such a manner is a link back to the main HTMLib web site.
Redistribution on any non-profit making product (such as an ISP subscriber CD, or a university compilation CD etc.), magazine, book or other publications cover/accompanying CD is allowed with the authors prior permission, in return for a free copy of the CD (or other product) that includes the HTMLib.
For redistribution on 'for-profit' CD products (including other software application), or integration into a larger software application, contact the author before making any arrangements for redistribution/integration.
The HTMLib content may not be used as the content for any other on-line HTML reference, in whole, or part.
Outside of anything detailed above and without the authors prior consent, the HTMLib may not be redistributed in any way. For any other redistribution concepts, or if you have questions regarding anything above, mail the author at htmlib@htmlib.demon.co.uk.

Acknowledgements
Here is the 'without whom...' section of the HTML Reference Library. People mentioned here (in no particular order) have made invaluable contributions to the HTML Reference Library over the course of its life so far, and to them I am eternally grateful.

Hayley, for enduring hours of inane HTMLib related babble.
Nick, for loads of advice.
Nona, for being the best host honeymooners could ask for ;)
Jeff, Gale, Steve L., John and Ralph at Microsoft, for loads of help, advice and top tips.
Hans, for producing a top quality mirror for downloading the HTMLib (and providing the space and registration procedures for beta downloads). Also, for providing the HTMLibrd, a Web based conference for discussion about the HTMLib and HTML issues. Visit it at http://hjs.geol.uib.no/webstart.htm.
Steve at Sausage Software, Frank at FLFSoft, Adam at SoftQuad, Art at IST, Todd at American Cybernetics. and Francis at Intelligent Environments Inc.
Mark West at Questar Microsystems.
Cub Lea, for valuable WinHelp related advice.
Mark at Sams.Net and Gina (formerly) at Wrox Press
Steve Pruitt at, for his tireless help on the WinHelp mailing list and particularly for advice about the Activated HTMLib portion of the HTMLib Web Site.
Christian, for his help/advice about the HTMLib Web Site.
Ben Weisner, of the Weisner Associates, for production of the Help Authors Resource Kit. Michael Cessna of http://www.wordmission.org/, for invaluable help, advice and for being a knowledge fountain.
Brian, for help and advice about the HTMLib. Visit 'index dot HTML', for the nearest to a Web based HTMLib that there is.
Niall at InstallShield, for his help concerning the InstallShield software used for the HTMLib installation routine.
Jeff for mirroring the complete HTMLib Web site at http://www.terminalp.com/htmlib/. Also, Ken for the other US mirror. Visit it at http://www.arachne.net/htmlib/
Nick Bradbury http://www.allaire.com/, author of the excellent Allaire HomeSite editor, which was used extensively for the HTMLib.
Peter, Al and everyone at Q4, producers of DESL. Highly talented UK developers and great Defender players.
Scott Boggan of Walker Richer Quinn, Cheryl Lockett Zuback of Workwrite and William Meisheid of Sageline Publishing for encouragement and exposure
Joe Welinske of Winwriters and Matthew Ellison of DigiText for encouragement and taking pity on a poor student
Ginsters for the best Cornish pasties money can buy (outside of Cornwall)

Copyright and Trademarks
This HTML Reference Library and the names 'The HTML Reference Library', 'HTMLib', 'The HTMLib Colour Wizard', 'The Activated Colour Wizard' and the Colour Wizard ActiveX control and Java applet are all © 1995-1998, Stephen Le Hunte (htmlib@htmlib.demon.co.uk)

'What do you want to know today?' is © William Meisheid, www.sageline.com Used with permission

Netscape is a registered trademark of Netscape Communications Corp. Updated information about any of the Netscape products mentioned in this reference (Netscape Navigator, Communicator, JavaScript, Plug-in information etc.) can always be found at the Netscape Web site : http://www.netscape.com

Windows, Windows95, ActiveX, ActiveMovie, ActiveVRML, Visual Basic, Visual Basic Scripting Edition (VBScript), JScript (Microsoft's JavaScript implementation), Internet Assistant, Internet Explorer and HTMLHelp are either registered trademarks or trademarks of the Microsoft Corp. in the United States and/or other countries. More information about these products/technologies can be found at the Microsoft Web site at http://www.microsoft.com/. Portions of this reference are reprinted with permission granted by the Microsoft Corporation.

The Server Side Includes section of this document is taken from information kindly provided by Mark West of Questar Microsystems Inc. Updated SSI+ information can be obtained from http://www.questar.com/ssi/

Java and HotJava are trademarks of Sun Microsystems in the US and/or other countries. For more information about these products/technologies can be found at either http://java.sun.com/ or http://www.javasoft.com/.

All other brands and product names are trademarks or registered trademarks of their respective companies.

© 1995-1998, Stephen Le Hunte


Document Structure elements

These elements are required within a HTML document. Apart from the prologue document identifier, they represent the only HTML elements which are explicitly required for a document to conform to any HTML standard.

The essential document structure elements are :

<HTML> ... </HTML>
<HEAD> ... </HEAD>
<BODY> ... </BODY>

© 1995-1998, Stephen Le Hunte


<!DOCTYPE>

The following are various prologue identifiers that should be used in HTML documents. With the identifier is the name of the HTML DTD (document type definition) that the prologue identifier labels the HTML document as adhering to. I.e. a HTML document whose prologue identifier is <!DOCTYPE HTML PUBLIC "-//IETF//DTD HTML Level 1//EN//"> should adhere to the HTML-1.DTD (see the RFC for HTML 2.0 (RFC1866) for the DTD). Such a document should not contain Form elements for example.

The document prologue identifier should be included before the <HTML> element of a HTML document, in fact, it should be the first line of any HTML document.

How to refer to the HTML 4.0 specification (correct at the time of writing) :

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

How to refer to HTML Level 3.2 :

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

Ways to refer to Level 2: most general to most specific
These all require conformance to the HTML.DTD.

<!DOCTYPE HTML PUBLIC  "-//IETF//DTD HTML//EN">
<!DOCTYPE HTML PUBLIC  "-//IETF//DTD HTML 2.0//EN">
<!DOCTYPE HTML PUBLIC  "-//IETF//DTD HTML Level 2//EN">
<!DOCTYPE HTML PUBLIC  "-//IETF//DTD HTML 2.0 Level 2//EN">

Ways to refer to Level 1: most general to most specific
These all require conformance to the HTML-1.DTD.

<!DOCTYPE HTML PUBLIC  "-//IETF//DTD HTML Level 1//EN">
<!DOCTYPE HTML PUBLIC  "-//IETF//DTD HTML 2.0 Level 1//EN">

Ways to refer to Strict Level 2: most general to most specific
These all require conformance to the HTML-S.DTD.

<!DOCTYPE HTML PUBLIC  "-//IETF//DTD HTML Strict//EN">
<!DOCTYPE HTML PUBLIC  "-//IETF//DTD HTML 2.0 Strict//EN">
<!DOCTYPE HTML PUBLIC  "-//IETF//DTD HTML Strict Level 2//EN">
<!DOCTYPE HTML PUBLIC  "-//IETF//DTD HTML 2.0 Strict Level 2//EN">

Ways to refer to Strict Level 1: most general to most specific
These all require conformance to the HTML1-S.DTD.

<!DOCTYPE HTML PUBLIC  "-//IETF//DTD HTML Strict Level 1//EN">
<!DOCTYPE HTML PUBLIC  "-//IETF//DTD HTML 2.0 Strict Level 1//EN">

© 1995-1998, Stephen Le Hunte


<HTML>

This element identifies the document as containing HTML elements. It should immediately follow the prologue document identifier and serves to surround all of the remaining text, including all other elements. HTML user agents use the presence of this element at the start of a HTML document to ensure that the document is actually HTML, according to the "text/html" MIME type. The document should be constructed thus :

<!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 HTML user agent rendering and can contain only the <HEAD> and <BODY> elements.

NOTE : The <HTML> element can be used to set Style Sheet information to be used for the whole document.

TITLE="informational ToolTip"
The Internet Explorer 4.0 (and above) specific TITLE attribute is used for informational purposes. As the <HTML> element doesn't directly affect the display of a document, no ToolTip is presented when using the TITLE attribute (as with other elements).

LANG="language setting"
The LANG attribute can be used to specify what language the document is using. It accepts any valid ISO standard language abbreviation (for example "en" for English, "de" for German etc.) For more details, see the Document Localisation section for more details.

Consistent with Internet Explorer 4.0's Dynamic HTML object model, the <HTML> element supports various properties and methods. In its role as a document structure element, it supports no events.

<HTML...> Properties
Of the Standard Dynamic HTML properties, <HTML> supports className, document, id, isTextEdit, lang, parentElement, sourceIndex, tagName and title. See the Standard Dynamic HTML properties topic for details.

<HTML...> Methods
Of the Standard Dynamic HTML methods, <HTML> supports contains, getAttribute, removeAttribute and setAttribute. See the Standard Dynamic HTML methods topic for details.

© 1995-1998, Stephen Le Hunte


<HEAD>

The head of an HTML document is an unordered collection of information about the document. It requires the <TITLE> element between <HEAD> and </HEAD> elements thus :

<HEAD>
<TITLE> Introduction to HTML </TITLE>
</HEAD>

The <HEAD> and </HEAD> elements do not directly affect the look of the document when rendered.

The following elements are related to the head element. While not directly affecting the look of the document when rendered (apart from the <STYLE> element Style Sheet declarations), they do provide (if used) important information to the HTML user agent.

<BASE> - Allows base address of HTML document to be specified
<BASEFONT> - Allows setting of a single font to use throughout the document
<ISINDEX>- Allows keyword searching of the document
<LINK>- Indicate relationships between documents
<META> - Specifies document information useable by server/clients
<NEXTID>- Creates unique document identifiers
<STYLE> - Used by browsers that support use of style sheets to specify styles within the document
<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 a HTML document for conformance to any HTML standard.

CLASS="Style Sheet class name"
The CLASS attribute is used to specify the <HEAD> as using a particular style sheet class. See the Style Sheets topic for more information.

ID="Unique element identifier"
The ID attribute can be used to either reference a unique style sheet identifier, or to provide a unique name for the <HEAD> element for scripting purposes. Any <HEAD> element with an ID attribute can be directly manipulated in script by referencing its ID attribute, rather than working through the All collection to determine the element. See the Scripting introduction topic for more information.

Consistent with Internet Explorer 4.0's Dynamic HTML object model, the <HEAD> element supports various properties and methods. In its role as a document structure element, it supports no events.

<HEAD...> Properties
Of the Standard Dynamic HTML properties, <HEAD> supports className, document, id, isTextEdit, lang, parentElement, sourceIndex, tagName and title. See the Standard Dynamic HTML properties topic for details.

<HEAD...> Methods
Of the Standard Dynamic HTML methods, <HEAD> supports contains, getAttribute, removeAttribute and setAttribute. See the Standard Dynamic HTML methods topic for details.

© 1995-1998, Stephen Le Hunte


<BASE>

The Base element allows the URL of the document itself to be set, to help browsers in situations where the document may be read out of context. It is especially useful in allowing browsers to determine any partial URL's, or relative paths that may be specified (for example, in <A HREF> elements, or paths pointing to <IMG SRC=...> (images). The <BASE> Element should appear within the bounds of the <HEAD> element.

Where the base address is not specified, the HTML user agent uses the URL it used to access the document to resolve any relative URLs.

The Base element uses the HREF attribute, which identifies the URL, which should be a fully qualified URL

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

specifies www.myhost.com to be the base from which all relative URLs should be determined.

The Netscape Navigator (from version 2.0) and Internet Explorer (from version 3.0) adds one other attribute to the BASE element. With the introduction of targeted windows the TARGET attribute as used in anchors (<A>) can be used.

This allows the author 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">

CLASS="Style Sheet class name"
The CLASS attribute is used to specify the <BASE> as using a particular style sheet class. See the Style Sheets topic for more information.

ID="Unique element identifier"
The ID attribute can be used to either reference a unique style sheet identifier, or to provide a unique name for the <BASE> element for scripting purposes. Any <BASE> element with an ID attribute can be directly manipulated in script by referencing its ID attribute, rather than working through the All collection to determine the element. See the Scripting introduction topic for more information.

LANG="language setting"
The LANG attribute can be used to specify what language the <BASE> element is using. It accepts any valid ISO standard language abbreviation (for example "en" for English, "de" for German etc.) For more details, see the Document Localisation section for more details.

TITLE="informational ToolTip"
The Internet Explorer 4.0 (and above) specific TITLE attribute is used for informational purposes. As the <BASE> element doesn't directly affect the display of a document, no ToolTip is presented when using the TITLE attribute (as with other elements).

Consistent with Internet Explorer 4.0's Dynamic HTML object model, the <BASE> element supports various properties and methods. In its role as a document structure element, it supports no events.

<BASE...> Properties
Of the Standard Dynamic HTML properties, <BASE> supports className, document, id, isTextEdit, lang, outerHTML, outerText, parentElement, parentTextEdit, sourceIndex, tagName and title. See the Standard Dynamic HTML properties topic for details.
Also, the <BASE> element supports the href and target properties, which directly reflect any settings of their respective attributes (see above).

<BASE...> Methods
Of the Standard Dynamic HTML methods, <BASE> supports contains, getAttribute, removeAttribute and setAttribute. See the Standard Dynamic HTML methods topic for details.

© 1995-1998, Stephen Le Hunte


<BASEFONT>

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. Note that although the <BASEFONT> element doesn't need to be contained within the document <HEAD> section, it must come before any text in the document to change the default font size.

NOTE : Any document <BASEFONT> settings are over-ridden by any style sheet settings for the document.

<BASEFONT SIZE=5>

FACE
This attribute allows changing of the face of the HTML document BASEFONT, exactly as it works for <FONT FACE= ...>. This attribute is not supported by Netscape 4.0.

COLOR
This allows the BASEFONT colour for the HTML document to be set. Colours can either be set by using one of the reserved colour names, or as a hex rrggbb triplet value. This attribute is not supported by Netscape 4.0.

TITLE
Internet Explorer 4.0 (and above) supports use of the TITLE attribute for the <BASEFONT> element. This can be used for informational purposes. The platform preview of Internet Explorer 4.0 generally uses the TITLE attribute as a 'ToolTip' and using it in the <BASEFONT> element currently provides a ToolTip over the entire document text (i.e. the value of the TITLE attribute is displayed as the ToolTip when the mouse hovers over the document text), unless the TITLE attribute is set for other elements.

CLASS="Style Sheet class name"
The CLASS attribute is used to specify the <BASEFONT> as using a particular style sheet class. See the Style Sheets topic for details.

STYLE="In line style setting"
As well as using previously defined style sheet settings, the <BASEFONT> element can have in-line stylings attached to it. See the Style Sheets topic for details.

ID="Unique element identifier"
The ID attribute can be used to either reference a unique style sheet identifier, or to provide a unique name for the <BASEFONT> element for scripting purposes. Any <BASEFONT> element with an ID attribute can be directly manipulated in script by referencing its ID attribute, rather than working through the All collection to determine the element. See the Scripting introduction topic for more information.

NOTE : Use of these three attributes (CLASS, STYLE and ID) for the <BASEFONT> element is Internet Explorer (4.0 and above) specific. Using them also 'nullifies' any FACE, COLOR or SIZE settings in Netscape. It would generally be better to set stylings for the whole document using a style sheet. See the Style Sheets section for details.

LANG="language setting"
The LANG attribute can be used to specify what language the <BASEFONT> element is using. It accepts any valid ISO standard language abbreviation (for example "en" for English, "de" for German etc.) For more details, see the Document Localisation section for more details.

<BASEFONT...> Properties
The <BASEFONT...> element supports some of the Standard Dynamic HTML properties (namely className, document, id, isTextEdit, lang, outerHTML, outerText, parentElement, parentTextEdit, sourceIndex, style, tagName and title), as well as color, face and size properties which directly reflect any setting of their respective attributes (see above).

<BASEFONT...> Methods
Of the Standard Dynamic HTML methods, <BASEFONT> supports contains, getAttribute, removeAttribute and setAttribute.

<BASEFONT...> Events
The <BASEFONT> element supports no events.

© 1995-1998, Stephen Le Hunte


<ISINDEX>

The Isindex element tells the HTML user agent that the document is an index document. As well as reading it, the reader may use a keyword search.

The document can be queried 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 a HTML document, the HTML user agent 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.

To the <ISINDEX> element Netscape authors have added the PROMPT attribute.

PROMPT was introduced by Netscape authors so that text, chosen by the author, can be placed before the text input field of the index. This allows any author chosen message to replace the default text of : This is a searchable index. Enter search keywords

The syntax is:

<ISINDEX PROMPT="Any_text_string : ">

where "Any_text_string" is the text that the user wishes to be displayed before the input box.

Another Netscape specific attribute is ACTION. When used in the <ISINDEX> element, it specifies the cgi script or program to which the text string in the input box should be passed.

<ISINDEX ACTION="websearch">

would pass the text entered into the input box on the page to the cgi script "websearch".

NOTE : "websearch" in the above example is a hypothetical cgi script. If used, the ACTION attribute must point to a properly configured script on the host machine. ACTION is Netscape specific.

Note : <ISINDEX> is no longer supported by Internet Explorer from version 4.0.

© 1995-1998, Stephen Le Hunte


<LINK>

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.

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" and "next" and "previous" document. Mosaic (v3.0 for Windows 95/NT4) totally supports the <LINK> element and presents the user with a toolbar populated with buttons for every <LINK> element specified.<LINK REL="..."> is one that Mosaic recognises, it will show the toolbar button with a pre-set graphic, together with whatever text is specified in the TITLE attribute, as the text on the button. The remote location, specified in the HREF attribute is the location that Mosaic will browse to when the button is clicked. Below is a list of the possible preset REL attributes that Mosaic recognises together with the graphic it uses for the toolbar button (on Windows 95 systems).

REL="stylesheet"
This details the stylesheet to be used for the current page. Only Internet Explorer currently supports style sheets and Mosaic presents no pre-set graphic for this but supplies 'Stylesheet' if no TITLE attribute is given.
REL="home" ( [image])
This can be used to link to any page that the browser should consider the 'home' page of the current site. Supplies 'Home' if no TITLE attribute is given.
REL="toc"|"contents" ( [image])
This directs users to the table of contents for your site. 'toc' and 'contents' are interchangeable as the REL attribute value and Mosaic supplies 'ToC' if no TITLE attribute is given.
REL="index" ( [image])
This can be used to link to the index of your site. Supplied with 'Index' if no TITLE attribute is given.
REL="glossary" ( [image])
This creates a link to the glossary of your site. Supplies 'Glossary' if no TITLE attribute is given.
REL="copyright" ( [image])
If your site contains a page detailing copyright attributions, it can be linked to by this REL attribute value. Mosaic supplies 'Copyright' if no TITLE attribute is given.
REL="up"|"parent" ( [image] | [image])
This can be used to set the location of the current documents parent document. For example, your site may conform to a fairly rigid navigation structure and this attribute value can be used to link the current document to an overview of the current document set. Supplied with 'Up' or 'Parent' if no TITLE is given.
REL="child" ( [image])
This can be used to set the location of the current documents 'child' document(s). For example, your site may conform to a fairly rigid navigation structure and this attribute value can be used to link the current document to any of the documents in the level below. I.e. from an overview document to a detail document. Supplied with 'Child' if no TITLE is given.
REL="next" ( [image])
As in the above case, this can be used to provide a link to the next document in the current document set. Mosaic supplies 'Next' if no TITLE attribute is given.
REL="previous" ( [image])
As above, this can be used to link to the previous document in the flow of the current document set. Supplied with 'Previous' if no TITLE attribute is given.
REL="last"|"end" ( [image])
This can be used to link to the last document in the current document set. Mosaic supplies 'End' if no TITLE is given.
REL="first" ( [image])
This can be used to link to the first document in the current document set. Mosaic supplies 'Begin' if no TITLE is given.
REL="help" ( [image])
If your site contains a 'help' file (i.e. tips on site navigation for example), then it can be linked to via this attribute setting. Mosaic supplies 'Help' if no TITLE is given.

You can set the REL attribute to be anything you like, as well as the above pre-sets. Mosaic will supply a default image ( [image]) for these toolbar buttons and will use the text 'Bookmark' if no TITLE attribute is provided.

Mosaic also supports use of the REV="made" attribute/value. This should be used to denote the author of the document and the HREF attribute should use a HREF="mailto:address@site.com" structure. Mosaic will use its default graphic (see above) and default text ('Bookmark') if no TITLE attribute is given.

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.

<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 above HTML fragment, the <LINK> element points to the file "formal.css" at the given URL. It tells the browser that :

  • the file addressed is a style sheet, by explicitly giving the "text/css" MIME TYPE;
  • the file's RELationship to the HTML document is that it is a "stylesheet";
  • the stylesheet's TITLE is "formal".

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 <LINK> element is also key to Netscape's 'dynamic fonts' concept, where the font specified in the <LINK> element is automatically downloaded when the page is viewed. To do this, use REL="fontdef in the <LINK> element:

<LINK REL="fontdef" SRC="http://site/path/fontdef.pfr">

where the fontdef.pfr file provides the font definition file. (Producing font definition files is outside the scope of this document. For more information, visit http://home.netscape.com/comprod/products/communicator/fonts/index.html. Also, note that Internet Explorer supports dynamic fonts, using standard W3C Style sheet methods. See the Style Sheets topic for more details.

DISABLED
This Internet Explorer 4.0 specific attribute specifies that the StyleSheet object referenced by the <LINK> element is disabled. Basically, it means its style sheet declarations won't be used.

Consistent with Internet Explorer 4.0's Dynamic HTML object model, the <LINK> element supports various properties and methods. In its role as a document structure element/relationship describer, it supports a few events. Note that all scripting of the <LINK> element is Internet Explorer 4.0 specific.

<LINK...> Properties
Of the Standard Dynamic HTML properties, <BASE> supports className, document, id, parentElement, sourceIndex, tagName and title. See the Standard Dynamic HTML properties topic for details.
Also, the <LINK> element supports the href, disabled and rel properties, which directly reflect any settings of their respective attributes (see above) and the readyState property.

The readyState property can be one of 4 values, depending on the current state of the resource, referenced in the HREF attribute. The possible values of the readyState property are:

Value | Meaning
complete | The resource has completely loaded and is available to the document and therefore manipulation.
interactive | The resource hasn't completely downloaded, but is available to the document and scripting
loading | The resource is being downloaded
uninitialized | The resource is not available - normally, this value indicates that the resource is downloading

Note that the readystate property is read-only.

<LINK...> Methods
Of the Standard Dynamic HTML methods, <LINK> supports contains, getAttribute, removeAttribute and setAttribute. See the Standard Dynamic HTML methods topic for details.

<LINK...> Events
The <LINK> element doesn't support any of the Standard Dynamic HTML events, but does support the following events.

onerror
This event is fired when an error occurs in the downloading of the links resource referenced on the HREF attribute. Normally, this would mean that the resource hasn't downloaded properly and so isn't available to the document, or manipulation through scripting.

onload
The onload event is fired immediately after the resource begins downloading. It does not mean that the resource is available, merely that its download has begun.

onreadystatechange
At any time, the resource may change its readyState property and when this happens, the onreadystatechange event is fired.

© 1995-1998, Stephen Le Hunte


<META>

The META element is used within the <HEAD> element to embed any useful information not defined by other HTML elements. Such information can be extracted by servers/clients for use in identifying, indexing and cataloguing documents.

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 and forms the basis of the Client Pull mechanism.

Attributes of the <META> element :

HTTP-EQUIV
This attribute specifies the HTTP response header that the information pertains to. 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.

NAME
Meta-information name. If the NAME attribute is not present, then name can be assumed equal to the value HTTP-EQUIV.

CONTENT
The meta-information content to be associated with the given name and/or HTTP response header.

Typically, the <META> element would be used to introduce Client Pull into HTML documents, or to specify keywords that may be used by search engines to determine a documents relevance to the current search (although some are stopping using this method).

Microsoft's Internet Explorer now supports the use of HTML ratings, to restrict access to pages that whoever controls the browser deems unacceptable. This uses the W3C's PICS (Platform for Internet Content Selection - http://www.w3.org/PICS/) format of content labelling and currently supports the use of labels provided by the RSAC (Recreational Software Advisory Council - http://www.rsac.org/) under their RSACi labelling vocabulary. NOTE : The PICS format devised by the W3C, defines the format for content labelling, not the actual definitions of the labels - this is up to individual organisations who (like the RSAC, in RSACi) provide ratings services.

Author labelling of content is a step towards responsible self-censorship in the wake of recent government intervention and provides responsible content authors with a way of labelling their web sites, so that users who do not wish to view their content, can not stumble across it by accident, as they can control the browser to block sites who provide labels for content that the user may deem offensive.

PICS rating labels are included in the document with <META> elements within the <HEAD> elements, allowing the browser to determine whether the content is 'safe' for the user, based on their ratings settings, before any of the main page content has been retrieved. It should be noted that the user should not write their own ratings within the <META> element, but should submit pages to ratings organisations for independent rating. With the RSAC, this involves filling out a series of short forms, detailing whether your site contains any degree of offensive language, violence, sex or nudity. They then provide the specific <META> element for the page, site directory, or whole site. An example of a RSAC PICS rating (for the HTMLib web site main page) is :

<META http-equiv="PICS-Label" content='(PICS-1.0 "http://www.rsac.org/ratingsv01.html" l gen false comment "RSACi North America Server" by "htmlib@htmlib.demon.co.uk" for "http://subnet.virtual-pc.com/~le387818/index.html" on "1996.04.04T08:15-0500" exp "1997.01.01T08:15-0500" r (n 0 s 0 v 0 l 0))'>

From the last line of the ratings code, you can see r (n 0 s 0 v 0 l 0) which means that I rated the HTMLib web site as containing no nudity (n), sex (s), violence (v), or bad language (l).

Also, Internet Explorer supports a mechanism known as pragma no-cache, using the <META> element to prevent pages from being cached by the browser. Using this method, you can prevent the page that contains the HTML from being cached by the browser, ensuring that the most recent version of the page is always seen by the user. This is especially useful for pages that may be dynamically created (for instance, search query results, or database searches). To take advantage of this mechanism, use the EXPIRES keyword, together with a date that has already past. For example :

<META HTTP-EQUIV="Expires" CONTENT="Mon, 06 Jan 1990 00:00:01 GMT">

In this case, the browser will be made to believe that the document expired on the 6th January 1990 and so, will not cache the page. For more information, see the HTTP 1.1 specification details at http://www.w3.org/pub/WWW/Protocols/HTTP/1.1/spec.html.

Another use for the <META> element is to specify the character set that the document uses. Using:

<META HTTP-EQUIV="Content-Type" CONTENT="text/html; CHARSET=Windows-1251">

sets the document as using character set 1251. This affects the way that Internet Explorer treats things such as character entities used in the document. A detailed description of character sets is outside the scope of this document. For more information, consult Microsoft's Internet Client SDK

Inter-page/site transitions
Internet Explorer 4.0 also supports inter-page and inter-site transitions, using a Visual Filter set in the <META> element. These can be used to set transitions that play when a page is entered (i.e. first loaded) or exited or when a site (individual sites are determined by a change in the host - i.e. http://www.htmlib.com/ and http://faq.htmlib.com/ would be considered individual sites) is entered, or exited. Any of the standard Visual Filter effects can be used with either blend or reveal transitions. The syntax is as used for other Visual Filters, setting the filter type in the CONTENT attribute of the <META> element. For example:

<META HTTP-EQUIV="Page-Enter" CONTENT="filter:RevealTrans(Duration=3.000, Transition=23)">

This would play a random dissolve filter, over 3 seconds when the page is first displayed.

Note : For page-enter, page-exit, site-enter and site-exit transitions to work, the <META> element specifying the filter must be the first element in the <HEAD> section of the document and inter-page transitions do not appear to work across framed documents.

The <META> element, in accordance with the Internet Explorer Dynamic HTML, supports some of the standard properties and methods.

<META...> Properties
Of the Standard Dynamic HTML properties, the <META> element supports document, id, name, parentElement, sourceIndex and tagName. It also supports the charset, content, http-equiv and url properties, which reflect their respective settings (if any) when used, according to any of the above ways of using the <META> element. See the Standard Dynamic HTML properties topic for more details.

<META...> Methods
Of the Standard Dynamic HTML methods, the <META> element supports contains, getAttribute, removeAttribute and setAttribute. See the Standard Dynamic HTML methods topic for more details.

© 1995-1998, Stephen Le Hunte


<NEXTID>

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.

© 1995-1998, Stephen Le Hunte


<STYLE>

The <STYLE> element should reside within the <HEAD> element and is used to delimit Style Sheet information.

The TYPE and TITLE attributes can be used within the <STYLE> element. TYPE is used to specify the internet media (MIME) type of the style sheet definition (which is "text/css") and TITLE can be used to provide a title for the style sheet definitions. This may be used by browsers when a choice of style sheets are available.

For example :

<HTML>
<HEAD>
<TITLE>Introduction to Style Sheets</TITLE>
<STYLE TYPE="text/css" TITLE="Bright Colours">
BODY { color : white}
P { color : blue;
font-size : 12pt;
font-family : Arial}
H1 { color : red;
font-size : 18pt}
</STYLE>
</HEAD>
<BODY>
...

Defines the styles that are specified within the <STYLE> ... </STYLE> elements to be a style sheet, having the title "Bright Colours". For more information about Style Sheets, see the Style Sheets topic.

NOTE : Use of the <STYLE> element and Style Sheet use is only supported by Internet Explorer (from v3.0) and Netscape (from v4.0).

Recent HTML 4.0 draft specifications have included a MEDIA attribute for the <STYLE> element, which specifies the output device. Defaulting to screen, the MEDIA attribute can have the following properties.

Value | Meaning
screen | The style sheet settings given are those that will be used for computer display screen purposes.
print | The style sheet settings are suitable for printed output (typically, they'd contain hard-coded page breaks for example)
projection | The settings are suitable for display on projectors
braille | The settings are to be used for braille machine output
speech | The document is styled to be suitable for speech synthesiser output
all | The style sheet settings are to be used for all output devices

Using the MEDIA attribute, different style sheets can be set up to be used when the document is used in different display environments. Note : Netscape and Internet Explorer both purport to support use of the MEDIA element, but at the time of writing, no such support existed. As they are by nature, screen output devices, it's likely that support may not get implemented. This attribute is detailed here for completeness.

DISABLED
This Internet Explorer 4.0 specific attribute specifies that the StyleSheet object specified in the <STYLE> element is disabled. Basically, it means its style sheet declarations won't be used.

The <STYLE> element, in accordance with the Internet Explorer Dynamic HTML, supports some of the standard properties and methods.

<STYLE...> Properties
Of the Standard Dynamic HTML properties, the <STYLE> element supports document, id, parentElement, sourceIndex and tagName. It also supports the type property, which reflects any settings of the TYPE attribute (see above). See the Standard Dynamic HTML properties topic for more details.

<STYLE...> Methods
Of the Standard Dynamic HTML Methods, the <STYLE> element supports contains, getAttribute, removeAttribute and setAttribute. See the Standard Dynamic HTML Methods topic for more details.

© 1995-1998, Stephen Le Hunte


<TITLE>

Every HTML document must have a Title element. The title should identify the contents of the document and in a global context, and may be used in history lists and as a label for the windows displaying the document. 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 : The length of a title is not limited, however, long titles may be truncated in some applications. To minimise the possibility, titles should be kept as succinct as possible. Also keep in mind that a short title, such as 'Introduction' may be meaningless out of context. An example of a meaningful title might be 'Introduction to HTML elements'

This is the only element that is required within the HEAD element. The other elements described are optional and can be implemented when appropriate.

<HEAD>
<TITLE>Welcome to the HTML Reference</TITLE>
</HEAD>

The <TITLE> element, in accordance with the Internet Explorer Dynamic HTML, supports some of the standard properties and methods.

<TITLE...> Properties
Of the Standard Dynamic HTML properties, the <TITLE> element supports document, id, parentElement, sourceIndex and tagName. See the Standard Dynamic HTML properties topic for more details.

<TITLE...> Methods
Of the Standard Dynamic HTML methods, the <TITLE> element supports contains, getAttribute, removeAttribute and setAttribute. See the Standard Dynamic HTML methods topic for more details.

© 1995-1998, Stephen Le Hunte


<BODY>

The body of a 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/formatting of the page. The format is :

<BODY>
The rest of the document included here
</BODY>

NOTE : The <BODY> ... </BODY> elements are directly enclosed by the <HTML> ... </HTML> elements.

It is possible to control the document colour scheme and background by specifying certain attributes in the <BODY ...> declaration. However, it should be noted that most browsers provide the user with a means to over-ride colour schemes and prevent images from loading.

The BACKGROUND attribute can be used to point to an image file that will be tiled across the browser window, to provide a background for the document. Specifying :

<BODY BACKGROUND="imagename.gif">
Rest of the document goes here
</BODY>

would cause whatever text, images, etc. appeared in that document to be placed on a background consisting of the (imagename.gif) graphics file being tiled to cover the viewing area, much like bitmaps are used for Windows wallpaper. Browsers that support this attribute, allow the use of .GIF, .JPG images for HTML backgrounds, while Internet Explorer supports those, plus Windows .BMP files.

The BGCOLOR attribute allows setting of the background colour for the document

<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 colour.

For two tables, showing the possible colours that can be described using reserved colour names, see this topic

Clearly, once the background colours/patterns have been changed, it will be necessary to also be able to control the foreground to establish the proper display contrasts.

TEXT
This attribute is used to control the colour of all the normal text in the document. This basically consists of all text that is not specially coloured to indicate a link. The format of TEXT is the same as that of BGCOLOR.

<BODY TEXT="#rrggbb">
Rest of document goes here
</BODY>

colour names are valid values of this attribute

LINK, VLINK, and ALINK attributes
These attributes let you control the colouring of link text. VLINK stands for visited link, and ALINK stands for active link (this sets the colour that the link text will be for the time that it is clicked on). The default colouring of these is: LINK=blue (#0000FF), VLINK=purple (#800080), and ALINK=red (#FF0000). Again, 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>

Colour names are valid values of this attribute.

NOTE : The ALINK attribute is Netscape specific.

The ability to watermark HTML documents, by fixing a background image so that it doesn't scroll as a normal background image does, has been added to Microsoft's Internet Explorer since version 2.0. To give a page with a background image a watermark background, add BGPROPERTIES=FIXED to the BODY element as follows:

<BODY BACKGROUND="filename.gif" BGPROPERTIES=FIXED>

NOTE : This attribute is Internet Explorer specific.

LEFTMARGIN attribute
This Internet Explorer attribute allows the left hand margin of the document to be set.

For example:

<BODY LEFTMARGIN="40">
This document is indented 40 pixels from the left hand edge of the browser window </BODY>

RIGHTMARGIN attribute
This Internet Explorer (4.0 and above) specific attribute allows the right margin of the document to be set in pixels.

TOPMARGIN attribute
This Internet Explorer specific attribute allows the top margin of the document to be set. It accepts a pixel value.

BOTTOMMARGIN attribute
This Internet Explorer specific attribute allows the bottom margin of the document to be set. It accepts a pixel value.

NOTE : All of the above attributes can be set to 0, making the page start and finis at the extreme edges the page.

LANG="language setting"
The LANG attribute can be used to specify what language the <ADDRESS> element is using. It accepts any valid ISO standard language abbreviation (for example "en" for English, "de" for German etc.) For more details, see the Document Localisation section for more details.

LANGUAGE="Scripting language"
The LANGUAGE attribute can be used to expressly specify which scripting language Internet Explorer 4.0 uses to interpret any scripting information used in the <ADDRESS> element. It can accept values of vbscript, vbs, javascript or jscript. The first two specify the scripting language as Visual Basic Script, the latter two specify it as using Javascript (the default scripting language used if no LANGUAGE attribute is set.

TITLE="Informational Text"
The Internet Explorer 4.0 (and above) specific TITLE attribute is used for informational purposes.

CLASS="Style Sheet class name"
The CLASS attribute is used to specify the <BODY> element as using a particular style sheet class. See the Style Sheets topic for details.

STYLE="In line style setting"
As well as using previously defined style sheet settings, the <BODY> element can have in-line stylings attached to it. See the Style Sheets topic for details.

ID="Unique element identifier"
The ID attribute can be used to either reference a unique style sheet identifier, or to provide a unique name for the <BODY> element for scripting purposes. Any <BODY> element with an ID attribute can be directly manipulated in script by referencing its ID attribute, rather than working through the All collection to determine the element. See the Scripting introduction topic for more information.

SCROLL attribute
The SCROLL attribute can be set to "yes" or "no". Setting it to "no" removes the documents scroll bars that would normally appear if the document is larger than a single viewing window. Care should be taken when using this attribute, as you can not guarantee (with older browsers) any screen/font resolutions.

Colouring 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 this has been activated by the user, then background images will not be loaded or displayed. If this happens and no BGCOLOR attribute was specified, then all of the foreground text and link colouring attributes (TEXT, LINK, VLINK and ALINK) will be ignored. This is so that documents are not rendered illegible if the text colour scheme authored for use over the set image clashes with the default browser background.

Using the 'Safe' browser palette
Netscape and Internet Explorer will both 're-colour' any colour settings that aren't part of the system palette at the users screen resolution. I.e. your Web pages may look fantastic on your system at 16 bit (65,536) or 24 bit (16,777,216) colour depth, but if the person viewing your pages has their colour depth set to 8 bit (256) colour, or even less, then the colour scheme may not be displayed as authored (in some cases, the colours may not be displayed at all - if what you have specified is a pale colour, it may turn out white, as the browser will choose the nearest 'solid' colour in its available palette). To allow for this, web pages that use colours should only use colours taken from what is known as the Safe browser palette (or Non-dithering palette). This palette consists of 216 colours (256 colours minus the palette entries reserved by the system, and those that vary across different systems (i.e. Windows/Macintosh platforms)). This means that you can be sure that the pages you are authoring (or the graphics in those pages) will display as authored on both Macintosh and Windows platforms. This palette uses multiples of 51 (33 in hexadecimal notation) for the Red, Green and Blue components. So, to be sure that the colours you use will not be dithered, only use #rrggbb triplets made up of components of 33 (00, 33, 66, 99, CC and FF). For instance, "#0066FF" would be a 'safe' colour, while "#FFF0FA" wouldn't (as it would be dithered to the nearest safe palette entry (i.e. "#FFFFFF" on 8-bit (256) colour systems).
For a page that dynamically creates a table and populates it with cells using the colours in the safe browser palette, see this topic
NOTE : This re-colouring 'problem' can be seen more clearly in .GIF images that attempt to use colours that aren't part of the safe browser palette. Instead of choosing the nearest solid colour entry, Netscape and Internet Explorer will both dither the graphic according to the colour palette they have available. Hence it becomes more crucial to have an understanding of the safe browser palette when creating graphics for display on the Web.

NOTE : All of the attributes detailed on this page can be set using Style Sheet definitions.

The <BODY> element, in accordance with Internet Explorer 4.0's Dynamic HTML document object model, supports various properties, methods and events. Note that most of these are Internet Explorer 4.0 specific, although some are supported by Netscape (in versions 3.0 and 4.0). Browser support is detailed with the property, method or event.

<BODY...> Properties
The <BODY...> element/object supports all of the standard Dynamic HTML properties (i.e. className, document, id, innerHTML, innerText, isTextEdit, lang, language, offsetHeight, offsetLeft, offsetParent, offsetTop, offsetWidth, outerHTML, outerText, parentElement, parentTextEdit, sourceIndex, style, tagName and title). Details of these can be found in the standard Dynamic HTML properties topics. The <BODY> element also supports the following properties:

background
The background property reflects the setting of the BACKGROUND attribute as described above. It is possible to change a documents background by manipulation of the background property.

bgColor
The bgColor property, reflects the setting (if any) of the BGCOLOR attribute. It also has read-write permissions, allowing dynamic changing of the documents background colour.

bgProperties
This reflects the BGPROPERTIES attribute. If the bgProperties property is set to "fixed", any background images will be 'fixed' to the viewing window. If set to "" (i.e. nothing), the background image will scroll with the document (which is the default setting).

bottomMargin
The bottomMargin property reflects the setting (if any) of the BOTTOMMARGIN. The bottomMargin property can be dynamically changed in script functions.

clientHeight
The clientHeight property reflects the height (in pixels) of the currently viewable portion of the document. The clientHeight property is read-only, but could be useful for determining the size of the users current browser window, to dynamically resize any document content.

clientWidth
The clientWidth property reflects the width (in pixels) of the currently viewable portion of the document. The clientWidth property is read-only, but could be useful for determining the size of the users current browser window, to dynamically resize any document content.

leftMargin
The leftMargin property reflects the setting (if any) of the LEFTMARGIN. The leftMargin property can be dynamically changed in script functions.

link (vlink and alink) The *link properties reflect the settings of their respective attributes (LINK, ALINK and VLINK). All three can be changed through scripting.

rightMargin
The rightMargin property reflects the setting (if any) of the RIGHTMARGIN. The rightMargin property can be dynamically changed in script functions.

scroll
The scroll property reflects the setting (if any) of the SCROLL. The scroll property can be dynamically changed in script functions.

scrollHeight
The scrollHeight property reflects the documents total scrollable height (in pixels). It differs from the clientWidth and offsetWidth properties, in that when applied to the <BODY> element, they only return a value corresponding to the currently visible portion of the document, whereas the scrollHeight property returns a value representing the total height of the visible document content. (Note that for the <BODY> element, clientHeight and offsetHeight are essentially identical)

scrollLeft
The scrollLeft property reflects a value representing the distance between the left-most edge of the element and the left hand edge of the current viewing window. When used with the <BODY> element, the scrollLeft property is a value indicative of the extent to which the document has been scrolled sideways.

scrollTop
The scrollTop property returns a value that represents the distance between the top-most edge of the element and the top-most edge of the current viewing window. When used with the <BODY> element, the scrollTop property is a value indicative of the extent to which the document has been scrolled vertically. As an example, the button below will display the current document <BODY>'s scrollTop property on the status bar. Click it to get the value, then scroll the page either up or down and click it again. Scrolling the page down increases the scrollTop property value, scrolling the page up decreases it.

scrollWidth
Like the scrollHeight property, the scrollWidth property reflects a value that represents the total scrollable width of the document. The same nuances between it and the clientWidth and offsetWidth properties exist, as exist between the scrollHeight, clientHeight and offsetHeight properties.

text
The text property reflects the setting (if any) of the TEXT, which can be used to set default text colouring for the document. The text property can be dynamically changed in script functions.

scrolltopMargin
The topMargin property reflects the setting (if any) of the TOPMARGIN. The topMargin property can be dynamically changed in script functions.

<BODY...> Methods
The <BODY...> element/object supports all of the standard Dynamic HTML methods (i.e. click, contains, getAttribute, insertAdjacentHTML, insertAdjacentText, removeAttribute, scrollIntoView and setAttribute). Details of these can be found in the standard Dynamic HTML Methods topics. The <BODY> element also supports the following methods:

blur
The blur method can be used to force a document to lose the focus. Doing this would fire the onblur event.

blur
The createTextRange method is used for creating a Text Range from the document content. For more information, see the Text Range Object topic.

focus
The focus method can be used to force a document to gain the focus. Doing this would fire the onfocus event.

<BODY...> Events
The <BODY...> element/object supports all of the standard Dynamic HTML events (i.e. onclick, ondblclick, ondragstart, onfilterchange, onhelp, onkeydown, onkeypress, onkeyup, onmousedown, onmousemove, onmouseout, onmouseover, onmouseup and onselectstart). Details of these can be found in the standard Dynamic HTML events topics. The <BODY> attribute also supports the following events:

onblur
The onblur event fires when the current document loses the focus. For example, if your site uses two or more windows for display, you could effectively track the users location by using the onblur and onfocus events in the relevant <BODY> elements.

onfocus
The onfocus event is fired whenever the document receives the focus. As mentioned above, this can be especially useful for executing script functions to determine the users location, should your site/application use multiple browser windows.
Note : The onfocus event is also supported by Netscape

onload
The onload event can be used to execute script functions when the page loads. For example, this HTMLib re-creates a 'non-scrolling region', by executing a script function using the onload event in every document's <BODY> element. The script function loads the title document (or the main content document) immediately after the calling document has loaded.
Note : The onfocus event is also supported by Netscape

onunload
The onunload event is the reverse of the onload event - so, as you'd expect, it can be used to execute script functions when the current document is unloaded from the browser.
Note : The onfocus event is also supported by Netscape

Note : Netscape supports the onblur, onfocus, onload and onunload events for the <BODY> element as part of its Window Object.

© 1995-1998, Stephen Le Hunte


Possible document Colour Names

140 Netscape Named Colors
Point your mouse to the desired colour, and note the #rrggbb triplet and name values shown in the status bar.

16 Internet Explorer Named Colors
Point your mouse to the desired colour, and note the colour name shown in the status bar.

© 1995-1998, Stephen Le Hunte


The Safe browser palette

© 1995-1998, Stephen Le Hunte


<A>

The Anchor element is the essence of HTML. It is marked text that is the start and/or destination of a hypertext link. 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 :

HREF
If the HREF attribute is present, the text between the opening and closing anchor elements becomes a hypertext link. If the link is selected by readers, they are moved to the document or location specified by the value of the attribute.

Example :

See <A HREF="http://subnet.virtual-pc.com/~le387818/">The HTMLib site</A> for updated info on the HTMLib.

In this example, selecting "The HTMLib" takes the reader to a document located at http://subnet.virtual-pc.com/~le387818/ (which is the HTMLib web site)

With the HREF attribute, the form HREF="#identifier" can refer to another anchor in the same document.

Example :

The <A HREF="document.html#glossary">glossary</A> defines terms used in the document.

In this example, selecting "glossary" takes the reader to another anchor (i.e. <A NAME="glossary">Glossary</A>) in the document document.html. The NAME attribute is described below. If the anchor is in another document and the HREF attribute provides a partial URL, the new document will be resolved from either the present document, or from any specified base address.

Several other forms of the HREF attribute are permitted by browsers. They are as follows :

<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. Recent browsers allows connection to private ftp sites. The Anchor would take the form ftp://jdoe@your.com. The browser would then prompt the user for a password.
<A HREF="gopher://...">
Makes a link to a gopher server.
<A HREF="mailto:...">
Activating such a link would bring up the browsers mailing dialog (or application associated with internet mail) allowing the user to send mail messages to the author of the document, or whoever's address follows the mailto attribute. NCSA Mosaic supports use of the TITLE attribute for a mailto link. 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:htmlib@htmlib.demon.co.uk?subject=The HTMLib is fantastic">link text</A>. Internet Explorer 4.0 and above meanwhile supports and extends the above possibility, allowing various mail fields to be automatically filled in, by using the syntax:
<A HREF="mailto:htmlib@htmlib.demon.co.uk?subject=Subscribe to mailing list&cc=htmlib@htmlib.demon.co.uk&body=I'd like to subscribe to the mailing list please">Link text</A>

Note that spaces are allowed in the mail fields

Note : while this works when Outlook Express is used as the default e-mail client, it may not work for all e-mail clients.

<A HREF="news:...">
Makes a link to a newsgroup. Care should be taken in using such links because the author can not know what newsgroups are carried by the local news server of the user.
<A HREF="newsrc:...">
Makes a link to a specific newsrc file.
<A HREF="nntp://...">
Can be used to specify a different news server to that which the user may normally use. This is useful if you want to link to a newsgroup that the users local news server may not carry (see above).
<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.
<A HREF="view-source://...>
This Netscape specific HREF attribute value forces the standard Netscape 'view source' window to appear, containing the document specified in the value of the attribute.
<A HREF="nethelp:vendor/product:topic_id">
This is another Netscape specific HREF attribute value and is specifically only used when delivering on-line help via the NetHelp method. For more details, visit the NetHelp site at http://home.netscape.com/eng/help/ and download the NetHelp SDK.

NAME
If present, the NAME attribute allows the anchor to be the target of a link (another <A HREF...> element). The value of the NAME attribute is an identifier for the anchor. Identifiers are arbitrary strings but must be unique within the HTML document. Also, note that they are case sensitive within HTML documents and can not contain spaces.

Example of use:

<A NAME="coffee">Coffee</A> is an example of...
An example of this is <A HREF="#coffee">coffee</A>.

Another document can then make a reference explicitly to this anchor by putting the identifier after the address, separated by a hash character :

<A HREF="drinks.html#coffee">

TITLE
The TITLE attribute is for informational purposes only (unless used with a mailto: attribute). If present, the Title attribute should provide the title of the document whose address is given by the HREF attribute. When it was introduced, it was anticipated that perhaps browsers would display the contents of the TITLE attribute when the user focuses on the link (like a ToolTip). So far, Internet Explorer 4.0 (and above) is the only browser to implement this.

REL
The REL attribute gives the relationship(s) described by the hypertext link from the anchor to the target. The value should be a comma-separated list of relationship values. Values and their semantics will be registered by the HTML registration authority. The default relationship if none other is given is void. The REL attribute is only used when the HREF attribute is present. (See also <LINK REL="...">)

REV
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. (See also <LINK REV="...">)

URN
If present, the URN attribute specifies a uniform resource name (URN) for a target document. The format of URNs is still under discussion (since 1994) by various working groups of the Internet Engineering Task Force.

METHODS
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 HTML user agent may chose a different rendering as a function of the methods allowed; for example, something that is searchable may get a different link appearance. The value of the METHODS attribute should be a comma separated list of HTTP methods supported by the object for public use.

TARGET
Browser windows can now have names associated with them. Links in any window can refer to another window by name. When the link is activated, the document referenced will appear in that named window. If the window is not already open, the browser will open and name a new window for you. Such an action is only supported by frames capable browsers (i.e. Netscape and Internet Explorer.)

The syntax for the targeted windows is:

<A HREF="url.html" TARGET="window_name">Link text</A>

The TARGET attribute can accept the following values :

window_name
The name of any window specified by a <FRAME> element, or by using the window.open scripting method. If a window_name is used which does not correlate to a previously defined window, then a new window is created and NAMEd according the the window name used in the TARGET attribute. This new window can then be referenced using its new name.
_self
Using this reserved keyword value, would cause any form feedback page to be loaded into the window that currently contains the form.
_parent
Using this reserved keyword value, would cause any form feedback page to be loaded into the window that is the parent of the window currently containing the form. i.e. if the form's window is part of a framed document, it would load into the window controlled by the <FRAMESET> element definitions that control the form's current window.
_top
Using the reserved keyword value would cause the form feedback page to be loaded into the topmost window, clearing any currently existing framed windows.
_blank
Using this reserved keyword value would cause the form feedback page to be loaded into a newly created window. Using this value is the same as using TARGET="window_name" where the window_name used is not a previously defined window. NOTE : Unlike using the window_name using a previously undefined window name, using _blank will not name the new window for future use.

See Also, <BASE TARGET=...>

ACCESSKEY
The ACCESSKEY attribute can be used to specify a shortcut key for the link (activated by pressing 'Alt' and the ACCESSKEY together - like standard Windows applications menu shortcuts). The ACCESSKEY setting does not have to be a character in the actual link text and the link text is not modified in any way to reflect that an ACCESSKEY has been defined for the link. A sensible way around this would be something like :

<A HREF="url.htm" ACCESSKEY="W">W<SPAN STYLE="{text-decoration:none}">hat's New</SPAN></A>

Which displays as :

What's New

alerting the user that there's something special about the 'W' in the link. Pressing 'Alt+W' would then activate the link. Note that more than one link in a document can use the same ACCESSKEY setting. If from the same document, an ACCESSKEY is re-used, the next ACCESSKEY enabled link in the document (in the order they appear) that uses the same setting will be activated. Unless you can guarantee where in the current document the user is, it makes sense to try and use unique ACCESSKEY settings for links. Also note that ACCESSKEY settings override those of the main Internet Explorer menus.
The ACCESSKEY attribute is Internet Explorer 4.0 and above specific.

LANGUAGE
The LANGUAGE attribute accepts values of Javascript or VBscript to explicitly set the scripting language used in any in-line scripts within the element. It attempts to set the language of all scripts relating to the element, but external script blocks (using the <SCRIPT> element) should contain their own LANGUAGE setting in the <SCRIPT> element. (See Javascript or Visual Basic Script topics for more information). LANGUAGE can be useful if you set multiple in-line event handling routines within an anchor element, to save using event="javascript:..." or event="vbscript:..." in each event handler, however, doing so would over-ride the LANGUAGE setting. For example, the following HTML fragment :

<A HREF="url.htm" onclick="javascript:return false">Link text</A>

'kills' the link, by cancelling the 'click' action. This could be simplified by using :

<A HREF="url.htm" LANGUAGE="Javascript" onclick="return false">Link text</A>

as the LANGUAGE element expressly sets the scripting language to be Javascript. The same 'idea' in Visual Basic Script could be :

<A HREF="url.htm" LANGUAGE="VBscript" onclick="window.event.returnvalue=false">Link text</A>

(Note the different syntax for event cancelling.)

INDEXSTRING and TOCSTRING
These two Netscape specific attributes of the <A> element are specific for authoring on-line help/user assistance, employing NetHelp. For more information about NetHelp, visit http://home.netscape.com/eng/help/ and download the NetHelp SDK.
For NetHelp help systems, the INDEXSTRING and TOCSTRING are used to define table of contents and index entries. NetHelp uses extensive scripting to dynamically create a table of content and an index for the files that make up the help system. To author a NetHelp system, table of contents entries and index keywords are defined in anchors within <Hx> elements. The INDEXSTRING and TOCSTRING attributes are then used to define the text that will appear in the table of contents and the keywords that will appear in the index. For example:

<H1>
<A NAME="intro" TOCSTRING="The HTMLib"></A>
</H1>
<H2>
<A NAME="introidx" TOCSTRING="Introduction to the HTMLib" INDEXSTRING="introduction^HTMLib^help">Introduction to the HTMLib</A>
</H2>

In a NetHelp system, this would result in a 'chapter' in the table of contents, headed "The HTMLib" (<H1> elements are interpreted as chapter headings by the NetHelp tools). The first section inside the "The HTMLib" chapter in the table of contents, would be entitled "Introduction to the HTMLib" (<H2> elements are interpreted as section headings, within a chapter heading by the NetHelp tools). Clicking on "The HTMLib" in the NetHelp generated table of contents would navigate to the anchor NAMEd intro and searching the NetHelp index with either "introduction", "HTMLib", or "help" would result in 'hits' which would navigate to the section NAMEd introidx. Clicking on the "Introduction to the HTMLib" entry in the table of contents would also navigate to the same section.

DATAFLD
The DATAFLD attribute can be used to specify a data column name from the Data source (see DATASRC) that the <A> is bound to. For more information on the DATAFLD attribute, see the Data Binding topic. Note that the data being taken from the Data Source will be used for the HREF attribute value if an anchor is data-bound. Therefore, having it receive data that isn't a valid URL would make the link useless.

DATASRC
The DATASRC attribute can be used to specify a data source that the <A> is bound to. For more information on the DATASRC attribute, see the Data Binding topic.

LANG
The LANG attribute can be used to specify what language the <A> element is using. It accepts any valid ISO standard language abbreviation (for example "en" for English, "de" for German etc.) For more details, see the Document Localisation section for more details.

CLASS
The CLASS attribute is used to specify the <A> as using a particular style sheet class. For example, external links throughout the HTMLib use a style class declared as:

<STYLE TYPE="text/css">
.external {color : #0000FF}
</STYLE>

with the external links being referenced as:

<A CLASS="external" HREF="http://www.microsoft.com">http://www.microsoft.com/</A>

See the Style Sheets overview for more information and style sheet settings.

ID
The ID attribute can be used to either reference a unique style sheet identifier, or to provide a unique name for the <ADDRESS> element for scripting purposes. Any <ADDRESS> element with an ID attribute can be directly manipulated in script by referencing its ID attribute, rather than working through the All collection to determine the element. See the Scripting introduction topic for more information.

STYLE
As well as using previously defined style sheet settings, the <A> element can have in-line stylings attached to it. For example:

<A STYLE="color:#0000FF" HREF="http://www.microsoft.com">http://www.microsoft.com/</A>

would display exactly as the above example. See the Style Sheets section for more details about style sheet settings.

The <A> element style can also be controlled by using the Anchor pseudo-elements.
Using a Style Sheet definition in the <STYLE> element, the pseudo-classes A:link, A:visited and A:active can be used to set the text style of links, visited links and active links respectively (just as the LINK, ALINK and VLINK attributes of the <BODY> element do for those browsers that do not support style sheets). Note however, that while Internet Explorer 4.0 currently supports the use of these pseudo-classes, it 'breaks' any scripting for the particular <A> element (either using an event handler in the element, or a separate script function referenced by the anchors ID attribute).

<A...> Scripting

<A...> Properties
Besides the Standard Dynamic HTML properties (i.e. className, document, id, innerHTML, innerText, isTextEdit, lang, language, offsetHeight, offsetLeft, offsetParent, offsetTop, offsetWidth, outerHTML, outerText, parentElement, parentTextEdit, sourceIndex, style, tagName and title), each link object (i.e. <A HREF...>) has the following properties, which are available for manipulation for every link in the document, either directly (within an in-line event handler, or via referencing of the anchor/links ID attribute) or via the Links array/collection.
Note that most of the following properties are only supported by Internet Explorer 4.0's Dynamic HTML scripting model. Some properties and events are supported by Netscape (and earlier versions of Internet Explorer as each <A ...> element creates an Anchor and/or a Link object (depending on whether it's <A HREF...> or <A NAME...>, whose properties and events are exposed through the Links array/collection and Anchor topic.

accessKey - (Internet Explorer 4.0+)
If the ACCESSKEY attribute (see above) is set for a link, then the accessKey property reflects the setting, otherwise it remains empty. It is possible to change a links accessKey property in script code.

datafld - (Internet Explorer 4.0+)
The dataFld property directly reflects the value of the DATAFLD attribute (see above). For more information on the DATAFLD attribute, see the Data Binding topic.

datasrc - (Internet Explorer 4.0+)
The dataSrc property directly reflects the value of the DATASRC attribute (see above). For more information on the DATASRC attribute, see the Data Binding topic.

hash - (Internet Explorer 3.0+, Netscape 2.0+)
The hash property reflects, or sets any 'bookmark' definitions within the link's HREF attribute. For example :

<A HREF="http://www.htmlib.com/intro.htm#contents" ID="ContentsLink">View the contents</A>
. . .
<SCRIPT LANGUAGE="VBScript">
strHash=ContentsLink.hash
</SCRIPT>

would make strHash have the value of contents.

host - (Internet Explorer 3.0+, Netscape 2.0+)
The host property is essentially a combination of the hostname (see below) and port (see below) properties. For the above example (for the hash property), the host property would be www.htmlib.com:80. (80 is the standard port for Web servers)

hostname - (Internet Explorer 3.0+, Netscape 2.0+)
The hostname property reflects, or sets the name of the computer identified in the HREF attribute. Using the above example (for the hash property), the hostname property would be www.htmlib.com.

href - (Internet Explorer 3.0+, Netscape 2.0+)
The href property reflects, or sets, the HREF attribute of the link. It is possible to change a link's href property through scripting.

Methods - (Internet Explorer 4.0+)
The Methods property reflects, or sets the links METHODS attribute (if set)

name - (Internet Explorer 3.0+, Netscape 2.0+)
The name property reflects the anchors NAME attribute.

pathname - (Internet Explorer 3.0+, Netscape 2.0+)
The pathname property reflects, or sets the full path to the target document, as given in the HREF attribute. For example :

<A HREF ="http://www.htmlib.com/html/block/address.htm" ID="ContentsLink">View the contents</A>
. . .
<SCRIPT LANGUAGE="VBScript">
strPathName=ContentsLink.pathname
</SCRIPT>

would give strPathName a value of html/block/address.htm.

port - (Internet Explorer 3.0+, Netscape 2.0+)
As mentioned above, the port property reflects, or sets the port setting (if given) in the HREF attribute (if set). If not port is specified in the HREF setting, then port 80 is assumed (the standard port for Web servers).

protocol - (Internet Explorer 3.0+, Netscape 2.0+)
The protocol property reflects, or sets the protocol of the HREF attribute (if set). For example :

<A HREF="http://www.microsoft.com/">Microsoft</A>
<A HREF="ftp://ftp.microsoft.com/">Microsoft (ftp)</A>

would have protocol properties of http:// and ftp:// respectively. For relative URLs in the HREF attribute, the protocol of the currently displayed document is used.

rel - (Internet Explorer 4.0+)
The rel property directly reflects, or sets the value of the REL attribute (if set).

rev - (Internet Explorer 4.0+)
The rev property directly reflects, or sets the value of the REV attribute (if set).

search - (Internet Explorer 3.0+, Netscape 2.0+)
The search property reflects, or sets any search strings appended to the URL given in the HREF attribute (if set). For example :

<A HREF= "http://www.htmlib.com/intro.htm?contents">Link text</A>

would have a search property value of contents

target - (Internet Explorer 3.0+, Netscape 2.0+)
The target property reflects, or sets the link's TARGET attribute (if set)

urn - (Internet Explorer 4.0+)
The urn property reflects, or sets the link's URN attribute (if set)

<A...> Methods
Besides the Standard Dynamic HTML methods (i.e. click, contains, getAttribute, insertAdjacentHTML, insertAdjacentText, removeAttribute, scrollIntoView and setAttribute), each Link object has the following methods, which are available for manipulation for every link/anchor in the document. Note that all of these methods are Internet Explorer (4.0 and above) specific. The Anchors array and Links array as supported by Netscape (and earlier versions of Internet Explorer) have a few Javascript specific methods, but this reference isn't a Javascript language reference, so they aren't detailed. For details, see any Javascript language reference.

blur - (Internet Explorer 4.0+)
The blur method can be used to force the users focus away from the referenced <A>.

focus - (Internet Explorer 4.0+)
The focus method can be used to force the users focus onto the referenced <A>. For example:

Link1.focus()

would force the focus to the link, whose ID attribute is Link1.

<A...> Events
Besides the Standard Dynamic HTML events (i.e. onclick, ondblclick, ondragstart, onfilterchange, onhelp, onkeydown, onkeypress, onkeyup, onmousedown, onmousemove, onmouseout, onmouseover, onmouseup and onselectstart), each <A...> element/object accepts the following events (both in separate script functions and within the element). Note that while some are supported in various versions of Netscape (via the anchors array/collection and links array/collection, depending on whether it's <A HREF...> or <A NAME...>, or both), most are Internet Explorer (4.0 and above) specific and are standard Dynamic HTML Events. Each event handler details its browser support. Also detailed are the various methods and properties accessible by script functions for anchors within the document. To navigate to specific information, use the 'Anchor Scripting' popup in the title of this topic.

onblur - (Internet Explorer 4.0+)
The onblur event can be used to execute script functions when the particular link loses the focus. Note the subtle difference between this event and the onmouseout event in that removing the mouse from being over the link does not lose the focus. This requires either programmatically forcing another object to receive the focus, or by the user manually passing the focus to another object or control in the document, or clicking the document background
The example link below (containing ID="egOnBlurLink") executes the following script function when it loses the focus :

Sub changetext()
egOnBlurLink.innerHTML = "Now I've <STRONG>lost</STRONG> the focus"
End Sub

Give it a try : Click me, then click the document background

onfocus - (Internet Explorer 4.0+)
The onfocus event can be used to execute script functions when the particular link receives the focus. Note the subtle difference between this event and the onmouseover event in that passing the mouse over the link does not give it focus. This requires either programmatically forcing the link to receive the focus, or by using the 'tab' key to progress through the document links.
The example link below (containing ID="egOnFocusLink") executes the following script function when it receives the focus:

Sub ReceivedFocus()
egOnFocusLink.innerHTML = "I received the <STRONG>focus</STRONG>"
End Sub

Which causes the link text to be replaced with the new message. Try it below by pressing the button above the link and following the instructions.

Link text

Dynamic HTML in action! Note that clicking the link will also activate the script function (because the link receives the focus - before any reaction to clicking the link is determined), but that's not the point of the example. particular document.

© 1995-1998, Stephen Le Hunte


Block Formatting Elements

Block formatting elements are used for the formatting of whole blocks of text within a HTML document, rather than single characters. They should all (if present) be within the body of the document. (I.e. within the <BODY> ... </BODY> elements)

The essential block formatting elements are :

<ADDRESS> - Format an address section
<BLOCKQUOTE> - To quote text from another source.
<CENTER>- Centering text on the page.
<DIV> - Allow centering, or left/right justification of text.
<FIELDSET> - Framed Container.
<Hx> - Format six levels of heading.
<LAYER> - Distinct layers of content.
<LEGEND> - FieldSet legend.
<LISTING> - Text formatting.
<MARQUEE> - Highlighted scrolling text.
<MULTICOL> - Create multi-column layouts.
<P> - Specify what text constitutes a paragraph and its alignment.
<PLAINTEXT> - For text formatting.
<PRE> - Use text already formatted.
<XMP> - Text formatting.

© 1995-1998, Stephen Le Hunte


<ADDRESS>

The Address element specifies such information as address, signature and authorship, often at the top or bottom of a document.

Typically, an Address is rendered in an italic typeface and may be indented. The Address element implies a paragraph break before and after.

For example :

<ADDRESS>
Mr. Cosmic Kumquat<BR>
SSL Trusters Inc.<BR>
1234 Squeamish Ossifrage Road<BR>
Anywhere<BR>
NY 12345<BR>
U.S.A.
</ADDRESS>

Which would render as :

Mr. Cosmic Kumquat
SSL Trusters Inc.
1234 Squeamish Ossifrage Road
Anywhere
NY 12345
U.S.A.

<ADDRESS> can also accept the following attributes :

TITLE="informational ToolTip"
The Internet Explorer 4.0 (and above) specific TITLE attribute is used for informational purposes. If present, the value of the TITLE attribute is presented as a ToolTip when the users mouse hovers over the <ADDRESS> section.

For example after adding the following attributes to the example above,

<ADDRESS TITLE="A fictitious address">
...

the <ADDRESS> displayed would change to :

Mr. Cosmic Kumquat
SSL Trusters Inc.
1234 Squeamish Ossifrage Road
Anywhere
NY 12345
U.S.A.

Note that if no TITLE attribute is set, then no ToolTip is presented to the user.

LANG="language setting"
The LANG attribute can be used to specify what language the <ADDRESS> element is using. It accepts any valid ISO standard language abbreviation (for example "en" for English, "de" for German etc.) For more details, see the Document Localisation section for more details.

LANGUAGE="Scripting language"
The LANGUAGE attribute can be used to expressly specify which scripting language Internet Explorer 4.0 uses to interpret any scripting information used in the <ADDRESS> element. It can accept values of vbscript, vbs, javascript or jscript. The first two specify the scripting language as Visual Basic Script, the latter two specify it as using Javascript (the default scripting language used if no LANGUAGE attribute is set.

CLASS="Style Sheet class name"
The CLASS attribute is used to specify the <ADDRESS> as using a particular style sheet class. For example, a style sheet class defined as:

<STYLE TYPE="text/css">
.SmallAddress {font-size : 8pt; font-family : Arial}
</STYLE>

could then be referenced as:

<ADDRESS CLASS="SmallAddress">1, HTMLib Way, Swansea</ADDRESS>

and would be displayed in an 8pt, Arial font. See the Style Sheets overview for more information and style sheet settings.

STYLE="In line style setting"
As well as using previously defined style sheet settings, the <ADDRESS> element can have in-line stylings attached to it. For example:

<ADDRESS STYLE="{font-family:Arial;font-size:8pt}">1, HTMLib Way, Swansea</ADDRESS>

would display exactly as the above example. See the Style Sheets section for more details about style sheet settings.

ID="Unique element identifier"
The ID attribute can be used to either reference a unique style sheet identifier, or to provide a unique name for the <ADDRESS> element for scripting purposes. Any <ADDRESS> element with an ID attribute can be directly manipulated in script by referencing its ID attribute, rather than working through the All collection to determine the element. See the Scripting introduction topic for more information.

Every <ADDRESS> element in a document is an object that can be manipulated through scripting. Note that scripting of the <ADDRESS> element/object is only supported by Internet Explorer 4.0 in its Dynamic HTML object model. Netscape does not support direct scripting of the <ADDRESS> element at all.

<ADDRESS...> Properties
The <ADDRESS...> element/object supports all of the standard Dynamic HTML properties (i.e. className, document, id, innerHTML, innerText, isTextEdit, lang, language, offsetHeight, offsetLeft, offsetParent, offsetTop, offsetWidth, outerHTML, outerText, parentElement, parentTextEdit, sourceIndex, style, tagName and title). Details of these can be found in the standard Dynamic HTML properties topics.

<ADDRESS...> Methods
The <ADDRESS...> element/object supports all of the standard Dynamic HTML methods (i.e. click, contains, getAttribute, insertAdjacentHTML, insertAdjacentText, removeAttribute, scrollIntoView and setAttribute). Details of these can be found in the standard Dynamic HTML Methods topics.

<ADDRESS...> Events
The <ADDRESS...> element/object supports all of the standard Dynamic HTML events (i.e. onclick, ondblclick, ondragstart, onfilterchange, onhelp, onkeydown, onkeypress, onkeyup, onmousedown, onmousemove, onmouseout, onmouseover, onmouseup and onselectstart). Details of these can be found in the standard Dynamic HTML events topics.

© 1995-1998, Stephen Le Hunte


<BLOCKQUOTE>

The Blockquote element is 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 typically provides space above and below the quote.

The HTML specification implies that rendering on single-font systems (e.g. on non graphical browsers) may reflect the quotation style of Internet mail, which is normally represented by putting a vertical line of graphic characters, such as the greater than symbol (>), in the left margin.

Example of use:

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>

would render as:

In "Hard Drive", a former Microsoft project manager has said,

"Imagine an extremely smart, billionaire genius who is 14 years old and subject to temper tantrums"

Internet Explorer (4.0 and above) also support the use of the TITLE attribute. This can be used for informational purposes, with Internet Explorer treating the value of the TITLE attribute as a 'ToolTip' which is displayed when the reader passes their mouse over the contents of the <BLOCKQUOTE> element. For example, adding :

. . .TITLE="From 'Hard Drive' ISBN : 0-471-94081-X"

to the above example, the section displays as :

In "Hard Drive", a former Microsoft project manager has said,

"Imagine an extremely smart, billionaire genius who is 14 years old and subject to temper tantrums"

displaying the ToolTip when the mouse pauses on the quote.

LANG="language setting"
The LANG attribute can be used to specify what language the <BLOCKQUOTE> element is using. It accepts any valid ISO standard language abbreviation (for example "en" for English, "de" for German etc.) For more details, see the Document Localisation section for more details.

LANGUAGE="Scripting language"
The LANGUAGE attribute can be used to expressly specify which scripting language Internet Explorer 4.0 uses to interpret any scripting information used in the <BLOCKQUOTE> element. It can accept values of vbscript, vbs, javascript or jscript. The first two specify the scripting language as Visual Basic Script, the latter two specify it as using Javascript (the default scripting language used if no LANGUAGE attribute is set.

CLASS="Style Sheet class name"
The CLASS attribute is used to specify the <BLOCKQUOTE> as using a particular style sheet class. For example, a style sheet class defined as:

<STYLE TYPE="text/css">
.RedQuote {color : #FF0000}
</STYLE>

could then be referenced as:

<BLOCKQUOTE CLASS="RedQuote">The less you know, the more you believe</BLOCKQUOTE>

and would be displayed in red. See the Style Sheets overview for more information and style sheet settings.

STYLE="In line style setting"
As well as using previously defined style sheet settings, the <BLOCKQUOTE> element can have in-line stylings attached to it. For example:

<BLOCKQUOTE STYLE="{color : #FF0000}">The less you know, the more you believe</BLOCKQUOTE>

would display exactly as the above example. See the Style Sheets section for more details about style sheet settings.

ID="Unique element identifier"
The ID attribute can be used to either reference a unique style sheet identifier, or to provide a unique name for the <BLOCKQUOTE> element for scripting purposes. Any <BLOCKQUOTE> element with an ID attribute can be directly manipulated in script by referencing its ID attribute, rather than working through the All collection to determine the element. See the Scripting introduction topic for more information.

Every <BLOCKQUOTE> element in a document is an object that can be manipulated through scripting. Note that scripting of the <BLOCKQUOTE> element/object is only supported by Internet Explorer 4.0 in its Dynamic HTML object model. Netscape does not support direct scripting of the <BLOCKQUOTE> element at all.

<BLOCKQUOTE...> Properties
The <BLOCKQUOTE...> element/object supports all of the standard Dynamic HTML properties (i.e. className, document, id, innerHTML, innerText, isTextEdit, lang, language, offsetHeight, offsetLeft, offsetParent, offsetTop, offsetWidth, outerHTML, outerText, parentElement, parentTextEdit, sourceIndex, style, tagName and title). Details of these can be found in the standard Dynamic HTML properties topics.

<BLOCKQUOTE...> Methods
The <BLOCKQUOTE...> element/object supports all of the standard Dynamic HTML methods (i.e. click, contains, getAttribute, insertAdjacentHTML, insertAdjacentText, removeAttribute, scrollIntoView and setAttribute). Details of these can be found in the standard Dynamic HTML Methods topics.

<BLOCKQUOTE...> Events
The <BLOCKQUOTE...> element/object supports all of the standard Dynamic HTML events (i.e. onclick, ondblclick, ondragstart, onfilterchange, onhelp, onkeydown, onkeypress, onkeyup, onmousedown, onmousemove, onmouseout, onmouseover, onmouseup and onselectstart). Details of these can be found in the standard Dynamic HTML events topics.

© 1995-1998, Stephen Le Hunte


<CENTER>

All lines of text between the begin and end of the <CENTER> element are centred between the current left and right margins.

<CENTER>All this text would be centred in the page</CENTER>

NOTE : Most browsers will internally work-round this element to produce the desired format, but it is an element introduced by Netscape authors.

Internet Explorer (4.0 and above) also support the use of the TITLE attribute. This can be used for informational purposes, with Internet Explorer treating the value of the TITLE attribute as a 'ToolTip' which is displayed when the reader passes their mouse over the contents of the <CENTER> element. For example, adding :

. . .TITLE="Some centered text"

to the above example, the section displays as :

All this text would be centred in the page

displaying the ToolTip when the mouse pauses on the text.

LANG="language setting"
The LANG attribute can be used to specify what language the <CENTER> element is using. It accepts any valid ISO standard language abbreviation (for example "en" for English, "de" for German etc.) For more details, see the Document Localisation section for more details.

LANGUAGE="Scripting language"
The LANGUAGE attribute can be used to expressly specify which scripting language Internet Explorer 4.0 uses to interpret any scripting information used in the <CENTER> element. It can accept values of vbscript, vbs, javascript or jscript. The first two specify the scripting language as Visual Basic Script, the latter two specify it as using Javascript (the default scripting language used if no LANGUAGE attribute is set.

CLASS="Style Sheet class name"
The CLASS attribute is used to specify the <CENTER> as using a particular style sheet class. For example, a style sheet class defined as:

<STYLE TYPE="text/css">
.RedQuote {color : #FF0000}
</STYLE>

could then be referenced as:

<CENTER CLASS="RedQuote">All this text would be centred in the page</CENTER>

and would be displayed in red. See the Style Sheets overview for more information and style sheet settings.

STYLE="In line style setting"
As well as using previously defined style sheet settings, the <CENTER> element can have in-line stylings attached to it. For example:

<CENTER STYLE="{color : #FF0000}">All this text would be centred in the page</CENTER>

would display exactly as the above example. See the Style Sheets section for more details about style sheet settings.

ID="Unique element identifier"
The ID attribute can be used to either reference a unique style sheet identifier, or to provide a unique name for the <CENTER> element for scripting purposes. Any <CENTER> element with an ID attribute can be directly manipulated in script by referencing its ID attribute, rather than working through the All collection to determine the element. See the Scripting introduction topic for more information.

Every <CENTER> element in a document is an object that can be manipulated through scripting. Note that scripting of the <CENTER> element/object is only supported by Internet Explorer 4.0 in its Dynamic HTML object model. Netscape does not support direct scripting of the <CENTER> element at all.

<CENTER...> Properties
The <CENTER...> element/object supports all of the standard Dynamic HTML properties (i.e. className, document, id, innerHTML, innerText, isTextEdit, lang, language, offsetHeight, offsetLeft, offsetParent, offsetTop, offsetWidth, outerHTML, outerText, parentElement, parentTextEdit, sourceIndex, style, tagName and title). Details of these can be found in the standard Dynamic HTML properties topics.

<CENTER...> Methods
The <CENTER...> element/object supports all of the standard Dynamic HTML methods (i.e. click, contains, getAttribute, insertAdjacentHTML, insertAdjacentText, removeAttribute, scrollIntoView and setAttribute). Details of these can be found in the standard Dynamic HTML Methods topics.

<CENTER...> Events
The <CENTER...> element/object supports all of the standard Dynamic HTML events (i.e. onclick, ondblclick, ondragstart, onfilterchange, onhelp, onkeydown, onkeypress, onkeyup, onmousedown, onmousemove, onmouseout, onmouseover, onmouseup and onselectstart). Details of these can be found in the standard Dynamic HTML events topics.

© 1995-1998, Stephen Le Hunte


<DIV>

The <DIV> element is a block element that is basically used as a 'container' to contain other HTML elements and display them discretely from the rest of the document by adding paragraph breaks before and after the contents of the <DIV> element.

<DIV> can contain any HTML between its opening and closing elements and accepts the following attributes:

ALIGN
The ALIGN attribute sets the alignment of the <DIV> contents block. It can accept values of center, left and right.

CLASS
The CLASS attribute is used to specify the <DIV> element as using a particular style sheet class. See the Style Sheets topic for details.

DATAFLD
The DATAFLD attribute can be used to specify a data column name from the Data source (see DATASRC) that the <DIV> is bound to. For more information on the DATAFLD attribute, see the Data Binding topic. As <DIV> is a container element, the data retrieved from the data source will be used for the contents of the <DIV> element, rather than one of its attributes.

DATAFORMATAS
When the <DIV> element is data-bound, it can accept straight text, or HTML from the data source. The DATAFORMATAS attribute should be set to "TEXT" or "HTML" accordingly. with DATAFORMATAS="HTML", the data provided for the <DIV> element is parsed and rendered when it's displayed.
For more information on the DATAFORMATAS attribute, see the Data Binding topic.

DATASRC
The DATASRC attribute can be used to specify a data source that the <DIV> is bound to. For more information on the DATASRC attribute, see the Data Binding topic.

ID
The ID attribute can be used to either reference a unique style sheet identifier, or to provide a unique name for the <DIV> element for scripting purposes. Any <DIV> element with an ID attribute can be directly manipulated in script by referencing its ID attribute, rather than working through the All collection to determine the element. See the Scripting introduction topic for more information.

LANG
The LANG attribute can be used to specify what language the <DIV> element is using. It accepts any valid ISO standard language abbreviation (for example "en" for English, "de" for German etc.) For more details, see the Document Localisation section for more details.

LANAGUAGE
The LANGUAGE attribute can be used to expressly specify which scripting language Internet Explorer 4.0 uses to interpret any scripting information used in the <DIV> element. It can accept values of vbscript, vbs, javascript or jscript. The first two specify the scripting language as Visual Basic Script, the latter two specify it as using Javascript (the default scripting language used if no LANGUAGE attribute is set.

STYLE
As well as using previously defined style sheet settings, the <DIV> element can have in-line stylings attached to it. See the Style Sheets topic for details.

TITLE
The Internet Explorer 4.0 (and above) specific TITLE attribute is used for informational purposes. If present, the value of the TITLE attribute is presented as a ToolTip when the users mouse hovers over the <DIV> section.

Internet Explorer supports the use of the <DIV> element (as well as the above method) when used with the ActiveX HTML Layout Control and Style Sheets. This allows sections of a HTML document to be authored with a fixed layout, according to the W3C 2-D layout specification. Browsers normally determine the best possible layout for HTML, but sections authored using the HTML Layout Control are fixed. Users should seek out the ActiveX Control Pad for more information about authoring using the fixed layout control. For Internet Explorer 4.0, the HTML Layout Control has been 'rolled into' the browser, instead of being a separate control, which means that fixed layout portions can now be authored directly in HTML, using Style Sheet Positioning. See the Style Sheets overview for more information.

Every <DIV> element in a document is an object that can be manipulated through scripting. Note that scripting of the <DIV> element/object is only supported by Internet Explorer 4.0 in its Dynamic HTML object model. Netscape doesn't support scripting of the <DIV> element.

<DIV...> Properties
The <DIV...> element/object supports all of the standard Dynamic HTML properties (i.e. className, document, id, innerHTML, innerText, isTextEdit, lang, language, offsetHeight, offsetLeft, offsetParent, offsetTop, offsetWidth, outerHTML, outerText, parentElement, parentTextEdit, sourceIndex, style, tagName and title). Details of these can be found in the standard Dynamic HTML properties topics.
Additionally, the <DIV> element supports the following properties:

clientHeight
The clientHeight property reflects the height (in pixels) of the contents of the <DIV> element.

clientWidth
The clientWidth property reflects the width (in pixels) of the contents of the <DIV> element.

dataFld
The dataFld property directly reflects, or sets the value of the DATAFLD attribute (see above). For more information on the DATAFLD attribute, see the Data Binding topic.

dataFormatAs
The dataFormatAs property directly reflects, or sets the value of the DATAFORMATAS attribute (see above). For more information on the DATAFORMATAS attribute, see the Data Binding topic.

dataSrc
The dataSrc property directly reflects, or sets the value of the DATASRC attribute (see above). For more information on the DATASRC attribute, see the Data Binding topic.

scrollHeight
The scrollHeight property reflects the contents of the <DIV> elements total scrollable height (in pixels).

scrollLeft
The scrollLeft property reflects a value representing the distance between the left-most edge of the element and the left-most visible edge of the element. While the contents of the <DIV> element are totally visible on the screen, the scrollLeft property is 0, only increasing if the left-most edge of the <DIV> elements contents are scrolled off the left hand edge of the current viewing window.

scrollTop
The scrollTop property returns a value that represents the distance between the top-most edge of the element and the top-most edge of the current viewing window. When used with the <DIV> element, the scrollTop property is a value indicative of the extent to which the referenced element has been scrolled vertically. If the contents of the <DIV> element are visible, then the scrollTop property will be 0, only increasing as the contents of the element are scrolled off the top of the current viewing window.

scrollWidth
Like the scrollHeight property, the scrollWidth property reflects a value that represents the total scrollable width of the contents of the <DIV> element.

<DIV...> Methods
The <DIV...> element/object supports all of the standard Dynamic HTML methods (i.e. click, contains, getAttribute, insertAdjacentHTML, insertAdjacentText, removeAttribute, scrollIntoView and setAttribute). Details of these can be found in the standard Dynamic HTML Methods topics.
Additionally, the <DIV> element supports the following methods:

blur
The blur event can be used to force the users focus away from the referenced <DIV> element, firing the onblur event.

focus
The focus method can be used to pass the users focus to the referenced <DIV> element, forcing the onfocus event to fire.

<DIV...> Events
The <DIV...> element/object supports all of the standard Dynamic HTML events (i.e. onclick, ondblclick, ondragstart, onfilterchange, onhelp, onkeydown, onkeypress, onkeyup, onmousedown, onmousemove, onmouseout, onmouseover, onmouseup and onselectstart). Details of these can be found in the standard Dynamic HTML events topics.
Additionally, the <DIV> element supports the following events:

onblur
When the referenced <DIV> element loses the users focus, the onblur event is fired. On the fly form validation can make use of the onblur event to check form elements as the user is entering information.

onfocus
When the user passes the focus to any <DIV> element, the onfocus event is fired for that element.

© 1995-1998, Stephen Le Hunte


<FIELDSET>

Note : The <FIELDSET> element is a new element introduced in HTML 4.0 draft specifications and is only supported by Internet Explorer 4.0 and above.

The <FIELDSET> element can be used to provide a framed container around any other HTML elements. Visual Basic developers will be familiar with the <FIELDSET> frame concept - it being similar to the 'Frame' control in Visual Basic.

<FIELDSET> requires that the first element it contains to the <LEGEND>, to provide the legend for the field set. Note that <FIELDSET> elements can be nested to contain discrete 'groups' of HTML elements, inside a larger fieldset container group.

<FIELDSET> accepts the following attributes :

CLASS="Style Sheet class name"
The CLASS attribute is used to specify the <FIELDSET> element as using a particular style sheet class. See the Style Sheets topic for details.

ID="Unique element identifier"
The ID attribute can be used to either reference a unique style sheet identifier, or to provide a unique name for the <FIELDSET> element for scripting purposes. Any <FIELDSET> element with an ID attribute can be directly manipulated in script by referencing its ID attribute, rather than working through the All collection to determine the element. See the Scripting introduction topic for more information.

LANG="language setting"
The LANG attribute can be used to specify what language the <FIELDSET> element is using. It accepts any valid ISO standard language abbreviation (for example "en" for English, "de" for German etc.) For more details, see the Document Localisation section for more details.

LANGUAGE="Scripting language"
The LANGUAGE attribute can be used to expressly specify which scripting language Internet Explorer 4.0 uses to interpret any scripting information used in the <FIELDSET> element. It can accept values of vbscript, vbs, javascript or jscript. The first two specify the scripting language as Visual Basic Script, the latter two specify it as using Javascript (the default scripting language used if no LANGUAGE attribute is set.

STYLE="In line style setting"
As well as using previously defined style sheet settings, the <FIELDSET> element can have in-line stylings attached to it. See the Style Sheets topic for details.

TITLE="informational ToolTip"
The Internet Explorer 4.0 (and above) specific TITLE attribute is used for informational purposes. If present, the value of the TITLE attribute is presented as a ToolTip when the users mouse hovers over the <FIELDSET> section.

Examples
The following HTML fragment is part of the HTML that produces the <FIELDSET> displayed below.

<FIELDSET ID="fld1">
<LEGEND ALIGN="left">Choose a colour</LEGEND>
<TABLE BORDER="0" CELLPADDING="0" CELLSPACING="0" WIDTH="100%">
<TR>
<TD><LABEL FOR="radRed">Red : </LABEL></TD>
<TD><INPUT TYPE="radio" NAME="Colour" VALUE="Red" ID="radRed"></TD>
<TD><LABEL FOR="radOrange">Orange : </LABEL></TD>
<TD><INPUT TYPE="radio" NAME="Colour" VALUE="Orange" ID="radOrange"></TD>
</TR>
. . .
</TABLE>
</FIELDSET>

Choose a colour
Red : | Orange :
Green : | Purple :
Blue : | Aqua :

Every <FIELDSET> element in a document is an object that can be manipulated through scripting. Note that scripting of the <FIELDSET> element/object is only supported by Internet Explorer 4.0 in its Dynamic HTML object model as Netscape doesn't support the <FIELDSET> element.

<FIELDSET...> Properties
The <FIELDSET...> element/object supports all of the standard Dynamic HTML properties (i.e. className, document, id, innerHTML, innerText, isTextEdit, lang, language, offsetHeight, offsetLeft, offsetParent, offsetTop, offsetWidth, outerHTML, outerText, parentElement, parentTextEdit, sourceIndex, style, tagName and title). Details of these can be found in the standard Dynamic HTML properties topics.
Additionally, the <FIELDSET> element supports the following properties:

clientHeight
The clientHeight property reflects the height (in pixels) of the contents of the <FIELDSET> element.

clientWidth
The clientWidth property reflects the width (in pixels) of the contents of the <FIELDSET> element.

scrollHeight
The scrollHeight property reflects the contents of the <FIELDSET> elements total scrollable height (in pixels).

scrollLeft
The scrollLeft property reflects a value representing the distance between the left-most edge of the element and the left-most visible edge of the element. While the contents of the <FIELDSET> element are totally visible on the screen, the scrollLeft property is 0, only increasing if the left-most edge of the <FIELDSET> elements contents are scrolled off the left hand edge of the current viewing window.

scrollTop
The scrollTop property returns a value that represents the distance between the top-most edge of the element and the top-most edge of the current viewing window. When used with the <FIELDSET> element, the scrollTop property is a value indicative of the extent to which the referenced element has been scrolled vertically. If the contents of the <FIELDSET> element are visible, then the scrollTop property will be 0, only increasing as the contents of the element are scrolled off the top of the current viewing window.

scrollWidth
Like the scrollHeight property, the scrollWidth property reflects a value that represents the total scrollable width of the contents of the <FIELDSET> element.

<FIELDSET...> Methods
The <FIELDSET...> element/object supports all of the standard Dynamic HTML methods (i.e. click, contains, getAttribute, insertAdjacentHTML, insertAdjacentText, removeAttribute, scrollIntoView and setAttribute). Details of these can be found in the standard Dynamic HTML Methods topics.
Additionally, the <FIELDSET> element supports the following methods:

blur
The blur event can be used to force the users focus away from the referenced <FIELDSET> element, firing the onblur event.

focus
The focus method can be used to pass the users focus to the referenced <FIELDSET> element, forcing the onfocus event to fire.

<FIELDSET...> Events
The <FIELDSET...> element/object supports all of the standard Dynamic HTML events (i.e. onclick, ondblclick, ondragstart, onfilterchange, onhelp, onkeydown, onkeypress, onkeyup, onmousedown, onmousemove, onmouseout, onmouseover, onmouseup and onselectstart). Details of these can be found in the standard Dynamic HTML events topics.
Additionally, the <FIELDSET> element supports the following events:

onblur
When the referenced <FIELDSET> element loses the users focus, the onblur event is fired. On the fly form validation can make use of the onblur event to check form elements as the user is entering information.

onfocus
When the user passes the focus to any <FIELDSET> element, the onfocus event is fired for that element.

© 1995-1998, Stephen Le Hunte


<Hx>

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 HTML user agent, but typical renderings are:

Heading 1

Heading 2

Heading 3

Heading 4

Heading 5
Heading 6

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 since the HTML 3.2 specification is the ability to align Headings. The ALIGN="left|center|right" attribute was been added to the <H1> through to <H6> elements. e.g:

<H1 ALIGN=center>This is a centred heading</H1>

would align a heading of style 1 in the centre of the page.

Internet Explorer (4.0 and above) also support the use of the TITLE attribute. This can be used for informational purposes, with Internet Explorer treating the value of the TITLE attribute as a 'ToolTip' which is displayed when the reader passes their mouse over the contents of the <Hx> element. For example, adding :

. . .TITLE="A centered heading"

to the above example, the section displays as :

This is a centred heading

NOTE : Currently, Internet Explorer doesn't show the ToolTip for the <Hx> elements.

LANG="language setting"
The LANG attribute can be used to specify what language the <Hx> element is using. It accepts any valid ISO standard language abbreviation (for example "en" for English, "de" for German etc.) For more details, see the Document Localisation section for more details.

LANGUAGE="Scripting language"
The LANGUAGE attribute can be used to expressly specify which scripting language Internet Explorer 4.0 uses to interpret any scripting information used in the <Hx> element. It can accept values of vbscript, vbs, javascript or jscript. The first two specify the scripting language as Visual Basic Script, the latter two specify it as using Javascript (the default scripting language used if no LANGUAGE attribute is set.

CLASS="Style Sheet class name"
The CLASS attribute is used to specify the <Hx> as using a particular style sheet class. For example, a style sheet class defined as:

<STYLE TYPE="text/css">
.Gold {color : gold}
</STYLE>

could then be referenced as:

<H1 CLASS="gold">A gold heading</H1>

and would be displayed in red. See the Style Sheets overview for more information and style sheet settings.

STYLE="In line style setting"
As well as using previously defined style sheet settings, the <Hx> elements can have in-line stylings attached to it. For example:

<H3 STYLE="{color : gold}">A small gold heading</H3>

would display in the same colour as the above example. See the Style Sheets section for more details about style sheet settings.

ID="Unique element identifier"
The ID attribute can be used to either reference a unique style sheet identifier, or to provide a unique name for the <Hx> element for scripting purposes. Any <Hx> element with an ID attribute can be directly manipulated in script by referencing its ID attribute, rather than working through the All collection to determine the element. See the Scripting introduction topic for more information.

Every <Hx> element in a document is an object that can be manipulated through scripting. Note that scripting of the <Hx> element/object is only supported by Internet Explorer 4.0 in its Dynamic HTML object model. Netscape does not support direct scripting of the <Hx> element at all.

<Hx...> Properties
As well as supporting all of the standard Dynamic HTML properties (i.e. className, document, id, innerHTML, innerText, isTextEdit, lang, language, offsetHeight, offsetLeft, offsetParent, offsetTop, offsetWidth, outerHTML, outerText, parentElement, parentTextEdit, sourceIndex, style, tagName and title), the Hx elements also support the extra align property, which reflects any ALIGN attribute settings for the heading. Details of the standard properties can be found in the standard Dynamic HTML properties topics.

<Hx...> Methods
The <Hx...> element/object supports all of the standard Dynamic HTML methods (i.e. click, contains, getAttribute, insertAdjacentHTML, insertAdjacentText, removeAttribute, scrollIntoView and setAttribute). Details of these can be found in the standard Dynamic HTML Methods topics.

<Hx...> Events
The <Hx...> element/object supports all of the standard Dynamic HTML events (i.e. onclick, ondblclick, ondragstart, onfilterchange, onhelp, onkeydown, onkeypress, onkeyup, onmousedown, onmousemove, onmouseout, onmouseover, onmouseup and onselectstart). Details of these can be found in the standard Dynamic HTML events topics.

© 1995-1998, Stephen Le Hunte


<LAYER>

The <LAYER> element (currently only supported by the Navigator component of Netscape Communicator) allows discrete 'layers' of documents to be produced. It was introduced in Navigator 4.0, pre-empting the widespread adoption of standards based positioning (using style sheets), as supported by Internet Explorer 4.0 (and also Navigator 4.0). The standards based style sheet positioning mechanism is preferable to use of the <LAYER> element. For details, see the Style Sheets section for details.

Layers can contain any normal HTML content and can be exactly positioned in (or even outside of) the browser window and be displayed overlapping one another to create complex layouts in HTML documents. There are two basic types of layers, one that is given a fixed position (using the <LAYER> element) and one that can be placed relative to its position in the flow of document text (using the <ILAYER> element). Each defined layer in a document can be controlled by JavaScript, to produce almost limitless visual effects. For details, see the Layer Object in the Scripting Reference.

The <LAYER> element accepts the following attributes :

NAME
The NAME attribute can be supplied to uniquely identify the layer for scripting purposes. By default, all layers are unnamed.

LEFT
LEFT specifies the layers exact x coordinate, in pixels, where "0" (the default value) is the left-hand edge of the current browser window. Care should be taken in specifying the LEFT (and indeed TOP attribute) as you cannot guarantee the size of the users window. However, with JavaScript 1.2 (supported in Communicator) it is possible to dynamically resize and move any browser windows. See the Layer Object for more information. The LEFT attribute can be given negative, or large positive values, initially displaying the layer off the current browser window (useful for when scripting transition effects with layers).

TOP
The TOP attribute specifies the exact y coordinate in pixels, where "0" (again, the default value, as with the LEFT attribute) is the top-most edge of the current browser window. As with the LEFT attribute, care should be taken, unless you are dynamically resizing the browser window for the layered effect. The TOP attribute can be set with negative, or large positive values, initially displaying the layer outside the current browser window (useful for scripting layer transition effects).

SRC
The SRC attribute can be used to reference a separate document that contains the content of the layer. Currently (for Communicator pre-release 2), the document referenced must not include <HEAD> or <BODY> elements. Referencing external layer source files may be extremely useful if you provide the same frequently changing layer in several documents. As with Client Side Image Maps, only the layer source file needs to be altered to update all the documents that contain the particular layer. Note that there is currently no way to set the height of a particular layer (just the width - see below), which could affect the layout of any other layers in documents if a layer using an external source has its contents size drastically changed.

Z-INDEX
The Z-INDEX attribute is mutually exclusive with the ABOVE and BELOW attributes. It is supplied with a numerical value which determines the layers z-order setting (which determines how various layers overlap each other). The z-order can be thought of as the z axis of the browser window, with increasing values as the axis originates from the page out towards the user. Hence, a layer with a Z-INDEX of 2 would overlap a layer whose Z-INDEX is 1. The differences need not be incremental values, basically, with any number of layers, the one with the highest Z-INDEX will be displayed above the others.

ABOVE
The ABOVE attribute (mutually exclusive with Z-INDEX and BELOW attributes) can be used to specify the layer immediately above the current layer. For example,

<LAYER NAME="Red">
. . . Layer content
</LAYER>
<LAYER NAME="Green" ABOVE="Red">
. . . Layer content
</LAYER>

The layer NAMEd "Red" would be displayed on-top of the layer NAMEd "Green". Note that currently, any layer specified as being ABOVE another, must be defined before the lower layer in the document.

BELOW
Similar to the ABOVE attribute (and mutually exclusive with it and the Z-INDEX attribute), the BELOW attribute specifies the layer to be displayed immediately below the current layer, with the same restrictions as the ABOVE attribute.

WIDTH
The WIDTH attribute can be specified (with a pixel value) to set the width of the layer, to determine how the content of the layer is wrapped within the layer. Layer heights are automatically defined according to the content of the layer.

CLIP
The CLIP attribute can be used to specify a certain portion of the layer as being visible. Anything outside the CLIP region is transparent and won't be displayed. It accepts 4 pixel values (comma delimited) which are used to set the CLIP rectangles left, top, right and bottom coordinates. Left and right values start from the left hand edge of the layer, while top and bottom values start from the top of the layer. If only two values are supplied, then the left and top coordinates are set to 0. For example :

<LAYER CLIP="10,10,50,20">
. . .

specifies a clipping region of 40 (x direction) by 10 (y direction) pixels for the layer, starting at the position 10,10 (x,y), while :

<LAYER CLIP="50,20">
. . .

specifies a clipping region of 50 (x direction) by 20 (y direction) pixels for the layer, starting at the position 0,0 (x,y).

VISIBILITY
The VISIBILITY attribute controls whether the layer is currently visible or not. It can accept values of show, hide or inherit. Show and hide explicitly set the layers visibility, while inherit makes the current layer inherit the VISIBILITY of its parent layer(s) (layers can be nested). If the current layer is a parent layer (or contains no child layers), 'show' and 'inherit' are identical, since the layer will be visible (unless VISIBILITY="hide" is used).

BGCOLOR
BGCOLOR can be used to set the background colour of the current layer. By default, layers are transparent, specifying a BGCOLOR makes the layer opaque, using the colour specified. Any standard rrgggbb triplet, or a named colour can be used. For more details on document colouring, see the <BODY> element.

BACKGROUND
The BACKGROUND attribute can be used to reference a background image for the layer. Note that is the image used is wider than the layers WIDTH attribute value (see above), then the width of the layer will be extended to display the image fully.

Layer examples
The following (very simple) HTML fragment specifies a number of different document layers, mainly using ABOVE and BELOW attributes to set the z-order of the layers. Style sheet settings and script functions have not been included for brevity. For more details about JavaScript interactions with layers, see the Layer Object and for style sheet information, see the Style Sheets topic.

. . .
<LAYER LEFT="-50" TOP="100" NAME="QMark">
<SPAN CLASS="QMark">?</SPAN>
</LAYER>
<LAYER LEFT="25" TOP="100" NAME="What" ABOVE="QMark">
<SPAN CLASS="What">What</SPAN>
</LAYER>
<LAYER LEFT="135" TOP="100" NAME="Do" BELOW="QMark">
<SPAN CLASS="Do">do</SPAN>
</LAYER>
<LAYER LEFT="187" TOP="100" NAME="You" ABOVE="QMark">
<SPAN CLASS="You">you</SPAN>
</LAYER>
<LAYER LEFT="264" TOP="100" NAME="Want" BELOW="QMark">
<SPAN CLASS="Want">want</SPAN>
</LAYER>
<LAYER LEFT="365" TOP="100" NAME="To" ABOVE="QMark">
<SPAN CLASS="To">to</SPAN>
</LAYER>
<LAYER LEFT="100" TOP="125" NAME="Know" BELOW="QMark">
<SPAN CLASS="Know">know</SPAN>
</LAYER>
<LAYER LEFT="210" TOP="125" NAME="Today" ABOVE="QMark">
<SPAN CLASS="Today">today</SPAN>
</LAYER>
. . .

can be used to create the following effect :

What do you want to ? know today

NOTE : As you've probably guessed, the functional example above is not using layers, but Style Sheet positioning of various elements to achieve the same effect as using layers in Netscape Communicator.

The <LAYER> element does have various properties and methods that can be manipulated and invoked in a document. These are accessed through the Layer Object and are only supported by Netscape 4.0 and above.

© 1995-1998, Stephen Le Hunte


<LEGEND>

Note : The <LEGEND> element is a new element introduced in HTML 4.0 draft specifications and is only supported by Internet Explorer 4.0 and above.

The <LEGEND> element provides a label for the <FIELDSET> element. For the <LEGEND> element to be used as the <FIELDSET> label, it must be the first element contained in the <FIELDSET> block.

<LEGEND> accepts the following attributes :

ALIGN="Alignment"
The ALIGN attribute specifies where the <LEGEND> text is located on the <FIELDSET> border. It can accept vales of bottom, center, left, right and top.

CLASS="Style Sheet class name"
The CLASS attribute is used to specify the <LEGEND> element as using a particular style sheet class. See the Style Sheets topic for details.

ID="Unique element identifier"
The ID attribute can be used to either reference a unique style sheet identifier, or to provide a unique name for the <LEGEND> element for scripting purposes. Any <LEGEND> element with an ID attribute can be directly manipulated in script by referencing its ID attribute, rather than working through the All collection to determine the element. See the Scripting introduction topic for more information.

LANG="language setting"
The LANG attribute can be used to specify what language the <LEGEND> element is using. It accepts any valid ISO standard language abbreviation (for example "en" for English, "de" for German etc.) For more details, see the Document Localisation section for more details.

LANGUAGE="Scripting language"
The LANGUAGE attribute can be used to expressly specify which scripting language Internet Explorer 4.0 uses to interpret any scripting information used in the <LEGEND> element. It can accept values of vbscript, vbs, javascript or jscript. The first two specify the scripting language as Visual Basic Script, the latter two specify it as using Javascript (the default scripting language used if no LANGUAGE attribute is set.

STYLE="In line style setting"
As well as using previously defined style sheet settings, the <LEGEND> element can have in-line stylings attached to it. See the Style Sheets topic for details.

TITLE="informational ToolTip"
The Internet Explorer 4.0 (and above) specific TITLE attribute is used for informational purposes. If present, the value of the TITLE attribute is presented as a ToolTip when the users mouse hovers over the <LEGEND> section.

Examples

Every <LEGEND> element in a document is an object that can be manipulated through scripting. Note that scripting of the <LEGEND> element/object is only supported by Internet Explorer 4.0 in its Dynamic HTML object model as Netscape doesn't support the <LEGEND> element.

<LEGEND...> Properties
The <LEGEND...> element/object supports all of the standard Dynamic HTML properties (i.e. className, document, id, innerHTML, innerText, isTextEdit, lang, language, offsetHeight, offsetLeft, offsetParent, offsetTop, offsetWidth, outerHTML, outerText, parentElement, parentTextEdit, sourceIndex, style, tagName and title). Details of these can be found in the standard Dynamic HTML properties topics.
Additionally, the <LEGEND> element supports the following properties:

align
The align property directly reflects the value of the ALIGN attribute.

clientHeight
The clientHeight property reflects the height (in pixels) of the contents of the <LEGEND> element.

clientWidth
The clientWidth property reflects the width (in pixels) of the contents of the <LEGEND> element.

scrollHeight
The scrollHeight property reflects the contents of the <LEGEND> elements total scrollable height (in pixels).

scrollLeft
The scrollLeft property reflects a value representing the distance between the left-most edge of the element and the left-most visible edge of the element. While the contents of the <LEGEND> element are totally visible on the screen, the scrollLeft property is 0, only increasing if the left-most edge of the <LEGEND> elements contents are scrolled off the left hand edge of the current viewing window.

scrollTop
The scrollTop property returns a value that represents the distance between the top-most edge of the element and the top-most edge of the current viewing window. When used with the <LEGEND> element, the scrollTop property is a value indicative of the extent to which the referenced element has been scrolled vertically. If the contents of the <LEGEND> element are visible, then the scrollTop property will be 0, only increasing as the contents of the element are scrolled off the top of the current viewing window.

scrollWidth
Like the scrollHeight property, the scrollWidth property reflects a value that represents the total scrollable width of the contents of the <LEGEND> element.

<LEGEND...> Methods
The <LEGEND...> element/object supports all of the standard Dynamic HTML methods (i.e. click, contains, getAttribute, insertAdjacentHTML, insertAdjacentText, removeAttribute, scrollIntoView and setAttribute). Details of these can be found in the standard Dynamic HTML Methods topics.
Additionally, the <LEGEND> element supports the following methods:

blur
The blur event can be used to force the users focus away from the referenced <LEGEND> element, firing the onblur event.

focus
The focus method can be used to pass the users focus to the referenced <LEGEND> element, forcing the onfocus event to fire.

<LEGEND...> Events
The <LEGEND...> element/object supports all of the standard Dynamic HTML events (i.e. onclick, ondblclick, ondragstart, onfilterchange, onhelp, onkeydown, onkeypress, onkeyup, onmousedown, onmousemove, onmouseout, onmouseover, onmouseup and onselectstart). Details of these can be found in the standard Dynamic HTML events topics.
Additionally, the <LEGEND> element supports the following events:

onblur
When the referenced <LEGEND> element loses the users focus, the onblur event is fired. On the fly form validation can make use of the onblur event to check form elements as the user is entering information.

onfocus
When the user passes the focus to any <LEGEND> element, the onfocus event is fired for that element.

© 1995-1998, Stephen Le Hunte


<LISTING>

NOTE : The <LISTING> element was designated as obsolete in recent drafts of the HTML 4.0 specification, which makes it likely that browsers will stop supporting it. While it's supported in Internet Explorer 3.02 (and preview versions of 4.0) and versions of Netscape up to 4.01, it is recommended that for new documents, <PRE> is used instead.

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.

For example :

Some might say <LISTING> that two heads </LISTING> are better than one

Would render as:

Some might saythat two headsare better than one

NOTE : Netscape and Internet Explorer 4.0 will translate any special characters included within <LISTING> elements. I.e. if characters such as &lt;, &gt; etc. are used, they will be translated to < and >. Mosaic and Internet Explorer 3.0x treat the text contained within the elements literally.

Internet Explorer (4.0 and above) also support the use of the TITLE attribute. This can be used for informational purposes, with Internet Explorer treating the value of the TITLE attribute as a 'ToolTip' which is displayed when the reader passes their mouse over the contents of the <LISTING> element. For example, adding:

. . .TITLE="An anonymous quote"

would display the ToolTip ("An anonymous quote") when the mouse pauses on the text.

LANG="language setting"
The LANG attribute can be used to specify what language the <LISTING> element is using. It accepts any valid ISO standard language abbreviation (for example "en" for English, "de" for German etc.) For more details, see the Document Localisation section for more details.

LANGUAGE="Scripting language"
The LANGUAGE attribute can be used to expressly specify which scripting language Internet Explorer 4.0 uses to interpret any scripting information used in the <LISTING> element. It can accept values of vbscript, vbs, javascript or jscript. The first two specify the scripting language as Visual Basic Script, the latter two specify it as using Javascript (the default scripting language used if no LANGUAGE attribute is set.

CLASS="Style Sheet class name"
The CLASS attribute is used to specify the <CENTER> as using a particular style sheet class. For example, a style sheet class defined as:

<STYLE TYPE="text/css">
.BigText {font-size : 14pt}
</STYLE>

could then be referenced as:

<LISTING CLASS="BigText">that two heads</LISTING>

and would be displayed in a slightly larger font. See the Style Sheets overview for more information and style sheet settings.

STYLE="In line style setting"
As well as using previously defined style sheet settings, the <LISTING> element can have in-line stylings attached to it. For example:

<LISTING STYLE="{font-size : 14pt}">that two heads</LISTING>

would display exactly as the above example. See the Style Sheets section for more details about style sheet settings.

ID="Unique element identifier"
The ID attribute can be used to either reference a unique style sheet identifier, or to provide a unique name for the <LISTING> element for scripting purposes. Any <LISTING> element with an ID attribute can be directly manipulated in script by referencing its ID attribute, rather than working through the All collection to determine the element. See the Scripting introduction topic for more information.

Every <LISTING> element in a document is an object that can be manipulated through scripting. Note that scripting of the <LISTING> element/object is only supported by Internet Explorer 4.0 in its Dynamic HTML object model. Netscape does not support direct scripting of the <LISTING> element at all.

<LISTING...> Properties
The <LISTING...> element/object supports all of the standard Dynamic HTML properties (i.e. className, document, id, innerHTML, innerText, isTextEdit, lang, language, offsetHeight, offsetLeft, offsetParent, offsetTop, offsetWidth, outerHTML, outerText, parentElement, parentTextEdit, sourceIndex, style, tagName and title). Details of these can be found in the standard Dynamic HTML properties topics.

<LISTING...> Methods
The <LISTING...> element/object supports all of the standard Dynamic HTML methods (i.e. click, contains, getAttribute, insertAdjacentHTML, insertAdjacentText, removeAttribute, scrollIntoView and setAttribute). Details of these can be found in the standard Dynamic HTML Methods topics.

<LISTING...> Events
The <LISTING...> element/object supports all of the standard Dynamic HTML events (i.e. onclick, ondblclick, ondragstart, onfilterchange, onhelp, onkeydown, onkeypress, onkeyup, onmousedown, onmousemove, onmouseout, onmouseover, onmouseup and onselectstart). Details of these can be found in the standard Dynamic HTML events topics.

© 1995-1998, Stephen Le Hunte


<MARQUEE>

NOTE : This element is currently only supported by the Microsoft Internet Explorer. For authors writing specifically for Netscape, a marquee effect can be obtained through the use of a Java applet, JavaScript script, or by using a multi-block GIF 'banner' (these can be constructed using the GIF construction kit).

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)

E.g. :

<MARQUEE>This text will scroll from right to left slowly</MARQUEE>

appears thus:

This text will scroll from right to left slowly

NOTE : If you are not viewing this page with Internet Explorer then the example <MARQUEE>s will not display properly.

Marquees can be aligned to the left or right hand side in the HTML document and have a variety of attributes to control them.

ALIGN="left|right|top|middle|bottom"
This attribute can be set to either LEFT, RIGHT, TOP, MIDDLE or BOTTOM and specifies that the text around the marquee should align with the top, middle , or bottom of the marquee.

For example:

<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, then the Marquee will occupy the whole width of the browser window and any following text will be rendered below the Marquee.)

BEHAVIOR="scroll|slide|alternate"
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.

E.g.

<MARQUEE BEHAVIOR=ALTERNATE>
This marquee will "bounce" across the screen</MARQUEE>

will appear thus :
This marquee will "bounce" across the screen

BGCOLOR="#rrggbb|colour name"
This specifies a background colour for the marquee, either as a rrggbb hex triplet, or as one of the pre-named colours. (See <BODY BGCOLOR> for more information)

E.g.

<MARQUEE BGCOLOR="#F0F8FF">Nice Background colour!<MARQUEE>

will appear thus :
Nice Background colour!

CLASS="Style Sheet class"
The CLASS attribute is used to specify the <PLAINTEXT> as using a particular style sheet class. See the Style Sheets overview for more information and style sheet settings.

DATAFLD="Data column name"
The DATAFLD attribute can be used to specify a data column name from the Data source (see DATASRC) that the <MARQUEE> is bound to. For more information on the DATAFLD attribute, see the Data Binding topic.

DATAFORMATAS="HTML|text"
When the <MARQUEE> element is data-bound, it can accept straight text, or HTML from the data source. The DATAFORMATAS attribute should be set to "TEXT" or "HTML" accordingly. with DATAFORMATAS="HTML", the data provided for the <BUTTON> element is parsed and rendered when it's displayed.
For more information on the DATAFORMATAS attribute, see the Data Binding topic.

DATASRC="Data source"
The DATASRC attribute can be used to specify a data source that the <BUTTON> is bound to. For more information on the DATASRC attribute, see the Data Binding topic.

DIRECTION="left|right"
This specifies in which direction the text should scroll. The default is LEFT, which means scrolling to the left from the right. This attribute can also be set to RIGHT, which would cause the marquee to scroll from the left to the right.

HEIGHT="value|value%"
This specifies the height of the marquee, either in pixels (HEIGHT=n) or as a percentage of the screen height (HEIGHT=n%).

ID="Style Sheet/Scripting identifier"
The ID attribute can be used to either reference a unique style sheet identifier, or to provide a unique name for the <MARQUEE> element for scripting purposes. Any <MARQUEE> element with an ID attribute can be directly manipulated in script by referencing its ID attribute, rather than working through the All collection to determine the element. See the Scripting introduction topic for more information.

HSPACE="value"
This attribute is the same as that for 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 text that flows around the <MARQUEE> doesn't push up against the sides.

LANG="Language identifier"
The LANG attribute can be used to specify what language the <MARQUEE> element is using. It accepts any valid ISO standard language abbreviation (for example "en" for English, "de" for German etc.) For more details, see the Document Localisation section for more details.

LANGUAGE="Scripting language"
The LANGUAGE attribute can be used to expressly specify which scripting language Internet Explorer 4.0 uses to interpret any scripting information used in the <MARQUEE> element. It can accept values of vbscript, vbs, javascript or jscript. The first two specify the scripting language as Visual Basic Script, the latter two specify it as using Javascript (the default scripting language used if no LANGUAGE attribute is set.

LOOP="value|-1|infinite"
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 : By default, <MARQUEE...>'s will loop indefinitely.

SCROLLAMOUNT="value"
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="value"
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.

For example :

<MARQUEE SCROLLDELAY=1 SCROLLAMOUNT=75>I'm fast</MARQUEE>

would render thus

I'm fast

STYLE="In line styling"
As well as using previously defined style sheet settings, the <MARQUEE> element can have in-line stylings attached to it. For example:

<MARQUEE STYLE="{font-family:Arial;font-size:8pt}">1, HTMLib Way, Swansea</MARQUEE>

would display the <MARQUEE> in an 8pt Arial font. See the Style Sheets section for more details about style sheet settings.

TITLE="Informational ToolTip"
The Internet Explorer 4.0 (and above) specific TITLE attribute is used for informational purposes. If present, the value of the TITLE attribute is presented as a ToolTip when the users mouse hovers over the <MARQUEE> section.

TRUESPEED="Speed flag"
With the TRUESPEED flag set, all SCROLLDELAY values are used as specified. If the TRUESPEED flag is not set, then any values of SCROLLDELAY of less than 59 mS are rounded to 60mS.

VSPACE="value"
This attribute is the same as that for images. It is used to specify the number of pixels of free space at the top and bottom of the <MARQUEE> so that text that flows around the <MARQUEE> doesn't push up against the top or bottom.

WIDTH="value|value%"
This specifies the width of the marquee, either in pixels (WIDTH=n) or as a percentage of the screen height (WIDTH=n%).

NOTE :If you wish to set the <FONT> to be displayed in the <MARQUEE>, then the <FONT> declaration needs to be outside the <MARQUEE>

E.g.

<FONT FACE="Comic Sans MS"><MARQUEE>Hello</MARQUEE></FONT>

will appear thus:
Hello

Every <MARQUEE> element in a document is an object that can be manipulated through scripting. Note that scripting of the <MARQUEE> element/object is only supported by Internet Explorer 4.0 in its Dynamic HTML object model. Netscape does not support direct scripting of the <MARQUEE> element at all.

<MARQUEE...> Properties
In addition to the standard Dynamic HTML properties (i.e. className, document, id, innerHTML, innerText, isTextEdit, lang, language, offsetHeight, offsetLeft, offsetParent, offsetTop, offsetWidth, outerHTML, outerText, parentElement, parentTextEdit, sourceIndex, style, tagName and title. Details of these can be found in the standard Dynamic HTML properties topics.), the <MARQUEE> element also supports the following properties:

behavior
The behavior property directly reflects, or sets the value of the BEHAVIOR attribute.

bgColor
The bgColor property directly reflects, or sets the value of the BGCOLOR attribute. It takes any valid #rrggbb hex triplet, or any of the possible Colour Names.

clientHeight
The clientHeight property reflects the height (in pixels) of the contents of the <MARQUEE> element.

clientWidth
The clientWidth property reflects the width (in pixels) of the contents of the <MARQUEE> element.

dataFld
The dataFld property directly reflects, or sets the value of the DATAFLD attribute (see above). For more information on the DATAFLD attribute, see the Data Binding topic.

dataFormatAs
The dataFormatAs property directly reflects, or sets the value of the DATAFORMATAS attribute (see above). For more information on the DATAFORMATAS attribute, see the Data Binding topic.

dataSrc
The dataSrc property directly reflects, or sets the value of the DATASRC attribute (see above). For more information on the DATASRC attribute, see the Data Binding topic.

direction
The behavior property directly reflects, or sets the value of the BEHAVIOR attribute.

height
The height property directly reflects, or sets the value of the HEIGHT attribute.

hspace
The hspace property directly reflects, or sets the value of the HSPACE attribute.

loop
The loop property directly reflects, or sets the value of the LOOP attribute.

scrollAmount
The scrollAmount property directly reflects, or sets the value of the SCROLLAMOUNT attribute.

scrollDelay
The scrollDelay property directly reflects, or sets the value of the SCROLLDELAY attribute.

scrollHeight
The scrollHeight property reflects the contents of the <MARQUEE> elements total scrollable height (in pixels).

scrollLeft
The scrollLeft property reflects a value representing the distance between the left-most edge of the element and the left-most visible edge of the element. While the contents of the <MARQUEE> element are totally visible on the screen, the scrollLeft property is 0, only increasing if the left-most edge of the <MARQUEE> elements contents are scrolled off the left hand edge of the current viewing window.

scrollTop
The scrollTop property returns a value that represents the distance between the top-most edge of the element and the top-most edge of the current viewing window. When used with the <MARQUEE> element, the scrollTop property is a value indicative of the extent to which the referenced element has been scrolled vertically. If the contents of the <MARQUEE> element are visible, then the scrollTop property will be 0, only increasing as the contents of the element are scrolled off the top of the current viewing window.

scrollWidth
Like the scrollHeight property, the scrollWidth property reflects a value that represents the total scrollable width of the contents of the <MARQUEE> element.

trueSpeed
The trueSpeed property directly reflects, or sets the value of the TRUESPEED flag.

vspace
The vspace property directly reflects, or sets the value of the VSPACE attribute.

width
The width property directly reflects, or sets the value of the WIDTH attribute.

<MARQUEE...> Methods
In addition to the standard Dynamic HTML methods (i.e. click, contains, getAttribute, insertAdjacentHTML, insertAdjacentText, removeAttribute, scrollIntoView and setAttribute. Details of these can be found in the standard Dynamic HTML Methods topics.), the <MARQUEE> element also supports the following methods:

blur
The blur event can be used to force the users focus away from the referenced <MARQUEE> element, firing the onblur event.

focus
The focus method can be used to pass the users focus to the referenced <MARQUEE> element, forcing the onfocus event to fire.

start
The start method can be used to start a <MARQUEE> through scripting.

stop
Unsurprisingly, the stop method can be used to stop a <MARQUEE> through scripting.

For example:

Start and Stop me using the buttons

<MARQUEE...> Events
In addition to the standard Dynamic HTML events (i.e. onclick, ondblclick, ondragstart, onfilterchange, onhelp, onkeydown, onkeypress, onkeyup, onmousedown, onmousemove, onmouseout, onmouseover, onmouseup and onselectstart. Details of these can be found in the standard Dynamic HTML events topics.), the <MARQUEE> element also supports the following events:

onblur
When the referenced <MARQUEE> element loses the users focus, the onblur event is fired.

onbounce
The onbounce event fires when the <MARQUEE> 'bounces' on the side of the screen. Note that this requires BEHAVIOR="alternate" set for the <MARQUEE>. For example, the following <MARQUEE> will tell you how many times it's 'bounced'

Bouncy bouncy, boing boing

Number of bounces : 0

onfinish
When a <MARQUEE> finishes its scrolling, it will fire the onfinish event. Note that <MARQUEE>'s loop indefinitely, unless their LOOP attributes are set to a value. If the <MARQUEE> is set to loop indefinitely, the onfinish event will never fire.

onfocus
When the user passes the focus to any <MARQUEE> element, the onfocus event is fired for that element.

onresize
Whenever the <MARQUEE> is resized (i.e. through scripting, or browser size changes perhaps), the onresize event fires. Dynamic resizing of the content of the <MARQUEE> element could be scripted in the onresize event for example.

onscroll
The onscroll event occurs whenever the <MARQUEE> scrolls. Note that for the <MARQUEE> element, the onscroll event occurs every time the <MARQUEE> text scrolls, so depending on the SCROLLDELAY and SCROLLAMOUNT settings, there could be a huge amount of onscroll events fired. For example, the <MARQUEE> element below counts the number of scrolls. It will only scrolls. To start it, press the Start button. When you're bored of watching the count, press the Stop button.

Scrolly scrolly, scroing scroing

Number of onscroll events : 0

onstart
The onstart event fires when a 'bounce' cycle begins. Note that when a <MARQUEE> is bouncing (i.e. BEHAVIOR="alternate"), it fires the onstart event only once, when it first starts 'bouncing'.

© 1995-1998, Stephen Le Hunte


<MULTICOL>

This Netscape specific attribute allows text to be formatted in multiple columns. The <MULTICOL> element can be nested, producing multiple column layouts within multiple column layouts. It takes the following attributes :

COLS="value"
This specifies the number of columns to be used to render the text. It accepts a numerical values. It is the only required attribute for the <MULTICOL> element.

GUTTER="value"
If specified this setting (which accepts a pixel value) controls the amount of white space separating adjacent columns in the layout.

WIDTH="value"
This specifies the width of the entire layout and can accept a pixel value, or a percentage value (which will be calculated as a percentage value of the browser window).

NOTE : As this element is Netscape specific, it may be wise to consider using a borderless <TABLE> based layout for the same effect. While this will not allow every available browser to view the content, it ensures a wider possible audience.

Example
The following HTML fragment will display as three columns, using 25 pixels white space between each column, as shown below the example.

<MULTICOL COLS="3" GUTTER="25">
<P>Hello and Welcome to the HTML Reference Library. To those of you familiar with the previous incarnation of this project (The HTML Reference Library - HTMLib in Windows .HLP format) the content and working of these pages will probably be obvious. <P>To those of you new to the world of the HTML Reference Library, a little introduction :
</MULTICOL>

displays as :

Hello and Welcome to the HTML Reference Library. To those of you familiar with the previous incarnation of this project (The HTML Reference Library - HTMLib in Windows .HLP format) the content and working of these pages will probably be obvious.

To those of you new to the 		world of the HTML Reference Library, a little introduction

NOTE : The above example display is not entirely accurate. In Netscape resizing the browser window causes the text to be broken at different points, the above example doesn't, but it gives an idea of the use of the <MULTICOL> element.

As the <MULTICOL> element is Netscape specific and the Netscape scripting object model doesn't cover every element within documents, there are no properties, methods, or events for the <MULTICOL> element.

© 1995-1998, Stephen Le Hunte


<P>

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, etc.

Typically, paragraphs should be surrounded by a vertical space of between one and one and a half lines.. With some HTML user agents, the first line in a paragraph may be indented.

Example of use:

<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 since the HTML 3.2 specification is the ability to align paragraphs. Basically, the ALIGN=left|center|right attribute and values were been added to the <P> element.

e.g :

<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 centre of the page. (c.f. <CENTER> ... </CENTER>)

<P ALIGN=RIGHT> ... </P>

All text will be aligned to the right side of the page.

Internet Explorer (4.0 and above) also support the use of the TITLE attribute. This can be used for informational purposes, with Internet Explorer treating the value of the TITLE attribute as a 'ToolTip' which is displayed when the reader passes their mouse over the contents of the <P> element. For example, adding :

. . .TITLE="A right-justified paragraph"

to the above example, the section displays as :

All this text will be aligned to the right side of the page

LANG="language setting"
The LANG attribute can be used to specify what language the <P> element is using. It accepts any valid ISO standard language abbreviation (for example "en" for English, "de" for German etc.) For more details, see the Document Localisation section for more details.

LANGUAGE="Scripting language"
The LANGUAGE attribute can be used to expressly specify which scripting language Internet Explorer 4.0 uses to interpret any scripting information used in the <P> element. It can accept values of vbscript, vbs, javascript or jscript. The first two specify the scripting language as Visual Basic Script, the latter two specify it as using Javascript (the default scripting language used if no LANGUAGE attribute is set.

CLASS="Style Sheet class name"
The CLASS attribute is used to specify the <P> element as using a particular style sheet class. For example, a style sheet class defined as:

<STYLE TYPE="text/css">
.FirstPara {text-indent : 0.5in;
margin-left : 1in}
</STYLE>

could then be referenced as:

<P CLASS="FirstPara">The first line of this paragraph will be slightly indented from the rest of the text, which will then flow neatly down the left margin. Note that the whole paragraph is also indented.</P>

and would display as:

The first line of this paragraph will be slightly indented from the rest of the text, which will then flow neatly down the left margin. Note that the whole paragraph is also indented.

See the Style Sheets overview for more information and style sheet settings.

STYLE="In line style setting"
As well as using previously defined style sheet settings, the <P> element can have in-line stylings attached to it. For example:

<P STYLE="{text-indent : 0.5in;margin-left : 1in}">An indented paragraph, with leading space on the first line</P>

would display as the above example. See the Style Sheets section for more details about style sheet settings.

ID="Unique element identifier"
The ID attribute can be used to either reference a unique style sheet identifier, or to provide a unique name for the <P> element for scripting purposes. Any <P> element with an ID attribute can be directly manipulated in script by referencing its ID attribute, rather than working through the All collection to determine the element. See the Scripting introduction topic for more information.

Every <P> element in a document is an object that can be manipulated through scripting. Note that scripting of the <P> element/object is only supported by Internet Explorer 4.0 in its Dynamic HTML object model. Netscape does not support direct scripting of the <P> element at all.

<P...> Properties
As well as supporting all of the standard Dynamic HTML properties (i.e. className, document, id, innerHTML, innerText, isTextEdit, lang, language, offsetHeight, offsetLeft, offsetParent, offsetTop, offsetWidth, outerHTML, outerText, parentElement, parentTextEdit, sourceIndex, style, tagName and title), the <P> element also supports the extra align property, which reflects any ALIGN attribute settings for the paragraph. Details of the standard properties can be found in the standard Dynamic HTML properties topics.

<P...> Methods
The <P...> element/object supports all of the standard Dynamic HTML methods (i.e. click, contains, getAttribute, insertAdjacentHTML, insertAdjacentText, removeAttribute, scrollIntoView and setAttribute). Details of these can be found in the standard Dynamic HTML Methods topics.

<P...> Events
The <P...> element/object supports all of the standard Dynamic HTML events (i.e. onclick, ondblclick, ondragstart, onfilterchange, onhelp, onkeydown, onkeypress, onkeyup, onmousedown, onmousemove, onmouseout, onmouseover, onmouseup and onselectstart). Details of these can be found in the standard Dynamic HTML events topics.

© 1995-1998, Stephen Le Hunte


<PLAINTEXT>

NOTE : The <PLAINTEXT> element was designated as obsolete in recent drafts of the HTML 4.0 specification, which makes it likely that browsers will stop supporting it. While it's supported in Internet Explorer 3.02 (and preview versions of 4.0) and versions of Netscape up to 4.01, it is recommended that for new documents, <PRE> is used instead.

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 (3.02) and Mosaic will both allow the use of a </PLAINTEXT> closing element. Netscape and Internet Explorer 4.0 will treat the closing element literally and display it, with the rest of the document being displayed literally as well.

Typically, it will render as fixed width font with white space separating it from other text.

e.g.

I live<PLAINTEXT>in the rainiest part of the world.

Would render as:

I live

in the rainiest part of the world.

NOTE : As mentioned above, the <PLAINTEXT> element has been made obsolete in recent HTML 4.0 specifications. The above example actually uses the <PRE> to demonstrate how the element would be rendered in oder browsers. The <PRE> is recommended instead of the <PLAINTEXT> element for future documents.

As said above, anything following the opening <PLAINTEXT> element should be treated as text. Netscape (3.0 and above) and Internet Explorer (4.0 and above) behave like this. Older versions of Internet Explorer and all versions of Mosaic will allow the use of a closing </PLAINTEXT> element, allowing discrete blocks of <PLAINTEXT> formatted text to be displayed.

TITLE="informational ToolTip"
The Internet Explorer 4.0 (and above) specific TITLE attribute is used for informational purposes. If present, the value of the TITLE attribute is presented as a ToolTip when the users mouse hovers over the <PLAINTEXT> section.

LANG="language setting"
The LANG attribute can be used to specify what language the <PLAINTEXT> element is using. It accepts any valid ISO standard language abbreviation (for example "en" for English, "de" for German etc.) For more details, see the Document Localisation section for more details.

LANGUAGE="Scripting language"
The LANGUAGE attribute can be used to expressly specify which scripting language Internet Explorer 4.0 uses to interpret any scripting information used in the <PLAINTEXT> element. It can accept values of vbscript, vbs, javascript or jscript. The first two specify the scripting language as Visual Basic Script, the latter two specify it as using Javascript (the default scripting language used if no LANGUAGE attribute is set.

CLASS="Style Sheet class name"
The CLASS attribute is used to specify the <PLAINTEXT> as using a particular style sheet class. See the Style Sheets overview for more information and style sheet settings.

STYLE="In line style setting"
As well as using previously defined style sheet settings, the <PLAINTEXT> element can have in-line stylings attached to it. For example:

<PLAINTEXT STYLE="{font-family:Arial;font-size:8pt}">1, HTMLib Way, Swansea</PLAINTEXT>

would display in an 8pt Arial font. See the Style Sheets section for more details about style sheet settings.

ID="Unique element identifier"
The ID attribute can be used to either reference a unique style sheet identifier, or to provide a unique name for the <PLAINTEXT> element for scripting purposes. Any <PLAINTEXT> element with an ID attribute can be directly manipulated in script by referencing its ID attribute, rather than working through the All collection to determine the element. See the Scripting introduction topic for more information.

Every <PLAINTEXT> element in a document is an object that can be manipulated through scripting. Note that scripting of the <PLAINTEXT> element/object is only supported by Internet Explorer 4.0 in its Dynamic HTML object model. Netscape does not support direct scripting of the <PLAINTEXT> element at all.

<PLAINTEXT...> Properties
The <PLAINTEXT...> element/object supports all of the standard Dynamic HTML properties (i.e. className, document, id, innerHTML, innerText, isTextEdit, lang, language, offsetHeight, offsetLeft, offsetParent, offsetTop, offsetWidth, outerHTML, outerText, parentElement, parentTextEdit, sourceIndex, style, tagName and title). Details of these can be found in the standard Dynamic HTML properties topics.

<PLAINTEXT...> Methods
The <PLAINTEXT...> element/object supports all of the standard Dynamic HTML methods (i.e. click, contains, getAttribute, insertAdjacentHTML, insertAdjacentText, removeAttribute, scrollIntoView and setAttribute). Details of these can be found in the standard Dynamic HTML Methods topics.

<PLAINTEXT...> Events
The <PLAINTEXT...> element/object supports all of the standard Dynamic HTML events (i.e. onclick, ondblclick, ondragstart, onfilterchange, onhelp, onkeydown, onkeypress, onkeyup, onmousedown, onmousemove, onmouseout, onmouseover, onmouseup and onselectstart). Details of these can be found in the standard Dynamic HTML events topics.

© 1995-1998, Stephen Le Hunte


<PRE>

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 a HTML Level 1 feature. The WIDTH attribute specifies the maximum number of characters for a line and allows the HTML user agent 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, etc.) 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 : Internet Explorer 4.0 doesn't change the font pitch when different values are given to the WIDTH attribute.

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 (such as <B>, <I> etc.) specially.

TITLE="informational ToolTip"
The Internet Explorer 4.0 (and above) specific TITLE attribute is used for informational purposes. If present, the value of the TITLE attribute is presented as a ToolTip when the users mouse hovers over the <PRE> section.

LANG="language setting"
The LANG attribute can be used to specify what language the <PRE> element is using. It accepts any valid ISO standard language abbreviation (for example "en" for English, "de" for German etc.) For more details, see the Document Localisation section for more details.

LANGUAGE="Scripting language"
The LANGUAGE attribute can be used to expressly specify which scripting language Internet Explorer 4.0 uses to interpret any scripting information used in the <PRE> element. It can accept values of vbscript, vbs, javascript or jscript. The first two specify the scripting language as Visual Basic Script, the latter two specify it as using Javascript (the default scripting language used if no LANGUAGE attribute is set.

CLASS="Style Sheet class name"
The CLASS attribute is used to specify the <PRE> as using a particular style sheet class. See the Style Sheets overview for more information and style sheet settings.

STYLE="In line style setting"
As well as using previously defined style sheet settings, the <PLAINTEXT> element can have in-line stylings attached to it. For example:

<PRE STYLE="{font-style:italic}">Some italic pre-formatted text</PRE>

would display in an italic font. See the Style Sheets section for more details about style sheet settings.

ID="Unique element identifier"
The ID attribute can be used to either reference a unique style sheet identifier, or to provide a unique name for the <PRE> element for scripting purposes. Any <PRE> element with an ID attribute can be directly manipulated in script by referencing its ID attribute, rather than working through the All collection to determine the element. See the Scripting introduction topic for more information.

Every <PRE> element in a document is an object that can be manipulated through scripting. Note that scripting of the <PRE> element/object is only supported by Internet Explorer 4.0 in its Dynamic HTML object model. Netscape does not support direct scripting of the <PRE> element at all.

<PRE...> Properties
As well as supporting all of the standard Dynamic HTML properties (i.e. className, document, id, innerHTML, innerText, isTextEdit, lang, language, offsetHeight, offsetLeft, offsetParent, offsetTop, offsetWidth, outerHTML, outerText, parentElement, parentTextEdit, sourceIndex, style, tagName and title), the <PRE...> element/object also supports the additional width property, which reflects any settings of the WIDTH attribute. Details of these can be found in the standard Dynamic HTML properties topics.

<PRE...> Methods
The <PRE...> element/object supports all of the standard Dynamic HTML methods (i.e. click, contains, getAttribute, insertAdjacentHTML, insertAdjacentText, removeAttribute, scrollIntoView and setAttribute). Details of these can be found in the standard Dynamic HTML Methods topics.

<PRE...> Events
The <PRE...> element/object supports all of the standard Dynamic HTML events (i.e. onclick, ondblclick, ondragstart, onfilterchange, onhelp, onkeydown, onkeypress, onkeyup, onmousedown, onmousemove, onmouseout, onmouseover, onmouseup and onselectstart). Details of these can be found in the standard Dynamic HTML events topics.

© 1995-1998, Stephen Le Hunte


<XMP>

NOTE : The <XMP> element was designated as obsolete in recent drafts of the HTML 4.0 specification, which makes it likely that browsers will stop supporting it. While it's supported in Internet Explorer 3.02 (and preview versions of 4.0) and versions of Netscape up to 4.01, it is recommended that for new documents, <PRE> is used instead.

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.

e.g.

The <XMP>Netscape Navigator</XMP> supports coloured tables.

Would render as:

The

Netscape Navigator supports coloured tables.

TITLE="informational ToolTip"
The Internet Explorer 4.0 (and above) specific TITLE attribute is used for informational purposes. If present, the value of the TITLE attribute is presented as a ToolTip when the users mouse hovers over the <XMP> section.

LANG="language setting"
The LANG attribute can be used to specify what language the <XMP> element is using. It accepts any valid ISO standard language abbreviation (for example "en" for English, "de" for German etc.) For more details, see the Document Localisation section for more details.

LANGUAGE="Scripting language"
The LANGUAGE attribute can be used to expressly specify which scripting language Internet Explorer 4.0 uses to interpret any scripting information used in the <XMP> element. It can accept values of vbscript, vbs, javascript or jscript. The first two specify the scripting language as Visual Basic Script, the latter two specify it as using Javascript (the default scripting language used if no LANGUAGE attribute is set.

CLASS="Style Sheet class name"
The CLASS attribute is used to specify the <XMP> as using a particular style sheet class. See the Style Sheets overview for more information and style sheet settings.

STYLE="In line style setting"
As well as using previously defined style sheet settings, the <XMP> element can have in-line stylings attached to it. See the Style Sheets section for more details about style sheet settings.

ID="Unique element identifier"
The ID attribute can be used to either reference a unique style sheet identifier, or to provide a unique name for the <XMP> element for scripting purposes. Any <XMP> element with an ID attribute can be directly manipulated in script by referencing its ID attribute, rather than working through the All collection to determine the element. See the Scripting introduction topic for more information.

Every <XMP> element in a document is an object that can be manipulated through scripting. Note that scripting of the <XMP> element/object is only supported by Internet Explorer 4.0 in its Dynamic HTML object model. Netscape does not support direct scripting of the <XMP> element at all.

<XMP...> Properties
The <XMP...> element/object supports all of the standard Dynamic HTML properties (i.e. className, document, id, innerHTML, innerText, isTextEdit, lang, language, offsetHeight, offsetLeft, offsetParent, offsetTop, offsetWidth, outerHTML, outerText, parentElement, parentTextEdit, sourceIndex, style, tagName and title). Details of these can be found in the standard Dynamic HTML properties topics.

<XMP...> Methods
The <XMP...> element/object supports all of the standard Dynamic HTML methods (i.e. click, contains, getAttribute, insertAdjacentHTML, insertAdjacentText, removeAttribute, scrollIntoView and setAttribute). Details of these can be found in the standard Dynamic HTML Methods topics.

<XMP...> Events
The <XMP...> element/object supports all of the standard Dynamic HTML events (i.e. onclick, ondblclick, ondragstart, onfilterchange, onhelp, onkeydown, onkeypress, onkeyup, onmousedown, onmousemove, onmouseout, onmouseover, onmouseup and onselectstart). Details of these can be found in the standard Dynamic HTML events topics.

© 1995-1998, Stephen Le Hunte


List elements overview

HTML supports several types of lists, all of which may be nested. If used they should be present in the <BODY> of a HTML document.

<DL> - Definition list
<DIR> - Directory list
<MENU> - Menu list
<OL> - Ordered list
<UL> - Unordered list

© 1995-1998, Stephen Le Hunte


<DL>

A definition list is a list of terms and corresponding definitions. Definition lists are typically formatted with the term flush-left and the definition, formatted paragraph style, indented after the term.

Example of use:

<DL>
<DT>&lt;PRE&gt;<DD>Allows for the presentation of preformatted text.
<DT>&lt;P&gt;<DD>This is used to define paragraph blocks.
</DL>

Would render as:

<PRE>
Allows for the presentation of preformatted text
<P>
This is used to define paragraph blocks

If the <DT> term does not fit in the <DT> column (one third of the display area), 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.

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, because the list items are small and/or the entire list is large.

Unless you provide the COMPACT attribute, the HTML user agent may leave white space between successive <DT>, <DD> pairs. The COMPACT attribute may also reduce the width of the left-hand (<DT>) column.

<DL COMPACT>
<DT>&lt;PRE&gt;<DD>Allows for the presentation of preformatted text.
<DT>&lt;P&gt;<DD>This is used to define paragraph blocks.
</DL>

TITLE="informational ToolTip"
The Internet Explorer 4.0 (and above) specific TITLE attribute is used for informational purposes. If present, the value of the TITLE attribute is presented as a ToolTip when the users mouse hovers over the <DL> section. Note that <DT> and <DD> also support use of the TITLE attribute. The ToolTip presented to the user will be that set in the <DT> or <DD> element. If they don't have a TITLE attribute, that set for the main <DL> element will be used. For example:

<DL TITLE="A definition list">
<DT TITLE="A definition term">&lt;PRE&gt;<DD TITLE="Definition data">Allows for the presentation of preformatted text.
<DT>&lt;P&gt;<DD>This is used to define paragraph blocks.
</DL>

As you can see below, when the mouse hovers over the first <DT> or <DD> elements, their TITLE properties are presented, but hovering the mouse over the latter elements, presents the TITLE ToolTip given in the main <DL> element.

<PRE>
Allows for the presentation of preformatted text.
<P>
This is used to define paragraph blocks.

LANG="language setting"
The LANG attribute can be used to specify what language the <DL> (or <DT> or <DD> elements) is using. It accepts any valid ISO standard language abbreviation (for example "en" for English, "de" for German etc.) For more details, see the Document Localisation section for more details.

LANGUAGE="Scripting language"
The LANGUAGE attribute can be used to expressly specify which scripting language Internet Explorer 4.0 uses to interpret any scripting information used in the <DL> (or <DT> or <DD> elements) element. It can accept values of vbscript, vbs, javascript or jscript. The first two specify the scripting language as Visual Basic Script, the latter two specify it as using Javascript (the default scripting language used if no LANGUAGE attribute is set.

CLASS="Style Sheet class name"
The CLASS attribute is used to specify the <DL> (or <DT> or <DD> elements) as using a particular style sheet class. See the Style Sheets topic for details.

STYLE="In line style setting"
As well as using previously defined style sheet settings, the <DL> (or <DT> or <DD>) element can have in-line stylings attached to it. See the Style Sheets topic for details.

ID="Unique element identifier"
The ID attribute can be used to either reference a unique style sheet identifier, or to provide a unique name for the <DL> (or <DT> or <DD>) element for scripting purposes. Any <DL> (or <DT> or <DD>) element with an ID attribute can be directly manipulated in script by referencing its ID attribute, rather than working through the All collection to determine the element. See the Scripting introduction topic for more information.

Every <DL> (or <DT> or <DD>) element in a document is an object that can be manipulated through scripting. Note that scripting of the <DL>, <DT> and <DD> elements/objects is only supported by Internet Explorer 4.0 in its Dynamic HTML object model. Netscape does not support direct scripting of the <DL>, <DT> or <DD> element at all.

<DL...> (<DT> and <DD>) Properties
The <DL...> elements support all of the standard Dynamic HTML properties (i.e. className, document, id, innerHTML, innerText, isTextEdit, lang, language, offsetHeight, offsetLeft, offsetParent, offsetTop, offsetWidth, outerHTML, outerText, parentElement, parentTextEdit, sourceIndex, style, tagName and title). Details of these can be found in the standard Dynamic HTML properties topics.
The <DL> element also support the compact property, which reflects its COMPACT attribute setting (see above).

<DL...> (<DT> and <DD>) Methods
The <DL...> elements support all of the standard Dynamic HTML methods (i.e. click, contains, getAttribute, insertAdjacentHTML, insertAdjacentText, removeAttribute, scrollIntoView and setAttribute). Details of these can be found in the standard Dynamic HTML Methods topics.

<DL...> (<DT> and <DD>) Events
The <DL...> elements support all of the standard Dynamic HTML events (i.e. onclick, ondblclick, ondragstart, onfilterchange, onhelp, onkeydown, onkeypress, onkeyup, onmousedown, onmousemove, onmouseout, onmouseover, onmouseup and onselectstart). Details of these can be found in the standard Dynamic HTML events topics.

© 1995-1998, Stephen Le Hunte


<DIR>

Note : <DIR> is deprecated in HTML 4.0. Authors are encouraged to use <UL> instead.

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 optimise the column width as 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:

E.g. :

<DIR>
<LI>A-H
<LI>I-M
<LI>M-R
<LI>S-Z
</DIR>

Would render as:

  • A-H
  • I-M
  • M-R
  • S-Z

    • TITLE="informational ToolTip"
    The Internet Explorer 4.0 (and above) specific TITLE attribute is used for informational purposes. If present, the value of the TITLE attribute is presented as a ToolTip when the users mouse hovers over the <DIR> section. Note that <LI> element also support use of the TITLE attribute. The ToolTip presented to the user will be that set in the <DIR> element, if no <LI> element has a TITLE attribute.

    LANG="language setting"
    The LANG attribute can be used to specify what language the <DIR> (or <LI>) element is using. It accepts any valid ISO standard language abbreviation (for example "en" for English, "de" for German etc.) For more details, see the Document Localisation section for more details.

    LANGUAGE="Scripting language"
    The LANGUAGE attribute can be used to expressly specify which scripting language Internet Explorer 4.0 uses to interpret any scripting information used in the <DIR> (or <LI>) element. It can accept values of vbscript, vbs, javascript or jscript. The first two specify the scripting language as Visual Basic Script, the latter two specify it as using Javascript (the default scripting language used if no LANGUAGE attribute is set.

    CLASS="Style Sheet class name"
    The CLASS attribute is used to specify the <DIR> (or <LI>) element as using a particular style sheet class. See the Style Sheets topic for details.

    STYLE="In line style setting"
    As well as using previously defined style sheet settings, the <DIR> (or <LI>) element can have in-line stylings attached to it. See the Style Sheets topic for details.

    ID="Unique element identifier"
    The ID attribute can be used to either reference a unique style sheet identifier, or to provide a unique name for the <DIR> (or <LI>) element for scripting purposes. Any <DIR> (or <LI>) element with an ID attribute can be directly manipulated in script by referencing its ID attribute, rather than working through the All collection to determine the element. See the Scripting introduction topic for more information.

    Every <DIR> (or <LI>) element in a document is an object that can be manipulated through scripting. Note that scripting of the <DIR> and/or <LI> elements/objects is only supported by Internet Explorer 4.0 in its Dynamic HTML object model. Netscape does not support direct scripting of the <DIR> or <LI> elements at all.

    <DIR...> and <LI> Properties
    The <DIR...> elements support all of the standard Dynamic HTML properties (i.e. className, document, id, innerHTML, innerText, isTextEdit, lang, language, offsetHeight, offsetLeft, offsetParent, offsetTop, offsetWidth, outerHTML, outerText, parentElement, parentTextEdit, sourceIndex, style, tagName and title). Details of these can be found in the standard Dynamic HTML properties topics.

    <DIR...> and <LI> Methods
    The <DIR...> elements support all of the standard Dynamic HTML methods (i.e. click, contains, getAttribute, insertAdjacentHTML, insertAdjacentText, removeAttribute, scrollIntoView and setAttribute). Details of these can be found in the standard Dynamic HTML Methods topics.

    <DIR...> and <LI> Events
    The <DIR...> elements support all of the standard Dynamic HTML events (i.e. onclick, ondblclick, ondragstart, onfilterchange, onhelp, onkeydown, onkeypress, onkeyup, onmousedown, onmousemove, onmouseout, onmouseover, onmouseup and onselectstart). Details of these can be found in the standard Dynamic HTML events topics.

    © 1995-1998, Stephen Le Hunte


<MENU>

Note : <MENU> is deprecated in HTML 4.0. Authors are encouraged to use <UL> instead.

Menu lists are typically rendered as discrete items on a single line. It 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:

E.g :

<MENU>
<LI>First item in the list.
<LI>Second item in the list.
<LI>Third item in the list.
</MENU>

Would render as:

  • First item in the list.
  • Second item in the list.
  • Third item in the list.

    • TITLE="informational ToolTip"
    The Internet Explorer 4.0 (and above) specific TITLE attribute is used for informational purposes. If present, the value of the TITLE attribute is presented as a ToolTip when the users mouse hovers over the <MENU> section. Note that <LI> element also support use of the TITLE attribute. The ToolTip presented to the user will be that set in the <MENU> element, if no <LI> element has a TITLE attribute.

    LANG="language setting"
    The LANG attribute can be used to specify what language the <MENU> (or <LI>) element is using. It accepts any valid ISO standard language abbreviation (for example "en" for English, "de" for German etc.) For more details, see the Document Localisation section for more details.

    LANGUAGE="Scripting language"
    The LANGUAGE attribute can be used to expressly specify which scripting language Internet Explorer 4.0 uses to interpret any scripting information used in the <MENU> (or <LI>) element. It can accept values of vbscript, vbs, javascript or jscript. The first two specify the scripting language as Visual Basic Script, the latter two specify it as using Javascript (the default scripting language used if no LANGUAGE attribute is set.

    CLASS="Style Sheet class name"
    The CLASS attribute is used to specify the <MENU> (or <LI>) element as using a particular style sheet class. See the Style Sheets topic for details.

    STYLE="In line style setting"
    As well as using previously defined style sheet settings, the <MENU> (or <LI>) element can have in-line stylings attached to it. See the Style Sheets topic for details.

    ID="Unique element identifier"
    The ID attribute can be used to either reference a unique style sheet identifier, or to provide a unique name for the <MENU> (or <LI>) element for scripting purposes. Any <MENU> (or <LI>) element with an ID attribute can be directly manipulated in script by referencing its ID attribute, rather than working through the All collection to determine the element. See the Scripting introduction topic for more information.

    Every <MENU> (or <LI>) element in a document is an object that can be manipulated through scripting. Note that scripting of the <MENU> and/or <LI> elements/objects is only supported by Internet Explorer 4.0 in its Dynamic HTML object model. Netscape does not support direct scripting of the <MENU> or <LI> elements at all.

    <MENU...> and <LI> Properties
    The <MENU...> elements support all of the standard Dynamic HTML properties (i.e. className, document, id, innerHTML, innerText, isTextEdit, lang, language, offsetHeight, offsetLeft, offsetParent, offsetTop, offsetWidth, outerHTML, outerText, parentElement, parentTextEdit, sourceIndex, style, tagName and title). Details of these can be found in the standard Dynamic HTML properties topics.

    <MENU...> and <LI> Methods
    The <MENU...> elements support all of the standard Dynamic HTML methods (i.e. click, contains, getAttribute, insertAdjacentHTML, insertAdjacentText, removeAttribute, scrollIntoView and setAttribute). Details of these can be found in the standard Dynamic HTML Methods topics.

    <MENU...> and <LI> Events
    The <MENU...> elements support all of the standard Dynamic HTML events (i.e. onclick, ondblclick, ondragstart, onfilterchange, onhelp, onkeydown, onkeypress, onkeyup, onmousedown, onmousemove, onmouseout, onmouseover, onmouseup and onselectstart). Details of these can be found in the standard Dynamic HTML events topics.

    © 1995-1998, Stephen Le Hunte


<OL>

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 as 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:

E.g. :

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

Would render as:

  1. Click on the desired file to download.
  2. In the presented dialog box, enter a name to save the file with.
  3. Click 'OK' to download the file to your local drive.

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, ... etc. The TYPE attribute allows authors to specify whether the list items should be marked with:

(TYPE=A) - capital letters. e.g. A, B, C ...
(TYPE=a) - small letters. e.g. a, b, c ...
(TYPE=I) - large roman numerals. e.g. I, II, III ...
(TYPE=i) - small roman numerals. e.g. i, ii, iii ...
(TYPE=1) - or the default numbers. e.g. 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.

E.g., changing the above 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'.

  3. Click on the desired file to download.
  4. In the presented dialog box, enter a name to save the file with.
  5. Click 'OK' to download the file to your local drive.

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 the Internet Explorer.

TITLE="informational ToolTip"
The Internet Explorer 4.0 (and above) specific TITLE attribute is used for informational purposes. If present, the value of the TITLE attribute is presented as a ToolTip when the users mouse hovers over the <OL> section. Note that <LI> element also support use of the TITLE attribute. The ToolTip presented to the user will be that set in the <OL> element, if no <LI> element has a TITLE attribute.

LANG="language setting"
The LANG attribute can be used to specify what language the <OL> (or <LI>) element is using. It accepts any valid ISO standard language abbreviation (for example "en" for English, "de" for German etc.) For more details, see the Document Localisation section for more details.

LANGUAGE="Scripting language"
The LANGUAGE attribute can be used to expressly specify which scripting language Internet Explorer 4.0 uses to interpret any scripting information used in the <OL> (or <LI>) element. It can accept values of vbscript, vbs, javascript or jscript. The first two specify the scripting language as Visual Basic Script, the latter two specify it as using Javascript (the default scripting language used if no LANGUAGE attribute is set.

CLASS="Style Sheet class name"
The CLASS attribute is used to specify the <OL> (or <LI>) element as using a particular style sheet class. See the Style Sheets topic for details.

STYLE="In line style setting"
As well as using previously defined style sheet settings, the <OL> (or <LI>) element can have in-line stylings attached to it. See the Style Sheets topic for details.

ID="Unique element identifier"
The ID attribute can be used to either reference a unique style sheet identifier, or to provide a unique name for the <OL> (or <LI>) element for scripting purposes. Any <OL> (or <LI>) element with an ID attribute can be directly manipulated in script by referencing its ID attribute, rather than working through the All collection to determine the element. See the Scripting introduction topic for more information.

Every <OL> (or <LI>) element in a document is an object that can be manipulated through scripting. Note that scripting of the <OL> and/or <LI> elements/objects is only supported by Internet Explorer 4.0 in its Dynamic HTML object model. Netscape does not support direct scripting of the <OL> or <LI> elements at all.

<OL...> and <LI> Properties
The <OL...> elements support all of the standard Dynamic HTML properties (i.e. className, document, id, innerHTML, innerText, isTextEdit, lang, language, offsetHeight, offsetLeft, offsetParent, offsetTop, offsetWidth, outerHTML, outerText, parentElement, parentTextEdit, sourceIndex, style, tagName and title). Details of these can be found in the standard Dynamic HTML properties topics.
The <OL> element also supports the start and type properties, which reflect any settings of the START and TYPE attributes (see above). When used in an <OL> list, the <LI> element also supports the type and value properties, which reflect their attribute settings (see above).

<OL...> and <LI> Methods
The <OL...> elements support all of the standard Dynamic HTML methods (i.e. click, contains, getAttribute, insertAdjacentHTML, insertAdjacentText, removeAttribute, scrollIntoView and setAttribute). Details of these can be found in the standard Dynamic HTML Methods topics.

<OL...> and <LI> Events
The <OL...> elements support all of the standard Dynamic HTML events (i.e. onclick, ondblclick, ondragstart, onfilterchange, onhelp, onkeydown, onkeypress, onkeyup, onmousedown, onmousemove, onmouseout, onmouseover, onmouseup and onselectstart). Details of these can be found in the standard Dynamic HTML events topics.

© 1995-1998, Stephen Le Hunte


<UL>

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 as 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.

E.g.

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

Would render as:

  • First list item
  • Second list item
  • Third list item

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 as you move through indented levels. From a solid disc, to a circle to a square. 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.

TITLE="informational ToolTip"
The Internet Explorer 4.0 (and above) specific TITLE attribute is used for informational purposes. If present, the value of the TITLE attribute is presented as a ToolTip when the users mouse hovers over the <UL> section. Note that <LI> element also support use of the TITLE attribute. The ToolTip presented to the user will be that set in the <UL> element, if no <LI> element has a TITLE attribute.

LANG="language setting"
The LANG attribute can be used to specify what language the <UL> (or <LI>) element is using. It accepts any valid ISO standard language abbreviation (for example "en" for English, "de" for German etc.) For more details, see the Document Localisation section for more details.

LANGUAGE="Scripting language"
The LANGUAGE attribute can be used to expressly specify which scripting language Internet Explorer 4.0 uses to interpret any scripting information used in the <UL> (or <LI>) element. It can accept values of vbscript, vbs, javascript or jscript. The first two specify the scripting language as Visual Basic Script, the latter two specify it as using Javascript (the default scripting language used if no LANGUAGE attribute is set.

CLASS="Style Sheet class name"
The CLASS attribute is used to specify the <UL> (or <LI>) element as using a particular style sheet class. See the Style Sheets topic for details.

STYLE="In line style setting"
As well as using previously defined style sheet settings, the <UL> (or <LI>) element can have in-line stylings attached to it. See the Style Sheets topic for details.

ID="Unique element identifier"
The ID attribute can be used to either reference a unique style sheet identifier, or to provide a unique name for the <UL> (or <LI>) element for scripting purposes. Any <UL> (or <LI>) element with an ID attribute can be directly manipulated in script by referencing its ID attribute, rather than working through the All collection to determine the element. See the Scripting introduction topic for more information.

Every <UL> (or <LI>) element in a document is an object that can be manipulated through scripting. Note that scripting of the <UL> and/or <LI> elements/objects is only supported by Internet Explorer 4.0 in its Dynamic HTML object model. Netscape does not support direct scripting of the <UL> or <LI> elements at all.

<UL...> and <LI> Properties
The <UL...> elements support all of the standard Dynamic HTML properties (i.e. className, document, id, innerHTML, innerText, isTextEdit, lang, language, offsetHeight, offsetLeft, offsetParent, offsetTop, offsetWidth, outerHTML, outerText, parentElement, parentTextEdit, sourceIndex, style, tagName and title). Details of these can be found in the standard Dynamic HTML properties topics.
The <UL> (and <LI> when used in a <UL> element) also supports the type property, which reflect any settings of the TYPE attribute (see above).

<UL...> and <LI> Methods
The <UL...> elements support all of the standard Dynamic HTML methods (i.e. click, contains, getAttribute, insertAdjacentHTML, insertAdjacentText, removeAttribute, scrollIntoView and setAttribute). Details of these can be found in the standard Dynamic HTML Methods topics.

<UL...> and <LI> Events
The <UL...> elements support all of the standard Dynamic HTML events (i.e. onclick, ondblclick, ondragstart, onfilterchange, onhelp, onkeydown, onkeypress, onkeyup, onmousedown, onmousemove, onmouseout, onmouseover, onmouseup and onselectstart). Details of these can be found in the standard Dynamic HTML events topics.

© 1995-1998, Stephen Le Hunte


Text Formatting Elements

The following information type and character formatting elements are supported by most browsers.

Information type elements:
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. Note : The browse sequence for this chapter orders the elements according to the lists below, not alphabetically.

<!-- ... --> - Defining comments
<ACRONYM> - Define an Acronym
<CITE> - Citation
<COMMENT> - Comment
<CODE> - An example of Code
<DEL> - Deleted Text
<DFN> - Defining Instance
<EM> - Emphasis
<INS> - Inserted Text
<KBD> - User typed text
<Q> - An in-line quote
<SAMP> - A sequence of literal characters
<STRONG> - Strong typographic emphasis
<VAR> - Indicates a variable name

Character formatting elements:

<B> - Boldface type
<BIG> - Big text
<BLINK> - Blinking text
<BUTTON> - HTML content button
<FONT> - Font setting
<ILAYER> - In-line layer
<I> - Italics
<SMALL> - Small text
<SPAN> - Text span
<STRIKE> (or <S> ... </S>)- Text that has been struck through
<SUB> - Subscript
<SUP> - Superscript
<TT> - TypeType (or Teletype)
<U> - Underlined text

While 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>

© 1995-1998, Stephen Le Hunte


<!-- ... -->

To include comments in an HTML document that will be ignored by the HTML user agent, 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 Library</TITLE>
<!-- First created by Stephen Le Hunte, March 1995 -->
</HEAD>

NOTE: Some browsers incorrectly consider a > sign to terminate a comment.

© 1995-1998, Stephen Le Hunte


<ACRONYM>

The <ACRONYM> element specifies that the enclosed text is an acronym (e.g. 'WWW') It is one of the new HTML 4.0 elements (actually a 'hanger-on' from the ill-fated HTML 3.0 specification) and is currently only supported by Internet Explorer 4.0.

<ACRONYM TITLE="HyperText Markup Language">HTML</ACRONYM>

The <ACRONYM> element is ideally targeted at speech synthesis and other non-visual web browsers, so may not render visually on all browsers.

<ACRONYM> supports the following attributes:

TITLE="informational ToolTip"
The Internet Explorer 4.0 (and above) specific TITLE attribute is used for informational purposes. For the <ACRONYM> element, the TITLE attribute should be used to provide the extended definition of the acronym. If present, the value of the TITLE attribute is presented as a ToolTip when the users mouse hovers over the <ACRONYM> section.

LANG="language setting"
The LANG attribute can be used to specify what language the <ACRONYM> element is using. It accepts any valid ISO standard language abbreviation (for example "en" for English, "de" for German etc.) For more details, see the Document Localisation section for more details.

LANGUAGE="Scripting language"
The LANGUAGE attribute can be used to expressly specify which scripting language Internet Explorer 4.0 uses to interpret any scripting information used in the <ACRONYM> element. It can accept values of vbscript, vbs, javascript or jscript. The first two specify the scripting language as Visual Basic Script, the latter two specify it as using Javascript (the default scripting language used if no LANGUAGE attribute is set.

CLASS="Style Sheet class name"
The CLASS attribute is used to specify the <ACRONYM> element as using a particular style sheet class. See the Style Sheets topic for details.

STYLE="In line style setting"
As well as using previously defined style sheet settings, the <ACRONYM> element can have in-line stylings attached to it. See the Style Sheets topic for details.

ID="Unique element identifier"
The ID attribute can be used to either reference a unique style sheet identifier, or to provide a unique name for the <ACRONYM> element for scripting purposes. Any <ACRONYM> element with an ID attribute can be directly manipulated in script by referencing its ID attribute, rather than working through the All collection to determine the element. See the Scripting introduction topic for more information.

Every <ACRONYM> element in a document is an object that can be manipulated through scripting. Note that scripting of the <ACRONYM> element/object is only supported by Internet Explorer 4.0 in its Dynamic HTML object model as Netscape doesn't support the <ACRONYM> element.

<ACRONYM...> Properties
The <ACRONYM...> element/object supports all of the standard Dynamic HTML properties (i.e. className, document, id, innerHTML, innerText, isTextEdit, lang, language, offsetHeight, offsetLeft, offsetParent, offsetTop, offsetWidth, outerHTML, outerText, parentElement, parentTextEdit, sourceIndex, style, tagName and title). Details of these can be found in the standard Dynamic HTML properties topics. Additionally, the <ACRONYM> element supports the cite and datetime properties, which directly reflect the CITE and DATETIME attribute values.

<ACRONYM...> Methods
The <ACRONYM...> element/object supports all of the standard Dynamic HTML methods (i.e. click, contains, getAttribute, insertAdjacentHTML, insertAdjacentText, removeAttribute, scrollIntoView and setAttribute). Details of these can be found in the standard Dynamic HTML Methods topics.

<ACRONYM...> Events
The <ACRONYM...> element/object supports all of the standard Dynamic HTML events (i.e. onclick, ondblclick, ondragstart, onfilterchange, onhelp, onkeydown, onkeypress, onkeyup, onmousedown, onmousemove, onmouseout, onmouseover, onmouseup and onselectstart). Details of these can be found in the standard Dynamic HTML events topics.

© 1995-1998, Stephen Le Hunte


<B>

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.

TITLE="informational ToolTip"
The Internet Explorer 4.0 (and above) specific TITLE attribute is used for informational purposes. If present, the value of the TITLE attribute is presented as a ToolTip when the users mouse hovers over the <B> section.

LANG="language setting"
The LANG attribute can be used to specify what language the <B> element is using. It accepts any valid ISO standard language abbreviation (for example "en" for English, "de" for German etc.) For more details, see the Document Localisation section for more details.

LANGUAGE="Scripting language"
The LANGUAGE attribute can be used to expressly specify which scripting language Internet Explorer 4.0 uses to interpret any scripting information used in the <B> element. It can accept values of vbscript, vbs, javascript or jscript. The first two specify the scripting language as Visual Basic Script, the latter two specify it as using Javascript (the default scripting language used if no LANGUAGE attribute is set.

CLASS="Style Sheet class name"
The CLASS attribute is used to specify the <B> element as using a particular style sheet class. See the Style Sheets topic for details.

STYLE="In line style setting"
As well as using previously defined style sheet settings, the <B> element can have in-line stylings attached to it. See the Style Sheets topic for details.

ID="Unique element identifier"
The ID attribute can be used to either reference a unique style sheet identifier, or to provide a unique name for the <B> element for scripting purposes. Any <B> element with an ID attribute can be directly manipulated in script by referencing its ID attribute, rather than working through the All collection to determine the element. See the Scripting introduction topic for more information.

Every <B> element in a document is an object that can be manipulated through scripting. Note that scripting of the <B> element/object is only supported by Internet Explorer 4.0 in its Dynamic HTML object model. Netscape does not support direct scripting of the <B> element at all.

<B...> Properties
The <B...> element/object supports all of the standard Dynamic HTML properties (i.e. className, document, id, innerHTML, innerText, isTextEdit, lang, language, offsetHeight, offsetLeft, offsetParent, offsetTop, offsetWidth, outerHTML, outerText, parentElement, parentTextEdit, sourceIndex, style, tagName and title). Details of these can be found in the standard Dynamic HTML properties topics.

<B...> Methods
The <B...> element/object supports all of the standard Dynamic HTML methods (i.e. click, contains, getAttribute, insertAdjacentHTML, insertAdjacentText, removeAttribute, scrollIntoView and setAttribute). Details of these can be found in the standard Dynamic HTML Methods topics.

<B...> Events
The <B...> element/object supports all of the standard Dynamic HTML events (i.e. onclick, ondblclick, ondragstart, onfilterchange, onhelp, onkeydown, onkeypress, onkeyup, onmousedown, onmousemove, onmouseout, onmouseover, onmouseup and onselectstart). Details of these can be found in the standard Dynamic HTML events topics.

© 1995-1998, Stephen Le Hunte


<BIG>

The <BIG> element specifies that the enclosed text should be displayed, if practical, using a big font (compared with the current font).

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.

TITLE="informational ToolTip"
The Internet Explorer 4.0 (and above) specific TITLE attribute is used for informational purposes. If present, the value of the TITLE attribute is presented as a ToolTip when the users mouse hovers over the <BIG> section.

LANG="language setting"
The LANG attribute can be used to specify what language the <BIG> element is using. It accepts any valid ISO standard language abbreviation (for example "en" for English, "de" for German etc.) For more details, see the Document Localisation section for more details.

LANGUAGE="Scripting language"
The LANGUAGE attribute can be used to expressly specify which scripting language Internet Explorer 4.0 uses to interpret any scripting information used in the <BIG> element. It can accept values of vbscript, vbs, javascript or jscript. The first two specify the scripting language as Visual Basic Script, the latter two specify it as using Javascript (the default scripting language used if no LANGUAGE attribute is set.

CLASS="Style Sheet class name"
The CLASS attribute is used to specify the <BIG> element as using a particular style sheet class. See the Style Sheets topic for details.

STYLE="In line style setting"
As well as using previously defined style sheet settings, the <BIG> element can have in-line stylings attached to it. See the Style Sheets topic for details.

ID="Unique element identifier"
The ID attribute can be used to either reference a unique style sheet identifier, or to provide a unique name for the <BIG> element for scripting purposes. Any <BIG> element with an ID attribute can be directly manipulated in script by referencing its ID attribute, rather than working through the All collection to determine the element. See the Scripting introduction topic for more information.

Every <BIG> element in a document is an object that can be manipulated through scripting. Note that scripting of the <BIG> element/object is only supported by Internet Explorer 4.0 in its Dynamic HTML object model. Netscape does not support direct scripting of the <BIG> element at all.

<BIG...> Properties
The <BIG...> element/object supports all of the standard Dynamic HTML properties (i.e. className, document, id, innerHTML, innerText, isTextEdit, lang, language, offsetHeight, offsetLeft, offsetParent, offsetTop, offsetWidth, outerHTML, outerText, parentElement, parentTextEdit, sourceIndex, style, tagName and title). Details of these can be found in the standard Dynamic HTML properties topics.

<BIG...> Methods
The <BIG...> element/object supports all of the standard Dynamic HTML methods (i.e. click, contains, getAttribute, insertAdjacentHTML, insertAdjacentText, removeAttribute, scrollIntoView and setAttribute). Details of these can be found in the standard Dynamic HTML Methods topics.

<BIG...> Events
The <BIG...> element/object supports all of the standard Dynamic HTML events (i.e. onclick, ondblclick, ondragstart, onfilterchange, onhelp, onkeydown, onkeypress, onkeyup, onmousedown, onmousemove, onmouseout, onmouseover, onmouseup and onselectstart). Details of these can be found in the standard Dynamic HTML events topics.

© 1995-1998, Stephen Le Hunte


<BLINK>

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>

Would render as:

Note : The <BLINK> ... </BLINK> element is currently only supported by Netscape (The example uses ActiveX trickery, using the label and timer controls.)

© 1995-1998, Stephen Le Hunte


<BUTTON>

Note : The <BUTTON> element is a new element introduced in HTML 4.0 draft specifications and is currently only supported by Internet Explorer 4.0.

The <BUTTON> element can be used to create buttons that are embedded into the document. The main difference between <BUTTON> and <INPUT TYPE="button"...>, is that the <BUTTON> element takes the entire content between the opening and closing elements and creates a pushable button from them. This means that most HTML content can be rendered as a button. For example:

<BUTTON>
<TABLE BORDER="1">
<TR>
<TD>A</TD><TD>B</TD>
</TR><TR>
<TD>C</TD><TD>D</TD>
</TR>
</TABLE>
</BUTTON>

...produces a button with a HTML <TABLE> rendered on it:

The attributes for the <BUTTON> element are:

ACCESSKEY
The ACCESSKEY attribute can be used to specify a shortcut key for the <BUTTON> (activated by pressing 'Alt' and the ACCESSKEY together - like standard Windows applications menu shortcuts). The ACCESSKEY setting does not have to be a character in the actual button contents and the button is not modified in any way to reflect that an ACCESSKEY has been defined.

CLASS
The CLASS attribute is used to specify the <BUTTON> element as using a particular style sheet class. See the Style Sheets topic for details.

DATAFLD
The DATAFLD attribute can be used to specify a data column name from the Data source (see DATASRC) that the <BUTTON> is bound to. For more information on the DATAFLD attribute, see the Data Binding topic.

DATAFORMATAS
When the <BUTTON> element is data-bound, it can accept straight text, or HTML from the data source. The DATAFORMATAS attribute should be set to "TEXT" or "HTML" accordingly. with DATAFORMATAS="HTML", the data provided for the <BUTTON> element is parsed and rendered when it's displayed.
For more information on the DATAFORMATAS attribute, see the Data Binding topic.

DATASRC
The DATASRC attribute can be used to specify a data source that the <BUTTON> is bound to. For more information on the DATASRC attribute, see the Data Binding topic.

DISABLED
The DISABLED attribute can be used to disable the <BUTTON>. This means it won't respond to user input, or take the users focus.

ID
The ID attribute can be used to either reference a unique style sheet identifier, or to provide a unique name for the <BUTTON> element for scripting purposes. Any <BUTTON> element with an ID attribute can be directly manipulated in script by referencing its ID attribute, rather than working through the All collection to determine the element. See the Scripting introduction topic for more information.

LANG
The LANG attribute can be used to specify what language the <BUTTON> element is using. It accepts any valid ISO standard language abbreviation (for example "en" for English, "de" for German etc.) For more details, see the Document Localisation section for more details.

LANGUAGE
The LANGUAGE attribute can be used to expressly specify which scripting language Internet Explorer 4.0 uses to interpret any scripting information used in the <BUTTON> element. It can accept values of vbscript, vbs, javascript or jscript. The first two specify the scripting language as Visual Basic Script, the latter two specify it as using Javascript (the default scripting language used if no LANGUAGE attribute is set.

STYLE
As well as using previously defined style sheet settings, the <BUTTON> element can have in-line stylings attached to it. See the Style Sheets topic for details.

TITLE
The Internet Explorer 4.0 (and above) specific TITLE attribute is used for informational purposes. If present, the value of the TITLE attribute is presented as a ToolTip when the users mouse hovers over the <BUTTON> section.

Note : <SELECT>, <A> or <INPUT> elements shouldn't be included in a <BUTTON>

Every <BUTTON> element in a document is an object that can be manipulated through scripting. Note that scripting of the <BUTTON> element/object is only supported by Internet Explorer 4.0 in its Dynamic HTML object model. Netscape does not support direct scripting of the <BUTTON> element at all.

<BUTTON...> Properties
The <BUTTON...> element/object supports all of the standard Dynamic HTML properties (i.e. className, document, id, innerHTML, innerText, isTextEdit, lang, language, offsetHeight, offsetLeft, offsetParent, offsetTop, offsetWidth, outerHTML, outerText, parentElement, parentTextEdit, sourceIndex, style, tagName and title). Details of these can be found in the standard Dynamic HTML properties topics.
Additionally, the <BUTTON> element supports the accessKey, dataFld, dataFormatAs, dataSrc and disabled, which directly reflect the attributes of the same name.

<BUTTON...> Methods
The <BUTTON...> element/object supports all of the standard Dynamic HTML methods (i.e. click, contains, getAttribute, insertAdjacentHTML, insertAdjacentText, removeAttribute, scrollIntoView and setAttribute). Details of these can be found in the standard Dynamic HTML Methods topics.
The <BUTTON> element also supports the following methods:

blur
The blur event can be used to force the users focus away from the referenced <BUTTON> element, firing the onblur event.

createTextRange
The createTextRange method can be invoked to create a TextRange object from the contents of the <BUTTON> element. See the TextRange object topic for details of properties, methods and events applicable to text ranges.

focus
The focus method can be used to pass the users focus to the referenced <BUTTON> element, forcing the onfocus event to fire.

<BUTTON...> Events
The <BUTTON...> element/object supports all of the standard Dynamic HTML events (i.e. onclick, ondblclick, ondragstart, onfilterchange, onhelp, onkeydown, onkeypress, onkeyup, onmousedown, onmousemove, onmouseout, onmouseover, onmouseup and onselectstart). Details of these can be found in the standard Dynamic HTML events topics.
The <BUTTON> element also supports:

onblur
When the referenced <BUTTON> element loses the users focus, the onblur event is fired.

onfocus
When the user passes the focus to any <INPUT> element, the onfocus event is fired for that element.

© 1995-1998, Stephen Le Hunte


<CITE>

The Citation element specifies a citation and is typically rendered in an italic font.

This sentence, contains a <CITE>citation reference</CITE>

would look like:

This sentence, contains a citation reference

TITLE="informational ToolTip"
The Internet Explorer 4.0 (and above) specific TITLE attribute is used for informational purposes. If present, the value of the TITLE attribute is presented as a ToolTip when the users mouse hovers over the <CITE> section.

LANG="language setting"
The LANG attribute can be used to specify what language the <CITE> element is using. It accepts any valid ISO standard language abbreviation (for example "en" for English, "de" for German etc.) For more details, see the Document Localisation section for more details.

LANGUAGE="Scripting language"
The LANGUAGE attribute can be used to expressly specify which scripting language Internet Explorer 4.0 uses to interpret any scripting information used in the <CITE> element. It can accept values of vbscript, vbs, javascript or jscript. The first two specify the scripting language as Visual Basic Script, the latter two specify it as using Javascript (the default scripting language used if no LANGUAGE attribute is set.

CLASS="Style Sheet class name"
The CLASS attribute is used to specify the <CITE> element as using a particular style sheet class. See the Style Sheets topic for details.

STYLE="In line style setting"
As well as using previously defined style sheet settings, the <CITE> element can have in-line stylings attached to it. See the Style Sheets topic for details.

ID="Unique element identifier"
The ID attribute can be used to either reference a unique style sheet identifier, or to provide a unique name for the <CITE> element for scripting purposes. Any <CITE> element with an ID attribute can be directly manipulated in script by referencing its ID attribute, rather than working through the All collection to determine the element. See the Scripting introduction topic for more information.

Every <CITE> element in a document is an object that can be manipulated through scripting. Note that scripting of the <CITE> element/object is only supported by Internet Explorer 4.0 in its Dynamic HTML object model. Netscape does not support direct scripting of the <CITE> element at all.

<CITE...> Properties
The <CITE...> element/object supports all of the standard Dynamic HTML properties (i.e. className, document, id, innerHTML, innerText, isTextEdit, lang, language, offsetHeight, offsetLeft, offsetParent, offsetTop, offsetWidth, outerHTML, outerText, parentElement, parentTextEdit, sourceIndex, style, tagName and title). Details of these can be found in the standard Dynamic HTML properties topics.

<CITE...> Methods
The <CITE...> element/object supports all of the standard Dynamic HTML methods (i.e. click, contains, getAttribute, insertAdjacentHTML, insertAdjacentText, removeAttribute, scrollIntoView and setAttribute). Details of these can be found in the standard Dynamic HTML Methods topics.

<CITE...> Events
The <CITE...> element/object supports all of the standard Dynamic HTML events (i.e. onclick, ondblclick, ondragstart, onfilterchange, onhelp, onkeydown, onkeypress, onkeyup, onmousedown, onmousemove, onmouseout, onmouseover, onmouseup and onselectstart). Details of these can be found in the standard Dynamic HTML events topics.

© 1995-1998, Stephen Le Hunte


<CODE>

The Code element should be used to indicate an example of code and is typically rendered in a mono spaced font. This should not be confused with the Preformatted Text (<PRE>) element.

The formula is : <CODE>x=(-b+/-(b2-4ac)½)/2a</CODE>.

Would look like :

The formula is : x=(-b+/-(b2-4ac)½)/2a

TITLE="informational ToolTip"
The Internet Explorer 4.0 (and above) specific TITLE attribute is used for informational purposes. If present, the value of the TITLE attribute is presented as a ToolTip when the users mouse hovers over the <CODE> section.

LANG="language setting"
The LANG attribute can be used to specify what language the <CODE> element is using. It accepts any valid ISO standard language abbreviation (for example "en" for English, "de" for German etc.) For more details, see the Document Localisation section for more details.

LANGUAGE="Scripting language"
The LANGUAGE attribute can be used to expressly specify which scripting language Internet Explorer 4.0 uses to interpret any scripting information used in the <CODE> element. It can accept values of vbscript, vbs, javascript or jscript. The first two specify the scripting language as Visual Basic Script, the latter two specify it as using Javascript (the default scripting language used if no LANGUAGE attribute is set.

CLASS="Style Sheet class name"
The CLASS attribute is used to specify the <CODE> element as using a particular style sheet class. See the Style Sheets topic for details.

STYLE="In line style setting"
As well as using previously defined style sheet settings, the <CODE> element can have in-line stylings attached to it. See the Style Sheets topic for details.

ID="Unique element identifier"
The ID attribute can be used to either reference a unique style sheet identifier, or to provide a unique name for the <CODE> element for scripting purposes. Any <CODE> element with an ID attribute can be directly manipulated in script by referencing its ID attribute, rather than working through the All collection to determine the element. See the Scripting introduction topic for more information.

Every <CODE> element in a document is an object that can be manipulated through scripting. Note that scripting of the <CODE> element/object is only supported by Internet Explorer 4.0 in its Dynamic HTML object model. Netscape does not support direct scripting of the <CODE> element at all.

<CODE...> Properties
The <CODE...> element/object supports all of the standard Dynamic HTML properties (i.e. className, document, id, innerHTML, innerText, isTextEdit, lang, language, offsetHeight, offsetLeft, offsetParent, offsetTop, offsetWidth, outerHTML, outerText, parentElement, parentTextEdit, sourceIndex, style, tagName and title). Details of these can be found in the standard Dynamic HTML properties topics.

<CODE...> Methods
The <CODE...> element/object supports all of the standard Dynamic HTML methods (i.e. click, contains, getAttribute, insertAdjacentHTML, insertAdjacentText, removeAttribute, scrollIntoView and setAttribute). Details of these can be found in the standard Dynamic HTML Methods topics.

<CODE...> Events
The <CODE...> element/object supports all of the standard Dynamic HTML events (i.e. onclick, ondblclick, ondragstart, onfilterchange, onhelp, onkeydown, onkeypress, onkeyup, onmousedown, onmousemove, onmouseout, onmouseover, onmouseup and onselectstart). Details of these can be found in the standard Dynamic HTML events topics.

© 1995-1998, Stephen Le Hunte


<COMMENT>

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.

<COMMENT>This text won't render.
I can say what I like here,
it wont appear</COMMENT>

Would not render on the screen.

NOTE : This element is only supported by the Internet Explorer and Mosaic.

TITLE="informational ToolTip"
The Internet Explorer 4.0 (and above) specific TITLE attribute is used for informational purposes. For the <COMMENT> element, the TITLE attribute maybe useful for providing information to authors.

LANG="language setting"
The LANG attribute can be used to specify what language the <COMMENT> element is using. It accepts any valid ISO standard language abbreviation (for example "en" for English, "de" for German etc.) For more details, see the Document Localisation section for more details.

ID="Unique element identifier"
The ID attribute can be used to either reference a unique style sheet identifier, or to provide a unique name for the <COMMENT> element for scripting purposes. Any <COMMENT> element with an ID attribute can be directly manipulated in script by referencing its ID attribute, rather than working through the All collection to determine the element. See the Scripting introduction topic for more information.

Every <COMMENT> element in a document is an object that can be manipulated through scripting. Note that scripting of the <COMMENT> element/object is only supported by Internet Explorer 4.0 in its Dynamic HTML object model. Netscape does not support direct scripting of the <COMMENT> element at all.

<COMMENT...> Properties
The <COMMENT...> element/object supports some of the standard Dynamic HTML properties (i.e. document, id, isTextEdit, lang, parentElement, parentTextEdit, sourceIndex, tagName and title). Details of these can be found in the standard Dynamic HTML properties topics.

<COMMENT...> Methods
The <COMMENT...> element/object supports some of the standard Dynamic HTML methods (i.e. click, contains, getAttribute, removeAttribute, and setAttribute). Details of these can be found in the standard Dynamic HTML Methods topics.

<COMMENT...> Events
The <COMMENT...> element/object supports no events.

© 1995-1998, Stephen Le Hunte


<DEL>

The <DEL> element specifies that the enclosed text should be regarded as deleted, since the document was originally written. Along with <DEL>, it is one of the HTML 4.0 elements used to mark document revisions and is currently only supported by Internet Explorer 4.0. Typically it renders as struck-through text, but any style can be used with the <DEL> element. For example:

Our sales figures <DEL CITE="http://yourcomp.com/procs/salesoffline.proc" DATETIME="1997-06-01T17:53:12+0:00">are no longer available
</DEL>

would be rendered as:

Our sales figures are no longer available

<DEL> supports the following attributes:

CITE="citation"
The CITE attribute should contain a URL, defining a document that specifies the details of the deleted text. For example, an author who deletes text in a document, could use the CITE attribute to specify the URL of a document that explains the removal of the text.

DATETIME="Date/time of insertion"
The DATETIME attribute can be used to specify the date and time that the deletion was made. The DATETIME attribute value is of a specific format, being YYYY-MM-DDThh:mm:ssTZD to specify the year, month, date, hours (using 24-hour clock notation), minutes, seconds and a Time Zone identifier. For example, in the above example, the DATETIME attribute is set to 1997-06-01T17:53:12+0.00, which would mark the deletion at 5.53:12pm on the 6th January 1997, Greenwich Mean Time, also referencing the source of deletion.

TITLE="informational ToolTip"
The Internet Explorer 4.0 (and above) specific TITLE attribute is used for informational purposes. If present, the value of the TITLE attribute is presented as a ToolTip when the users mouse hovers over the <DEL> section.

LANG="language setting"
The LANG attribute can be used to specify what language the <DEL> element is using. It accepts any valid ISO standard language abbreviation (for example "en" for English, "de" for German etc.) For more details, see the Document Localisation section for more details.

LANGUAGE="Scripting language"
The LANGUAGE attribute can be used to expressly specify which scripting language Internet Explorer 4.0 uses to interpret any scripting information used in the <DEL> element. It can accept values of vbscript, vbs, javascript or jscript. The first two specify the scripting language as Visual Basic Script, the latter two specify it as using Javascript (the default scripting language used if no LANGUAGE attribute is set.

CLASS="Style Sheet class name"
The CLASS attribute is used to specify the <DEL> element as using a particular style sheet class. See the Style Sheets topic for details.

STYLE="In line style setting"
As well as using previously defined style sheet settings, the <DEL> element can have in-line stylings attached to it. See the Style Sheets topic for details.

ID="Unique element identifier"
The ID attribute can be used to either reference a unique style sheet identifier, or to provide a unique name for the <DEL> element for scripting purposes. Any <DEL> element with an ID attribute can be directly manipulated in script by referencing its ID attribute, rather than working through the All collection to determine the element. See the Scripting introduction topic for more information.

Every <DEL> element in a document is an object that can be manipulated through scripting. Note that scripting of the <DEL> element/object is only supported by Internet Explorer 4.0 in its Dynamic HTML object model as Netscape doesn't support the <DEL> element.

<DEL...> Properties
The <DEL...> element/object supports all of the standard Dynamic HTML properties (i.e. className, document, id, innerHTML, innerText, isTextEdit, lang, language, offsetHeight, offsetLeft, offsetParent, offsetTop, offsetWidth, outerHTML, outerText, parentElement, parentTextEdit, sourceIndex, style, tagName and title). Details of these can be found in the standard Dynamic HTML properties topics. Additionally, the <DEL> element supports the cite and datetime properties, which directly reflect the CITE and DATETIME attribute values.

<DEL...> Methods
The <DEL...> element/object supports all of the standard Dynamic HTML methods (i.e. click, contains, getAttribute, insertAdjacentHTML, insertAdjacentText, removeAttribute, scrollIntoView and setAttribute). Details of these can be found in the standard Dynamic HTML Methods topics.

<DEL...> Events
The <DEL...> element/object supports all of the standard Dynamic HTML events (i.e. onclick, ondblclick, ondragstart, onfilterchange, onhelp, onkeydown, onkeypress, onkeyup, onmousedown, onmousemove, onmouseout, onmouseover, onmouseup and onselectstart). Details of these can be found in the standard Dynamic HTML events topics.

© 1995-1998, Stephen Le Hunte


<DFN>

Use of the <DFN> element is currently only supported by the 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 italicised.

The <DFN>Internet Explorer</DFN> is Microsoft's Web browser.

Would render as:

The Internet Explorer is Microsoft's Web browser.

NOTE : This element is Internet Explorer specific

TITLE="informational ToolTip"
The Internet Explorer 4.0 (and above) specific TITLE attribute is used for informational purposes. If present, the value of the TITLE attribute is presented as a ToolTip when the users mouse hovers over the <DFN> section.

LANG="language setting"
The LANG attribute can be used to specify what language the <DFN> element is using. It accepts any valid ISO standard language abbreviation (for example "en" for English, "de" for German etc.) For more details, see the Document Localisation section for more details.

LANGUAGE="Scripting language"
The LANGUAGE attribute can be used to expressly specify which scripting language Internet Explorer 4.0 uses to interpret any scripting information used in the <DFN> element. It can accept values of vbscript, vbs, javascript or jscript. The first two specify the scripting language as Visual Basic Script, the latter two specify it as using Javascript (the default scripting language used if no LANGUAGE attribute is set.

CLASS="Style Sheet class name"
The CLASS attribute is used to specify the <DFN> element as using a particular style sheet class. See the Style Sheets topic for details.

STYLE="In line style setting"
As well as using previously defined style sheet settings, the <DFN> element can have in-line stylings attached to it. See the Style Sheets topic for details.

ID="Unique element identifier"
The ID attribute can be used to either reference a unique style sheet identifier, or to provide a unique name for the <DFN> element for scripting purposes. Any <DFN> element with an ID attribute can be directly manipulated in script by referencing its ID attribute, rather than working through the All collection to determine the element. See the Scripting introduction topic for more information.

Every <DFN> element in a document is an object that can be manipulated through scripting. Note that scripting of the <DFN> element/object is only supported by Internet Explorer 4.0 in its Dynamic HTML object model. Netscape does not support direct scripting of the <DFN> element at all.

<DFN...> Properties
The <DFN...> element/object supports all of the standard Dynamic HTML properties (i.e. className, document, id, innerHTML, innerText, isTextEdit, lang, language, offsetHeight, offsetLeft, offsetParent, offsetTop, offsetWidth, outerHTML, outerText, parentElement, parentTextEdit, sourceIndex, style, tagName and title). Details of these can be found in the standard Dynamic HTML properties topics.

<DFN...> Methods
The <DFN...> element/object supports all of the standard Dynamic HTML methods (i.e. click, contains, getAttribute, insertAdjacentHTML, insertAdjacentText, removeAttribute, scrollIntoView and setAttribute). Details of these can be found in the standard Dynamic HTML Methods topics.

<DFN...> Events
The <DFN...> element/object supports all of the standard Dynamic HTML events (i.e. onclick, ondblclick, ondragstart, onfilterchange, onhelp, onkeydown, onkeypress, onkeyup, onmousedown, onmousemove, onmouseout, onmouseover, onmouseup and onselectstart). Details of these can be found in the standard Dynamic HTML events topics.

© 1995-1998, Stephen Le Hunte


<EM>

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 render as Italics.

TITLE="informational ToolTip"
The Internet Explorer 4.0 (and above) specific TITLE attribute is used for informational purposes. If present, the value of the TITLE attribute is presented as a ToolTip when the users mouse hovers over the <EM> section.

LANG="language setting"
The LANG attribute can be used to specify what language the <EM> element is using. It accepts any valid ISO standard language abbreviation (for example "en" for English, "de" for German etc.) For more details, see the Document Localisation section for more details.

LANGUAGE="Scripting language"
The LANGUAGE attribute can be used to expressly specify which scripting language Internet Explorer 4.0 uses to interpret any scripting information used in the <EM> element. It can accept values of vbscript, vbs, javascript or jscript. The first two specify the scripting language as Visual Basic Script, the latter two specify it as using Javascript (the default scripting language used if no LANGUAGE attribute is set.

CLASS="Style Sheet class name"
The CLASS attribute is used to specify the <EM> element as using a particular style sheet class. See the Style Sheets topic for details.

STYLE="In line style setting"
As well as using previously defined style sheet settings, the <EM> element can have in-line stylings attached to it. See the Style Sheets topic for details.

ID="Unique element identifier"
The ID attribute can be used to either reference a unique style sheet identifier, or to provide a unique name for the <EM> element for scripting purposes. Any <EM> element with an ID attribute can be directly manipulated in script by referencing its ID attribute, rather than working through the All collection to determine the element. See the Scripting introduction topic for more information.

Every <EM> element in a document is an object that can be manipulated through scripting. Note that scripting of the <EM> element/object is only supported by Internet Explorer 4.0 in its Dynamic HTML object model. Netscape does not support direct scripting of the <EM> element at all.

<EM...> Properties
The <EM...> element/object supports all of the standard Dynamic HTML properties (i.e. className, document, id, innerHTML, innerText, isTextEdit, lang, language, offsetHeight, offsetLeft, offsetParent, offsetTop, offsetWidth, outerHTML, outerText, parentElement, parentTextEdit, sourceIndex, style, tagName and title). Details of these can be found in the standard Dynamic HTML properties topics.

<EM...> Methods
The <EM...> element/object supports all of the standard Dynamic HTML methods (i.e. click, contains, getAttribute, insertAdjacentHTML, insertAdjacentText, removeAttribute, scrollIntoView and setAttribute). Details of these can be found in the standard Dynamic HTML Methods topics.

<EM...> Events
The <EM...> element/object supports all of the standard Dynamic HTML events (i.e. onclick, ondblclick, ondragstart, onfilterchange, onhelp, onkeydown, onkeypress, onkeyup, onmousedown, onmousemove, onmouseout, onmouseover, onmouseup and onselectstart). Details of these can be found in the standard Dynamic HTML events topics.

© 1995-1998, Stephen Le Hunte


<FONT>

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 is 3, and can be changed 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>

Internet Explorer and Netscape support the ability to change the font colour as well as face type. They use COLOR and FACE attributes to the <FONT> element.

COLOR = #rrggbb or COLOR = color
The colour attribute sets the colour which text will appear in on the screen. #rrggbb is a hexadecimal colour denoting a RGB colour value. Alternately, the colour can be set to one the available pre-defined colours (see <BODY BGCOLOR=...>). These colour names can be used for the BGCOLOR, TEXT, LINK, and VLINK attributes of the <BODY> element as well. NOTE : The use of names for colouring text is currently only supported by the 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.

Example:

<FONT COLOR="#FF0000">This text is red.</FONT>
or
<FONT COLOR="Red">This text is also red.</FONT>

would render as :

This text is red

FACE=name [,name] [,name]
The FACE attribute sets the typeface that will be used to display the text on the screen. The type face displayed must already be installed on the users computer. Substitute type faces can be specified in case the chosen type face is not installed on the customers computer. If no match is found, the text will be displayed in the default type that the browser uses for displaying 'normal' text.

Example:

<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. </FONT>

NOTE : When using this element, care should be taken to try to use font types that will be installed on the users computer if you want the text to appear as desired. Changing the font face is only supported by Netscape and Internet Explorer, while Internet Explorer can also set font sizes/colours/faces within a style sheet. Also note that in a document whose layout/colouring etc., is defined in a style sheet, using the <FONT> element will have no effect.

TITLE="informational ToolTip"
The Internet Explorer 4.0 (and above) specific TITLE attribute is used for informational purposes. If present, the value of the TITLE attribute is presented as a ToolTip when the users mouse hovers over the <FONT> section.

LANG="language setting"
The LANG attribute can be used to specify what language the <FONT> element is using. It accepts any valid ISO standard language abbreviation (for example "en" for English, "de" for German etc.) For more details, see the Document Localisation section for more details.

LANGUAGE="Scripting language"
The LANGUAGE attribute can be used to expressly specify which scripting language Internet Explorer 4.0 uses to interpret any scripting information used in the <FONT> element. It can accept values of vbscript, vbs, javascript or jscript. The first two specify the scripting language as Visual Basic Script, the latter two specify it as using Javascript (the default scripting language used if no LANGUAGE attribute is set.

CLASS="Style Sheet class name"
The CLASS attribute is used to specify the <FONT> element as using a particular style sheet class. See the Style Sheets topic for details.

STYLE="In line style setting"
As well as using previously defined style sheet settings, the <FONT> element can have in-line stylings attached to it. See the Style Sheets topic for details.

ID="Unique element identifier"
The ID attribute can be used to either reference a unique style sheet identifier, or to provide a unique name for the <FONT> element for scripting purposes. Any <FONT> element with an ID attribute can be directly manipulated in script by referencing its ID attribute, rather than working through the All collection to determine the element. See the Scripting introduction topic for more information.

POINT-SIZE="Font pt. size"
The POINT-SIZE attribute is Netscape specific and allows total sizing control over the contents of the element. For example:

<FONT POINT-SIZE="24">This is 24pt. font</FONT>

Note that Internet Explorer supports font sizings primarily through Style Sheets (as does Netscape 4.0).

WEIGHT
This Netscape specific <FONT> attribute can be used to specify a relative font weight (boldness). It accepts values ranging between 100 and 900 (in steps of 100 - i.e. 100, 200, 300 etc.) It allows finer control of the font's boldness, rather than using <B>, <STRONG>, or the font-weight style sheet attribute.

Every <FONT> element in a document is an object that can be manipulated through scripting. Note that scripting of the <FONT> element/object is only supported by Internet Explorer 4.0 in its Dynamic HTML object model. Netscape does not support direct scripting of the <FONT> element at all.

<FONT...> Properties
The <FONT...> element/object supports all of the standard Dynamic HTML properties (i.e. className, document, id, innerHTML, innerText, isTextEdit, lang, language, offsetHeight, offsetLeft, offsetParent, offsetTop, offsetWidth, outerHTML, outerText, parentElement, parentTextEdit, sourceIndex, style, tagName and title). Details of these can be found in the standard Dynamic HTML properties topics.
In addition, the <FONT> element also supports the color, face and size properties, which directly reflect their attribute settings (see above).

<FONT...> Methods
The <FONT...> element/object supports all of the standard Dynamic HTML methods (i.e. click, contains, getAttribute, insertAdjacentHTML, insertAdjacentText, removeAttribute, scrollIntoView and setAttribute). Details of these can be found in the standard Dynamic HTML Methods topics.

<FONT...> Events
The <FONT...> element/object supports all of the standard Dynamic HTML events (i.e. onclick, ondblclick, ondragstart, onfilterchange, onhelp, onkeydown, onkeypress, onkeyup, onmousedown, onmousemove, onmouseout, onmouseover, onmouseup and onselectstart). Details of these can be found in the standard Dynamic HTML events topics.

© 1995-1998, Stephen Le Hunte


<I>

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.

TITLE="informational ToolTip"
The Internet Explorer 4.0 (and above) specific TITLE attribute is used for informational purposes. If present, the value of the TITLE attribute is presented as a ToolTip when the users mouse hovers over the <I> section.

LANG="language setting"
The LANG attribute can be used to specify what language the <I> element is using. It accepts any valid ISO standard language abbreviation (for example "en" for English, "de" for German etc.) For more details, see the Document Localisation section for more details.

LANGUAGE="Scripting language"
The LANGUAGE attribute can be used to expressly specify which scripting language Internet Explorer 4.0 uses to interpret any scripting information used in the <I> element. It can accept values of vbscript, vbs, javascript or jscript. The first two specify the scripting language as Visual Basic Script, the latter two specify it as using Javascript (the default scripting language used if no LANGUAGE attribute is set.

CLASS="Style Sheet class name"
The CLASS attribute is used to specify the <I> element as using a particular style sheet class. See the Style Sheets topic for details.

STYLE="In line style setting"
As well as using previously defined style sheet settings, the <I> element can have in-line stylings attached to it. See the Style Sheets topic for details.

ID="Unique element identifier"
The ID attribute can be used to either reference a unique style sheet identifier, or to provide a unique name for the <I> element for scripting purposes. Any <I> element with an ID attribute can be directly manipulated in script by referencing its ID attribute, rather than working through the All collection to determine the element. See the Scripting introduction topic for more information.

Every <I> element in a document is an object that can be manipulated through scripting. Note that scripting of the <I> element/object is only supported by Internet Explorer 4.0 in its Dynamic HTML object model. Netscape does not support direct scripting of the <I> element at all.

<I...> Properties
The <I...> element/object supports all of the standard Dynamic HTML properties (i.e. className, document, id, innerHTML, innerText, isTextEdit, lang, language, offsetHeight, offsetLeft, offsetParent, offsetTop, offsetWidth, outerHTML, outerText, parentElement, parentTextEdit, sourceIndex, style, tagName and title). Details of these can be found in the standard Dynamic HTML properties topics.

<I...> Methods
The <I...> element/object supports all of the standard Dynamic HTML methods (i.e. click, contains, getAttribute, insertAdjacentHTML, insertAdjacentText, removeAttribute, scrollIntoView and setAttribute). Details of these can be found in the standard Dynamic HTML Methods topics.

<I...> Events
The <I...> element/object supports all of the standard Dynamic HTML events (i.e. onclick, ondblclick, ondragstart, onfilterchange, onhelp, onkeydown, onkeypress, onkeyup, onmousedown, onmousemove, onmouseout, onmouseover, onmouseup and onselectstart). Details of these can be found in the standard Dynamic HTML events topics.

© 1995-1998, Stephen Le Hunte


<ILAYER>

The <ILAYER> element (currently only supported by the Navigator component of Netscape Communicator) allows in-line 'layers' to be produced in document. As fixed-position layers (see <LAYER>), they can contain any normal HTML content and are positioned relative to the point where they occur within the document.

The <ILAYER> element accepts the following attributes :

NAME
The NAME attribute can be supplied to uniquely identify the layer for scripting purposes. By default, all layers are unnamed.

LEFT
LEFT specifies the layers relative x coordinate, in pixels, where "0" (the default value) is the point in the document where the <ILAYER> element occurs. The LEFT attribute can be given negative, or positive values, displaying the in-line layer 'floating' above other document content.

TOP
The TOP attribute specifies the relative y coordinate in pixels, where "0" (again, the default value) is the top-most point at which the <ILAYER> element occurs.

SRC
The SRC attribute can be used to reference a separate document that contains the content of the layer. Currently (for Communicator pre-release 2), the document referenced must not include <HEAD> or <BODY> elements.

Z-INDEX
The Z-INDEX attribute is mutually exclusive with the ABOVE and BELOW attributes. It is supplied with a numerical value which determines the layers z-order setting (which determines how various layers overlap each other). The Z-INDEX attribute is generally more useful when using exact positioning with layers, using the <LAYER> element. See <LAYER> for more details.

ABOVE
The ABOVE attribute (mutually exclusive with Z-INDEX and BELOW attributes) can be used to specify the layer immediately above the current layer. The ABOVE attribute is generally more useful when using exact positioning with layers, using the <LAYER> element. See <LAYER> for more details.

BELOW
Similar to the ABOVE attribute (and mutually exclusive with it and the Z-INDEX attribute), the BELOW attribute specifies the layer to be displayed immediately below the current layer, with the same restrictions as the ABOVE attribute. The BELOW attribute is generally more useful when using exact positioning with layers, using the <LAYER> element. See <LAYER> for more details.

WIDTH
The WIDTH attribute can be specified (with a pixel value) to set the width of the layer, to determine how the content of the layer is wrapped within the layer. Layer heights are automatically defined according to the content of the layer. (NOTE : Not currently supported in preview release 2 of Communicator)

CLIP
The CLIP attribute can be used to specify a certain portion of the layer as being visible. Anything outside the CLIP region is transparent and won't be displayed. It accepts 4 pixel values (comma delimited) which are used to set the CLIP rectangles left, top, right and bottom coordinates. Left and right values start from the left hand edge of the layer, while top and bottom values start from the top of the layer. If only two values are supplied, then the left and top coordinates are set to 0. For example :

<LAYER CLIP="10,10,50,20">
. . .

specifies a clipping region of 40 (x direction) by 10 (y direction) pixels for the layer, starting at the position 10,10 (x,y), while :

<LAYER CLIP="50,20">
. . .

specifies a clipping region of 50 (x direction) by 20 (y direction) pixels for the layer, starting at the position 0,0 (x,y).

VISIBILITY
The VISIBILITY attribute controls whether the layer is currently visible or not. It can accept values of show, hide or inherit. Show and hide explicitly set the layers visibility, while inherit makes the current layer inherit the VISIBILITY of its parent layer(s) (layers can be nested). If the current layer is a parent layer (or contains no child layers), 'show' and 'inherit' are identical, since the layer will be visible (unless VISIBILITY="hide" is used).

BGCOLOR
BGCOLOR can be used to set the background colour of the current layer. By default, layers are transparent, specifying a BGCOLOR makes the layer opaque, using the colour specified. Any standard rrgggbb triplet, or a named colour can be used. For more details on document colouring, see the <BODY> element.

BACKGROUND
The BACKGROUND attribute can be used to reference a background image for the layer. Note that is the image used is wider than the layers WIDTH attribute value (see above), then the width of the layer will be extended to display the image fully.

© 1995-1998, Stephen Le Hunte


<INS>

The <INS> element specifies that the enclosed text has been inserted, since the document was originally written. Along with <DEL>, it is one of the HTML 4.0 elements used to mark document revisions and is currently only supported by Internet Explorer 4.0. Typically it renders underlined, but any style can be used with the <INS> element. For example:

<INS CITE="http://yourcomp.com/procs/sales1.proc" DATETIME="1997-06-01T17:53:12+0:00">New procedure information...
</INS>

would be rendered as:

New procedure information...

<INS> supports the following attributes:

CITE="citation"
The CITE attribute should contain a URL, defining a document that specifies the details of the newly inserted text. For example, an author who inserts some text in a document, based on a new company procedure for example, could use the CITE attribute to specify the URL of a document that defines the new procedure.

DATETIME="Date/time of insertion"
The DATETIME attribute can be used to specify the date and time that the insertion was made. The DATETIME attribute value is of a specific format, being YYYY-MM-DDThh:mm:ssTZD to specify the year, month, date, hours (using 24-hour clock notation), minutes, seconds and a Time Zone identifier. For example, in the above example, the DATETIME attribute is set to 1997-06-01T17:53:12+0.00, which would mark the new procedure information as being inserted as 5.53:12pm on the 6th January 1997, Greenwich Mean Time, also referencing the source of the new procedure information.

TITLE="informational ToolTip"
The Internet Explorer 4.0 (and above) specific TITLE attribute is used for informational purposes. If present, the value of the TITLE attribute is presented as a ToolTip when the users mouse hovers over the <INS> section.

LANG="language setting"
The LANG attribute can be used to specify what language the <INS> element is using. It accepts any valid ISO standard language abbreviation (for example "en" for English, "de" for German etc.) For more details, see the Document Localisation section for more details.

LANGUAGE="Scripting language"
The LANGUAGE attribute can be used to expressly specify which scripting language Internet Explorer 4.0 uses to interpret any scripting information used in the <INS> element. It can accept values of vbscript, vbs, javascript or jscript. The first two specify the scripting language as Visual Basic Script, the latter two specify it as using Javascript (the default scripting language used if no LANGUAGE attribute is set.

CLASS="Style Sheet class name"
The CLASS attribute is used to specify the <INS> element as using a particular style sheet class. See the Style Sheets topic for details.

STYLE="In line style setting"
As well as using previously defined style sheet settings, the <INS> element can have in-line stylings attached to it. See the Style Sheets topic for details.

ID="Unique element identifier"
The ID attribute can be used to either reference a unique style sheet identifier, or to provide a unique name for the <INS> element for scripting purposes. Any <INS> element with an ID attribute can be directly manipulated in script by referencing its ID attribute, rather than working through the All collection to determine the element. See the Scripting introduction topic for more information.

Every <INS> element in a document is an object that can be manipulated through scripting. Note that scripting of the <INS> element/object is only supported by Internet Explorer 4.0 in its Dynamic HTML object model as Netscape doesn't support the <INS> element.

<INS...> Properties
The <INS...> element/object supports all of the standard Dynamic HTML properties (i.e. className, document, id, innerHTML, innerText, isTextEdit, lang, language, offsetHeight, offsetLeft, offsetParent, offsetTop, offsetWidth, outerHTML, outerText, parentElement, parentTextEdit, sourceIndex, style, tagName and title). Details of these can be found in the standard Dynamic HTML properties topics. Additionally, the <INS> element supports the cite and datetime properties, which directly reflect the CITE and DATETIME attribute values.

<INS...> Methods
The <INS...> element/object supports all of the standard Dynamic HTML methods (i.e. click, contains, getAttribute, insertAdjacentHTML, insertAdjacentText, removeAttribute, scrollIntoView and setAttribute). Details of these can be found in the standard Dynamic HTML Methods topics.

<INS...> Events
The <INS...> element/object supports all of the standard Dynamic HTML events (i.e. onclick, ondblclick, ondragstart, onfilterchange, onhelp, onkeydown, onkeypress, onkeyup, onmousedown, onmousemove, onmouseout, onmouseover, onmouseup and onselectstart). Details of these can be found in the standard Dynamic HTML events topics.

© 1995-1998, Stephen Le Hunte


<KBD>

The Keyboard element can be used to indicate text to be typed by a user and is typically rendered in a mono spaced 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.

TITLE="informational ToolTip"
The Internet Explorer 4.0 (and above) specific TITLE attribute is used for informational purposes. If present, the value of the TITLE attribute is presented as a ToolTip when the users mouse hovers over the <KBD> section.

LANG="language setting"
The LANG attribute can be used to specify what language the <KBD> element is using. It accepts any valid ISO standard language abbreviation (for example "en" for English, "de" for German etc.) For more details, see the Document Localisation section for more details.

LANGUAGE="Scripting language"
The LANGUAGE attribute can be used to expressly specify which scripting language Internet Explorer 4.0 uses to interpret any scripting information used in the <KBD> element. It can accept values of vbscript, vbs, javascript or jscript. The first two specify the scripting language as Visual Basic Script, the latter two specify it as using Javascript (the default scripting language used if no LANGUAGE attribute is set.

CLASS="Style Sheet class name"
The CLASS attribute is used to specify the <KBD> element as using a particular style sheet class. See the Style Sheets topic for details.

STYLE="In line style setting"
As well as using previously defined style sheet settings, the <KBD> element can have in-line stylings attached to it. See the Style Sheets topic for details.

ID="Unique element identifier"
The ID attribute can be used to either reference a unique style sheet identifier, or to provide a unique name for the <KBD> element for scripting purposes. Any <KBD> element with an ID attribute can be directly manipulated in script by referencing its ID attribute, rather than working through the All collection to determine the element. See the Scripting introduction topic for more information.

Every <KBD> element in a document is an object that can be manipulated through scripting. Note that scripting of the <KBD> element/object is only supported by Internet Explorer 4.0 in its Dynamic HTML object model. Netscape does not support direct scripting of the <KBD> element at all.

<KBD...> Properties
The <KBD...> element/object supports all of the standard Dynamic HTML properties (i.e. className, document, id, innerHTML, innerText, isTextEdit, lang, language, offsetHeight, offsetLeft, offsetParent, offsetTop, offsetWidth, outerHTML, outerText, parentElement, parentTextEdit, sourceIndex, style, tagName and title). Details of these can be found in the standard Dynamic HTML properties topics.

<KBD...> Methods
The <KBD...> element/object supports all of the standard Dynamic HTML methods (i.e. click, contains, getAttribute, insertAdjacentHTML, insertAdjacentText, removeAttribute, scrollIntoView and setAttribute). Details of these can be found in the standard Dynamic HTML Methods topics.

<KBD...> Events
The <KBD...> element/object supports all of the standard Dynamic HTML events (i.e. onclick, ondblclick, ondragstart, onfilterchange, onhelp, onkeydown, onkeypress, onkeyup, onmousedown, onmousemove, onmouseout, onmouseover, onmouseup and onselectstart). Details of these can be found in the standard Dynamic HTML events topics.

© 1995-1998, Stephen Le Hunte


<Q>

The <Q> element specifies that the enclosed text is an in-line quote. This is different from the <BLOCKQUOTE>, because it doesn't generate paragraph breaks before or after. The contents of the <Q> element are rendered with the flow of the surrounding text. It is one of the new HTML 4.0 elements (actually a 'hanger-on' from the ill-fated HTML 3.0 specification) and is currently only supported by Internet Explorer 4.0.

ECMAScript is a <Q CITE="http://www.ecma.ch/">A general purpose, cross-platform programming language</Q>

<Q> supports the following attributes:

CITE="reference URL"
The CITE attribute should be used to specify the source of, or a reference to the contained quote. In the above example, the CITE attribute is used to provide the URL of the ECMA Web site, the authors of the ECMAScript specification.

TITLE="informational ToolTip"
The Internet Explorer 4.0 (and above) specific TITLE attribute is used for informational purposes. If present, the value of the TITLE attribute is presented as a ToolTip when the users mouse hovers over the <Q> section.

LANG="language setting"
The LANG attribute can be used to specify what language the <Q> element is using. It accepts any valid ISO standard language abbreviation (for example "en" for English, "de" for German etc.) For more details, see the Document Localisation section for more details.

LANGUAGE="Scripting language"
The LANGUAGE attribute can be used to expressly specify which scripting language Internet Explorer 4.0 uses to interpret any scripting information used in the <Q> element. It can accept values of vbscript, vbs, javascript or jscript. The first two specify the scripting language as Visual Basic Script, the latter two specify it as using Javascript (the default scripting language used if no LANGUAGE attribute is set.

CLASS="Style Sheet class name"
The CLASS attribute is used to specify the <Q> element as using a particular style sheet class. See the Style Sheets topic for details.

STYLE="In line style setting"
As well as using previously defined style sheet settings, the <Q> element can have in-line stylings attached to it. See the Style Sheets topic for details.

ID="Unique element identifier"
The ID attribute can be used to either reference a unique style sheet identifier, or to provide a unique name for the <Q> element for scripting purposes. Any <Q> element with an ID attribute can be directly manipulated in script by referencing its ID attribute, rather than working through the All collection to determine the element. See the Scripting introduction topic for more information.

Every <Q> element in a document is an object that can be manipulated through scripting. Note that scripting of the <Q> element/object is only supported by Internet Explorer 4.0 in its Dynamic HTML object model as Netscape doesn't support the <Q> element.

<Q...> Properties
The <Q...> element/object supports all of the standard Dynamic HTML properties (i.e. className, document, id, innerHTML, innerText, isTextEdit, lang, language, offsetHeight, offsetLeft, offsetParent, offsetTop, offsetWidth, outerHTML, outerText, parentElement, parentTextEdit, sourceIndex, style, tagName and title). Details of these can be found in the standard Dynamic HTML properties topics. Additionally, the <Q> element supports the cite and datetime properties, which directly reflect the CITE and DATETIME attribute values.

<Q...> Methods
The <Q...> element/object supports all of the standard Dynamic HTML methods (i.e. click, contains, getAttribute, insertAdjacentHTML, insertAdjacentText, removeAttribute, scrollIntoView and setAttribute). Details of these can be found in the standard Dynamic HTML Methods topics.

<Q...> Events
The <Q...> element/object supports all of the standard Dynamic HTML events (i.e. onclick, ondblclick, ondragstart, onfilterchange, onhelp, onkeydown, onkeypress, onkeyup, onmousedown, onmousemove, onmouseout, onmouseover, onmouseup and onselectstart). Details of these can be found in the standard Dynamic HTML events topics.

© 1995-1998, Stephen Le Hunte


<STRIKE> or <S>

The Strikethrough 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 text would be <STRIKE>struck through</STRIKE>

would be rendered as :

This text would be struck through

NOTE : The element for this effect in the HTML 3.2 specification is actually <S> ... </S>, which is supported by all three browsers as well as the <STRIKE> element

TITLE="informational ToolTip"
The Internet Explorer 4.0 (and above) specific TITLE attribute is used for informational purposes. If present, the value of the TITLE attribute is presented as a ToolTip when the users mouse hovers over the <S> or <STRIKE> section.

LANG="language setting"
The LANG attribute can be used to specify what language the <S> or <STRIKE> element is using. It accepts any valid ISO standard language abbreviation (for example "en" for English, "de" for German etc.) For more details, see the Document Localisation section for more details.

LANGUAGE="Scripting language"
The LANGUAGE attribute can be used to expressly specify which scripting language Internet Explorer 4.0 uses to interpret any scripting information used in the <S> or <STRIKE> element. It can accept values of vbscript, vbs, javascript or jscript. The first two specify the scripting language as Visual Basic Script, the latter two specify it as using Javascript (the default scripting language used if no LANGUAGE attribute is set.

CLASS="Style Sheet class name"
The CLASS attribute is used to specify the <S> or <STRIKE> element as using a particular style sheet class. See the Style Sheets topic for details.

STYLE="In line style setting"
As well as using previously defined style sheet settings, the <S> or <STRIKE> element can have in-line stylings attached to it. See the Style Sheets topic for details.

ID="Unique element identifier"
The ID attribute can be used to either reference a unique style sheet identifier, or to provide a unique name for the <S> or <STRIKE> element for scripting purposes. Any <S> or <STRIKE> element with an ID attribute can be directly manipulated in script by referencing its ID attribute, rather than working through the All collection to determine the element. See the Scripting introduction topic for more information.

Every <S> or <STRIKE> element in a document is an object that can be manipulated through scripting. Note that scripting of the <S> and <STRIKE> elements/object is only supported by Internet Explorer 4.0 in its Dynamic HTML object model. Netscape does not support direct scripting of the <S> element at all.

<S...>/<STRIKE...> Properties
The <S...> or <STRIKE> elements/objects support all of the standard Dynamic HTML properties (i.e. className, document, id, innerHTML, innerText, isTextEdit, lang, language, offsetHeight, offsetLeft, offsetParent, offsetTop, offsetWidth, outerHTML, outerText, parentElement, parentTextEdit, sourceIndex, style, tagName and title). Details of these can be found in the standard Dynamic HTML properties topics.

<S...>/<STRIKE...> Methods
The <S...> or <STRIKE> elements/objects support all of the standard Dynamic HTML methods (i.e. click, contains, getAttribute, insertAdjacentHTML, insertAdjacentText, removeAttribute, scrollIntoView and setAttribute). Details of these can be found in the standard Dynamic HTML Methods topics.

<S...>/<STRIKE...> Events
The <S...> or <STRIKE> elements/objects support all of the standard Dynamic HTML events (i.e. onclick, ondblclick, ondragstart, onfilterchange, onhelp, onkeydown, onkeypress, onkeyup, onmousedown, onmousemove, onmouseout, onmouseover, onmouseup and onselectstart). Details of these can be found in the standard Dynamic HTML events topics.

© 1995-1998, Stephen Le Hunte


<SAMP>

The Sample element can be used to indicate a sequence of literal characters and is typically rendered in a mono spaced 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 mono spaced font.

TITLE="informational ToolTip"
The Internet Explorer 4.0 (and above) specific TITLE attribute is used for informational purposes. If present, the value of the TITLE attribute is presented as a ToolTip when the users mouse hovers over the <SAMP> section.

LANG="language setting"
The LANG attribute can be used to specify what language the <SAMP> element is using. It accepts any valid ISO standard language abbreviation (for example "en" for English, "de" for German etc.) For more details, see the Document Localisation section for more details.

LANGUAGE="Scripting language"
The LANGUAGE attribute can be used to expressly specify which scripting language Internet Explorer 4.0 uses to interpret any scripting information used in the <SAMP> element. It can accept values of vbscript, vbs, javascript or jscript. The first two specify the scripting language as Visual Basic Script, the latter two specify it as using Javascript (the default scripting language used if no LANGUAGE attribute is set.

CLASS="Style Sheet class name"
The CLASS attribute is used to specify the <SAMP> element as using a particular style sheet class. See the Style Sheets topic for details.

STYLE="In line style setting"
As well as using previously defined style sheet settings, the <SAMP> element can have in-line stylings attached to it. See the Style Sheets topic for details.

ID="Unique element identifier"
The ID attribute can be used to either reference a unique style sheet identifier, or to provide a unique name for the <SAMP> element for scripting purposes. Any <SAMP> element with an ID attribute can be directly manipulated in script by referencing its ID attribute, rather than working through the All collection to determine the element. See the Scripting introduction topic for more information.

Every <SAMP> element in a document is an object that can be manipulated through scripting. Note that scripting of the <SAMP> element/object is only supported by Internet Explorer 4.0 in its Dynamic HTML object model. Netscape does not support direct scripting of the <SAMP> element at all.

<SAMP...> Properties
The <SAMP...> element/object supports all of the standard Dynamic HTML properties (i.e. className, document, id, innerHTML, innerText, isTextEdit, lang, language, offsetHeight, offsetLeft, offsetParent, offsetTop, offsetWidth, outerHTML, outerText, parentElement, parentTextEdit, sourceIndex, style, tagName and title). Details of these can be found in the standard Dynamic HTML properties topics.

<SAMP...> Methods
The <SAMP...> element/object supports all of the standard Dynamic HTML methods (i.e. click, contains, getAttribute, insertAdjacentHTML, insertAdjacentText, removeAttribute, scrollIntoView and setAttribute). Details of these can be found in the standard Dynamic HTML Methods topics.

<SAMP...> Events
The <SAMP...> element/object supports all of the standard Dynamic HTML events (i.e. onclick, ondblclick, ondragstart, onfilterchange, onhelp, onkeydown, onkeypress, onkeyup, onmousedown, onmousemove, onmouseout, onmouseover, onmouseup and onselectstart). Details of these can be found in the standard Dynamic HTML events topics.

© 1995-1998, Stephen Le Hunte


<SMALL>

The Small element specifies that the enclosed text should be displayed, if practical, using a small font (compared with the current font).

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.

TITLE="informational ToolTip"
The Internet Explorer 4.0 (and above) specific TITLE attribute is used for informational purposes. If present, the value of the TITLE attribute is presented as a ToolTip when the users mouse hovers over the <SMALL> section.

LANG="language setting"
The LANG attribute can be used to specify what language the <SMALL> element is using. It accepts any valid ISO standard language abbreviation (for example "en" for English, "de" for German etc.) For more details, see the Document Localisation section for more details.

LANGUAGE="Scripting language"
The LANGUAGE attribute can be used to expressly specify which scripting language Internet Explorer 4.0 uses to interpret any scripting information used in the <SMALL> element. It can accept values of vbscript, vbs, javascript or jscript. The first two specify the scripting language as Visual Basic Script, the latter two specify it as using Javascript (the default scripting language used if no LANGUAGE attribute is set.

CLASS="Style Sheet class name"
The CLASS attribute is used to specify the <SMALL> element as using a particular style sheet class. See the Style Sheets topic for details.

STYLE="In line style setting"
As well as using previously defined style sheet settings, the <SMALL> element can have in-line stylings attached to it. See the Style Sheets topic for details.

ID="Unique element identifier"
The ID attribute can be used to either reference a unique style sheet identifier, or to provide a unique name for the <SMALL> element for scripting purposes. Any <SMALL> element with an ID attribute can be directly manipulated in script by referencing its ID attribute, rather than working through the All collection to determine the element. See the Scripting introduction topic for more information.

Every <SMALL> element in a document is an object that can be manipulated through scripting. Note that scripting of the <SMALL> element/object is only supported by Internet Explorer 4.0 in its Dynamic HTML object model. Netscape does not support direct scripting of the <SMALL> element at all.

<SMALL...> Properties
The <SMALL...> element/object supports all of the standard Dynamic HTML properties (i.e. className, document, id, innerHTML, innerText, isTextEdit, lang, language, offsetHeight, offsetLeft, offsetParent, offsetTop, offsetWidth, outerHTML, outerText, parentElement, parentTextEdit, sourceIndex, style, tagName and title). Details of these can be found in the standard Dynamic HTML properties topics.

<SMALL...> Methods
The <SMALL...> element/object supports all of the standard Dynamic HTML methods (i.e. click, contains, getAttribute, insertAdjacentHTML, insertAdjacentText, removeAttribute, scrollIntoView and setAttribute). Details of these can be found in the standard Dynamic HTML Methods topics.

<SMALL...> Events
The <SMALL...> element/object supports all of the standard Dynamic HTML events (i.e. onclick, ondblclick, ondragstart, onfilterchange, onhelp, onkeydown, onkeypress, onkeyup, onmousedown, onmousemove, onmouseout, onmouseover, onmouseup and onselectstart). Details of these can be found in the standard Dynamic HTML events topics.

© 1995-1998, Stephen Le Hunte


<SPAN>

The <SPAN> element is used to apply a style to text which doesn't play any structural role, or where use of standard HTML elements is not desirable. For example, it may be useful for text to be highlighted by rendering it with a different background colour. For text such as this, using a standard HTML element such as <EM> with an applied style, would possibly be inappropriate, because browsers that don’t support style sheets would render the text as italicised. The <SPAN> element is recommended in such situations as other browsers simply ignore it.

The <SPAN> element can be used within text blocks to apply a style as defined in a style sheet, according to a CLASS or ID attribute, or the STYLE can be specified within the <SPAN> attribute. As with other elements used within the <BODY> of a HTML document, <SPAN> can also have a certain style applied to it in the style sheet definition.

e.g. If

.redtext : { color : #FF0000}

has been defined in a style sheet, then the following :

some text<SPAN CLASS="redtext"> some red text</SPAN> some more text
would render the some red text section in red.
<SPAN STYLE="{color : #FF0000}">some red text</SPAN>
would do exactly the same

Internet Explorer also supports the use of the DIR attribute for specifying the reading direction of the text. Using :

<SPAN DIR="rtl">some right-to-left text</SPAN>

causes the text to be rendered, reading from right to left, instead of the standard left to right. Note that this only occurs on systems that support right to left text rendering, for example, Arabic and Hebrew systems.

See the Style Sheets topic for more information about style sheets.

Viewing the source of any page of this reference may also provide some clues. The <SPAN> element is used quite extensively for setting the styles of various text.

TITLE="informational ToolTip"
The Internet Explorer 4.0 (and above) specific TITLE attribute is used for informational purposes. If present, the value of the TITLE attribute is presented as a ToolTip when the users mouse hovers over the <SPAN> section.

LANG="language setting"
The LANG attribute can be used to specify what language the <SPAN> element is using. It accepts any valid ISO standard language abbreviation (for example "en" for English, "de" for German etc.) For more details, see the Document Localisation section for more details.

LANGUAGE="Scripting language"
The LANGUAGE attribute can be used to expressly specify which scripting language Internet Explorer 4.0 uses to interpret any scripting information used in the <SPAN> element. It can accept values of vbscript, vbs, javascript or jscript. The first two specify the scripting language as Visual Basic Script, the latter two specify it as using Javascript (the default scripting language used if no LANGUAGE attribute is set.

CLASS="Style Sheet class name"
The CLASS attribute is used to specify the <SPAN> element as using a particular style sheet class. See the Style Sheets topic for details.

STYLE="In line style setting"
As well as using previously defined style sheet settings, the <SPAN> element can have in-line stylings attached to it. See the Style Sheets topic for details.

ID="Unique element identifier"
The ID attribute can be used to either reference a unique style sheet identifier, or to provide a unique name for the <SPAN> element for scripting purposes. Any <SPAN> element with an ID attribute can be directly manipulated in script by referencing its ID attribute, rather than working through the All collection to determine the element. See the Scripting introduction topic for more information.

DATAFLD
The DATAFLD attribute can be used to specify a data column name from the Data source (see DATASRC) that the <SPAN> is bound to. For more information on the DATAFLD attribute, see the Data Binding topic.

DATAFORMATAS
When the <SPAN> element is data-bound, it can accept straight text, or HTML from the data source. The DATAFORMATAS attribute should be set to "TEXT" or "HTML" accordingly. with DATAFORMATAS="HTML", the data provided for the <SPAN> element is parsed and rendered when its displayed.
For more information on the DATAFORMATAS attribute, see the Data Binding topic.

DATASRC
The DATASRC attribute can be used to specify a data source that the <SPAN> is bound to. For more information on the DATASRC attribute, see the Data Binding topic.

Every <SPAN> element in a document is an object that can be manipulated through scripting. Note that scripting of the <SPAN> element/object is only supported by Internet Explorer 4.0 in its Dynamic HTML object model. Netscape does not support direct scripting of the <SPAN> element at all.

<SPAN...> Properties
The <SPAN...> element/object supports all of the standard Dynamic HTML properties (i.e. className, document, id, innerHTML, innerText, isTextEdit, lang, language, offsetHeight, offsetLeft, offsetParent, offsetTop, offsetWidth, outerHTML, outerText, parentElement, parentTextEdit, sourceIndex, style, tagName and title). Details of these can be found in the standard Dynamic HTML properties topics.
The <SPAN> element also supports the following properties:

clientHeight
The clientHeight property reflects the height (in pixels) of the contents of the <SPAN> element.

clientWidth
The clientWidth property reflects the width (in pixels) of the contents of the <SPAN> element.

dataFld

dataFormatAs

dataSrc

scrollHeight
The scrollHeight property reflects the contents of the <SPAN> elements total scrollable height (in pixels).

scrollLeft
The scrollLeft property reflects a value representing the distance between the left-most edge of the element and the left-most visible edge of the element. While the contents of the <SPAN> element are totally visible on the screen, the scrollLeft property is 0, only increasing if the left-most edge of the <SPAN> elements contents are scrolled off the left hand edge of the current viewing window.

scrollTop
The scrollTop property returns a value that represents the distance between the top-most edge of the element and the top-most edge of the current viewing window. When used with the <SPAN> element, the scrollTop property is a value indicative of the extent to which the referenced element has been scrolled vertically. If the contents of the <SPAN> element are visible, then the scrollTop property will be 0, only increasing as the contents of the element are scrolled off the top of the current viewing window.

scrollWidth
Like the scrollHeight property, the scrollWidth property reflects a value that represents the total scrollable width of the contents of the <SPAN> element.

<SPAN...> Methods
The <SPAN...> element/object supports all of the standard Dynamic HTML methods (i.e. click, contains, getAttribute, insertAdjacentHTML, insertAdjacentText, removeAttribute, scrollIntoView and setAttribute). Details of these can be found in the standard Dynamic HTML Methods topics.

<SPAN...> Events
The <SPAN...> element/object supports all of the standard Dynamic HTML events (i.e. onclick, ondblclick, ondragstart, onfilterchange, onhelp, onkeydown, onkeypress, onkeyup, onmousedown, onmousemove, onmouseout, onmouseover, onmouseup and onselectstart). Details of these can be found in the standard Dynamic HTML events topics.

© 1995-1998, Stephen Le Hunte


<STRONG>

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.

TITLE="informational ToolTip"
The Internet Explorer 4.0 (and above) specific TITLE attribute is used for informational purposes. If present, the value of the TITLE attribute is presented as a ToolTip when the users mouse hovers over the <STRONG> section.

LANG="language setting"
The LANG attribute can be used to specify what language the <STRONG> element is using. It accepts any valid ISO standard language abbreviation (for example "en" for English, "de" for German etc.) For more details, see the Document Localisation section for more details.

LANGUAGE="Scripting language"
The LANGUAGE attribute can be used to expressly specify which scripting language Internet Explorer 4.0 uses to interpret any scripting information used in the <STRONG> element. It can accept values of vbscript, vbs, javascript or jscript. The first two specify the scripting language as Visual Basic Script, the latter two specify it as using Javascript (the default scripting language used if no LANGUAGE attribute is set.

CLASS="Style Sheet class name"
The CLASS attribute is used to specify the <STRONG> element as using a particular style sheet class. See the Style Sheets topic for details.

STYLE="In line style setting"
As well as using previously defined style sheet settings, the <STRONG> element can have in-line stylings attached to it. See the Style Sheets topic for details.

ID="Unique element identifier"
The ID attribute can be used to either reference a unique style sheet identifier, or to provide a unique name for the <STRONG> element for scripting purposes. Any <STRONG> element with an ID attribute can be directly manipulated in script by referencing its ID attribute, rather than working through the All collection to determine the element. See the Scripting introduction topic for more information.

Every <STRONG> element in a document is an object that can be manipulated through scripting. Note that scripting of the <STRONG> element/object is only supported by Internet Explorer 4.0 in its Dynamic HTML object model. Netscape does not support direct scripting of the <STRONG> element at all.

<STRONG...> Properties
The <STRONG...> element/object supports all of the standard Dynamic HTML properties (i.e. className, document, id, innerHTML, innerText, isTextEdit, lang, language, offsetHeight, offsetLeft, offsetParent, offsetTop, offsetWidth, outerHTML, outerText, parentElement, parentTextEdit, sourceIndex, style, tagName and title). Details of these can be found in the standard Dynamic HTML properties topics.

<STRONG...> Methods
The <STRONG...> element/object supports all of the standard Dynamic HTML methods (i.e. click, contains, getAttribute, insertAdjacentHTML, insertAdjacentText, removeAttribute, scrollIntoView and setAttribute). Details of these can be found in the standard Dynamic HTML Methods topics.

<STRONG...> Events
The <STRONG...> element/object supports all of the standard Dynamic HTML events (i.e. onclick, ondblclick, ondragstart, onfilterchange, onhelp, onkeydown, onkeypress, onkeyup, onmousedown, onmousemove, onmouseout, onmouseover, onmouseup and onselectstart). Details of these can be found in the standard Dynamic HTML events topics.

© 1995-1998, Stephen Le Hunte


<SUB>

The Subscript 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 the main text, with <SUB>this bit</SUB> being subscript.

Would render as :

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.

TITLE="informational ToolTip"
The Internet Explorer 4.0 (and above) specific TITLE attribute is used for informational purposes. If present, the value of the TITLE attribute is presented as a ToolTip when the users mouse hovers over the <SUB> section.

LANG="language setting"
The LANG attribute can be used to specify what language the <SUB> element is using. It accepts any valid ISO standard language abbreviation (for example "en" for English, "de" for German etc.) For more details, see the Document Localisation section for more details.

LANGUAGE="Scripting language"
The LANGUAGE attribute can be used to expressly specify which scripting language Internet Explorer 4.0 uses to interpret any scripting information used in the <SUB> element. It can accept values of vbscript, vbs, javascript or jscript. The first two specify the scripting language as Visual Basic Script, the latter two specify it as using Javascript (the default scripting language used if no LANGUAGE attribute is set.

CLASS="Style Sheet class name"
The CLASS attribute is used to specify the <SUB> element as using a particular style sheet class. See the Style Sheets topic for details.

STYLE="In line style setting"
As well as using previously defined style sheet settings, the <SUB> element can have in-line stylings attached to it. See the Style Sheets topic for details.

ID="Unique element identifier"
The ID attribute can be used to either reference a unique style sheet identifier, or to provide a unique name for the <SUB> element for scripting purposes. Any <SUB> element with an ID attribute can be directly manipulated in script by referencing its ID attribute, rather than working through the All collection to determine the element. See the Scripting introduction topic for more information.

Every <SUB> element in a document is an object that can be manipulated through scripting. Note that scripting of the <SUB> element/object is only supported by Internet Explorer 4.0 in its Dynamic HTML object model. Netscape does not support direct scripting of the <SUB> element at all.

<SUB...> Properties
The <SUB...> element/object supports all of the standard Dynamic HTML properties (i.e. className, document, id, innerHTML, innerText, isTextEdit, lang, language, offsetHeight, offsetLeft, offsetParent, offsetTop, offsetWidth, outerHTML, outerText, parentElement, parentTextEdit, sourceIndex, style, tagName and title). Details of these can be found in the standard Dynamic HTML properties topics.

<SUB...> Methods
The <SUB...> element/object supports all of the standard Dynamic HTML methods (i.e. click, contains, getAttribute, insertAdjacentHTML, insertAdjacentText, removeAttribute, scrollIntoView and setAttribute). Details of these can be found in the standard Dynamic HTML Methods topics.

<SUB...> Events
The <SUB...> element/object supports all of the standard Dynamic HTML events (i.e. onclick, ondblclick, ondragstart, onfilterchange, onhelp, onkeydown, onkeypress, onkeyup, onmousedown, onmousemove, onmouseout, onmouseover, onmouseup and onselectstart). Details of these can be found in the standard Dynamic HTML events topics.

© 1995-1998, Stephen Le Hunte


<SUP>

The Superscript 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.0 element and may not be widely supported.

This is the main text, with <SUP>this bit</SUP> being superscript.

Would render as:

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.

TITLE="informational ToolTip"
The Internet Explorer 4.0 (and above) specific TITLE attribute is used for informational purposes. If present, the value of the TITLE attribute is presented as a ToolTip when the users mouse hovers over the <SUP> section.

LANG="language setting"
The LANG attribute can be used to specify what language the <SUP> element is using. It accepts any valid ISO standard language abbreviation (for example "en" for English, "de" for German etc.) For more details, see the Document Localisation section for more details.

LANGUAGE="Scripting language"
The LANGUAGE attribute can be used to expressly specify which scripting language Internet Explorer 4.0 uses to interpret any scripting information used in the <SUP> element. It can accept values of vbscript, vbs, javascript or jscript. The first two specify the scripting language as Visual Basic Script, the latter two specify it as using Javascript (the default scripting language used if no LANGUAGE attribute is set.

CLASS="Style Sheet class name"
The CLASS attribute is used to specify the <SUP> element as using a particular style sheet class. See the Style Sheets topic for details.

STYLE="In line style setting"
As well as using previously defined style sheet settings, the <SUP> element can have in-line stylings attached to it. See the Style Sheets topic for details.

ID="Unique element identifier"
The ID attribute can be used to either reference a unique style sheet identifier, or to provide a unique name for the <SUP> element for scripting purposes. Any <SUP> element with an ID attribute can be directly manipulated in script by referencing its ID attribute, rather than working through the All collection to determine the element. See the Scripting introduction topic for more information.

Every <SUP> element in a document is an object that can be manipulated through scripting. Note that scripting of the <SUP> element/object is only supported by Internet Explorer 4.0 in its Dynamic HTML object model. Netscape does not support direct scripting of the <SUP> element at all.

<SUP...> Properties
The <SUP...> element/object supports all of the standard Dynamic HTML properties (i.e. className, document, id, innerHTML, innerText, isTextEdit, lang, language, offsetHeight, offsetLeft, offsetParent, offsetTop, offsetWidth, outerHTML, outerText, parentElement, parentTextEdit, sourceIndex, style, tagName and title). Details of these can be found in the standard Dynamic HTML properties topics.

<SUP...> Methods
The <SUP...> element/object supports all of the standard Dynamic HTML methods (i.e. click, contains, getAttribute, insertAdjacentHTML, insertAdjacentText, removeAttribute, scrollIntoView and setAttribute). Details of these can be found in the standard Dynamic HTML Methods topics.

<SUP...> Events
The <SUP...> element/object supports all of the standard Dynamic HTML events (i.e. onclick, ondblclick, ondragstart, onfilterchange, onhelp, onkeydown, onkeypress, onkeyup, onmousedown, onmousemove, onmouseout, onmouseover, onmouseup and onselectstart). Details of these can be found in the standard Dynamic HTML events topics.

© 1995-1998, Stephen Le Hunte


<TT>

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.

TITLE="informational ToolTip"
The Internet Explorer 4.0 (and above) specific TITLE attribute is used for informational purposes. If present, the value of the TITLE attribute is presented as a ToolTip when the users mouse hovers over the <TT> section.

LANG="language setting"
The LANG attribute can be used to specify what language the <TT> element is using. It accepts any valid ISO standard language abbreviation (for example "en" for English, "de" for German etc.) For more details, see the Document Localisation section for more details.

LANGUAGE="Scripting language"
The LANGUAGE attribute can be used to expressly specify which scripting language Internet Explorer 4.0 uses to interpret any scripting information used in the <TT> element. It can accept values of vbscript, vbs, javascript or jscript. The first two specify the scripting language as Visual Basic Script, the latter two specify it as using Javascript (the default scripting language used if no LANGUAGE attribute is set.

CLASS="Style Sheet class name"
The CLASS attribute is used to specify the <TT> element as using a particular style sheet class. See the Style Sheets topic for details.

STYLE="In line style setting"
As well as using previously defined style sheet settings, the <TT> element can have in-line stylings attached to it. See the Style Sheets topic for details.

ID="Unique element identifier"
The ID attribute can be used to either reference a unique style sheet identifier, or to provide a unique name for the <TT> element for scripting purposes. Any <TT> element with an ID attribute can be directly manipulated in script by referencing its ID attribute, rather than working through the All collection to determine the element. See the Scripting introduction topic for more information.

Every <TT> element in a document is an object that can be manipulated through scripting. Note that scripting of the <TT> element/object is only supported by Internet Explorer 4.0 in its Dynamic HTML object model. Netscape does not support direct scripting of the <TT> element at all.

<TT...> Properties
The <TT...> element/object supports all of the standard Dynamic HTML properties (i.e. className, document, id, innerHTML, innerText, isTextEdit, lang, language, offsetHeight, offsetLeft, offsetParent, offsetTop, offsetWidth, outerHTML, outerText, parentElement, parentTextEdit, sourceIndex, style, tagName and title). Details of these can be found in the standard Dynamic HTML properties topics.

<TT...> Methods
The <TT...> element/object supports all of the standard Dynamic HTML methods (i.e. click, contains, getAttribute, insertAdjacentHTML, insertAdjacentText, removeAttribute, scrollIntoView and setAttribute). Details of these can be found in the standard Dynamic HTML Methods topics.

<TT...> Events
The <TT...> element/object supports all of the standard Dynamic HTML events (i.e. onclick, ondblclick, ondragstart, onfilterchange, onhelp, onkeydown, onkeypress, onkeyup, onmousedown, onmousemove, onmouseout, onmouseover, onmouseup and onselectstart). Details of these can be found in the standard Dynamic HTML events topics.

© 1995-1998, Stephen Le Hunte


<U>

The Underline elements state that the enclosed text should be rendered, if practical, underlined.

The <U>main point</U> of the exercise...

would be rendered as :

The main point of the exercise...

TITLE="informational ToolTip"
The Internet Explorer 4.0 (and above) specific TITLE attribute is used for informational purposes. If present, the value of the TITLE attribute is presented as a ToolTip when the users mouse hovers over the <U> section.

LANG="language setting"
The LANG attribute can be used to specify what language the <U> element is using. It accepts any valid ISO standard language abbreviation (for example "en" for English, "de" for German etc.) For more details, see the Document Localisation section for more details.

LANGUAGE="Scripting language"
The LANGUAGE attribute can be used to expressly specify which scripting language Internet Explorer 4.0 uses to interpret any scripting information used in the <U> element. It can accept values of vbscript, vbs, javascript or jscript. The first two specify the scripting language as Visual Basic Script, the latter two specify it as using Javascript (the default scripting language used if no LANGUAGE attribute is set.

CLASS="Style Sheet class name"
The CLASS attribute is used to specify the <U> element as using a particular style sheet class. See the Style Sheets topic for details.

STYLE="In line style setting"
As well as using previously defined style sheet settings, the <U> element can have in-line stylings attached to it. See the Style Sheets topic for details.

ID="Unique element identifier"
The ID attribute can be used to either reference a unique style sheet identifier, or to provide a unique name for the <U> element for scripting purposes. Any <U> element with an ID attribute can be directly manipulated in script by referencing its ID attribute, rather than working through the All collection to determine the element. See the Scripting introduction topic for more information.

Every <U> element in a document is an object that can be manipulated through scripting. Note that scripting of the <U> element/object is only supported by Internet Explorer 4.0 in its Dynamic HTML object model. Netscape does not support direct scripting of the <U> element at all.

<U...> Properties
The <U...> element/object supports all of the standard Dynamic HTML properties (i.e. className, document, id, innerHTML, innerText, isTextEdit, lang, language, offsetHeight, offsetLeft, offsetParent, offsetTop, offsetWidth, outerHTML, outerText, parentElement, parentTextEdit, sourceIndex, style, tagName and title). Details of these can be found in the standard Dynamic HTML properties topics.

<U...> Methods
The <U...> element/object supports all of the standard Dynamic HTML methods (i.e. click, contains, getAttribute, insertAdjacentHTML, insertAdjacentText, removeAttribute, scrollIntoView and setAttribute). Details of these can be found in the standard Dynamic HTML Methods topics.

<U...> Events
The <U...> element/object supports all of the standard Dynamic HTML events (i.e. onclick, ondblclick, ondragstart, onfilterchange, onhelp, onkeydown, onkeypress, onkeyup, onmousedown, onmousemove, onmouseout, onmouseover, onmouseup and onselectstart). Details of these can be found in the standard Dynamic HTML events topics.

© 1995-1998, Stephen Le Hunte


<VAR>

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.

TITLE="informational ToolTip"
The Internet Explorer 4.0 (and above) specific TITLE attribute is used for informational purposes. If present, the value of the TITLE attribute is presented as a ToolTip when the users mouse hovers over the <VAR> section.

LANG="language setting"
The LANG attribute can be used to specify what language the <VAR> element is using. It accepts any valid ISO standard language abbreviation (for example "en" for English, "de" for German etc.) For more details, see the Document Localisation section for more details.

LANGUAGE="Scripting language"
The LANGUAGE attribute can be used to expressly specify which scripting language Internet Explorer 4.0 uses to interpret any scripting information used in the <VAR> element. It can accept values of vbscript, vbs, javascript or jscript. The first two specify the scripting language as Visual Basic Script, the latter two specify it as using Javascript (the default scripting language used if no LANGUAGE attribute is set.

CLASS="Style Sheet class name"
The CLASS attribute is used to specify the <VAR> element as using a particular style sheet class. See the Style Sheets topic for details.

STYLE="In line style setting"
As well as using previously defined style sheet settings, the <VAR> element can have in-line stylings attached to it. See the Style Sheets topic for details.

ID="Unique element identifier"
The ID attribute can be used to either reference a unique style sheet identifier, or to provide a unique name for the <VAR> element for scripting purposes. Any <VAR> element with an ID attribute can be directly manipulated in script by referencing its ID attribute, rather than working through the All collection to determine the element. See the Scripting introduction topic for more information.

Every <VAR> element in a document is an object that can be manipulated through scripting. Note that scripting of the <VAR> element/object is only supported by Internet Explorer 4.0 in its Dynamic HTML object model. Netscape does not support direct scripting of the <VAR> element at all.

<VAR...> Properties
The <VAR...> element/object supports all of the standard Dynamic HTML properties (i.e. className, document, id, innerHTML, innerText, isTextEdit, lang, language, offsetHeight, offsetLeft, offsetParent, offsetTop, offsetWidth, outerHTML, outerText, parentElement, parentTextEdit, sourceIndex, style, tagName and title). Details of these can be found in the standard Dynamic HTML properties topics.

<VAR...> Methods
The <VAR...> element/object supports all of the standard Dynamic HTML methods (i.e. click, contains, getAttribute, insertAdjacentHTML, insertAdjacentText, removeAttribute, scrollIntoView and setAttribute). Details of these can be found in the standard Dynamic HTML Methods topics.

<VAR...> Events
The <VAR...> element/object supports all of the standard Dynamic HTML events (i.e. onclick, ondblclick, ondragstart, onfilterchange, onhelp, onkeydown, onkeypress, onkeyup, onmousedown, onmousemove, onmouseout, onmouseover, onmouseup and onselectstart). Details of these can be found in the standard Dynamic HTML events topics.

© 1995-1998, Stephen Le Hunte


Media Embedding

Recent enhancement to HTML mean that now almost any type of file can be embedded into a HTML document. The <APPLET> element allows the inclusion of Java applets; the <OBJECT> allows the inclusion of ActiveX controls and other objects; <BGSOUND> and <SOUND> allow for the inclusion of sound files in documents and the <EMBED> facilitates the embedding of almost any file type by the Netscape plug-in method. The inclusion of non-textual media into HTML documents has come a long way since HTML 2.0

Also, the <IMG> element has undergone a large enhancement since HTML 2.0. This is due to the <IMG> element being probably the second most important mark up element (behind the Anchor element) as it handles nearly all image embedding in HTML documents.

The attributes commonly supported by the <IMG> element have had some recent additions to allow Client side Image Maps, embedded In-line video clips and also embedded In-line VRML worlds

A note about formats.
Netscape and Mosaic (and most other browsers) will only support use of .GIF and .JPG images ( Netscape also supports progressive JPEG 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>).

The Internet Explorer though, will allow the use .GIF, .JPG, 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 and Internet Explorer now fully support 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 'non-dithering palette'
As described in the <BODY> topic, both Netscape and Internet Explorer will dither graphics that don't use the 'non-dithering palette' for their colour scheme. For more information on the colour options supplied by the 'non-dithering palette', see the relevant section in the <BODY...> topic.

© 1995-1998, Stephen Le Hunte


<APPLET>

NOTE : The information provided here only describes the necessary HTML elements that allow pre-compiled HotJava applets to be added to your HTML documents. It does not describe how to actually write HotJava applets. Such information is well beyond the scope of this document. More information can be found about writing HotJava applets and how to obtain a copy of the HotJava browser and Java development kit from :

http://java.sun.com/

Also, Microsoft recently released their Java SDK, to complement their Visual J++ product. For more details, visit http://www.microsoft.com/java/

To add an applet to an HTML page, you need to use the <APPLET> HTML element.

<APPLET CODE="Applet.class" WIDTH=200 HEIGHT=150>
</APPLET>

This tells the viewer or browser to load the applet whose compiled code is in Applet.class (in the same directory as the current HTML document), and to set the initial size of the applet to 200 pixels wide and 150 pixels high. (The <APPLET> element supports standard image type attributes - see below).

Below is a more complex example of an <APPLET> element:

<APPLET CODEBASE="http://java.sun.com/JDK-prebeta1/applets/ NervousText" CODE="NervousText.class"
width=400 height=75 align=center>
<PARAM NAME="text" VALUE="This is the Applet Viewer.">
<BLOCKQUOTE>
<HR>
If you were using a Java-enabled browser, you would see dancing text instead of this paragraph.
<HR>
</BLOCKQUOTE>
</APPLET>

This tells the viewer or browser to load the applet whose compiled code is at the URL http://java.sun.com/JDK-prebeta1/applets/NervousText/NervousText.class, to set the initial size of the applet to 400x75 pixels, and to align the applet in the centre of the line. The viewer/browser must also set the applet's "text" attribute (which customizes the text this applet displays) to be "This is the Applet Viewer." If the page is viewed by a browser that can't execute applets written in the Java Programming Language, then the browser will ignore the <APPLET> and <PARAM> elements, displaying the HTML between the <BLOCKQUOTE> elements.

The complete syntax for the <APPLET> element is as follows :

<APPLET
[ALIGN]="Alignment"
[ALT]="alternateText"
[ARCHIVE]="compressed_file"
[CLASS]="Style Sheet class"
[CODE]="appletFile"
[CODEBASE]="URL"
[DATAFLD]="Column Name"
[DATASRC]="Date Source"
[HEIGHT]="pixels"
[HSPACE]="pixels"
[ID]="Unique Identifier"
[MAYSCRIPT]
[NAME]="appletInstanceName"
[SRC]="URL"
[STYLE]="Styling"
[TITLE]="ToolTip"
[VSPACE]="pixels"
[WIDTH]="pixels"
>
[<PARAM NAME = appletAttribute1 VALUE = value>]
[<PARAM NAME = appletAttribute2 VALUE = value>]
. . .
[alternateHTML]
</APPLET>

ALIGN=alignment
This required attribute specifies the alignment of the applet. The possible values of this attribute are the same as those for the <IMG> element: left, right, top, texttop, middle, absmiddle, baseline, bottom, absbottom.

ALT=alternateText
This optional attribute specifies any text that should be displayed if the browser understands the APPLET element but can't run applets written in the Java Programming Language.

ARCHIVE=compressed file
This optional attribute specifies the location (relative to the CODEBASE of the main class file) of a compressed file (consisting of all the necessary class files and support images/sounds etc.) that may be downloaded to the users Hard Disk, to save download time should they return to the page at a later date. Any files not contained in this archive that are needed will be searched for by the browser in the normal way. NOTE : The ARCHIVE attribute is Netscape specific.

CLASS=Style Sheet class
The CLASS attribute is used to specify the <APPLET> element as using a particular style sheet class. See the Style Sheets topic for details.

CODE=appletFile
This required attribute gives the name of the file that contains the applet's compiled Applet subclass. This file is relative to the base URL of the applet. It cannot be absolute.

CODEBASE=URL
This optional attribute specifies the base URL of the applet -- the directory that contains the applet's code. If this attribute is not specified, then the document's URL is used.

DATAFLD=Column Name
The DATAFLD attribute can be used to specify a data column name from the Data source (see DATASRC) that the <APPLET> is bound to. For more information on the DATAFLD attribute, see the Data Binding topic.

DATASRC=Data Source
The DATASRC attribute can be used to specify a data source that the <APPLET> is bound to. For more information on the DATASRC attribute, see the Data Binding topic.

HEIGHT=pixels WIDTH=pixels
These required attributes give the initial width and height (in pixels) of the applet display area, not counting any windows or dialogs that the applet brings up.

HSPACE=pixels VSPACE=pixels
These option attributes specify the number of pixels above and below the applet (VSPACE) and on each side of the applet (HSPACE). They're treated the same way as the <IMG> element's VSPACE and HSPACE attributes.

ID=Unique Identifier
The ID attribute can be used to either reference a unique style sheet identifier, or to provide a unique name for the <APPLET> element for scripting purposes. Any <APPLET> element with an ID attribute can be directly manipulated in script by referencing its ID attribute, rather than working through the All collection to determine the element. See the Scripting introduction topic for more information.

MAYSCRIPT
This attribute is a flag that when used, specifies that the applet is scriptable by JavaScript functions.

NAME=appletInstanceName
This optional attribute specifies a name for the applet instance, which makes it possible for applets on the same page to find (and communicate with) each other.

SRC=URL
The SRC attribute specifies a URL associated with the applet. Such a URL may point to the support site, with development information for example.

STYLE=Styling
As well as using previously defined style sheet settings, the <APPLET> element can have in-line stylings attached to it. See the Style Sheets topic for details.

TITLE=ToolTip
The Internet Explorer 4.0 (and above) specific TITLE attribute is used for informational purposes. If present, the value of the TITLE attribute is presented as a ToolTip when the users mouse hovers over the <APPLET> section.

<PARAM NAME=appletAttribute1 VALUE=value>
This element is the only way to specify an applet-specific attribute. Applets access their attributes with the getParameter() method.
The <PARAM> element supports the following attributes:

DATAFLD
The DATAFLD attribute can be used to specify a data column name from the Data source (see DATASRC) that the <PARAM> is bound to. For more information on the DATAFLD attribute, see the Data Binding topic.

DATAFORMATAS
When the <PARAM> element is data-bound, it can accept straight text, or HTML from the data source. The DATAFORMATAS attribute should be set to "TEXT" or "HTML" accordingly. with DATAFORMATAS="HTML", the data provided for the <BUTTON> element is parsed and rendered when its displayed.
For more information on the DATAFORMATAS attribute, see the Data Binding topic.

DATASRC
The DATASRC attribute can be used to specify a data source that the <PARAM> is bound to. For more information on the DATASRC attribute, see the Data Binding topic.

NAME
The NAME attribute is used to specify which property of the specific attribute is being set, by the value of the VALUE attribute.

VALUE
Specifies the value of the property named in the NAME attribute.

Every <APPLET> element in a document is an object that can be manipulated through scripting. Note that scripting of the <APPLET> element/object is largely only supported by Internet Explorer 4.0 in its Dynamic HTML object model. Netscape does support the Applets collection/applets array, but the scripting opportunities are not as large as those supported by Internet Explorer 4.0.

<APPLET...> Properties
The <APPLET...> element/object supports all of the standard Dynamic HTML properties (i.e. className, document, id, innerHTML, innerText, isTextEdit, lang, language, offsetHeight, offsetLeft, offsetParent, offsetTop, offsetWidth, outerHTML, outerText, parentElement, parentTextEdit, sourceIndex, style, tagName and title). Details of these can be found in the standard Dynamic HTML properties topics.
Also, the <APPLET> element supports the following properties:

align
The align property directly reflects any settings of the ALIGN attribute (see above).

code
The code property directly reflects any settings of the CODE attribute (see above).

codebase
The codebase property directly reflects any settings of the CODEBASE attribute (see above).

dataFld
The dataFld property directly reflects any settings of the DATAFLD attribute (see above).

dataSrc
The dataSrc property directly reflects any settings of the DATASRC attribute (see above).

height
The height property directly reflects any settings of the HEIGHT attribute (see above).

hspace
The hspace property directly reflects any settings of the HSabovePACE attribute (see above).

The readyState property can be one of 4 values, depending on the current state of the applet referenced in the <APPLET> element. The possible values of the readyState property are:

Value | Meaning
complete | The resource has completely loaded and is available to the document and therefore manipulation.
interactive | The resource hasn't completely downloaded, but is available to the document and scripting
loading | The resource is being downloaded
uninitialized | The resource is not available - normally, this value indicates that the resource is downloading

src
The src property directly reflects any settings of the SRC attribute (see above).

vspace
The vspace property directly reflects any settings of the VSPACE attribute (see above).

width
The width property directly reflects any settings of the WIDTH attribute (see above).

<APPLET...> Methods
The <APPLET...> element/object supports all of the standard Dynamic HTML methods (i.e. click, contains, getAttribute, insertAdjacentHTML, insertAdjacentText, removeAttribute, scrollIntoView and setAttribute). Details of these can be found in the standard Dynamic HTML Methods topics.
The <APPLET> element also supports the following methods:

blur
The blur method can be used to force the applet to lose the users focus. This then fires the onblur event (see below).

focus
The focus method can be used to force the applet to gain the users focus. This then fires the onfocus event (see below).

<APPLET...> Events
The <APPLET...> element/object supports all of the standard Dynamic HTML events (i.e. onclick, ondblclick, ondragstart, onfilterchange, onhelp, onkeydown, onkeypress, onkeyup, onmousedown, onmousemove, onmouseout, onmouseover, onmouseup and onselectstart). Details of these can be found in the standard Dynamic HTML events topics.
The <APPLET> element also supports the following events:

onafterupdate
The onafterupdate event is fired after data is transferred from the element to the data provider and will only fire after the onbeforeupdate event has fired and was successful. For more information on Data Binding, see the Data Binding topic.

onbeforeupdate
onbeforeupdate fires when a data bound element loses the focus, or the current document is unloaded and will only fire if the value of the element is different to the original value that was present when the element received the users focus. Note that onbeforeupdate is a cancelable event (setting returnValue=false for the Event object), which allows the document /script author a chance to validate the new data entered by the user on the client-side, before sending the data to the data provider. For more information on Data Binding, see the Data Binding topic.

onblur
onblur is fired whenever the users focus moves away from the applet (either by them clicking on another part of the document, or by 'tabbing' away from the contents of the <APPLET> element, or by using the blur method (see above).

ondataavailable
The ondataavailable event being fired indicates that more records for the referenced Data Source Object are available. It doesn't necessarily fire for every single additional record though. For more information on Data Binding, see the Data Binding topic.

ondatasetchanged
The ondatasetchanged event is fired when a new set of data is available and a recordset can be retrieved from that set of data, or when an existing set of data has been changed - for example after a filter has been applied to the data. For more information on Data Binding, see the Data Binding topic.

ondatasetcomplete
When all the data in the referenced recordset is available, the ondatasetcomplete event fires. For the ondatasetcomplete event, a reason parameter is available through the Event Object, which can have values of 0, 1 or 2, corresponding to successful completion, Aborted completion (i.e. 'Stop' button pressed for example), or Error (some other error) respectively. For more information on Data Binding, see the Data Binding topic.

onerrorupdate
The onerrorupdate event fires when a data transfer error occurs, through some action by the user (i.e. pressing the 'Stop' button on the browser for example), but not if a script generates the transfer error. For more information on Data Binding, see the Data Binding topic.

onfocus
The onfocus event is fired whenever the user passes the focus to the applet - by clicking on it, tabbing to it, or by a script function using the focus method (see above).

onload
The onload event is fired when the applet referenced in the <APPLET> element starts to download. Note that the event is fired as soon as the <APPLET> element is encountered, so any script functions fired from the onload event should be before the referenced <APPLET> element in the document, otherwise script errors will occur.

onreadystatechange
At any time, the applet may change its readyState property and when this happens, the onreadystatechange event is fired.

onresize
The onresize event is fired whenever the applet is resized, through scripting, or by the user changing their browser window size.

onrowenter
The onrowenter event fires on the data source control when the current record has been changed, so new data is available to populate the HTML display elements that are bound to the data source. Somewhat confusingly, this will typically happen after the onrowexit event has been fired. For more information on Data Binding, see the Data Binding topic.

onrowexit
The onrowexit event is fired immediately before the data source changes the current record (i.e. when the user has requested another record, or set of records by pressing a button perhaps). Note that unlike the anafterupdate and onbeforeupdate events, onrowexit is fired by the data source, not any of the HTML elements used to display the data. Changes to the data in the HTML elements should have been transferred to the data source (with validation being taken care of in the on*update events). onrowexit will also fire if the record position is changed through scripting. For more information on Data Binding, see the Data Binding topic.

© 1995-1998, Stephen Le Hunte


<BGSOUND>

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.

BALANCE=Stereo balancing
The BALANCE attribute can be used to change the stereo balance when the sound file is played. It accepts values between '-10000' and '10000'. The effect of the two extreme values depends on the sound settings on the users system, but using either of the extreme values will force the sound to play from one speaker only.

CLASS=n
The CLASS attribute is used to specify the <DIR> element as using a particular style sheet class. See the Style Sheets topic for details.

ID=n
The ID attribute can be used to either reference a unique style sheet identifier, or to provide a unique name for the <DIR> element for scripting purposes. Any <DIR> element with an ID attribute can be directly manipulated in script by referencing its ID attribute, rather than working through the All collection to determine the element. See the Scripting introduction topic for more information.

LANG=n
The LANG attribute can be used to specify what language the <DIR> element is using. It accepts any valid ISO standard language abbreviation (for example "en" for English, "de" for German etc.) For more details, see the Document Localisation section for more details.

LOOP=n
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.

SRC
This attribute specifies the address of a sound to be played.

TITLE=n
The Internet Explorer 4.0 (and above) specific TITLE attribute is used for informational purposes. The <BGSOUND> attribute presents nothing on the screen, so no 'ToolTip' is provided by the TITLE attribute.

VOLUME=n
The VOLUME attribute accepts values between '-10000' and 0 and can be used to set the volume at which the sound file will play. Note that using '0' (i.e. maximum volume), will play the sound file at 100% of the users current volume settings. There is no way in HTML that you can force a sound file to play at a volume indecent to the user. They will always have total control.

Example
This page has a background soundtrack playing if you are using Internet Explorer. The code used is:

<BGSOUND SRC="../dynamic/clouds.mid">

NOTE : Internet Explorer now fully supports use of Netscape plug-ins using the <EMBED...> element. Therefore, using :

<EMBED SRC="../dynamic/clouds.mid" HIDDEN="True">

will produce the same effect as using the above <BGSOUND...> element (and will also work in Netscape (3.0 and above)). The actual <BGSOUND...> element is still Internet Explorer specific though.

Every <BGSOUND> element in a document is an object that can be manipulated through scripting. Note that scripting of the <BGSOUND> element/object is only supported by Internet Explorer 4.0, as only Internet Explorer supports the <BGSOUND> element.

<BGSOUND...> Properties
The <BGSOUND...> element/object supports all of the standard Dynamic HTML properties (i.e. className, document, id, innerHTML, innerText, isTextEdit, lang, language, offsetHeight, offsetLeft, offsetParent, offsetTop, offsetWidth, outerHTML, outerText, parentElement, parentTextEdit, sourceIndex, style, tagName and title). Details of these can be found in the standard Dynamic HTML properties topics.
Also, the <BGSOUND> element supports the balance, loop, src and volume properties, which directly reflect their attribute settings (see above).

<BGSOUND...> Methods
The <BGSOUND...> element/object supports some of the standard Dynamic HTML methods (i.e. contains, getAttribute, removeAttribute and setAttribute). Details of these can be found in the standard Dynamic HTML Methods topics.

<BGSOUND...> Events
The <BGSOUND...> element/object doesn't support any events

© 1995-1998, Stephen Le Hunte


<EMBED>

The <EMBED> element allows authors to embed objects directly into an HTML page

The basic syntax is:

<EMBED SRC="_URL_">
<NOEMBED>Alternative content</NOEMBED>
</EMBED>

where "_URL_" represents the URL of the object that is to be embedded. See below for a description of the <NOEMBED> element.

The <EMBED> element will allow you to embed documents, or objects of any type. Your user only needs to have an application which can view the data installed correctly on their machine, or have a plug-in (for Netscape and Internet Explorer) that can manipulate the embedded file format.

The <EMBED> element can be used more or less the same as the <IMG> element and so accepts typical image embedding attributes such as ALIGN, ALT, BORDER, WIDTH, HEIGHT, HSPACE, VSPACE and NAME (for referencing the embedded object in a script function). Note that multiple <EMBED> elements can be grouped together with the same NAME attribute value, to provide multiple separate controls for a single embedded sound file).

Plug-ins Netscape plug-ins make use of the <EMBED> element. Essentially, plug-ins are dynamic code modules which are associated with a MIME data type that the Netscape client has no native support for. When Netscape encounters an unknown data type from a server, it will search for a plug-in that is associated with that MIME type and load it, enabling viewing/transforming of the data object. There are many attributes to the <EMBED> element that are plug-in specific (for these, see the relevant plug-in documentation), but as well as the attributes above, the <EMBED> element accepts the following attributes as standard across all embedded data types.

CLASS="Style Sheet class"
The CLASS attribute is used to specify the <EMBED> element as using a particular style sheet class. See the Style Sheets topic for details.

HIDDEN="true|false"
Setting this attribute specified whether the plug-in is visible or not. Some plug-ins (like the LiveAudio plug-in) can control the embedded data type without being visible. The default value is "false", which causes the plug-in controls to be displayed.

ID="Unique identifier"
The ID attribute can be used to either reference a unique style sheet identifier, or to provide a unique name for the <EMBED> element for scripting purposes. Any <EMBED> element with an ID attribute can be directly manipulated in script by referencing its ID attribute, rather than working through the All collection to determine the element. See the Scripting introduction topic for more information.

PALETTE="foreground|background"
For users browsing in 256 colours, some embedded objects could cause what is known as 'palette flash', where palette differences between the embedded object and the browser/system cause the incorrect colours to be displayed. To avoid this, embedded objects can have their palettes expressly defined as either foreground or background (the default). 'Foreground' causes the embedded object to use the foreground palette and 'background' forces it to use the background palette (the colours not reserved by the browser/system). Note that this attribute only has effect on the Windows platforms.

PLUGINSPACE="_URL_"
If the user doesn't have a plug-in installed to handle the defined object data type (determined from the SRC attribute, or TYPE attribute value), then it is possible to guide the user to a different URL (the value of the PLUGINSPACE attribute) to provide instructions on installing the necessary plug-in module. Generally, this should be the plug-in vendors installation instructions document.

STYLE="Styling"
As well as using previously defined style sheet settings, the <EMBED> element can have in-line stylings attached to it. See the Style Sheets topic for details.

TITLE="Informational ToolTip"
The Internet Explorer 4.0 (and above) specific TITLE attribute is used for informational purposes. If present, the value of the TITLE attribute is presented as a ToolTip when the users mouse hovers over the <EMBED> section, when the embedded object doesn't provide ToolTips of its own..

TYPE="MIME type"
Either this, or the SRC attribute is necessary when inserting embedded objects into HTML documents, in order for Netscape to be able to determining a suitable plug-in module to use to handle the data type. The TYPE attribute accepts any valid MIME type, to describe the type of object being inserted.

For more information about plug-ins, see the Netscape web site. http://home.netscape.com/. Lots of plug-in modules are available, the additional attributes for which are beyond the scope of this document. The documentation with the plug-in should be consulted for useable HTML element attributes.

NOTE : Microsoft's Internet Explorer (from version 3.0 beta 2) fully supports Netscape plug-ins. When Internet Explorer loads a page designed to use a (Netscape) plug-in module, it will use either the correct plug-in, or a pre-installed ActiveX control to display the content as authored. Microsoft recently released the ActiveVRML and ActiveMovie add-ons for Internet Explorer which can handle VRML worlds, AVI, QuickTime, MPEG video/audio, WAV, Sun AU and AIFF sound files respectively, either using the respective ActiveX <OBJECT> code, or <EMBED> code as used by popular Netscape plug-ins.

Examples
Below is an embedded MIDI file. Use the control panel to play it. The code used to embed it is:

<EMBED SRC="clouds.mid" WIDTH="145" HEIGHT="61">

NOTE : Internet Explorer will use the Netscape 'LiveAudio' plug-in (if Netscape 3.0 is installed, the LiveAudio plug-in distributed with Netscape Communicator will not function inside Internet Explorer)), or any installed ActiveX control for manipulation of the above MIDI file)

Below is an embedded VRML world. Use the Live3D control panel to manipulate it. The code used to embed it is:

<EMBED SRC="../img/example.wrl" WIDTH="200" HEIGHT="150">

NOTE : Internet Explorer will use the ActiveVRML add-in (if installed), or whatever Netscape plug-in is used within Netscape to handle the above Virtual world. It will display the 'broken object' symbol if no suitable plug-in, or ActiveX control is installed.

<NOEMBED>
Much like the <NOFRAMES> element, <NOEMBED> can be used to provide alternative content for older browsers that don't understand the <EMBED> element. Older browsers will ignore the <EMBED> element (and the <NOEMBED> element to be exact), but will render any HTML content they find in between the <EMBED> and </EMBED> elements. Browsers that do understand the <EMBED> element will not render any content between the <EMBED> and </EMBED> elements. For example :

<EMBED SRC="MyWorld.wrl" WIDTH="200" HEIGHT="150">
<NOEMBED>You need Netscape or Internet Explorer to see this</NOEMBED>
</EMBED>

Netscape (from version 2.0) and Internet Explorer (from version 3.0) would embed the VRML world "MyWorld.wrl" (providing there is a suitable plug-in/ActiveX control installed), while older browsers would display the message 'You need Netscape or Internet Explorer to see this'

Every <EMBED> element in a document is an object that can be manipulated through scripting. Note that most of the scripting of the <EMBED> element/object is only supported by Internet Explorer 4.0 in its Dynamic HTML object model. Netscape supports some <EMBED> related scripting through the Plug-ins array and Embeds array, but that supported by Internet Explorer is far more versatile.

<EMBED...> Properties
The <EMBED...> element/object supports all of the standard Dynamic HTML properties (i.e. className, document, id, innerHTML, innerText, isTextEdit, lang, language, offsetHeight, offsetLeft, offsetParent, offsetTop, offsetWidth, outerHTML, outerText, parentElement, parentTextEdit, sourceIndex, style, tagName and title). Details of these can be found in the standard Dynamic HTML properties topics.
The <EMBED> element also supports the following properties:
align, alt, border, hidden, height, hspace, vspace, palette, pluginspace and type
They all directly reflect their attribute settings (if any). See the particular attribute for details.

<EMBED...> Methods
The <EMBED...> element/object supports all of the standard Dynamic HTML methods (i.e. click, contains, getAttribute, insertAdjacentHTML, insertAdjacentText, removeAttribute, scrollIntoView and setAttribute). Details of these can be found in the standard Dynamic HTML Methods topics.
Also, the <EMBED> element supports the following methods:

blur
The blur method can be used to force the embedded object to lose the users focus. This then fires the onblur event (see below).

focus
The focus method can be used to force the embedded object to gain the users focus. This then fires the onfocus event (see below).

<EMBED...> Events
The <EMBED...> element/object supports all of the standard Dynamic HTML events (i.e. onclick, ondblclick, ondragstart, onfilterchange, onhelp, onkeydown, onkeypress, onkeyup, onmousedown, onmousemove, onmouseout, onmouseover, onmouseup and onselectstart). Details of these can be found in the standard Dynamic HTML events topics.
Also, the <EMBED> element supports the following events:

onblur
onblur is fired whenever the users focus moves away from the embedded object (either by them clicking on another part of the document, or by 'tabbing' away from the contents of the <EMBED> element, or by using the blur method (see above).

onfocus
The onfocus event is fired whenever the user passes the focus to the embedded object - by clicking on it, tabbing to it, or by a script function using the focus method (see above).

© 1995-1998, Stephen Le Hunte


<IMG>

The Image element is used to incorporate in-line graphics into an HTML document. This element cannot be used for embedding other HTML text.

The Image element, which is empty (no closing element), has these attributes:

ALIGN="left|right|top|texttop|middle|
absmiddle|baseline|bottom|absbottom"
ALIGN=left image will float the image to the left margin (into the next available space there), and subsequent text will wrap around the right hand side of that image.
ALIGN=right will align the image aligns with the right margin, and the text wraps around the left.
ALIGN=top aligns itself with the top of the tallest item in the line.
ALIGN=texttop aligns 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. (Essentially, this is the same as ALIGN=baseline)
ALIGN=absbottom aligns the bottom of the image with the bottom of the current line.

ALT="Alternative Text"
Optional text as an alternative to the graphic for rendering in non-graphical environments. Alternate text should be provided for whenever the graphic is not rendered (i.e. if the user has image loading turned off). Alternate text is mandatory for Level 0 documents. Internet Explorer and Netscape (4.0 and above) also use any ALT text set as a ToolTip to be displayed when the users mouse pauses over the image. Example of use:

<IMG SRC="triangle.gif" ALT="Warning:"> Be sure to read these instructions.

ISMAP
The ISMAP 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 maps in HTML documents, the HTTP server which will be controlling document access must have the correct cgi-bin software installed to control image map behaviour. i.e. the document must have access to an image map handling script and the map file defining the graphic ’hot-spots’

A simpler form of image map, known as client-side image maps are also possible. Currently, this type of map is a proposed extension to HTML. For details, see Client Side Image Maps.

SRC="URL of image"
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).

WIDTH=value HEIGHT=value
The WIDTH and HEIGHT attributes allow the browser to determine the text layout surrounding images before the entire image has been downloading, which can significantly speed up display of the document text. If the author specifies these, the viewer of their document will not have to wait for the image to be loaded over the network and its size calculated. Internet Explorer and Netscape use 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.

BORDER=value
This lets the document author control the thickness of the border around an image displayed.
It is useful if 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.

VSPACE=value HSPACE=value
For the floating images (i.e. 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. The Value should be a pixel value.

LOWSRC
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 recognise 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 grey scale 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/or height values in the <IMG> element, and both the high-res and low-res 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 (i.e. the dimensions of that image) will be used to re-scale the SRC image. This is to minimise page format disruption that would be caused by the browser trying to load two different sized images into the same page space.

NAME
This attribute sets the name of the image in the document. It can then be accessed by scripting methods (in Netscape 3.0 and Internet Explorer 4.0 and above), by referencing the Images collection.

TITLE="informational ToolTip"
The Internet Explorer 4.0 (and above) specific TITLE attribute is used for informational purposes. If present, the value of the TITLE attribute is presented as a ToolTip when the users mouse hovers over the <IMG> section. Note that any text provided in the TITLE attribute overrides that presented in the ALT attribute as the ToolTip - the contents of the ALT attribute will only be seen if the image can't be loaded for any reason.

LANG="language setting"
The LANG attribute can be used to specify what language the <IMG> element is using. It accepts any valid ISO standard language abbreviation (for example "en" for English, "de" for German etc.) For more details, see the Document Localisation section for more details.

LANGUAGE="Scripting language"
The LANGUAGE attribute can be used to expressly specify which scripting language Internet Explorer 4.0 uses to interpret any scripting information used in the <IMG> element. It can accept values of vbscript, vbs, javascript or jscript. The first two specify the scripting language as Visual Basic Script, the latter two specify it as using Javascript (the default scripting language used if no LANGUAGE attribute is set.

CLASS="Style Sheet class name"
The CLASS attribute is used to specify the <IMG> element as using a particular style sheet class. See the Style Sheets topic for details.

STYLE="In line style setting"
As well as using previously defined style sheet settings, the <IMG> element can have in-line stylings attached to it. See the Style Sheets topic for details.

ID="Unique element identifier"
The ID attribute can be used to either reference a unique style sheet identifier, or to provide a unique name for the <IMG> element for scripting purposes. Any <IMG> element with an ID attribute can be indirectly manipulated in script by referencing its ID attribute, rather than working through the All collection to determine the element. See the Scripting introduction topic for more information.

DATAFLD="Column Name"
The DATAFLD attribute can be used to specify a data column name from the Data source (see DATASRC) that the <IMG> is bound to. For more information on the DATAFLD attribute, see the Data Binding topic. For the <IMG> element, data binding is supported on the SRC attribute, therefore the data in the referenced column should be a valid URL (or URL fragment) pointing to an image file.

DATASRC="Data Source"
The DATASRC attribute can be used to specify a data source that the <IMG> is bound to. For more information on the DATASRC attribute, see the Data Binding topic.

Example
The following HTML fragment produces the display shown below.

<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 in the web browser market and compete head-to-head with Netscape, offering the same functionality...and then some more.
<BR CLEAR="all">
<HR>
Mosaic logo Mosaic, from the National Centre for Supercomputing Applications represents the original graphical browser which Netscape development was based on.
Netscape logo Netscape, from Netscape Communications, after initial development from Mosaic, stormed away and became more or less the de facto Web browser.
Internet Explorer logo Internet Explorer, from Microsoft, exhibits Microsoft's serious intentions in the web browser market and competes head-to-head with Netscape, offering the same functionality...and then some more.

Every <IMG> element in a document is an object that can be manipulated through scripting. Note that more scripting of the <IMG> element/object is supported by Internet Explorer 4.0 in its Dynamic HTML object model. Netscape (from v3.0) does support the Images collection, for manipulation of images within a document. See the Images collection topic for details of Netscape support.

<IMG...> Properties
The <IMG...> element/object supports all of the standard Dynamic HTML properties (i.e. className, document, id, innerHTML, innerText, isTextEdit, lang, language, offsetHeight, offsetLeft, offsetParent, offsetTop, offsetWidth, outerHTML, outerText, parentElement, parentTextEdit, sourceIndex, style, tagName and title). Details of these can be found in the standard Dynamic HTML properties topics.
Additionally, the <IMG> element supports the following properties:

align
The align property reflects the setting of the ALIGN attribute.

alt
The alt property reflects the setting of the ALT attribute.

border
The border property reflects the setting of the BORDER attribute.

complete
The complete property has a boolean (i.e. True or False) value, depending on whether the image has fully loaded or not.

dataFld
The dataFld property reflects the setting of the DATAFLD attribute.

dataSrc
The dataSrc property reflects the setting of the DATASRC attribute.

fileCreatedDate
The Internet Explorer 4.0 specific fileCreatedDate property returns the date that the referenced <IMG> file was created.

fileModifiedDate
The Internet Explorer 4.0 specific fileModifiedDate property returns the date that the referenced <IMG> file was last updated.

fileSize
The Internet Explorer 4.0 specific fileSize property returns the size of the referenced <IMG> file in bytes.

fileUpdatedDate
The Internet Explorer 4.0 specific fileUpdatedDate property returns the date that the referenced <IMG> file was last updated.

height
The height property reflects the setting of the HEIGHT attribute.

hspace
The hspace property reflects the setting of the HSPACE attribute.

isMap
The isMap property reflects the setting of the ISMAP attribute.

lowsrc
The lowsrc property reflects the setting of the LOWSRC attribute.

name
The name property reflects the setting of the NAME attribute.

readyState
The readyState property can be one of 4 values, depending on the current state of the resource, referenced in the HREF attribute. The possible values of the readyState property are:

Value | Meaning
complete | The resource has completely loaded and is available to the document and therefore manipulation.
interactive | The resource hasn't completely downloaded, but is available to the document and scripting
loading | The resource is being downloaded
uninitialized | The resource is not available - normally, this value indicates that the resource is downloading

Note that the readystate property is read-only.

scrollHeight
The scrollHeight property reflects the contents of the <IMG> elements total scrollable height (in pixels).

scrollLeft
The scrollLeft property reflects a value representing the distance between the left-most edge of the element and the left-most visible edge of the element. While the contents of the <IMG> element are totally visible on the screen, the scrollLeft property is 0, only increasing if the left-most edge of the <IMG> elements contents are scrolled off the left hand edge of the current viewing window.

scrollTop
The scrollTop property returns a value that represents the distance between the top-most edge of the element and the top-most edge of the current viewing window. When used with the <IMG> element, the scrollTop property is a value indicative of the extent to which the referenced element has been scrolled vertically. If the contents of the <IMG> element are visible, then the scrollTop property will be 0, only increasing as the contents of the element are scrolled off the top of the current viewing window.

scrollWidth
Like the scrollHeight property, the scrollWidth property reflects a value that represents the total scrollable width of the contents of the <IMG> element.

src
The src property reflects the setting of the SRC attribute.

vspace
The vspace property reflects the setting of the VSPACE attribute.

width
The width property reflects the setting of the WIDTH attribute.

<IMG...> Methods
The <IMG...> element/object supports all of the standard Dynamic HTML methods (i.e. click, contains, getAttribute, insertAdjacentHTML, insertAdjacentText, removeAttribute, scrollIntoView and setAttribute). Details of these can be found in the standard Dynamic HTML Methods topics.
Also, the <IMG> element supports the following methods:

blur
The blur method can be used to force the users focus away from the image, executing any script functions linked to the onblur event (see below).

focus
The focus event can be used to set the focus on the referenced image, causing the onfocus event to execute

<IMG...> Events
The <IMG...> element/object supports all of the standard Dynamic HTML events (i.e. onclick, ondblclick, ondragstart, onfilterchange, onhelp, onkeydown, onkeypress, onkeyup, onmousedown, onmousemove, onmouseout, onmouseover, onmouseup and onselectstart). Details of these can be found in the standard Dynamic HTML events topics.
Additionally, the <IMG> element supports the following events:

onabort
If the user stops the download of your HTML document before any images defined in <IMG> elements have finished downloading, then (if present) this event handler will execute whatever script function it is set to activate. For example, if you use large graphics and the user cancels the download because they are accessed slowly, perhaps they would prefer to be transferred to a low-graphics version of your site?

onblur
The onblur event executes any script functions attached to it when the users focus moves away from the image (either by clicking another part of the document, by tabbing away from the image, or by a script using the blur method).

onerror
This event handler can be used to execute script functions if there is an error while the image is downloading (perhaps caused by an incorrect SRC="..." declaration in the <IMG> element, or a network error).

onfocus
onfocus is used to execute script functions when the user focuses on the image, either by clicking it (it then fires after the respective onmouse* events), tabbing to it, or by another script function using the focus method.

onload
The OnLoad event handler can execute script functions when the browser has successfully displayed the image specified in the <IMG> element. For example, as Netscape supports the image object in its Object Model, using this event handler (in conjunction with the OnError event) can be useful for tracking whether the images have been successfully displayed or not.

onresize
The onresize event is fired whenever the <IMG> element is resized, through scripting.

© 1995-1998, Stephen Le Hunte


<OBJECT>

NOTE : The <OBJECT> element is currently only supported by Internet Explorer (although Mosaic now has limited <OBJECT> insertion capabilities). The object insertion mechanism is the subject of a W3C Working draft available at http://www.w3.org/pub/WWW/TR/WD-object.html. For this and other W3C working drafts, you should visit the W3C site at http://www.w3.org/pub/WWW/TR/

The <OBJECT> element provides a way for the ActiveX controls and other media to be embedded directly into HTML documents. It subsumes the role of the <IMG> element, providing an insertion mechanism for media other than static images. As far as the Internet Explorer is concerned, the <OBJECT> element can be used for the inclusion of ActiveX OLE controls.

An example of the syntax is as follows:

<OBJECT
CLASSID="clsid:99B42120-6EC7-11CF-A6C7-00AA00A47DD2"
ID=lbl1
WIDTH=40
HEIGHT=250
>
<PARAM NAME="angle" VALUE="90">
<PARAM NAME="alignment" VALUE="2">
<PARAM NAME="BackStyle" VALUE="0">
<PARAM NAME="caption" VALUE="Hello there">
<PARAM NAME="FontName" VALUE="Arial">
<PARAM NAME="FontSize" VALUE="30">
<PARAM NAME="FontBold" VALUE="1">
<PARAM NAME="frcolor" VALUE="8388608">
</OBJECT>

(The above example inserts the 'label' ActiveX control to the left of the example text. NOTE : Netscape will not display the 'label')

The object being inserted into the HTML document in this case, is referred to by its CLASSID. This is a unique identifier for the 'label' control, according to the Component Object Model "class id" URL scheme. The ID attribute identifies the specific label with a unique name, allowing interaction with and dynamic updating of the object's properties via active OLE scripting (i.e. Visual Basic Script). The TYPE attribute (if used) should specify the MIME type for the object (for ActiveX controls, this is application/x-ole-object)

Where the ActiveX control that is to be inserted may not be present on the users system, the automatic download mechanism of ActiveX controls (using the CODEBASE attribute) can be employed. This attribute can be used to provide a location from which the control will be downloaded.

For example :

<OBJECT CLASSID="clsid:99B42120-6EC7-11CF-A6C7-00AA00A47DD2"
CODEBASE=http://www.mysite.com/controls/mycontrol.ocx
ID=lbl1
WIDTH=90
...

would look within the system registry to see if the control with the given CLASSID is present on the system and if not, the control will be retrieved from the URL given by the CODEBASE attribute. Full version checking can also be employed using this mechanism.

For example :

<OBJECT CLASSID="clsid:99B42120-6EC7-11CF-A6C7-00AA00A47DD2"
CODEBASE=http://www.mysite.com/controls/mycontrol.ocx#ver=3,10,0,1000"
ID=lbl1
WIDTH=90
...

would only download the control to the users system if the version present on the system is older than that given by the #ver setting. I.e. if it is older than version 3.10.0.1000.

Some objects will require certain code to implement the object. This should be referenced by using the CODE attribute. Also, the DATA attribute can be used to point to a persistent data stream to initialise the object's state. The use of the above attributes is control dependant, so exhaustive examples cannot be given.

In keeping with the role of the <OBJECT> element as a media insertion element (c.f. <IMG>) various standard formatting attributes, such as ALIGN, HEIGHT, WIDTH, ALIGN, BORDER, HSPACE, VSPACE, NAME etc. can also be used to define the positioning of the object on the page.

Other attributes supported by the <OBJECT> element are:

ACCESSKEY
The ACCESSKEY attribute can be used to specify a shortcut key for the <OBJECT> (activated by pressing 'Alt' and the ACCESSKEY together - like standard Windows applications menu shortcuts). The ACCESSKEY setting does not have to be a character contained in the <OBJECT>, which is not modified in any way to reflect that an ACCESSKEY has been defined.

STANDBY="Information"
The STANDBY attribute can be used to present the user with some text, alongside the small graphic present when an ActiveX control is not yet downloaded. It's similar to the ALT text for the <IMG> element. If the user already has the control installed, then the STANDBY text won't be seen.

TABINDEX
The TABINDEX attribute can be used to set a tabbing order for the user to navigate around the document. For example, if <OBJECT> elements have TABINDEX properties set, when the user is focused on an object, pressing the 'Tab' key will pass the focus to the element with the next highest TABINDEX property.

TITLE="informational ToolTip"
The Internet Explorer 4.0 (and above) specific TITLE attribute is used for informational purposes. If present, the value of the TITLE attribute is presented as a ToolTip when the users mouse hovers over the <OBJECT> section.

LANG="language setting"
The LANG attribute can be used to specify what language the <OBJECT> element is using. It accepts any valid ISO standard language abbreviation (for example "en" for English, "de" for German etc.) For more details, see the Document Localisation section for more details.

LANGUAGE="Scripting language"
The LANGUAGE attribute can be used to expressly specify which scripting language Internet Explorer 4.0 uses to interpret any scripting information used in the <OBJECT> element. It can accept values of vbscript, vbs, javascript or jscript. The first two specify the scripting language as Visual Basic Script, the latter two specify it as using Javascript (the default scripting language used if no LANGUAGE attribute is set.

CLASS="Style Sheet class name"
The CLASS attribute is used to specify the <OBJECT> element as using a particular style sheet class. See the Style Sheets topic for details.

STYLE="In line style setting"
As well as using previously defined style sheet settings, the <OBJECT> element can have in-line stylings attached to it. See the Style Sheets topic for details.

ID="Unique element identifier"
The ID attribute can be used to either reference a unique style sheet identifier, or to provide a unique name for the <OBJECT> element for scripting purposes. Any <OBJECT> element with an ID attribute can be directly manipulated in script by referencing its ID attribute, rather than working through the All collection to determine the element. See the Scripting introduction topic for more information.

DATAFLD="Column Name"
The DATAFLD attribute can be used to specify a data column name from the Data source (see DATASRC) that the <OBJECT> is bound to. For more information on the DATAFLD attribute, see the Data Binding topic. Data binding for the <OBJECT> element is supported on the objects default property/value and the contents of the data source column referenced should be data suitable for defining <OBJECT> properties.

DATASRC="Data Source"
The DATASRC attribute can be used to specify a data source that the <OBJECT> is bound to. For more information on the DATASRC attribute, see the Data Binding topic.

The <PARAM> element allows a list of named property values (used to initialise an OLE control, plug-in module or Java applet) to be represented as a sequence of <PARAM> elements. Note that <PARAM> is an empty element and should appear without an end tag. The NAME attribute defines the property to be defined and the VALUE attribute defines the property value. For instance, in the above example, the line:

<PARAM NAME="caption" VALUE="Hello there">

sets the value of the property 'Caption' to be "Hello there" (In this case, this property represents the text that will be displayed for the label.) Object properties are entirely control dependant, so the reference documentation for any control should be read to find out what properties can be set using the PARAM element.

The <PARAM> element also supports the following attributes:

DATAFLD
The DATAFLD attribute can be used to specify a data column name from the Data source (see DATASRC) that the <PARAM> is bound to. For more information on the DATAFLD attribute, see the Data Binding topic.

DATAFORMATAS
When the <PARAM> element is data-bound, it can accept straight text, or HTML from the data source. The DATAFORMATAS attribute should be set to "TEXT" or "HTML" accordingly. with DATAFORMATAS="HTML", the data provided for the <BUTTON> element is parsed and rendered when it's displayed.
For more information on the DATAFORMATAS attribute, see the Data Binding topic.

DATASRC
The DATASRC attribute can be used to specify a data source that the <PARAM> is bound to. For more information on the DATASRC attribute, see the Data Binding topic.

NAME
The NAME attribute is used to specify which property of the specific attribute is being set, by the value of the VALUE attribute.

VALUE
Specifies the value of the property named in the NAME attribute.

Microsoft have released the ActiveX Control Pad, a text editor with added <OBJECT> insertion capabilities. Using this, authoring HTML documents that contain ActiveX components is a breeze, as control insertion/property setting is done through a Visual Basic like forms interface (the ActiveX Control Pad has been jokingly referred to as Visual Notepad). The Control Pad also allows authoring of fixed-layout sections, viewable using the ActiveX HTML Layout Control (available from Microsoft). This allows for presentation of fixed content, where the content will display as authored (something which can't be guaranteed with normal HTML). Users interested in authoring 'Activated' HTML documents, should download the ActiveX Control Pad from the Microsoft Web site at http://www.microsoft.com/workshop/author/cpad/. Also, more and more third-party application vendors are starting to supply HTML editors/Web development packages that support the visual inclusion of ActiveX controls.

Every <OBJECT> element in a document is an object that can be manipulated through scripting. Note that scripting of the <OBJECT> element/object is only supported by Internet Explorer 4.0, as only Internet Explorer supports the <OBJECT> element.

<OBJECT...> Properties
The <OBJECT...> element/object supports all of the standard Dynamic HTML properties (i.e. className, document, id, innerHTML, innerText, isTextEdit, lang, language, offsetHeight, offsetLeft, offsetParent, offsetTop, offsetWidth, outerHTML, outerText, parentElement, parentTextEdit, sourceIndex, style, tagName and title). Details of these can be found in the standard Dynamic HTML properties topics.
As well as those properties, the <OBJECT> element supports the following properties, all of which directly reflect their respective attribute setting (see above).

accessKey, align, classId, code, codeBase, data, dataFld, dataSrc, name, standBy, tabIndex, title, type and width.

The readyState property can be one of 4 values, depending on the current state of the object referenced in the <OBJECT> element. The possible values of the readyState property are:

Value | Meaning
complete | The resource has completely loaded and is available to the document and therefore manipulation.
interactive | The resource hasn't completely downloaded, but is available to the document and scripting
loading | The resource is being downloaded
uninitialized | The resource is not available - normally, this value indicates that the resource is downloading

Note that the readystate property is read-only.

<OBJECT...> Methods
The <OBJECT...> element/object supports all of the standard Dynamic HTML methods (i.e. click, contains, getAttribute, insertAdjacentHTML, insertAdjacentText, removeAttribute, scrollIntoView and setAttribute). Details of these can be found in the standard Dynamic HTML Methods topics.
The <OBJECT> element also supports the following methods:

blur
The blur method can be used to force the applet to lose the users focus. This then fires the onblur event (see below).

focus
The focus method can be used to force the applet to gain the users focus. This then fires the onfocus event (see below).

<OBJECT...> Events
The <OBJECT...> element/object supports all of the standard Dynamic HTML events (i.e. onclick, ondblclick, ondragstart, onfilterchange, onhelp, onkeydown, onkeypress, onkeyup, onmousedown, onmousemove, onmouseout, onmouseover, onmouseup and onselectstart). Details of these can be found in the standard Dynamic HTML events topics.
The <OBJECT> element also supports the following events:

onafterupdate
The onafterupdate event is fired after data is transferred from the element to the data provider and will only fire after the onbeforeupdate event has fired and was successful. For more information on Data Binding, see the Data Binding topic.

onbeforeupdate
onbeforeupdate fires when a data bound element loses the focus, or the current document is unloaded and will only fire if the value of the element is different to the original value that was present when the element received the users focus. Note that onbeforeupdate is a cancelable event (setting returnValue=false for the Event object), which allows the document /script author a chance to validate the new data entered by the user on the client-side, before sending the data to the data provider. For more information on Data Binding, see the Data Binding topic.

onblur
onblur is fired whenever the users focus moves away from the applet (either by them clicking on another part of the document, or by 'tabbing' away from the contents of the <APPLET> element, or by using the blur method (see above).

ondataavailable
The ondataavailable event being fired indicates that more records for the referenced Data Source Object are available. It doesn't necessarily fire for every single additional record though. For more information on Data Binding, see the Data Binding topic.

ondatasetchanged
The ondatasetchanged event is fired when a new set of data is available and a recordset can be retrieved from that set of data, or when an existing set of data has been changed - for example after a filter has been applied to the data. For more information on Data Binding, see the Data Binding topic.

ondatasetcomplete
When all the data in the referenced recordset is available, the ondatdasetcomplete event fires. For the ondatasetcomplete event, a reason parameter is available through the Event Object, which can have values of 0, 1 or 2, corresponding to successful completion, Aborted completion (i.e. 'Stop' button pressed for example), or Error (some other error) respectively. For more information on Data Binding, see the Data Binding topic.

onerror
The onerror event is fired when an error occurs attempting to load the referenced <OBJECT> element. Note that error messages can be suppressed by setting objectreference.onerror="null".

onerrorupdate
The onerrorupdate event fires when a data transfer error occurs, through some action by the user (i.e. pressing the 'Stop' button on the browser for example), but not if a script generates the transfer error. For more information on Data Binding, see the Data Binding topic.

onfocus
The onfocus event is fired whenever the user passes the focus to the applet - by clicking on it, tabbing to it, or by a script function using the focus method (see above).

onload
The onload event is fired when the object referenced in the <OBJECT> element starts to download. Note that the event is fired as soon as the <OBJECT> element is encountered, so any script functions fired from the onload event should be before the referenced <OBJECT> element in the document, otherwise script errors will occur.

onreadystatechange
At any time, the resource may change its readyState property and when this happens, the onreadystatechange event is fired.

onresize
The onresize event is fired whenever the applet is resized, through scripting, or by the user changing their browser window size.

onrowenter
The onrowenter event fires on the data source control when the current record has been changed, so new data is available to populate the HTML display elements that are bound to the data source. Somewhat confusingly, this will typically happen after the onrowexit event has been fired. For more information on Data Binding, see the Data Binding topic.

onrowexit
The onrowexit event is fired immediately before the data source changes the current record (i.e. when the user has requested another record, or set of records by pressing a button perhaps). Note that unlike the anafterupdate and onbeforeupdate events, onrowexit is fired by the data source, not any of the HTML elements used to display the data. Changes to the data in the HTML elements should have been transferred to the data source (with validation being taken care of in the on*update events). onrowexit will also fire if the record position is changed through scripting. For more information on Data Binding, see the Data Binding topic.

© 1995-1998, Stephen Le Hunte


<SOUND>

Mosaic supports use of the <SOUND> element for playing in-line 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
This will play the sound sample continuously while the page is being viewed.

DELAY=sec
This will delay playing of the sound file for sec seconds after the page and sound file have finished loading.

NOTE : Although Mosaic will support the use of the <BGSOUND> element (for .WAV files only), it will not play in-line *.MID MIDI files without launching an external application as defined in the 'Helper Application' set up.

© 1995-1998, Stephen Le Hunte


Client Side Image Maps

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> element.

<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 (NOTE : the NAME attribute of the <AREA> element can also be used to reference the particular area for scripting purposes. See the information in the Document Object for more information). The SHAPE gives the shape of the specific area. Currently the shapes "RECT", "CIRCLE" and "POLY" are supported (Mosaic only supports the RECT shape), with RECT being the default shape, if an explicit SHAPE attribute is not specified. The COORDS attribute gives the co-ordinates of the shape, using image pixels as the units. For a rectangle (SHAPE="RECT"), the COORDS are expressed as "left-x,top-y,right-x,bottom-y". For a circle, (SHAPE="CIRCLE"), the COORDS are expressed as "centre-x, centre-y, radius" and for a polygon (SHAPE="POLY") (an irregular shape), the COORDS are expressed in pairs of coordinates (i.e. "x1,y1,x2,y2,x3,y3... ") which defines the pixel coordinates of the various points of the polygonal image hotspot.

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 URL's

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.

Both the <MAP> and <AREA> elements also support the following attributes:

TITLE="informational ToolTip"
The Internet Explorer 4.0 (and above) specific TITLE attribute is used for informational purposes. If present in the <AREA>, the value of the TITLE attribute is presented as a ToolTip when the users mouse hovers over the section of the image defined by the <AREA> element. The TITLE attribute in the <MAP> element can be used for informational purposes only (no ToolTip is presented to the user)

LANG="language setting"
The LANG attribute can be used to specify what language the <MAP> or <AREA> elements are using. It accepts any valid ISO standard language abbreviation (for example "en" for English, "de" for German etc.) For more details, see the Document Localisation section for more details.

LANGUAGE="Scripting language"
The LANGUAGE attribute can be used to expressly specify which scripting language Internet Explorer 4.0 uses to interpret any scripting information used in the <MAP> and/or <AREA> elements. It can accept values of vbscript, vbs, javascript or jscript. The first two specify the scripting language as Visual Basic Script, the latter two specify it as using Javascript (the default scripting language used if no LANGUAGE attribute is set.

CLASS="Style Sheet class name"
The CLASS attribute is used to specify the <MAP> or <AREA> elements as using a particular style sheet class. See the Style Sheets topic for details.

STYLE="In line style setting"
As well as using previously defined style sheet settings, the <MAP> or <AREA> elements can have in-line stylings attached to it. See the Style Sheets topic for details.

ID="Unique element identifier"
The ID attribute can be used to either reference a unique style sheet identifier, or to provide a unique name for the <MAP> or <AREA> element for scripting purposes. Any <MAP> or <AREA> element with an ID attribute can be directly manipulated in script by referencing its ID attribute, rather than working through the All collection to determine the element. See the Scripting introduction topic for more information.

Examples
The following images all use a <MAP...> element and USEMAP attributes to specify them as image maps. Use the View Source option in the browser to see the source for these maps.

Circle image map | A Circular image map - using SHAPE="CIRCLE"
Rectangle image map | A Rectangular image map - using SHAPE="RECT"
Polygon image map | A Polygonal image map - using SHAPE="POLY"

NOTE : The links in the above example don't actually exist, they're just there as an example. When the image is surrounded by an anchor element, which runs a script function, Netscape will only activate the script function when the actual hotspot as defined in the <MAP> element is clicked. Internet Explorer will activate the script when _any_ part of the image is clicked on.

NOTE : The TARGET attribute can be used within the <AREA> element, allowing the use of Client side image maps within framed documents. For more information about the use of TARGET attributes, see the <FRAME> section.

Every <MAP> and <AREA> element in a document is an object that can be manipulated through scripting. Note that scripting of the CLient Side Image Maps elements/objects is supported to a greater extent by Internet Explorer 4.0 in its Dynamic HTML object model. Netscape does support some scripting of the <AREA> element, through its appearance in the Links Collection (alongside <A> elements). For details of Netscape scripting support, see the Links Collection topic.

Client Side Image Map Properties
Both <MAP> and <AREA> elements/objects support all of the standard Dynamic HTML properties (i.e. className, document, id, innerHTML, innerText, isTextEdit, lang, language, offsetHeight, offsetLeft, offsetParent, offsetTop, offsetWidth, outerHTML, outerText, parentElement, parentTextEdit, sourceIndex, style, tagName and title). Details of these can be found in the standard Dynamic HTML properties topics.
Additionally, the <AREA> element supports the following properties:

alt
The alt property directly reflects the ALT attribute (see above) for the <AREA> element.

coords
The coords property directly reflects the COORDS attribute (see above) for the <AREA> element.

hash
The hash property reflects, or sets any 'bookmark' definitions within the hot-spot's HREF attribute. For example:

<AREA HREF="http://www.htmlib.com/files/intro.htm#contents" ID="ContentsLinkHotSpot" COORDS="...">
. . .
<SCRIPT LANGUAGE="VBScript">
strHash=ContentsLinkHotSpot.hash
</SCRIPT>

would make strHash have the value of contents.

host
The host property is essentially a combination of the hostname (see below) and port (see below) properties. For the above example (for the hash property), the host property would be www.htmlib.com:80. (80 is the standard port for Web servers)

hostname
The hostname property reflects, or sets the name of the computer identified in the HREF attribute. Using the above example (for the hash property), the hostname property would be www.htmlib.com.

href
The href property reflects, or sets, the HREF attribute of the hot-spot. It is possible to change a link's href property through scripting.

noHref
The noHref property reflects any setting of the NOHREF attribute for the hot-spot.

pathname
The pathname property reflects, or sets the full path to the target document, as given in the HREF attribute. For example, in the above example for the hash property, the pathname property would be files/intro.htm#contents

port
As mentioned above, the port property reflects, or sets the port setting (if given) in the HREF attribute (if set). If no port is specified in the HREF setting, then port 80 is assumed (the standard port for Web servers).

protocol
The protocol property reflects, or sets the protocol of the HREF attribute (if set). For example:

<AREA HREF="http://www.htmlib.com/" COORDS="..." ...>

would return http:// for the protocol property.

search
The search property reflects, or sets any search strings appended to the URL given in the HREF attribute (if set), after the ? query string de-limiter.

shape
The shape property directly reflects the SHAPE attribute (see above) for the <AREA> element.

target
The target property directly reflects the TARGET attribute (see above) for the <AREA> element.

Client Side Image Map Methods
Both <MAP> and <AREA> elements/objects support all of the standard Dynamic HTML methods (i.e. click, contains, getAttribute, insertAdjacentHTML, insertAdjacentText, removeAttribute, scrollIntoView and setAttribute). Details of these can be found in the standard Dynamic HTML Methods topics.
Also, the <AREA> element supports the following methods:

blur
The blur method can be used to force the users focus away from the <AREA> element, thus firing the onblur event.

focus
Opposing the blur method, the focus method can be used to force the users focus to the referenced <AREA> element, which then causes the onfocus event to occur.

Client Side Image Map Events
Both <MAP> and <AREA> elements/objects support all of the standard Dynamic HTML events (i.e. onclick, ondblclick, ondragstart, onfilterchange, onhelp, onkeydown, onkeypress, onkeyup, onmousedown, onmousemove, onmouseout, onmouseover, onmouseup and onselectstart). Details of these can be found in the standard Dynamic HTML events topics.
The <AREA> element also supports the following events:

onblur
The onblur event fires when the user removes the focus from the referenced <AREA> element, either by clicking to another section of the document, by 'tabbing' away, or by a script function using the blur method.

onfocus
As you've probably guessed, the onfocus event fires when the user passes the focus to the referenced <AREA> element, by clicking on it, by 'tabbing' to the hot-spot, or by a script function using the focus method to pass the focus to the specific <AREA> element.

© 1995-1998, Stephen Le Hunte


In-line Video

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 non video enabled browsers display still images in their place.

NOTE : In future versions of the Internet Explorer, proprietary additions by Microsoft are to be deprecated (i.e. their support will be removed) in favour of open standard mechanisms for the embedding of objects, such as video and executable content (See <OBJECT>). Netscape can support the embedding of video clips through its plug-in mechanism using the <EMBED> element.

DYNSRC
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.

START
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.

CONTROLS
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.

LOOP
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.

LOOPDELAY
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 etc., are also acceptable and if specified, will format the display window for the video clip.

Example
Below is an included Video clip. The code used to include the video clip is :

<IMG DYNSRC="../dynamic/htmlib.avi" LOOP="-1" START="FILEOPEN">

When the <IMG> element is used to embed a video clip, the <IMG> element supports the following properties (in addition to those normally supported).

controls
The controls property reflects the setting of the CONTROL attribute (described above).

dynsrc
The dynsrc property reflects the setting of the DYNSRC attribute (described above).

loop
The loop property reflects the setting of the LOOP attribute (described above).

loopdelay
The loopdelay property reflects the setting of the LOOPDELAY attribute (described above).

start
The start property reflects the setting of the START attribute (described above).

© 1995-1998, Stephen Le Hunte


In-line VRML

NOTE : As with other <IMG> related object embedding mechanisms (i.e in-line video), future versions of the Internet Explorer will support open standard object embedding mechanisms (see <OBJECT>), instead of relying on proprietary extensions such as those detailed here.

Microsoft's Internet Explorer (from version 2) has added the ability to include in-line embedded VRML viewable by installing the Virtual Explorer plug-in module (for version 2.0. Version 3.0 can use the Netscape Live3D plug-in, or the ActiveVRML ActiveX control), available from the Microsoft ActiveX Web site (http://www.microsoft.com/activex/). 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 etc.

<IMG SRC="picture.gif" VRML="world.wrl" HEIGHT=250 WIDTH=300>

The above 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 the 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.

© 1995-1998, Stephen Le Hunte


Forms overview

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, etc., and have proved invaluable for recent HTML applications, particularly search engines, database query entry 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 and ample reference material is available elsewhere for those interested).

The following elements are used to create forms :

<FORM> - A form within a document
<INPUT ...> - One input field
<OPTION> - One option within a Select element
<SELECT> - A selection from a finite set of options
<TEXTAREA ...> - A multi-line input field
<LABEL ...> - Active Control Labels

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 (as shown below) 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">
</TEXTAREA>
<P><INPUT TYPE=SUBMIT> <INPUT TYPE=RESET>
</CENTER>
</FORM>

Comment Form

Your name: Your e-mail address:

I think the HTML Reference is :

If you have any further comments, please enter them here:

Different platforms will have different native systems for navigating within the input fields of a form. (e.g. 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 the Internet Explorer and Mosaic display just "Submit" on such a button.

HTTP File Upload
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.

© 1995-1998, Stephen Le Hunte


<FORM>

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. (I.e. a form can't contain another form)

<FORM ACTION="_URL_" METHOD="GET|POST" ENCTYPE="MIME type">
. . .
</FORM>

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 and 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, where 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 processing.

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 <FORM> element can also accept the TARGET attribute (as in <A> elements), to specify what window is used for any form feedback. It can take the following values :

window_name
The name of any window specified by a <FRAME> element, or by using the window.open scripting method. If a window_name is used which does not correlate to a previously defined window, then a new window is created and NAMEd according the the window name used in the TARGET attribute. This new window can then be referenced using its new name.
_self
Using this reserved keyword value, would cause any form feedback page to be loaded into the window that currently contains the form.
_parent
Using this reserved keyword value, would cause any form feedback page to be loaded into the window that is the parent of the window currently containing the form. i.e. if the form's window is part of a framed document, it would load into the window controlled by the <FRAMESET> element definitions that control the form's current window.
_top
Using the reserved keyword value would cause the form feedback page to be loaded into the topmost window, clearing any currently existing framed windows.
_blank
Using tis reserved keyword value would cause the form feedback page to be loaded into a newly created window. Using this value is the same as using TARGET="window_name" where the window_name used is not a previously defined window. NOTE : Unlike using the window_name using a previously undefined window name, using _blank will not name the new window for future use.

the <FORM> can also take the NAME attribute, which can be used to set the name of the element for scripting purposes.

TITLE="informational ToolTip"
The Internet Explorer 4.0 (and above) specific TITLE attribute is used for informational purposes. If present, the value of the TITLE attribute is presented as a ToolTip when the users mouse hovers over the <FORM> section.

LANG="language setting"
The LANG attribute can be used to specify what language the <FORM> element is using. It accepts any valid ISO standard language abbreviation (for example "en" for English, "de" for German etc.) For more details, see the Document Localisation section for more details.

LANGUAGE="Scripting language"
The LANGUAGE attribute can be used to expressly specify which scripting language Internet Explorer 4.0 uses to interpret any scripting information used in the <FORM> element. It can accept values of vbscript, vbs, javascript or jscript. The first two specify the scripting language as Visual Basic Script, the latter two specify it as using Javascript (the default scripting language used if no LANGUAGE attribute is set.

CLASS="Style Sheet class name"
The CLASS attribute is used to specify the <FORM> element as using a particular style sheet class. See the Style Sheets topic for details.

STYLE="In line style setting"
As well as using previously defined style sheet settings, the <FORM> element can have in-line stylings attached to it. See the Style Sheets topic for details.

ID="Unique element identifier"
The ID attribute can be used to either reference a unique style sheet identifier, or to provide a unique name for the <FORM> element for scripting purposes. Any <FORM> element with an ID attribute can be directly manipulated in script by referencing its ID attribute, rather than working through the All collection to determine the element. See the Scripting introduction topic for more information.

Every <FORM> element in a document is an object that can be manipulated through scripting. Both Netscape and Internet Explorer support scripting of the <FORM> object - Netscape supporting it through the Forms collectionforms array, but Internet Explorer's Dynamic HTML support is more varied.

<FORM...> Properties
The <FORM...> element/object supports all of the standard Dynamic HTML properties (i.e. className, document, id, innerHTML, innerText, isTextEdit, lang, language, offsetHeight, offsetLeft, offsetParent, offsetTop, offsetWidth, outerHTML, outerText, parentElement, parentTextEdit, sourceIndex, style, tagName and title). Details of these can be found in the standard Dynamic HTML properties topics.
The <FORM> object also supports the following properties:

action, encoding, method, name and target, all of which directly reflect (or set) their respective attribute values (with the encoding property reflecting the ENCTYPE attribute)

<FORM...> Methods
The <FORM...> element/object supports all of the standard Dynamic HTML methods (i.e. click, contains, getAttribute, insertAdjacentHTML, insertAdjacentText, removeAttribute, scrollIntoView and setAttribute). Details of these can be found in the standard Dynamic HTML Methods topics.
The <FORM> element also supports the submit and reset methods, which submit, or reset the form respectively.

<FORM...> Events
The <FORM...> element/object supports all of the standard Dynamic HTML events (i.e. onclick, ondblclick, ondragstart, onfilterchange, onhelp, onkeydown, onkeypress, onkeyup, onmousedown, onmousemove, onmouseout, onmouseover, onmouseup and onselectstart). Details of these can be found in the standard Dynamic HTML events topics.
onreset and onsubmit are also supported events of the <FORM> element, firing when the form is reset, or submitted respectively.

© 1995-1998, Stephen Le Hunte


<INPUT>

The Input element represents a field whose contents may be edited or activated by the user.

Attributes of the Input element:

ALIGN
Vertical alignment of the image. For use only with TYPE=IMAGE in HTML level 2. The possible values are exactly the same as for the ALIGN attribute of the <IMG ...> element.

CHECKED
Indicates that a checkbox or radio button is selected. Unselected checkboxes and radio buttons do not return name/value pairs when the form is submitted.

MAXLENGTH
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.

NAME
Symbolic name used 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. The name given to the element can also be used to reference it for scripting purposes.

SIZE
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"

SRC
To be used with the TYPE=IMAGE , this attribute represents a URL specifying an the desired image.

TYPE
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, or JavaScript. 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.

This is a button TYPE :

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". It requires the NAME and VALUE attributes, optional attributes being CHECKED.

This is a checkbox TYPE :

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 co-ordinates 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-co-ordinate is submitted under the name of the field with .x appended, and the y- co-ordinate 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.

This is an image TYPE :

PASSWORD : is the same as the TEXT attribute, except that text is not displayed as it is entered.

This is a password TYPE :

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.

This is a radio TYPE :

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.

This is a reset TYPE :

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.

This is a submit TYPE :

TEXT : is used for a 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, the <TEXTAREA> element for text fields which can accept multiple lines. Explicit VALUE and NAME attributes are also required.

This is a text TYPE :

TEXTAREA : is used for multiple-line text-entry fields. Use in conjunction with the SIZE and MAXLENGTH attributes. It is better to use the <TEXTAREA> element for such text entry boxes.

FILE : Netscape and Internet Explorer (from v4.0) support 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 from 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.

Note : Netscape (since v3.0) and Internet Explorer (from v4.0) natively support the <INPUT TYPE="file"> type. Internet Explorer 3.0 supports an ActiveX control, available from the http://www.microsoft.com/ie/ that adds <INPUT TYPE="file"> functionality to Internet Explorer 3.0.

VALUE
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 (i.e. chosen, or not chosen) then this specifies the value to be returned when the field is selected.

TABINDEX
The TABINDEX attribute can be used to set a tabbing order for the user to navigate around the main <FORM>. For example, if <FORM> elements have TABINDEX properties set, when the user is focused on an element, pressing the 'Tab' key will pass the focus to the element with the next highest TABINDEX property.

DATAFLD
The DATAFLD attribute can be used to specify a data column name from the Data source (see DATASRC) that the <INPUT> is bound to. For more information on the DATAFLD attribute, see the Data Binding topic.

DATAFORMATAS
When the <INPUT> element is data-bound, it can accept straight text, or HTML from the data source. The DATAFORMATAS attribute should be set to "TEXT" or "HTML" accordingly. with DATAFORMATAS="HTML", the data provided for the <INPUT> element is parsed and rendered when it's displayed.
For more information on the DATAFORMATAS attribute, see the Data Binding topic.

DATASRC
The DATASRC attribute can be used to specify a data source that the <INPUT> is bound to. For more information on the DATASRC attribute, see the Data Binding topic.

DISABLED
Setting the DISABLED flag for a form element, disables it from receiving any user input, or focus. It can still display values, text etc., but the user will not be able to make any changes to those values. For example, the following text box (<INPUT TYPE="text">) has its DISABLED attribute set:

<INPUT TYPE="text" SIZE="20" DISABLED VALUE="Enter a Name">

As you can see, the text box is grayed and will not accept the focus.

READONLY
The READONLY flag is slightly different to the DISABLED flag in that an <INPUT> element labelled as READONLY can still receive the users focus, but the contents of the control can not be changed. For example, the following text box (<INPUT TYPE="text">) has its READONLY attribute set:

<INPUT TYPE="text" SIZE="20" READONLY VALUE="Enter a Name">

As you can see, the text box will accept the focus, but the contents can not be edited.

TITLE="informational ToolTip"
The Internet Explorer 4.0 (and above) specific TITLE attribute is used for informational purposes. If present, the value of the TITLE attribute is presented as a ToolTip when the users mouse hovers over the <INPUT> section.

LANG="language setting"
The LANG attribute can be used to specify what language the <INPUT> element is using. It accepts any valid ISO standard language abbreviation (for example "en" for English, "de" for German etc.) For more details, see the Document Localisation section for more details.

LANGUAGE="Scripting language"
The LANGUAGE attribute can be used to expressly specify which scripting language Internet Explorer 4.0 uses to interpret any scripting information used in the <INPUT> element. It can accept values of vbscript, vbs, javascript or jscript. The first two specify the scripting language as Visual Basic Script, the latter two specify it as using Javascript (the default scripting language used if no LANGUAGE attribute is set.

CLASS="Style Sheet class name"
The CLASS attribute is used to specify the <INPUT> element as using a particular style sheet class. See the Style Sheets topic for details.

STYLE="In line style setting"
As well as using previously defined style sheet settings, the <INPUT> element can have in-line stylings attached to it. See the Style Sheets topic for details.

ID="Unique element identifier"
The ID attribute can be used to either reference a unique style sheet identifier, or to provide a unique name for the <INPUT> element for scripting purposes. Any <INPUT> element with an ID attribute can be directly manipulated in script by referencing its ID attribute, rather than working through the All collection to determine the element. See the Scripting introduction topic for more information.

ACCESSKEY
The ACCESSKEY attribute can be used to specify a shortcut key for the <INPUT> (activated by pressing 'Alt' and the ACCESSKEY together - like standard Windows applications menu shortcuts). The ACCESSKEY setting does not have to be a character in the actual <INPUT> element and no modification reflects whether an ACCESSKEY has been defined.

Every <INPUT> element in a document is an object that can be manipulated through scripting. Scripting of the <INPUT> element is supported by both browsers (Netscape supports scripting through the Forms collection/array and Elements collection. See those topics for details of Netscape support for scripting the <INPUT> element.)

<INPUT...> Properties
The <INPUT...> element/object supports all of the standard Dynamic HTML properties (i.e. className, document, id, innerHTML, innerText, isTextEdit, lang, language, offsetHeight, offsetLeft, offsetParent, offsetTop, offsetWidth, outerHTML, outerText, parentElement, parentTextEdit, sourceIndex, style, tagName and title), for ell of its TYPE variants. Details of these can be found in the standard Dynamic HTML properties topics.
Additionally, the <INPUT> element supports the following properties for some of the TYPE variants. (If no TYPE variants are listed, then the property is supported by all of them).

align (image)
The align property reflects the value of the ALIGN attribute, when used with an image TYPE

accessKey
The accessKey property reflects the value of the ACCESSKEY attribute, when used in <INPUT> elements.

checked (checkbox, radio)
checked has a boolean value that represents whether the checkbox, or radio button has been checked (checked=true) or not (checked=false).

dataFld (button, checkbox, hidden, password, radio, text)
The dataFld property directly reflects the value of the DATAFLD attribute when used with <INPUT> elements.

dataFormatAs (button)
The dataFormatAs property directly reflects the value of the DATAFORMATAS attribute when used with <INPUT> elements.

dataSrc (button, checkbox, hidden, password, radio, text)
The dataSrc property directly reflects the value of the DATASRC attribute when used with <INPUT> elements.

defaultChecked (checkbox, radio)
The defaultChecked property has a boolean value representing whether or not the radio or checkbox element is checked by default when the form is displayed by the browser.

defaultValue (file, password, text)
The defaultValue property reflects the default value of the text boxes (or file upload selector). It contains a string value, the contents of which are what is displayed by default in the boxes.

disabled
The disabled property reflects (or sets) whether the particular <INPUT> element is disabled (greyed out and not responding to input) or not. It has a boolean (i.e. true or false) value).

form
The form property contains a reference to the form on which the particular <INPUT> element resides.

indeterminate (checkbox)
The indeterminate property reflects, or sets whether the checkbox is in an indeterminate state. If it is, it is displayed as being checked, but also grayed out. It will still respond to user input.

maxLength (password, text)
The maxLength property reflects, or sets the MAXLENGTH attribute for <INPUT> TYPE variants that support it.

name
The name property reflects the value of the NAME attribute for the <INPUT> element.

readOnly (password, text)
readOnly is a boolean value, representing whether the <INPUT> type has its READONLY flag set.

recordNumber (button, checkbox, file, image, radio, submit, text)
The recordNumber property represents the number of the record, from the recordset that provided data for the element. For more information on data-aware HTML elements and data binding, see the Data Binding topic.

status
The status property is an alias for the value property and can be used to determine whether radio buttons, or checkboxes are checked (true) or not (false).

tabIndex
The tabIndex property reflects (or sets) the value of the TABINDEX attribute, when used in <INPUT> elements.

type
The type property returns the value of the TYPE attribute (i.e. 'checkbox' for <INPUT TYPE="checkbox">, 'text' for <INPUT TYPE="text"> etc.)

value
The value property returns the value of the VALUE attribute for the <INPUT> element.

<INPUT...> Methods
The <INPUT...> element/object supports all of the standard Dynamic HTML methods (i.e. click, contains, getAttribute, insertAdjacentHTML, insertAdjacentText, removeAttribute, scrollIntoView and setAttribute). Details of these can be found in the standard Dynamic HTML Methods topics.
Various TYPE variants of the <INPUT> element support the following methods:

blur
The blur method can be used to force the users focus away from the referenced <INPUT> element.

createTextRange
The createTextRange method (only supported for TYPE="text") can be used to create a TextRange from the text in, or entered into the text box. See the TextRange object topic for more information.

focus
The users focus can be forced onto any <INPUT> element by using the focus method. The onfocus event (see below) is then fired.

select
The select method can be used to select (i.e. pass focus to and highlight the contents of) the <INPUT> elements that support it (text and password). For example, if a text box has a character limit and the user has entered too many characters, the content could be highlighted and the form could alert the user that too many characters have been entered.

<INPUT...> Events
The <INPUT...> element/object supports all of the standard Dynamic HTML events (i.e. onclick, ondblclick, ondragstart, onfilterchange, onhelp, onkeydown, onkeypress, onkeyup, onmousedown, onmousemove, onmouseout, onmouseover, onmouseup and onselectstart). Details of these can be found in the standard Dynamic HTML events topics.
Some <INPUT> TYPE variants support the following events:

onafterupdate
The onafterupdate event is fired after data is transferred from the element to the data provider and will only fire after the onbeforeupdate event has fired and was successful. For more information on Data Binding, see the Data Binding topic.

onbeforeupdate
onbeforeupdate fires when a data bound element loses the focus, or the current document is unloaded and will only fire if the value of the element is different to the original value that was present when the element received the users focus. Note that onbeforeupdate is a cancelable event (setting returnValue=false for the Event object), which allows the document /script author a chance to validate the new data entered by the user on the client-side, before sending the data to the data provider. For more information on Data Binding, see the Data Binding topic.

onblur
When the referenced <INPUT> element loses the users focus, the onblur event is fired. On the fly form validation can make use of the onblur event to check form elements as the user is entering information.

onchange
The onchange event is fired when the user commits changes to an <INPUT> element. The event does not fire when the actual changes are made, but when the user 'commits' them, by either submitting the form, or by 'blurring' (i.e. removing focus from) the element. Any code using the onchange event is executed before the onblur event (see above), if the change is commited by the user removing the focus.

onerrorupdate
The onerrorupdate event fires when a data transfer error occurs, through some action by the user (i.e. pressing the 'Stop' button on the browser for example), but not if a script generates the transfer error. For more information on Data Binding, see the Data Binding topic.

onfocus
When the user passes the focus to any <INPUT> element, the onfocus event is fired for that element.

onselect
Similar to the onselecstart event, the onselect event is fired as the user selects (i.e. left-clicks and then drags the mouse across) the contents of the <INPUT> element.

© 1995-1998, Stephen Le Hunte


<OPTION>

The Option element can only occur within a <SELECT> element. It represents one choice, and can take the following attributes. 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.

SELECTED
Indicates that this option is initially selected.

VALUE
When present indicates the value to be returned if this option is chosen. The returned value defaults to the contents of the Option element.

NAME
The NAME attribute is used to set the name of the <OPTION> element that is sent as the name/value pair when the form is submitted.

TITLE="informational ToolTip"
The Internet Explorer 4.0 (and above) specific TITLE attribute is used for informational purposes. If present, the value of the TITLE attribute is presented as a ToolTip when the users mouse hovers over the <OPTION> section.

LANG="language setting"
The LANG attribute can be used to specify what language the <DIR> element is using. It accepts any valid ISO standard language abbreviation (for example "en" for English, "de" for German etc.) For more details, see the Document Localisation section for more details.

LANGUAGE="Scripting language"
The LANGUAGE attribute can be used to expressly specify which scripting language Internet Explorer 4.0 uses to interpret any scripting information used in the <OPTION> element. It can accept values of vbscript, vbs, javascript or jscript. The first two specify the scripting language as Visual Basic Script, the latter two specify it as using Javascript (the default scripting language used if no LANGUAGE attribute is set.

CLASS="Style Sheet class name"
The CLASS attribute is used to specify the <OPTION> element as using a particular style sheet class. See the Style Sheets topic for details.

STYLE="In line style setting"
As well as using previously defined style sheet settings, the <OPTION> element can have in-line stylings attached to it. See the Style Sheets topic for details.

ID="Unique element identifier"
The ID attribute can be used to either reference a unique style sheet identifier, or to provide a unique name for the <OPTION> element for scripting purposes. Any <OPTION> element with an ID attribute can be directly manipulated in script by referencing its ID attribute, rather than working through the All collection to determine the element. See the Scripting introduction topic for more information.

Every <OPTION> element in a document is an object that can be manipulated through scripting. Scripting of the <OPTION> element is supported by both browsers (Netscape supports scripting through the Forms collection/array and Elements collection. See those topics for details of Netscape support for scripting the <OPTION> element.)

<OPTION...> Properties
Of the the standard Dynamic HTML properties, the <OPTION...> element/object supports className, document, id, isTextEdit, lang, language, offsetHeight, offsetLeft, offsetParent, offsetTop, offsetWidth, parentElement, parentTextEdit, sourceIndex, style, tagName and title. Details of these can be found in the standard Dynamic HTML properties topics.
Additionally, the <OPTION> element supports the name, selected, text, type and value properties, which directly reflect the attributes of the same name. The text property can be used to set, or retrieve the text of the option chosen (i.e. the text presented to the user). The value property represents (or sets), the 'internal' value that is sent by the <OPTION> element when the form is submitted - therefore it doesn't affect the displayed list.

<OPTION...> Methods
The <OPTION...> element/object supports all of the standard Dynamic HTML methods (i.e. click, contains, getAttribute, insertAdjacentHTML, insertAdjacentText, removeAttribute, scrollIntoView and setAttribute). Details of these can be found in the standard Dynamic HTML Methods topics.

<OPTION...> Events
The <OPTION...> element/object doesn't support any events.

© 1995-1998, Stephen Le Hunte


<SELECT>

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 are:

MULTIPLE
The MULTIPLE attribute is needed when users are allowed to make several selections, e.g.

<SELECT MULTIPLE>

NAME
Specifies the name that will submitted as a name/value pair, or the name by which the element can be referred to in a script function.

SIZE
Specifies the number of visible items. If this is greater than one, then the resulting form control will be a list.

ACCESSKEY
The ACCESSKEY attribute can be used to specify a shortcut key for the <SELECT> drop down list (activated by pressing 'Alt' and the ACCESSKEY together - like standard Windows applications menu shortcuts). The ACCESSKEY setting does not have to be a character in the <SELECT> element, which is not modified in any way to reflect that an ACCESSKEY has been defined.

ALIGN="Alignment"
The ALIGN attribute can be used to set the alignment for the drop-down list. It accepts the standard ALIGN attribute values of absbottom, absmiddle, baseline, bottom, left, middle, right, texttop and top.

TABINDEX
The TABINDEX attribute can be used to set a tabbing order for the user to navigate around the main <FORM>. For example, if <FORM> elements have TABINDEX properties set, when the user is focused on an element, pressing the 'Tab' key will pass the focus to the element with the next highest TABINDEX property.

TITLE="informational ToolTip"
The Internet Explorer 4.0 (and above) specific TITLE attribute is used for informational purposes. If present, the value of the TITLE attribute is presented as a ToolTip when the users mouse hovers over the <SELECT> section.

LANG="language setting"
The LANG attribute can be used to specify what language the <SELECT> element is using. It accepts any valid ISO standard language abbreviation (for example "en" for English, "de" for German etc.) For more details, see the Document Localisation section for more details.

LANGUAGE="Scripting language"
The LANGUAGE attribute can be used to expressly specify which scripting language Internet Explorer 4.0 uses to interpret any scripting information used in the <SELECT> element. It can accept values of vbscript, vbs, javascript or jscript. The first two specify the scripting language as Visual Basic Script, the latter two specify it as using Javascript (the default scripting language used if no LANGUAGE attribute is set.

CLASS="Style Sheet class name"
The CLASS attribute is used to specify the <SELECT> element as using a particular style sheet class. See the Style Sheets topic for details.

STYLE="In line style setting"
As well as using previously defined style sheet settings, the <SELECT> element can have in-line stylings attached to it. See the Style Sheets topic for details.

ID="Unique element identifier"
The ID attribute can be used to either reference a unique style sheet identifier, or to provide a unique name for the <SELECT> element for scripting purposes. Any <SELECT> element with an ID attribute can be directly manipulated in script by referencing its ID attribute, rather than working through the All collection to determine the element. See the Scripting introduction topic for more information.

DATAFLD="Column Name"
The DATAFLD attribute can be used to specify a data column name from the Data source (see DATASRC) that the <SELECT> is bound to. For more information on the DATAFLD attribute, see the Data Binding topic.

DATASRC="Data Source"
The DATASRC attribute can be used to specify a data source that the <SELECT> is bound to. For more information on the DATASRC attribute, see the Data Binding topic.

DISABLED
The DISABLED flag (as with other form elements can be set to prevent the drop-down list from accepting the users focus.

The <SELECT> element is typically rendered as a pull down or pop-up list. For example (from the previous form fragment):

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

Every <SELECT> element in a document is an object that can be manipulated through scripting. Scripting of the <SELECT> element is supported by both browsers (Netscape supports scripting through the Forms collection/array and Elements Object/Array. See those topics for details of Netscape support for scripting the <SELECT> element.)

<SELECT...> Properties
The <SELECT...> element/object supports all of the standard Dynamic HTML properties (i.e. className, document, id, innerHTML, innerText, isTextEdit, lang, language, offsetHeight, offsetLeft, offsetParent, offsetTop, offsetWidth, outerHTML, outerText, parentElement, parentTextEdit, sourceIndex, style, tagName and title). Details of these can be found in the standard Dynamic HTML properties topics.
The <SELECT> element also has the following properties:

accessKey
The accessKey property directly reflects the setting of the ACCESSKEY attribute (see above).

dataFld
The dataFld property directly reflects the setting of the DATAFLD attribute (see above).

dataSrc
The dataSrc property directly reflects the setting of the DATASRC attribute (see above).

disabled
The disabled property has a boolean value representing whether (disabled=true) or not (disabled=false) the DISABLED flag has been set for the <SELECT> element.

form
The form property contains a reference to the form on which the particular <INPUT> element resides.

length
The length property returns a value representing the number of <OPTION> choices that are present in the <SELECT> element. It is read-writable, meaning that the number of choices can be shrunk/increased through scripting.

multiple
The multiple property has a boolean value (true or false) representing whether or not the MULTIPLE attribute flag has been set for the <SELECT> box.

name
The name property reflects the value of the NAME attribute.

recordNumber
The recordNumber property represents the number of the record, from the recordset that provided data for the element. For more information on data-aware HTML elements and data binding, see the Data Binding topic.

selectedIndex
The selectedIndex property returns (or can set) the index of the selected option in the <SELECT> element. The <OPTION> elements contained in the <SELECT> element are all referenced by their index number, starting at 0 for the first <OPTION> and incrementing in the order they appear in the document.

size
The size property directly reflects the value of the SIZE attribute (see above).

tabIndex
The tabIndex property reflects (or sets) the value of the TABINDEX attribute, when used in <SELECT> elements.

type
The type property returns either 'select-one' or 'select-multiple' for the <SELECT> element, depending on whether the MULTIPLE flag has been set or not.

<SELECT...> Methods
The <SELECT...> element/object supports all of the standard Dynamic HTML methods (i.e. click, contains, getAttribute, insertAdjacentHTML, insertAdjacentText, removeAttribute, scrollIntoView and setAttribute). Details of these can be found in the standard Dynamic HTML Methods topics.
The <SELECT> element also supports the following methods:

add
The add method can be used to add new options to a <SELECT> element. Note that before an option can be added, its element must first be created using the createElement method of the Document Object (see that topic for details).

The add method accepts arguments of element and index, which represent the element to be added and the index (i.e. position) at which it is to be inserted into the option list. For example, an option element, created with

newOpt=document.createElement(OPTION)

can be added as the first option in a <SELECT> element (whose ID is 'selMain')

selMain.add(newOpt,0)

blur
The blur method can be used to force the users focus away from the referenced <SELECT> element, causing the onblur event (see below) to fire.

focus
The focus method can be used to force the users to focus on the referenced <SELECT> element, causing the onfocus event (see below) to fire.

item
The item method retrieves an element, or collection, from a given collection - in this case, the options collection contained within the <SELECT> element. It has the syntax:

element = Selectobject.item(index [, subindex])

where element is a reference to the returned element (or collection), Selectobject is the <SELECT> element object being referenced, index is a number or string referencing the element to retrieve from the collection and subindex is an optional parameter used when the index argument returns a collection of objects. For example, if the index property is a string value, then subindex could be a numerical value, determining which object is retrieved from the collection of elements whose name or id properties are equal to the value of the index argument.

remove
The remove method can be used to remove any option from the options contained in the <SELECT> element. It requires just the single argument of index, which should be the index of the choice to be removed.

<SELECT...> Events
The <SELECT...> element/object supports all of the standard Dynamic HTML events (i.e. onclick, ondblclick, ondragstart, onfilterchange, onhelp, onkeydown, onkeypress, onkeyup, onmousedown, onmousemove, onmouseout, onmouseover, onmouseup and onselectstart). Details of these can be found in the standard Dynamic HTML events topics.
The <SELECT> element also supports the following events:

onafterupdate
The onafterupdate event is fired after data is transferred from the element to the data provider and will only fire after the onbeforeupdate event has fired and was successful. For more information on Data Binding, see the Data Binding topic.

onbeforeupdate
onbeforeupdate fires when a data bound element loses the focus, or the current document is unloaded and will only fire if the value of the element is different to the original value that was present when the element received the users focus. Note that onbeforeupdate is a cancelable event (setting returnValue=false for the Event object), which allows the document /script author a chance to validate the new data entered by the user on the client-side, before sending the data to the data provider. For more information on Data Binding, see the Data Binding topic.

onblur
The onblur event is fired whenever the referenced <SELECT> element loses the users focus (either by the user clicking another section of the document, by 'tabbing' away, or by a script function using the blur method.

onchange
The onchangesubmitting event is fired when the user commits changes to a <SELECT> element. The event does not fire when the actual changes are made, but when the user 'commits' them, by either submitting the form, or by 'blurring' (i.e. removing focus from) the element. Any code using the onchange event is executed before the onblur event (see above), if the change is committed by the user removing the focus.

onerrorupdate
The onerrorupdate event fires when a data transfer error occurs, through some action by the user (i.e. pressing the 'Stop' button on the browser for example), but not if a script generates the transfer error. For more information on Data Binding, see the Data Binding topic.

onfocus
Whenever the <SELECT> element receives the users focus, the onfocus event is fired, causing whatever script functions that are linked to it to be executed.

onrowenter
The onrowenter event fires on the data source control when the current record has been changed, so new data is available to populate the HTML display elements that are bound to the data source. Somewhat confusingly, this will typically happen after the onrowexit event has been fired. For more information on Data Binding, see the Data Binding topic.

onrowexit
The onrowexit event is fired immediately before the data source changes the current record (i.e. when the user has requested another record, or set of records by pressing a button perhaps). Note that unlike the onafterupdate and onbeforeupdate events, onrowexit is fired by the data source, not any of the HTML elements used to display the data. Changes to the data in the HTML elements should have been transferred to the data source (with validation being taken care of in the on*update events). onrowexit will also fire if the record position is changed through scripting. For more information on Data Binding, see the Data Binding topic.

© 1995-1998, Stephen Le Hunte


<TEXTAREA>

The TEXTAREA element lets users enter more than one line of text.

Any text included up to the end element is used to initialise 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. HTML user agents should allow text to extend beyond these limits by scrolling as needed.

The WRAP attribute can be used 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 : Internet Explorer (version 3.0), by default wraps text in a <TEXTAREA> box, while Internet Explorer 4.0 supports the WRAP attribute. Also, these values have changed in Netscape 4.0 and Internet Explorer 4.0 and above to WRAP="off|soft|hard" respectively.

the <TEXTAREA> can also take the NAME attribute, which can be used to set the name of the element for scripting purposes.

ACCESSKEY
The ACCESSKEY attribute can be used to specify a shortcut key for the <TEXTAREA> (activated by pressing 'Alt' and the ACCESSKEY together - like standard Windows applications menu shortcuts). The ACCESSKEY setting can be any valid key character and the <TEXTAREA> is not modified in any way to reflect that an ACCESSKEY has been defined.

TABINDEX
The TABINDEX attribute can be used to set a tabbing order for the user to navigate around the main <FORM>. For example, if <FORM> elements have TABINDEX properties set, when the user is focused on an element, pressing the 'Tab' key will pass the focus to the element with the next highest TABINDEX property.

TITLE="informational ToolTip"
The Internet Explorer 4.0 (and above) specific TITLE attribute is used for informational purposes. If present, the value of the TITLE attribute is presented as a ToolTip when the users mouse hovers over the <TEXTAREA> section.

LANG="language setting"
The LANG attribute can be used to specify what language the <TEXTAREA> element is using. It accepts any valid ISO standard language abbreviation (for example "en" for English, "de" for German etc.) For more details, see the Document Localisation section for more details.

LANGUAGE="Scripting language"
The LANGUAGE attribute can be used to expressly specify which scripting language Internet Explorer 4.0 uses to interpret any scripting information used in the <TEXTAREA> element. It can accept values of vbscript, vbs, javascript or jscript. The first two specify the scripting language as Visual Basic Script, the latter two specify it as using Javascript (the default scripting language used if no LANGUAGE attribute is set.

CLASS="Style Sheet class name"
The CLASS attribute is used to specify the <TEXTAREA> element as using a particular style sheet class. See the Style Sheets topic for details.

STYLE="In line style setting"
As well as using previously defined style sheet settings, the <TEXTAREA> element can have in-line stylings attached to it. See the Style Sheets topic for details.

ID="Unique element identifier"
The ID attribute can be used to either reference a unique style sheet identifier, or to provide a unique name for the <TEXTAREA> element for scripting purposes. Any <TEXTAREA> element with an ID attribute can be directly manipulated in script by referencing its ID attribute, rather than working through the All collection to determine the element. See the Scripting introduction topic for more information.

ALIGN="Alignment"
The ALIGN attribute can be used to set the alignment for the drop-down list. It accepts the standard ALIGN attribute values of absbottom, absmiddle, baseline, bottom, left, middle, right, texttop and top.

DATAFLD="Column Name"
The DATAFLD attribute can be used to specify a data column name from the Data source (see DATASRC) that the <TEXTAREA> is bound to. For more information on the DATAFLD attribute, see the Data Binding topic.

DATASRC="Data Source"
The DATASRC attribute can be used to specify a data source that the <TEXTAREA> is bound to. For more information on the DATASRC attribute, see the Data Binding topic.

DISABLED
Setting the DISABLED flag for a <TEXTAREA> box disables it from receiving any user input, or focus. It can still display values, text etc., but the user will not be able to make any changes to those values.

READONLY
The READONLY flag is slightly different to the DISABLED flag in that an <TEXTAREA> element labelled as READONLY can still receive the users focus, but the contents of the control can not be changed.

Every <TEXTAREA> element in a document is an object that can be manipulated through scripting. Scripting of the <INPUT> element is supported by both browsers (Netscape supports scripting through the Forms collection/array and Elements Object/Array. See those topics for details of Netscape support for scripting the <INPUT> element.)

<TEXTAREA...> Properties
The <TEXTAREA...> element/object supports all of the standard Dynamic HTML properties (i.e. className, document, id, innerHTML, innerText, isTextEdit, lang, language, offsetHeight, offsetLeft, offsetParent, offsetTop, offsetWidth, outerHTML, outerText, parentElement, parentTextEdit, sourceIndex, style, tagName and title). Details of these can be found in the standard Dynamic HTML properties topics.
The <TEXTAREA> element also supports the following properties:

accessKey
The accessKey property directly reflects the value of the ACCESSKEY attribute (see above).

align
The align property directly reflects the value of the ALIGN attribute (see above).

clientHeight
The clientHeight property reflects the height (in pixels) of the contents of the <TEXTAREA> element.

clientWidth
The clientWidth property reflects the width (in pixels) of the contents of the <TEXTAREA> element.

cols
The cols property directly reflects the value of the COLS attribute, if set. (See above)

dataFld
The dataFld property directly reflects the value of the DATAFLD attribute, setting the column name for Data Binding of the <TEXTAREA> element.

dataSrc
The dataSrc property directly reflects the value of the DATASRC attribute, taking the ID attribute of the data source for Data Binding of the <TEXTAREA> element.

disabled
The disabled contains a boolean value representing whether the DISABLED flag has been set for the <TEXTAREA> element.

name
The name property directly reflects the value of the NAME attribute for the <TEXTAREA> text box.

readOnly
The readOnly contains a boolean value representing whether the READONLY flag has been set for the <TEXTAREA> element.

rows
The rows property directly reflects the value of the ROWS attribute for the <TEXTAREA> text box.

scrollHeight
The scrollHeight property reflects the contents of the <TEXTAREA> elements total scrollable height (in pixels).

scrollLeft
The scrollLeft property reflects a value representing the distance between the left-most edge of the element and the left-most visible edge of the element. While the contents of the <TEXTAREA> element are totally visible on the screen, the scrollLeft property is 0, only increasing if the left-most edge of the <TEXTAREA> elements contents are scrolled off the left hand edge of the current viewing window.

scrollTop
The scrollTop property returns a value that represents the distance between the top-most edge of the element and the top-most edge of the current viewing window. When used with the <TEXTAREA> element, the scrollTop property is a value indicative of the extent to which the referenced element has been scrolled vertically. If the contents of the <TEXTAREA> element are visible, then the scrollTop property will be 0, only increasing as the contents of the element are scrolled off the top of the current viewing window.

scrollWidth
Like the scrollHeight property, the scrollWidth property reflects a value that represents the total scrollable width of the contents of the <TEXTAREA> element.

tabIndex
The tabIndex property reflects (or sets) the value of the TABINDEX attribute, when used in <TEXTAREA> elements.

type
The type property returns 'textarea' for the <TEXTAREA> element. It represents a string value giving a description of the type of form element being referenced.

value
The value property reflects (or sets), the VALUE attribute for the <TEXTAREA> element.

wrap
The wrap property directly reflects any settings of the WRAP attribute (see above).

<TEXTAREA...> Methods
The <TEXTAREA...> element/object supports all of the standard Dynamic HTML methods (i.e. click, contains, getAttribute, insertAdjacentHTML, insertAdjacentText, removeAttribute, scrollIntoView and setAttribute). Details of these can be found in the standard Dynamic HTML Methods topics.
Additionally, the <TEXTAREA> element supports the following methods:

blur
The blur event can be used to force the users focus away from the referenced <TEXTAREA> element, firing the onblur event.

createTextRange
The createTextRange method can be invoked to create a TextRange object from the contents of the <TEXTAREA> element. See the TextRange object topic for details of properties, methods and events applicable to text ranges.

focus
The focus method can be used to pass the users focus to the referenced <TEXTAREA> element, forcing the onfocus event to fire.

<TEXTAREA...> Events
The <TEXTAREA...> element/object supports all of the standard Dynamic HTML events (i.e. onclick, ondblclick, ondragstart, onfilterchange, onhelp, onkeydown, onkeypress, onkeyup, onmousedown, onmousemove, onmouseout, onmouseover, onmouseup and onselectstart). Details of these can be found in the standard Dynamic HTML events topics.
The following events are also supported by the <TEXTAREA> element:

onafterupdate
The onafterupdate event is fired after data is transferred from the element to the data provider and will only fire after the onbeforeupdate event has fired and was successful. For more information on Data Binding, see the Data Binding topic.

onbeforeupdate
onbeforeupdate fires when a data bound element loses the focus, or the current document is unloaded and will only fire if the value of the element is different to the original value that was present when the element received the users focus. Note that onbeforeupdate is a cancelable event (setting returnValue=false for the Event object), which allows the document /script author a chance to validate the new data entered by the user on the client-side, before sending the data to the data provider. For more information on Data Binding, see the Data Binding topic.

onblur
When the referenced <TEXTAREA> element loses the users focus, the onblur event is fired. On the fly form validation can make use of the onblur event to check form elements as the user is entering information.

onchange
The onchange event is fired when the user commits changes to an <TEXTAREA> element. The event does not fire when the actual changes are made, but when the user 'commits' them, by either submitting the form, or by 'blurring' (i.e. removing focus from) the element. Any code using the onchange event is executed before the onblur event (see above), if the change is committed by the user removing the focus.

onerrorupdate
The onerrorupdate event fires when a data transfer error occurs, through some action by the user (i.e. pressing the 'Stop' button on the browser for example), but not if a script generates the transfer error. For more information on Data Binding, see the Data Binding topic.

onfocus
When the user passes the focus to any <TEXTAREA> element, the onfocus event is fired for that element.

onrowenter
The onrowenter event fires on the data source control when the current record has been changed, so new data is available to populate the HTML display elements that are bound to the data source. Somewhat confusingly, this will typically happen after the onrowexit event has been fired. For more information on Data Binding, see the Data Binding topic.

onrowexit
The onrowexit event is fired immediately before the data source changes the current record (i.e. when the user has requested another record, or set of records by pressing a button perhaps). Note that unlike the onafterupdate and onbeforeupdate events, onrowexit is fired by the data source, not any of the HTML elements used to display the data. Changes to the data in the HTML elements should have been transferred to the data source (with validation being taken care of in the on*update events). onrowexit will also fire if the record position is changed through scripting. For more information on Data Binding, see the Data Binding topic.

onscroll
The onscroll event is fired when the <TEXTAREA> text box is scrolled, by the user using the scrollbars on the <TEXTAREA> box.

© 1995-1998, Stephen Le Hunte


<KEYGEN>

Note : The <KEYGEN> element is Netscape specific.

The <KEYGEN> element is used to generate 'key' material to be sent along with forms. It's designed mainly for use with certificate management systems. When used, it displays a menu of key sizes, form which the user must choose, before submitting the form. When the form is submitted, a key pair of the chosen size is generated and the private key is stored on the users PC. The public key and challenge string (as specified in the CHALLENGE attribute) are then coded, digitally signed and sent as the value of a name/value pair with the form (the name being the NAME attribute of the <KEYGEN> element.

For example:

<FORM>
. . .
<KEYGEN NAME="somekey" CHALLENGE="1125983021">
. . .
</FORM>

© 1995-1998, Stephen Le Hunte


<LABEL>

Note : The <LABEL> element is a new element introduced in HTML 4.0 draft specifications and is currently only supported by Internet Explorer 4.0.

The <LABEL> element is used to link a text label to control like elements. Typically, these would be form elements - buttons, radio buttons, checkboxes etc. It provides for the kind of functionality built-in to most standard Windows based applications, whereby clicking the label next to a radio button is the same as clicking the radio button itself. Previously, in HTML, the radio button itself would have had to be clicked.

For example, consider the two radio buttons below:

Make a choice:
Red :
Blue :

They are constructed using standard <INPUT TYPE="radio"... elements. Notice that to make a choice, you have to click the actual radio button itself. Clicking the label does not make the choice.

The same example, slightly modified, with <LABEL> elements added to the radio buttons:

Make a choice:

Note that now clicking the text labels activates the radio buttons - the kind of behaviour seen in standard Windows based applications. Those radio buttons have had <LABEL> elements added to them, like so:

Make a choice:<BR>
<LABEL FOR="Red">Red : <INPUT TYPE="radio" NAME="Colour" VALUE="Red" ID="Red"></LABEL><BR>
<LABEL FOR="Blue">Blue : <INPUT TYPE="radio" NAME="Colour" VALUE="Blue" ID="Blue"></LABEL>

Note : If the <LABEL> element surrounds the control for which it is a label, then the focus marker (seen when the <LABEL> or control is clicked) will surround both elements. If the <LABEL> doesn't surround the control, then the focus marker will only be seen around the <LABEL> element.

The attributes for the <LABEL> element are:

ACCESSKEY
The ACCESSKEY attribute can be used to specify a shortcut key for the <LABEL> (activated by pressing 'Alt' and the ACCESSKEY together - like standard Windows applications menu shortcuts). The ACCESSKEY setting does not have to be a character in the actual label text and the label text is not modified in any way to reflect that an ACCESSKEY has been defined.

CLASS
The CLASS attribute is used to specify the <LABEL> element as using a particular style sheet class. See the Style Sheets topic for details.

DATAFLD
The DATAFLD attribute can be used to specify a data column name from the Data source (see DATASRC) that the <LABEL> is bound to. For more information on the DATAFLD attribute, see the Data Binding topic.

DATAFORMATAS
When the <LABEL> element is data-bound, it can accept straight text, or HTML from the data source. The DATAFORMATAS attribute should be set to "TEXT" or "HTML" accordingly. with DATAFORMATAS="HTML", the data provided for the <LABEL> element is parsed and rendered when it's displayed.
For more information on the DATAFORMATAS attribute, see the Data Binding topic.

DATASRC
The DATASRC attribute can be used to specify a data source that the <LABEL> is bound to. For more information on the DATASRC attribute, see the Data Binding topic.

FOR
The FOR attribute should directly reflect the ID attribute of the element which the <LABEL> is to be linked to. For example, in the above example, the two <LABEL> elements are linked to their respective radio buttons by their ID attributes. Note that the FOR attribute is theoretically unnecessary, if the <LABEL> element wraps the control it's a label for. Using the FOR attribute will ensure proper functionality though.

ID
The ID attribute can be used to either reference a unique style sheet identifier, or to provide a unique name for the <LABEL> element for scripting purposes. Any <LABEL> element with an ID attribute can be directly manipulated in script by referencing its ID attribute, rather than working through the All collection to determine the element. See the Scripting introduction topic for more information.

LANG
The LANG attribute can be used to specify what language the <LABEL> element is using. It accepts any valid ISO standard language abbreviation (for example "en" for English, "de" for German etc.) For more details, see the Document Localisation section for more details.

LANGUAGE
The LANGUAGE attribute can be used to expressly specify which scripting language Internet Explorer 4.0 uses to interpret any scripting information used in the <LABEL> element. It can accept values of vbscript, vbs, javascript or jscript. The first two specify the scripting language as Visual Basic Script, the latter two specify it as using Javascript (the default scripting language used if no LANGUAGE attribute is set.

STYLE
As well as using previously defined style sheet settings, the <LABEL> element can have in-line stylings attached to it. See the Style Sheets topic for details.

TITLE
The Internet Explorer 4.0 (and above) specific TITLE attribute is used for informational purposes. If present, the value of the TITLE attribute is presented as a ToolTip when the users mouse hovers over the <LABEL> section.

Every <LABEL> element in a document is an object that can be manipulated through scripting. Note that scripting of the <LABEL> element/object is only supported by Internet Explorer 4.0 in its Dynamic HTML object model. Netscape does not support direct scripting of the <LABEL> element at all.

<LABEL...> Properties
The <LABEL...> element/object supports all of the standard Dynamic HTML properties (i.e. className, document, id, innerHTML, innerText, isTextEdit, lang, language, offsetHeight, offsetLeft, offsetParent, offsetTop, offsetWidth, outerHTML, outerText, parentElement, parentTextEdit, sourceIndex, style, tagName and title). Details of these can be found in the standard Dynamic HTML properties topics.
Additionally, the <LABEL> element supports the accessKey, dataFld, dataFormatAs, dataSrc and htmlFor, which directly reflect their attribute values.

<LABEL...> Methods
The <LABEL...> element/object supports all of the standard Dynamic HTML methods (i.e. click, contains, getAttribute, insertAdjacentHTML, insertAdjacentText, removeAttribute, scrollIntoView and setAttribute). Details of these can be found in the standard Dynamic HTML Methods topics.

<LABEL...> Events
The <LABEL...> element/object supports all of the standard Dynamic HTML events (i.e. onclick, ondblclick, ondragstart, onfilterchange, onhelp, onkeydown, onkeypress, onkeyup, onmousedown, onmousemove, onmouseout, onmouseover, onmouseup and onselectstart). Details of these can be found in the standard Dynamic HTML events topics.

Note : The onclick event for the <LABEL> element occurs before it is propagated to the element referenced in the <LABEL> elements FOR attribute (htmlFor property).

© 1995-1998, Stephen Le Hunte


Tables

At present, the table HTML elements are :

<TABLE> - The Table delimiter
<TR ...> - Used to specify number of rows in a table
<TD ...> - Specifies table data cells
<TH ...> - Table Header cell
<CAPTION ...> - Specifies the table Caption

Internet Explorer has introduced support for various HTML 3.0 table elements. Those introduced are:

<THEAD> - specifies the Table head
<TBODY> - specifies the Table body
<TFOOT> - specifies the Table footer
<COLGROUP> - used to group column alignments
<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

For some table examples, see the examples page.

Tables and Style Sheets.
All table elements (in fitting with being allowed in the <BODY> of a HTML document) can have style sheet information applied to them. This means that they can take the CLASS, ID and STYLE attributes within the elements as well as having their own definitions within the <STYLE> settings in the <HEAD> element. There are special considerations for tables within the style sheet specification though. Some detail about this can be found in the Tables and Style Sheets topic.

© 1995-1998, Stephen Le Hunte


<TABLE>

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.

The <TABLE> element has the following attributes :

BORDER="value"
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 (i.e. allowing room for the border). It can also be given a value, i.e. BORDER=<value> which specifies the thickness that the table border should be displayed with. 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 described above)

CELLPADDING="value"
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

CELLSPACING="value"
The CELLSPACING is the amount of space inserted between individual table data cells. It defaults to an effective value of 2.

<TABLE BORDER="0" CELLSPACING="0" CELLPADDING="0">
gives the most compact table possible.

COLS="number of columns"
Both Netscape (4.0 and above) and Internet Explorer (3.01 and above) claim to support the <TABLE COLS="n"> attribute. The purpose of this attribute is to allow the browser to incrementally display large tables as the cell data is downloaded. It is part of the 'Complex Table Model' as defined in the W3C draft HTML 3 Tables draft specification. However, use of this attribute appears to do nothing in Internet Explorer or Netscape (Communicator preview 2). (It has been included here for completeness).

WIDTH="value or percent"
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.

HEIGHT="value or percent"
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.

ALIGN="left|right"
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 organise the text display so as to minimise poor formatting.

VALIGN="top|bottom|center"
The Internet Explorer and Netscape support 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 centre-aligned.)

BGCOLOR="#rrggbb|colour name"
Internet Explorer and Netscape support use of this attribute (also supported in the <BODY> element). It allows the background colour of the table to be specified, using either the specified colour names, or a rrggbb hex triplet.

BORDERCOLOR="#rrggbb|colour name"
Internet Explorer includes support for this attribute which sets the border colour of the table. Any of the pre-defined colour names can be used, as well as any colour defined by a rrggbb hex triplet. It is necessary for the BORDER attribute to be present in the main <TABLE> element for border colouring to work.

BORDERCOLORLIGHT="#rrggbb|colour name"
Internet Explorer allows use of the BORDERCOLORLIGHT attribute to set independently, the lighter colour to be displayed on a 3-dimensional table border. It is the opposite of BORDERCOLORDARK. Any of the pre-defined colour names can be used, as well as any colour defined by a rrggbb hex triplet. It is necessary for the BORDER attribute to be present in the main <TABLE> element for border colouring to work.

BORDERCOLORDARK="#rrggbb|colour name"
Internet Explorer allows use of the BORDERCOLORDARK attribute to set independently, the darker colour to be displayed on a 3-dimensional table border. It is the opposite of BORDERCOLORLIGHT. Any of the pre-defined colour names can be used, as well as any colour defined by a rrggbb hex triplet. It is necessary for the BORDER attribute to be present in the main <TABLE> element for border colouring to work.

NOTE : The BGCOLOR, BORDERCOLOR, BORDERCOLORLIGHT and BORDERCOLORDARK attributes can also be used in <TH>, <TR> and <TD> elements, with the colour defined in the last element over-riding those defined before. E.g. if a <TD> element contains a BORDERCOLOR attribute setting, the setting specified will be used instead of any colour settings that may have been specified in the <TR> element, which in turn over-rides any colour settings in the <TABLE> element.

BACKGROUND="URL of image"
Internet Explorer and Netscape support 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.

FRAME
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. I.e. 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 (i.e. top, bottom, left and right hand sides)

RULES
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.

TITLE="informational ToolTip"
The Internet Explorer 4.0 (and above) specific TITLE attribute is used for informational purposes. If present, the value of the TITLE attribute is presented as a ToolTip when the users mouse hovers over the <TABLE> section.

LANG="language setting"
The LANG attribute can be used to specify what language the <TABLE> element is using. It accepts any valid ISO standard language abbreviation (for example "en" for English, "de" for German etc.) For more details, see the Document Localisation section for more details.

LANGUAGE="Scripting language"
The LANGUAGE attribute can be used to expressly specify which scripting language Internet Explorer 4.0 uses to interpret any scripting information used in the <TABLE> element. It can accept values of vbscript, vbs, javascript or jscript. The first two specify the scripting language as Visual Basic Script, the latter two specify it as using Javascript (the default scripting language used if no LANGUAGE attribute is set.

CLASS="Style Sheet class name"
The CLASS attribute is used to specify the <TABLE> element as using a particular style sheet class. See the Style Sheets topic for details.

STYLE="In line style setting"
As well as using previously defined style sheet settings, the <TABLE> element can have in-line stylings attached to it. See the Style Sheets topic for details.

ID="Unique element identifier"
The ID attribute can be used to either reference a unique style sheet identifier, or to provide a unique name for the <TABLE> element for scripting purposes. Any <TABLE> element with an ID attribute can be directly manipulated in script by referencing its ID attribute, rather than working through the All collection to determine the element. See the Scripting introduction topic for more information.

DATAPAGESIZE="Number of records to show"
The DATAPAGESIZE attribute specifies how many records will be displayed at any one time when the <TABLE> is set up as a repeating data-bound table. For more information, see the Data Binding topic.

DATASRC="Data Source"
The DATASRC attribute is used to specify which data source provider the table is using to gather its data. For more information, see the Data Binding topic.

DATAFLD="Column Name"
The DATAFLD attribute specifies which column of the data source is to be used to provide the data for the table. For more information, see the Data Binding topic.

Every <TABLE> element in a document is an object that can be manipulated through scripting. Note that scripting of the <TABLE> element/object is only supported by Internet Explorer 4.0 in its Dynamic HTML object model. Netscape does not support direct scripting of the <TABLE> element at all.

<TABLE...> Properties
Of the standard Dynamic HTML properties, the <TABLE...> element/object supports the following: className, document, id, innerText, isTextEdit, lang, language, offsetHeight, offsetLeft, offsetParent, offsetTop, offsetWidth, outerText, parentElement, parentTextEdit, sourceIndex, style, tagName and title). Details of these can be found in the standard Dynamic HTML properties topics.
The <TABLE> element also supports the following properties, all of which directly reflect their attribute values: align, background, bgColor, border, borderColor, borderColorDark, borderColorLight, cellPadding, cellSpacing, cols, dataFld, dataPageSize, dataSrc, frame, height, rules and width.

caption
The caption property contains a reference to the <TABLE> elements <CAPTION> element if one exists.

clientHeight
The clientHeight property reflects the height (in pixels) of the contents of the <CAPTION> element.

clientWidth
The clientWidth property reflects the width (in pixels) of the contents of the <CAPTION> element.

scrollHeight
The scrollHeight property reflects the contents of the <TABLE> elements total scrollable height (in pixels).

scrollLeft
The scrollLeft property reflects a value representing the distance between the left-most edge of the element and the left-most visible edge of the element. While the contents of the <TABLE> element are totally visible on the screen, the scrollLeft property is 0, only increasing if the left-most edge of the <TABLE> elements contents are scrolled off the left hand edge of the current viewing window.

scrollTop
The scrollTop property returns a value that represents the distance between the top-most edge of the element and the top-most edge of the current viewing window. When used with the <TABLE> element, the scrollTop property is a value indicative of the extent to which the referenced element has been scrolled vertically. If the contents of the <TABLE> element are visible, then the scrollTop property will be 0, only increasing as the contents of the element are scrolled off the top of the current viewing window.

scrollWidth
Like the scrollHeight property, the scrollWidth property reflects a value that represents the total scrollable width of the contents of the <TABLE> element.

<TABLE...> Methods
The <TABLE...> element/object supports all of the standard Dynamic HTML methods (i.e. click, contains, getAttribute, insertAdjacentHTML, insertAdjacentText, removeAttribute, scrollIntoView and setAttribute). Details of these can be found in the standard Dynamic HTML Methods topics.
The <TABLE> element also supports the following method:

blur
The blur event can be used to force the users focus away from the referenced <TABLE> element, firing the onblur event.

createCaption
The createCaption method can be used to create a <CAPTION> element for the referenced <TABLE> element. If one already exists, then the method returns a pointer to it. For example:

elCaption=document.all("tblExample").createCaption()

would create and empty <CAPTION> element for the <TABLE> element referenced by ...all("tblExample"). This new <CAPTION> element can then be manipulated using the various methods and properties of the <CAPTION> element (see that element for details).

createTFoot
The createTFoot method can be used to create a <TFOOT> element for the referenced <TABLE> element. If one already exists, then the method returns a pointer to it. For example:

elTFoot=document.all("tblExample").createTFoot()

would create and empty <TFOOT> element for the <TABLE> element referenced by ...all("tblExample"). This new <TFOOT> element can then be manipulated using the various methods and properties of the <TFOOT> element (see that element for details).

createTHead
The createTHead method can be used to create a <THEAD> element for the referenced <TABLE> element. If one already exists, then the method returns a pointer to it. For example:

elTHead=document.all("tblExample").createTHead()

would create and empty <THEAD> element for the <TABLE> element referenced by ...all("tblExample"). This new <THEAD> element can then be manipulated using the various methods and properties of the <THEAD> element (see that element for details).

deleteCaption
The deleteCaption method can be used to delete an existing <CAPTION> element for the referenced <TABLE> element (either one that is there in the document source, or one created with the createCaption method. For example:

document.all("tblExample").deleteCaption()

deletes the existing (or created) <CAPTION> element for the <TABLE> element referenced by ...all("tblExample").

deleteRow
The deleteRow method deletes the row referenced by the index argument for the referenced <TABLE> element, also removing it from the Rows Collection for the <TABLE> element. Note that when using the deleteRow method for the <TABLE> element, the rowIndex property of the <TR> element to be deleted must be used. For example:

document.all("tblExample").deleteRow(1)

would delete the second <TR> element contained in the <TABLE> element, whether it's in a <THEAD>, <TBODY>, or <TFOOT> section of the <TABLE>

deleteTFoot
The deleteTFoot method can be used to delete an existing <TFOOT> element for the referenced <TABLE> element (either one that is there in the document source, or one created with the createTFoot method. For example:

document.all("tblExample").deleteTFoot()

deletes the existing (or created) <TFOOT> element for the <TABLE> element referenced by ...all("tblExample").

deleteTHead
The deleteTHead method can be used to delete an existing <THEAD> element for the referenced <TABLE> element (either one that is there in the document source, or one created with the createTHead method. For example:

document.all("tblExample").deleteTHead()

deletes the existing (or created) <THEAD> element for the <TABLE> element referenced by ...all("tblExample").

insertRow
The insertRow method inserts a new <TR> element into the referenced <TABLE> element. It can take an optional index argument which should specify where in the <TABLE> the new row is to be inserted. Note that inserting a new row into a <TABLE> element also inserts it into the Rows Collection for the <TABLE> element. For example:

rowNew=document.all("tblExample").insertRow(3)

inserts a new fourth row into the main <TABLE> element, which may impact the Rows Collection for the <THEAD>, <TBODY>, or <TFOOT> elements, depending on the number of rows in each section.

focus
The focus method can be used to pass the users focus to the referenced <TABLE> element, forcing the onfocus event to fire.

nextPage
The nextPage re-renders the <TABLE> with the next block of data records (the size being set by the DATAPAGESIZE attribute), if the <TABLE> has been set up as a data-bound repeating table. For more information, see the Data Binding topic.

previousPage
The previousPage method will display the 'previous' block of records, if the table is a data-bound repeating table. For more information, see the Data Binding topic.

refresh
The refresh method causes the table (and its data) to be refreshed, if the table is a data-bound, repeating table. For more information, see the Data Binding topic.

<TABLE...> Events
The <TABLE...> element/object supports all of the standard Dynamic HTML events (i.e. onclick, ondblclick, ondragstart, onfilterchange, onhelp, onkeydown, onkeypress, onkeyup, onmousedown, onmousemove, onmouseout, onmouseover, onmouseup and onselectstart). Details of these can be found in the standard Dynamic HTML events topics.
Additionally, the <TABLE> element supports the following events:

onafterupdate
The onafterupdate event is fired after data is transferred from the element to the data provider and will only fire after the onbeforeupdate event has fired and was successful. For more information on Data Binding, see the Data Binding topic.

onbeforeupdate
onbeforeupdate fires when a data bound element loses the focus, or the current document is unloaded and will only fire if the value of the element is different to the original value that was present when the element received the users focus. Note that onbeforeupdate is a cancelable event (setting returnValue=false for the Event object), which allows the document /script author a chance to validate the new data entered by the user on the client-side, before sending the data to the data provider. For more information on Data Binding, see the Data Binding topic.

onblur
When the referenced <TABLE> element loses the users focus, the onblur event is fired, executing any script events that are attached to it.

onfocus
When the user passes the focus to any <TABLE> element, the onfocus event is fired for that element.

onresize
The onresize event is fired whenever the contents of the <TABLE> element are resized, by window movement, or dynamically through scripting.

onrowenter
The onrowenter event fires on the data source control when the current record has been changed, so new data is available to populate the HTML display elements that are bound to the data source. Somewhat confusingly, this will typically happen after the onrowexit event has been fired. For more information on Data Binding, see the Data Binding topic.

onrowexit
The onrowexit event is fired immediately before the data source changes the current record (i.e. when the user has requested another record, or set of records by pressing a button perhaps). Note that unlike the anafterupdate and onbeforeupdate events, onrowexit is fired by the data source, not any of the HTML elements used to display the data. Changes to the data in the HTML elements should have been transferred to the data source (with validation being taken care of in the on*update events). onrowexit will also fire if the record position is changed through scripting. For more information on Data Binding, see the Data Binding topic.

© 1995-1998, Stephen Le Hunte


<TR>

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.

ALIGN="left|center|right"
This controls whether text inside the table cell(s) is aligned to the left, right or centre of the cell.

VALIGN="top|middle|bottom|baseline"
This attribute controls whether text inside the table cell(s) is aligned to the top, bottom, or vertically centred within the cell. It can also specify that all the cells in the row should be vertically aligned to the same baseline.

BGCOLOR="#rrggbb|colour name"
Internet Explorer and Netscape support use of this attribute (also supported in the <BODY> element). It allows the background colour of the table to be specified, using either the specified colour names, or a rrggbb hex triplet.

BORDERCOLOR="#rrggbb|colour name"
Internet Explorer includes support for this attribute which sets the border colour of the row. Any of the pre-defined colour names can be used, as well as any colour defined by a rrggbb hex triplet. It is necessary for the BORDER attribute to be present in the main <TABLE> element for border colouring to work.

BORDERCOLORLIGHT="#rrggbb|colour name"
Internet Explorer allows use of the BORDERCOLORLIGHT attribute to set independently, the lighter colour to be displayed on a 3-dimensional row border. It is the opposite of BORDERCOLORDARK. Any of the pre-defined colour names can be used, as well as any colour defined by a rrggbb hex triplet. It is necessary for the BORDER attribute to be present in the main <TABLE> element for border colouring to work.

BORDERCOLORDARK="#rrggbb|colour name"
Internet Explorer allows use of the BORDERCOLORDARK attribute to set independently, the darker colour to be displayed on a 3-dimensional row border. It is the opposite of BORDERCOLORLIGHT. Any of the pre-defined colour names can be used, as well as any colour defined by a rrggbb hex triplet. It is necessary for the BORDER attribute to be present in the main <TABLE> element for border colouring to work.

BACKGROUND="URL of image"
Netscape supports the placing of images inside the <TR> element. (Also in the <TABLE>, and <TH> elements) If used in the <TR> element, the image in question will be tiled behind the entire table row. Any of the supported graphic file formats can be used as a graphic behind a table row.

NOTE : The BGCOLOR, BORDERCOLOR, BORDERCOLORLIGHT and BORDERCOLORDARK attributes can also be used in <TABLE>, <TH> and <TD> elements, with the colour defined in the last element over-riding those defined before. E.g. if a <TD> element contains a BORDERCOLOR attribute setting, the setting specified will be used instead of any colour settings that may have been specified in the <TR> element, which in turn over-rides any colour settings in the <TABLE> element.

TITLE="informational ToolTip"
The Internet Explorer 4.0 (and above) specific TITLE attribute is used for informational purposes. If present, the value of the TITLE attribute is presented as a ToolTip when the users mouse hovers over the <TR> section.

LANG="language setting"
The LANG attribute can be used to specify what language the <TR> element is using. It accepts any valid ISO standard language abbreviation (for example "en" for English, "de" for German etc.) For more details, see the Document Localisation section for more details.

LANGUAGE="Scripting language"
The LANGUAGE attribute can be used to expressly specify which scripting language Internet Explorer 4.0 uses to interpret any scripting information used in the <TR> element. It can accept values of vbscript, vbs, javascript or jscript. The first two specify the scripting language as Visual Basic Script, the latter two specify it as using Javascript (the default scripting language used if no LANGUAGE attribute is set.

CLASS="Style Sheet class name"
The CLASS attribute is used to specify the <TR> element as using a particular style sheet class. See the Style Sheets topic for details.

STYLE="In line style setting"
As well as using previously defined style sheet settings, the <TR> element can have in-line stylings attached to it. See the Style Sheets topic for details.

ID="Unique element identifier"
The ID attribute can be used to either reference a unique style sheet identifier, or to provide a unique name for the <TR> element for scripting purposes. Any <TR> element with an ID attribute can be directly manipulated in script by referencing its ID attribute, rather than working through the All collection to determine the element. See the Scripting introduction topic for more information.

Every <TR> element in a document is an object that can be manipulated through scripting. Note that scripting of the <TR> element/object is only supported by Internet Explorer 4.0 in its Dynamic HTML object model. Netscape does not support direct scripting of the <TR> element at all.

<TR...> Properties
Of the standard Dynamic HTML properties, the <TR...> element/object supports the following: className, document, id, isTextEdit, lang, language, offsetHeight, offsetLeft, offsetParent, offsetTop, offsetWidth, outerText, parentElement, parentTextEdit, sourceIndex, style, tagName and title. Details of these can be found in the standard Dynamic HTML properties topics.
<TR> also supports the following properties, which directly reflect attributes of the <TD> element: align, background, bgColor, borderColorDark, borderColorLight and vAlign and:

rowIndex
The rowIndex property returns the referenced <TR> elements index in the Rows Collection for the main <TABLE> element, which is subtly different to the sectionRowIndex property (see below).

sectionRowIndex
The sectionRowIndex property returns the referenced <TR> elements index in the Rows Collection for either the <THEAD>, <TBODY>, or <TFOOT> element. Note that the referenced <TR> element can only have a sectionRowIndex property in one of the <THEAD>, <TBODY> or <TFOOT> sections, but will always have a rowIndex (see above) property value for its position in the Rows Collection for the main <TABLE>.

<TR...> Methods
Of the standard Dynamic HTML methods, the <TR...> element/object supports the following: click, contains, getAttribute, removeAttribute, scrollIntoView and setAttribute). Details of these can be found in the standard Dynamic HTML Methods topics. Additionally, the <TD> element supports:

blur
The blur event can be used to force the users focus away from the referenced <TR> element, firing the onblur event.

deleteCell
The deleteCell method deletes a given <TD> element from the referenced Cells Collection for the referenced <TR> element. The index, if used, should be the cellIndex of the <TD> element to be deleted from the <TR>. If no index is given, the last cell in the Cells Collection referenced, will be deleted. For example:

document.all("tblExample").rows(2).deleteCell(1)

would delete the second <TD> element contained in the third <TR> element of the <TABLE> element, referenced by tblExample

focus
The focus method can be used to pass the users focus to the referenced <TR> element, forcing the onfocus event to fire.

insertCell
The insertCell method inserts a new <TD> element into the referenced <TR> (row) element. For example:

cellNew=document.all("tblExample").rows("rowMain").insertCell(1)

would insert a new <TD> element into the <TR> element referenced by rowMain

<TR...> Events
The <TR...> element/object supports all of the standard Dynamic HTML events (i.e. onclick, ondblclick, ondragstart, onfilterchange, onhelp, onkeydown, onkeypress, onkeyup, onmousedown, onmousemove, onmouseout, onmouseover, onmouseup and onselectstart). Details of these can be found in the standard Dynamic HTML events topics. Also, the <TR> element supports:

onafterupdate
The onafterupdate event is fired after data is transferred from the element to the data provider and will only fire after the onbeforeupdate event has fired and was successful. For more information on Data Binding, see the Data Binding topic.

onbeforeupdate
onbeforeupdate fires when a data bound element loses the focus, or the current document is unloaded and will only fire if the value of the element is different to the original value that was present when the element received the users focus. Note that onbeforeupdate is a cancelable event (setting returnValue=false for the Event object), which allows the document /script author a chance to validate the new data entered by the user on the client-side, before sending the data to the data provider. For more information on Data Binding, see the Data Binding topic.

onblur
When the referenced <TR> element loses the users focus, the onblur event is fired, executing any script events that are attached to it.

onfocus
When the user passes the focus to any <TR> element, the onfocus event is fired for that element.

onresize
The onresize event is fired whenever the contents of the <TR> element are resized, by window movement, or dynamically through scripting.

onrowenter
The onrowenter event fires on the data source control when the current record has been changed, so new data is available to populate the HTML display elements that are bound to the data source. Somewhat confusingly, this will typically happen after the onrowexit event has been fired. For more information on Data Binding, see the Data Binding topic.

onrowexit
The onrowexit event is fired immediately before the data source changes the current record (i.e. when the user has requested another record, or set of records by pressing a button perhaps). Note that unlike the anafterupdate and onbeforeupdate events, onrowexit is fired by the data source, not any of the HTML elements used to display the data. Changes to the data in the HTML elements should have been transferred to the data source (with validation being taken care of in the on*update events). onrowexit will also fire if the record position is changed through scripting. For more information on Data Binding, see the Data Binding topic.

© 1995-1998, Stephen Le Hunte


<TD>

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.

<TD ...> ... </TD> can accept the following attributes.

ALIGN="left|center|right"
This attribute controls whether text inside the table cell(s) is aligned to the left, right or centred within the cell.

VALIGN="top|middle|bottom|baseline"
The VALIGN attribute controls whether text inside the table cell(s) is aligned to the top, bottom, or vertically centred within the cell. It can also specify that all the cells in the row should be vertically aligned to the same baseline.

WIDTH="value_or_percent"
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, so it is good practice to specify all data cells in the same column as having the same width, if the attribute is set at all.

HEIGHT="value_or_percent"
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.

NOTE : Netscape supports use of the WIDTH="value%" and "pixel_value" for this element (it only supports the HEIGHT="%value" attribute for the main <TABLE> element). Internet Explorer supports both percentage and pixel values for both the HEIGHT and WIDTH attributes.
For WIDTH="%value" settings, the WIDTH="%value" also needs to be set in the main <TABLE> element and the cell/header columns (affected by any cell with a WIDTH="%value" setting) will be scaled as a percentage of the table width (which would be scaled as a percentage of the browser window). Also, for WIDTH="value" settings, the table will only be sized to the maximum extent of the browser window width (with cells/headers being scaled accordingly), unless the WIDTH="value" setting is used in the main <TABLE> element, set to the combined size of the cells/headers.
For HEIGHT="%value" settings, the cell (and any rows it is part of) will be rendered as the percentage of the browser window, regardless of any HEIGHT settings in the main <TABLE>. If only one cell has a WIDTH or HEIGHT attribute set, then that setting is used for all the columns/rows of the table that the cell is part of. If more than one cell in a row or column have WIDTH or HEIGHT attributes set, then the largest setting of all the constituent data cells will be used for the entire row/column of the table.

NOWRAP
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.

COLSPAN="value"
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.

ROWSPAN="value"
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.

BGCOLOR="#rrggbb|colour name"
Internet Explorer and Netscape support use of this attribute (also supported in the <BODY> element). It allows the background colour of the data cell to be specified, using either the specified colour names, or a rrggbb hex triplet.

BORDERCOLOR="#rrggbb|colour name"
Internet Explorer includes support for this attribute which sets the border colour of the data cell. Any of the pre-defined colour names can be used, as well as any colour defined by a rrggbb hex triplet. It is necessary for the BORDER attribute to be present in the main <TABLE> element for border colouring to work.

BORDERCOLORLIGHT="#rrggbb|colour name"
Internet Explorer allows use of the BORDERCOLORLIGHT attribute to set independently, the lighter colour to be displayed on a 3-dimensional data cell border. It is the opposite of BORDERCOLORDARK. Any of the pre-defined colour names can be used, as well as any colour defined by a rrggbb hex triplet. It is necessary for the BORDER attribute to be present in the main <TABLE> element for border colouring to work.

BORDERCOLORDARK="#rrggbb|colour name"
Internet Explorer allows use of the BORDERCOLORDARK attribute to set independently, the darker colour to be displayed on a 3-dimensional data cell border. It is the opposite of BORDERCOLORLIGHT. Any of the pre-defined colour names can be used, as well as any colour defined by a rrggbb hex triplet. It is necessary for the BORDER attribute to be present in the main <TABLE> element for border colouring to work.

NOTE : The BGCOLOR, BORDERCOLOR, BORDERCOLORLIGHT and BORDERCOLORDARK attributes can also be used in <TABLE>, <TH> and <TR> elements, with the colour defined in the last element over-riding those defined before. E.g. if a <TD> element contains a BORDERCOLOR attribute setting, the setting specified will be used instead of any colour settings that may have been specified in the <TR> element, which in turn over-rides any colour settings in the <TABLE> element.

BACKGROUND="URL of image"
Internet Explorer and Netscape support the placing of images inside the <TD> element. (Also in the <TABLE>, 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.

TITLE="informational ToolTip"
The Internet Explorer 4.0 (and above) specific TITLE attribute is used for informational purposes. If present, the value of the TITLE attribute is presented as a ToolTip when the users mouse hovers over the <TD> section.

LANG="language setting"
The LANG attribute can be used to specify what language the <TD> element is using. It accepts any valid ISO standard language abbreviation (for example "en" for English, "de" for German etc.) For more details, see the Document Localisation section for more details.

LANGUAGE="Scripting language"
The LANGUAGE attribute can be used to expressly specify which scripting language Internet Explorer 4.0 uses to interpret any scripting information used in the <TD> element. It can accept values of vbscript, vbs, javascript or jscript. The first two specify the scripting language as Visual Basic Script, the latter two specify it as using Javascript (the default scripting language used if no LANGUAGE attribute is set.

CLASS="Style Sheet class name"
The CLASS attribute is used to specify the <TD> element as using a particular style sheet class. See the Style Sheets topic for details.

STYLE="In line style setting"
As well as using previously defined style sheet settings, the <TD> element can have in-line stylings attached to it. See the Style Sheets topic for details.

ID="Unique element identifier"
The ID attribute can be used to either reference a unique style sheet identifier, or to provide a unique name for the <TD> element for scripting purposes. Any <TD> element with an ID attribute can be directly manipulated in script by referencing its ID attribute, rather than working through the All collection to determine the element. See the Scripting introduction topic for more information.

Every <TD> element in a document is an object that can be manipulated through scripting. Note that scripting of the <TD> element/object is only supported by Internet Explorer 4.0 in its Dynamic HTML object model. Netscape does not support direct scripting of the <TD> element at all.

<TD...> Properties
Of the standard Dynamic HTML properties, the <TD...> element/object supports the following: className, document, id, innerText, isTextEdit, lang, language, offsetHeight, offsetLeft, offsetParent, offsetTop, offsetWidth, outerText, parentElement, parentTextEdit, sourceIndex, style, tagName and title. Details of these can be found in the standard Dynamic HTML properties topics.
<TD> also supports the following properties, which directly reflect attributes of the <TD> element: align, background, bgColor, borderColor, borderColorDark, borderColorLight, colSpan, height, noWrap, rowSpan, vAlign and width; and also supports:

cellIndex
The cellIndex property returns the index of the referenced <TD> elements position in the Cells Collection for a given row. If a cell spans several rows (using the ROWSPAN attribute), it only has a cellIndex property in the first row in which it is contained.

clientHeight
The clientHeight property reflects the height (in pixels) of the contents of the <TD> element.

clientWidth
The clientWidth property reflects the width (in pixels) of the contents of the <TD> element.

<TD...> Methods
The <TD...> element/object supports all of the standard Dynamic HTML methods (i.e. click, contains, getAttribute, insertAdjacentHTML, insertAdjacentText, removeAttribute, scrollIntoView and setAttribute). Details of these can be found in the standard Dynamic HTML Methods topics.
Additionally, the <TD> element supports:

blur
The blur event can be used to force the users focus away from the referenced <TD> element, firing the onblur event.

focus
The focus method can be used to pass the users focus to the referenced <TD> element, forcing the onfocus event to fire.

<TD...> Events
The <TD...> element/object supports all of the standard Dynamic HTML events (i.e. onclick, ondblclick, ondragstart, onfilterchange, onhelp, onkeydown, onkeypress, onkeyup, onmousedown, onmousemove, onmouseout, onmouseover, onmouseup and onselectstart). Details of these can be found in the standard Dynamic HTML events topics.
Also, the <TD> element supports:

onafterupdate
The onafterupdate event is fired after data is transferred from the element to the data provider and will only fire after the onbeforeupdate event has fired and was successful. For more information on Data Binding, see the Data Binding topic.

onbeforeupdate
onbeforeupdate fires when a data bound element loses the focus, or the current document is unloaded and will only fire if the value of the element is different to the original value that was present when the element received the users focus. Note that onbeforeupdate is a cancelable event (setting returnValue=false for the Event object), which allows the document /script author a chance to validate the new data entered by the user on the client-side, before sending the data to the data provider. For more information on Data Binding, see the Data Binding topic.

onblur
When the referenced <TD> element loses the users focus, the onblur event is fired, executing any script events that are attached to it.

onfocus
When the user passes the focus to any <TD> element, the onfocus event is fired for that element.

onresize
The onresize event is fired whenever the contents of the <TD> element are resized, by window movement, or dynamically through scripting.

onrowenter
The onrowenter event fires on the data source control when the current record has been changed, so new data is available to populate the HTML display elements that are bound to the data source. Somewhat confusingly, this will typically happen after the onrowexit event has been fired. For more information on Data Binding, see the Data Binding topic.

onrowexit
The onrowexit event is fired immediately before the data source changes the current record (i.e. when the user has requested another record, or set of records by pressing a button perhaps). Note that unlike the anafterupdate and onbeforeupdate events, onrowexit is fired by the data source, not any of the HTML elements used to display the data. Changes to the data in the HTML elements should have been transferred to the data source (with validation being taken care of in the on*update events). onrowexit will also fire if the record position is changed through scripting. For more information on Data Binding, see the Data Binding topic.

© 1995-1998, Stephen Le Hunte


<TH>

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:

ALIGN="left|center|right"
This attribute controls whether text inside the table header is aligned to the left, right or centred within the cell.

VALIGN="top|middle|bottom|baseline"
The VALIGN attribute controls whether text inside the table header is aligned to the top, bottom, or vertically centred within the cell.

WIDTH="value_or_percent"
If used, this attribute can specify either the exact width of the header cell in pixels, or the width of the header cell as a percentage of the table being displayed. Only one header cell can set the width for an entire column, so it is good practice to specify all header cells in the same column as having the same width, if the attribute is set at all.

HEIGHT="value_or_percent"
If used, this attribute can specify either the exact height of the header cell in pixels, or the height of the header cell as a percentage of the browser display window. Only one header cell can set the height for an entire row.

NOTE : Netscape supports use of the WIDTH="value%" and "pixel_value" for this element (it only supports the HEIGHT="%value" attribute for the main <TABLE> element). Internet Explorer supports both percentage and pixel values for both the HEIGHT and WIDTH attributes.
For WIDTH="%value" settings, the WIDTH="%value" also needs to be set in the main <TABLE> element and the headers/cells columns (affected by any header with a WIDTH="%value" setting) will be scaled as a percentage of the table width (which would be scaled as a percentage of the browser window). Also, for WIDTH="value" settings, the table will only be sized to the maximum extent of the browser window width (with headers/cells being scaled accordingly), unless the WIDTH="value" setting is used in the main <TABLE> element, set to the combined size of the headers/cells.
For HEIGHT="%value" settings, the header (and any rows it is part of) will be rendered as the percentage of the browser window, regardless of any HEIGHT settings in the main <TABLE>. If only one header has a WIDTH or HEIGHT attribute set, then that setting is used for all the columns/rows of the table that the header is part of. If more than one header in a row or column have WIDTH or HEIGHT attributes set, then the largest setting of all the constituent headers/cells will be used for the entire row/column of the table. <TH> WIDTHs are also affected by any subsequent <TD> WIDTH settings, with the largest setting of the <TH> and <TD> elements being used for the entire column of the table.

NOWRAP
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.

COLSPAN="value"
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.

ROWSPAN="value"
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.

BGCOLOR="#rrggbb|colour name"
Internet Explorer and Netscape support use of this attribute (also supported in the <BODY> element). It allows the background colour of the header cell to be specified, using either the specified colour names, or a rrggbb hex triplet.

BORDERCOLOR="#rrggbb|colour name"
Internet Explorer includes support for this attribute which sets the border colour of the header cell. Any of the pre-defined colour names can be used, as well as any colour defined by a rrggbb hex triplet. It is necessary for the BORDER attribute to be present in the main <TABLE> element for border colouring to work.

BORDERCOLORLIGHT="#rrggbb|colour name"
Internet Explorer allows use of the BORDERCOLORLIGHT attribute to set independently, the lighter colour to be displayed on a 3-dimensional header cell border. It is the opposite of BORDERCOLORDARK. Any of the pre-defined colour names can be used, as well as any colour defined by a rrggbb hex triplet. It is necessary for the BORDER attribute to be present in the main <TABLE> element for border colouring to work.

BORDERCOLORDARK="#rrggbb|colour name"
Internet Explorer allows use of the BORDERCOLORDARK attribute to set independently, the darker colour to be displayed on a 3-dimensional header cell border. It is the opposite of BORDERCOLORLIGHT. Any of the pre-defined colour names can be used, as well as any colour defined by a rrggbb hex triplet. It is necessary for the BORDER attribute to be present in the main <TABLE> element for border colouring to work.

NOTE : The BGCOLOR, BORDERCOLOR, BORDERCOLORLIGHT and BORDERCOLORDARK attributes can also be used in <TABLE>, <TD> and <TR> elements, with the colour defined in the last element over-riding those defined before. E.g. if a <TD> element contains a BORDERCOLOR attribute setting, the setting specified will be used instead of any colour settings that may have been specified in the <TR> element, which in turn over-rides any colour settings in the <TABLE> element.

BACKGROUND="URL of image"
Internet Explorer and Netscape support the placing of images inside the <TH> element. (Also in the <TABLE>, and <TD> 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.

TITLE="informational ToolTip"
The Internet Explorer 4.0 (and above) specific TITLE attribute is used for informational purposes. If present, the value of the TITLE attribute is presented as a ToolTip when the users mouse hovers over the <TH> section.

LANG="language setting"
The LANG attribute can be used to specify what language the <TH> element is using. It accepts any valid ISO standard language abbreviation (for example "en" for English, "de" for German etc.) For more details, see the Document Localisation section for more details.

LANGUAGE="Scripting language"
The LANGUAGE attribute can be used to expressly specify which scripting language Internet Explorer 4.0 uses to interpret any scripting information used in the <TH> element. It can accept values of vbscript, vbs, javascript or jscript. The first two specify the scripting language as Visual Basic Script, the latter two specify it as using Javascript (the default scripting language used if no LANGUAGE attribute is set.

CLASS="Style Sheet class name"
The CLASS attribute is used to specify the <TH> element as using a particular style sheet class. See the Style Sheets topic for details.

STYLE="In line style setting"
As well as using previously defined style sheet settings, the <TH> element can have in-line stylings attached to it. See the Style Sheets topic for details.

ID="Unique element identifier"
The ID attribute can be used to either reference a unique style sheet identifier, or to provide a unique name for the <TH> element for scripting purposes. Any <TH> element with an ID attribute can be directly manipulated in script by referencing its ID attribute, rather than working through the All collection to determine the element. See the Scripting introduction topic for more information.

Every <TH> element in a document is an object that can be manipulated through scripting. Note that scripting of the <TH> element/object is only supported by Internet Explorer 4.0 in its Dynamic HTML object model. Netscape does not support direct scripting of the <TH> element at all.

<TH...> Properties
Of the standard Dynamic HTML properties, the <TH...> element/object supports the following: className, document, id, isTextEdit, lang, language, offsetHeight, offsetLeft, offsetParent, offsetTop, offsetWidth, parentElement, parentTextEdit, sourceIndex, style, tagName and title. Details of these can be found in the standard Dynamic HTML properties topics.
Additionally, the <TH> element supports the following properties, all of which directly reflect attribute values: align, background, bgColor, borderColor, borderColorDark, borderColorLight, colSpan, noWrap, rowSpan and vAlign.

<TH...> Methods
Of the standard Dynamic HTML methods, the <TH...> element/object supports the following: click, contains, getAttribute, removeAttribute, scrollIntoView and setAttribute. Details of these can be found in the standard Dynamic HTML Methods topics.

<TH...> Events
The <TH...> element/object supports all of the standard Dynamic HTML events (i.e. onclick, ondblclick, ondragstart, onfilterchange, onhelp, onkeydown, onkeypress, onkeyup, onmousedown, onmousemove, onmouseout, onmouseover, onmouseup and onselectstart). Details of these can be found in the standard Dynamic HTML events topics.

© 1995-1998, Stephen Le Hunte


<CAPTION>

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 centred with respect to the table, and the may have their lines broken to fit within the width of the table.

The <CAPTION> element can accept the following attributes:

ALIGN="top|bottom|left|center|right"
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.

VALIGN="top|bottom"
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.

TITLE="informational ToolTip"
The Internet Explorer 4.0 (and above) specific TITLE attribute is used for informational purposes. If present, the value of the TITLE attribute is presented as a ToolTip when the users mouse hovers over the <CAPTION> section.

LANG="language setting"
The LANG attribute can be used to specify what language the <CAPTION> element is using. It accepts any valid ISO standard language abbreviation (for example "en" for English, "de" for German etc.) For more details, see the Document Localisation section for more details.

LANGUAGE="Scripting language"
The LANGUAGE attribute can be used to expressly specify which scripting language Internet Explorer 4.0 uses to interpret any scripting information used in the <CAPTION> element. It can accept values of vbscript, vbs, javascript or jscript. The first two specify the scripting language as Visual Basic Script, the latter two specify it as using Javascript (the default scripting language used if no LANGUAGE attribute is set.

CLASS="Style Sheet class name"
The CLASS attribute is used to specify the <CAPTION> element as using a particular style sheet class. See the Style Sheets topic for details.

STYLE="In line style setting"
As well as using previously defined style sheet settings, the <CAPTION> element can have in-line stylings attached to it. See the Style Sheets topic for details.

ID="Unique element identifier"
The ID attribute can be used to either reference a unique style sheet identifier, or to provide a unique name for the <CAPTION> element for scripting purposes. Any <CAPTION> element with an ID attribute can be directly manipulated in script by referencing its ID attribute, rather than working through the All collection to determine the element. See the Scripting introduction topic for more information.

Every <CAPTION> element in a document is an object that can be manipulated through scripting. Note that scripting of the <CAPTION> element/object is only supported by Internet Explorer 4.0 in its Dynamic HTML object model. Netscape does not support direct scripting of the <CAPTION> element at all.

<CAPTION...> Properties
Of the standard Dynamic HTML properties, the <CAPTION...> element/object supports the following: className, document, id, innerText, isTextEdit, lang, language, offsetHeight, offsetLeft, offsetParent, offsetTop, offsetWidth, outerText, parentElement, parentTextEdit, sourceIndex, style, tagName and title. Details of these can be found in the standard Dynamic HTML properties topics.
The <CAPTION> element also supports the following properties:

align
The align property reflects (or sets) the value of the ALIGN attribute described above.

clientHeight
The clientHeight property reflects the height (in pixels) of the contents of the <CAPTION> element.

clientWidth
The clientWidth property reflects the width (in pixels) of the contents of the <CAPTION> element.

vAlign
The vAlign property reflects (or sets) the value of the VALIGN attribute described above.

<CAPTION...> Methods
The <CAPTION...> element/object supports all of the standard Dynamic HTML methods (i.e. click, contains, getAttribute, insertAdjacentHTML, insertAdjacentText, removeAttribute, scrollIntoView and setAttribute). Details of these can be found in the standard Dynamic HTML Methods topics.
The <CAPTION> element also supports the following methods:

blur
The blur event can be used to force the users focus away from the referenced <CAPTION> element, firing the onblur event.

focus
The focus method can be used to pass the users focus to the referenced <CAPTION> element, forcing the onfocus event to fire.

<CAPTION...> Events
The <CAPTION...> element/object supports all of the standard Dynamic HTML events (i.e. onclick, ondblclick, ondragstart, onfilterchange, onhelp, onkeydown, onkeypress, onkeyup, onmousedown, onmousemove, onmouseout, onmouseover, onmouseup and onselectstart). Details of these can be found in the standard Dynamic HTML events topics.
Also, the <CAPTION> element supports the following events:

onblur
When the referenced <CAPTION> element loses the users focus, the onblur event is fired, executing any script events that are attached to it.

onfocus
When the user passes the focus to any <CAPTION> element, the onfocus event is fired for that element.

onresize
The onresize event is fired whenever the contents of the <CAPTION> element are resized, by window movement, or dynamically through scripting.

© 1995-1998, Stephen Le Hunte


<THEAD>

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 doesn't directly affect the rendering of the table on the screen, but is required if RULES wish to be set in the <TABLE>.

Possible <THEAD> attributes are:

ALIGN="Alignment"
The ALIGN attribute takes values of center, left and right, and specifies the alignment of the <THEAD> section relative to the rest of the table.

BGCOLOR="Background Colour"
Background colouring can be applied to the <THEAD> section, by using the BGCOLOR attribute. It accepts any valid #rrggbb hex triplet, or Colour Name.

TITLE="informational ToolTip"
The Internet Explorer 4.0 (and above) specific TITLE attribute is used for informational purposes. The <THEAD> element does not display its TITLE attribute as a ToolTip.

LANG="language setting"
The LANG attribute can be used to specify what language the <THEAD> element is using. It accepts any valid ISO standard language abbreviation (for example "en" for English, "de" for German etc.) For more details, see the Document Localisation section for more details.

LANGUAGE="Scripting language"
The LANGUAGE attribute can be used to expressly specify which scripting language Internet Explorer 4.0 uses to interpret any scripting information used in the <THEAD> element. It can accept values of vbscript, vbs, javascript or jscript. The first two specify the scripting language as Visual Basic Script, the latter two specify it as using Javascript (the default scripting language used if no LANGUAGE attribute is set.

CLASS="Style Sheet class name"
The CLASS attribute is used to specify the <THEAD> element as using a particular style sheet class. See the Style Sheets topic for details.

STYLE="In line style setting"
As well as using previously defined style sheet settings, the <THEAD> element can have in-line stylings attached to it. See the Style Sheets topic for details.

ID="Unique element identifier"
The ID attribute can be used to either reference a unique style sheet identifier, or to provide a unique name for the <THEAD> element for scripting purposes. Any <THEAD> element with an ID attribute can be directly manipulated in script by referencing its ID attribute, rather than working through the All collection to determine the element. See the Scripting introduction topic for more information.

VALIGN="Vertical Alignment"
The VALIGN attribute takes values of baseline, bottom, middle and top, and specifies the vertical alignment of the <THEAD> section relative to the rest of the table.

Every <THEAD> element in a document is an object that can be manipulated through scripting. Note that scripting of the <THEAD> element/object is only supported by Internet Explorer 4.0 in its Dynamic HTML object model. Netscape does not support direct scripting of the <THEAD> element at all.

<THEAD...> Properties
Of the standard Dynamic HTML properties, the <THEAD...> element/object supports the following className, document, id, isTextEdit, lang, language, offsetHeight, offsetLeft, offsetParent, offsetTop, offsetWidth, parentElement, parentTextEdit, sourceIndex, style, tagName and title. Details of these can be found in the standard Dynamic HTML properties topics.
The <THEAD> element also supports properties of align, bgColor and vAlign, which reflect their attribute settings.

<THEAD...> Methods
Of the standard Dynamic HTML methods, the <THEAD...> element/object supports the following: click, contains, getAttribute, removeAttribute, scrollIntoView and setAttribute). Details of these can be found in the standard Dynamic HTML Methods topics. Additionally, the <THEAD> element supports the following methods:

deleteRow
The deleteRow method deletes the row referenced by the index argument for the referenced <THEAD> element, also removing it from the Rows Collection for the <THEAD> and <TABLE> elements.

document.all("theadExample").deleteRow(1)

would delete the second <TR> element contained in the <THEAD> element referenced by ...all("theadExample"), impacting the Rows Collection for the <THEAD> and <TABLE> elements.

insertRow
The insertRow method inserts a new <TR> element into the referenced <THEAD> element. It can take an optional index argument which should specify where in the <THEAD> the new row is to be inserted. Note that inserting a new row into a <THEAD> element also inserts it into the Rows Collection for the <THEAD> element and the Rows Collection for the <TABLE>. For example:

rowNew=document.all("theadExample").insertRow(3)

inserts a new fourth row into the <THEAD> element, which will impact the Rows Collection for the <THEAD> and <TABLE> elements.

<THEAD...> Events
The <THEAD...> element/object supports all of the standard Dynamic HTML events (i.e. onclick, ondblclick, ondragstart, onfilterchange, onhelp, onkeydown, onkeypress, onkeyup, onmousedown, onmousemove, onmouseout, onmouseover, onmouseup and onselectstart). Details of these can be found in the standard Dynamic HTML events topics.

© 1995-1998, Stephen Le Hunte


<TBODY>

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 doesn't directly affect the rendering of the table on the screen, but is required if RULES wish to be set in the <TABLE>.

Possible <TBODY> attributes are:

ALIGN="Alignment"
The ALIGN attribute takes values of center, left and right, and specifies the alignment of the <TBODY> section relative to the rest of the table.

BGCOLOR="Background Colour"
Background colouring can be applied to the <TBODY> section, by using the BGCOLOR attribute. It accepts any valid #rrggbb hex triplet, or Colour Name.

TITLE="informational ToolTip"
The Internet Explorer 4.0 (and above) specific TITLE attribute is used for informational purposes. The <TBODY> element does not display its TITLE attribute as a ToolTip.

LANG="language setting"
The LANG attribute can be used to specify what language the <TBODY> element is using. It accepts any valid ISO standard language abbreviation (for example "en" for English, "de" for German etc.) For more details, see the Document Localisation section for more details.

LANGUAGE="Scripting language"
The LANGUAGE attribute can be used to expressly specify which scripting language Internet Explorer 4.0 uses to interpret any scripting information used in the <TBODY> element. It can accept values of vbscript, vbs, javascript or jscript. The first two specify the scripting language as Visual Basic Script, the latter two specify it as using Javascript (the default scripting language used if no LANGUAGE attribute is set.

CLASS="Style Sheet class name"
The CLASS attribute is used to specify the <TBODY> element as using a particular style sheet class. See the Style Sheets topic for details.

STYLE="In line style setting"
As well as using previously defined style sheet settings, the <TBODY> element can have in-line stylings attached to it. See the Style Sheets topic for details.

ID="Unique element identifier"
The ID attribute can be used to either reference a unique style sheet identifier, or to provide a unique name for the <TBODY> element for scripting purposes. Any <TBODY> element with an ID attribute can be directly manipulated in script by referencing its ID attribute, rather than working through the All collection to determine the element. See the Scripting introduction topic for more information.

VALIGN="Vertical Alignment"
The VALIGN attribute takes values of baseline, bottom, middle and top, and specifies the vertical alignment of the <TBODY> section relative to the rest of the table.

Every <TBODY> element in a document is an object that can be manipulated through scripting. Note that scripting of the <TBODY> element/object is only supported by Internet Explorer 4.0 in its Dynamic HTML object model. Netscape does not support direct scripting of the <TBODY> element at all.

<TBODY...> Properties
Of the standard Dynamic HTML properties, the <TBODY...> element/object supports the following className, document, id, isTextEdit, lang, language, offsetHeight, offsetLeft, offsetParent, offsetTop, offsetWidth, parentElement, parentTextEdit, sourceIndex, style, tagName and title. Details of these can be found in the standard Dynamic HTML properties topics.
The <TBODY> element also supports properties of align, bgColor and vAlign, which reflect their attribute settings.

<TBODY...> Methods
Of the standard Dynamic HTML methods, the <TBODY...> element/object supports the following: click, contains, getAttribute, removeAttribute, scrollIntoView and setAttribute). Details of these can be found in the standard Dynamic HTML Methods topics. Additionally, the <TBODY> element supports the following events:

deleteRow
The deleteRow method deletes the row referenced by the index argument for the referenced <TBODY> element, also removing it from the Rows Collection for the <TBODY> and <TABLE> elements.

document.all("tbodyExample").deleteRow(1)

would delete the second <TR> element contained in the <TBODY> element referenced by ...all("tbodyExample"), impacting the Rows Collection for the <TBODY> and <TABLE> elements.

insertRow
The insertRow method inserts a new <TR> element into the referenced <TBODY> element. It can take an optional index argument which should specify where in the <TBODY> the new row is to be inserted. Note that inserting a new row into a <TBODY> element also inserts it into the Rows Collection for the <TBODY> element and the Rows Collection for the <TABLE>. For example:

rowNew=document.all("tbodyExample").insertRow(3)

inserts a new fourth row into the <TBODY> element, which will impact the Rows Collection for the <TBODY> and <TABLE> elements.

<TBODY...> Events
The <TBODY...> element/object supports all of the standard Dynamic HTML events (i.e. onclick, ondblclick, ondragstart, onfilterchange, onhelp, onkeydown, onkeypress, onkeyup, onmousedown, onmousemove, onmouseout, onmouseover, onmouseup and onselectstart). Details of these can be found in the standard Dynamic HTML events topics.

© 1995-1998, Stephen Le Hunte


<TFOOT>

This element, which is Internet Explorer specific, is used to specify the footer section of the table. It doesn't directly affect the rendering of the table on the screen, but is required if RULES wish to be set in the <TABLE>.

Possible <TFOOT> attributes are:

ALIGN="Alignment"
The ALIGN attribute takes values of center, left and right, and specifies the alignment of the <TFOOT> section relative to the rest of the table.

BGCOLOR="Background Colour"
Background colouring can be applied to the <TFOOT> section, by using the BGCOLOR attribute. It accepts any valid #rrggbb hex triplet, or Colour Name.

TITLE="informational ToolTip"
The Internet Explorer 4.0 (and above) specific TITLE attribute is used for informational purposes. The <TFOOT> element does not display its TITLE attribute as a ToolTip.

LANG="language setting"
The LANG attribute can be used to specify what language the <TFOOT> element is using. It accepts any valid ISO standard language abbreviation (for example "en" for English, "de" for German etc.) For more details, see the Document Localisation section for more details.

LANGUAGE="Scripting language"
The LANGUAGE attribute can be used to expressly specify which scripting language Internet Explorer 4.0 uses to interpret any scripting information used in the <TFOOT> element. It can accept values of vbscript, vbs, javascript or jscript. The first two specify the scripting language as Visual Basic Script, the latter two specify it as using Javascript (the default scripting language used if no LANGUAGE attribute is set.

CLASS="Style Sheet class name"
The CLASS attribute is used to specify the <TFOOT> element as using a particular style sheet class. See the Style Sheets topic for details.

STYLE="In line style setting"
As well as using previously defined style sheet settings, the <TFOOT> element can have in-line stylings attached to it. See the Style Sheets topic for details.

ID="Unique element identifier"
The ID attribute can be used to either reference a unique style sheet identifier, or to provide a unique name for the <TFOOT> element for scripting purposes. Any <TFOOT> element with an ID attribute can be directly manipulated in script by referencing its ID attribute, rather than working through the All collection to determine the element. See the Scripting introduction topic for more information.

VALIGN="Vertical Alignment"
The VALIGN attribute takes values of baseline, bottom, middle and top, and specifies the vertical alignment of the <TFOOT> section relative to the rest of the table.

Every <TFOOT> element in a document is an object that can be manipulated through scripting. Note that scripting of the <TFOOT> element/object is only supported by Internet Explorer 4.0 in its Dynamic HTML object model. Netscape does not support direct scripting of the <TFOOT> element at all.

<TFOOT...> Properties
Of the standard Dynamic HTML properties, the <TFOOT...> element/object supports the following className, document, id, isTextEdit, lang, language, offsetHeight, offsetLeft, offsetParent, offsetTop, offsetWidth, parentElement, parentTextEdit, sourceIndex, style, tagName and title. Details of these can be found in the standard Dynamic HTML properties topics.
The <TFOOT> element also supports properties of align, bgColor and vAlign, which reflect their attribute settings.

<TFOOT...> Methods
Of the standard Dynamic HTML methods, the <TFOOT...> element/object supports the following: click, contains, getAttribute, removeAttribute, scrollIntoView and setAttribute). Details of these can be found in the standard Dynamic HTML Methods topics. Additionally, the <TFOOT> element supports the following methods:

deleteRow
The deleteRow method deletes the row referenced by the index argument for the referenced <TFOOT> element, also removing it from the Rows Collection for the <TFOOT> and <TABLE> elements.

document.all("tfootExample").deleteRow(1)

would delete the second <TR> element contained in the <TFOOT> element referenced by ...all("tfootExample"), impacting the Rows Collection for the <TFOOT> and <TABLE> elements.

insertRow
The insertRow method inserts a new <TR> element into the referenced <TFOOT> element. It can take an optional index argument which should specify where in the <TFOOT> the new row is to be inserted. Note that inserting a new row into a <TFOOT> element also inserts it into the Rows Collection for the <TFOOT> element and the Rows Collection for the <TABLE>. For example:

rowNew=document.all("tfootExample").insertRow(3)

inserts a new fourth row into the <TFOOT> element, which will impact the Rows Collection for the <TFOOT> and <TABLE> elements.

<TFOOT...> Events
The <TFOOT...> element/object supports all of the standard Dynamic HTML events (i.e. onclick, ondblclick, ondragstart, onfilterchange, onhelp, onkeydown, onkeypress, onkeyup, onmousedown, onmousemove, onmouseout, onmouseover, onmouseup and onselectstart). Details of these can be found in the standard Dynamic HTML events topics.

© 1995-1998, Stephen Le Hunte


<COLGROUP>

This element, which is Internet Explorer specific, can be used to group columns together to set their alignment properties. It accepts the following attributes:

ALIGN="center|justify|left|right"
This sets the text alignment within the column group. The default value is "center"

VALIGN="baseline|bottom|middle|top"
This sets the vertical text alignment within the column group.

SPAN="value"
This can be used to set the number of columns upon which the ALIGN and VALIGN attributes are to act.

WIDTH="initial column width"
The WIDTH attribute can be used to set the initial column width for the column(s) that the <COLGROUP> element covers.

TITLE="informational ToolTip"
The Internet Explorer 4.0 (and above) specific TITLE attribute is used for informational purposes. As the <COLGROUP> element doesn't render in the document, the TITLE text will not get used as a ToolTip.

CLASS="Style Sheet class name"
The CLASS attribute is used to specify the <COLGROUP> element as using a particular style sheet class. See the Style Sheets topic for details.

STYLE="In line style setting"
As well as using previously defined style sheet settings, the <COLGROUP> element can have in-line stylings attached to it. See the Style Sheets topic for details.

ID="Unique element identifier"
The ID attribute can be used to either reference a unique style sheet identifier, or to provide a unique name for the <COLGROUP> element for scripting purposes. Any <COLGROUP> element with an ID attribute can be directly manipulated in script by referencing its ID attribute, rather than working through the All collection to determine the element. See the Scripting introduction topic for more information.

Every <COLGROUP> element in a document is an object that can be manipulated through scripting. Note that scripting of the <COLGROUP> element/object is only supported by Internet Explorer 4.0 in its Dynamic HTML object model. Netscape does not support direct scripting of the <COLGROUP> element at all.

<COLGROUP...> Properties
Of the standard Dynamic HTML properties, the <COLGROUP...> element/object supports the following: className, document, id, isTextEdit, parentElement, parentTextEdit, sourceIndex, style, tagName and title. Details of these can be found in the standard Dynamic HTML properties topics.
Also, the <COLGROUP> element supports properties of align, span, vAlign and width, all of which reflect the values of their respective attributes.

<COLGROUP...> Methods
Of the standard Dynamic HTML methods, the <COLGROUP...> element/object supports the following: click, contains, getAttribute, removeAttribute and setAttribute. Details of these can be found in the standard Dynamic HTML Methods topics.

<COLGROUP...> Events
The <COLGROUP...> element/object doesn't support any events.

© 1995-1998, Stephen Le Hunte


<COL>

This element, which is Internet Explorer specific, can be used to specify the text alignment for table columns. It accepts the following attributes:

ALIGN="center|justify|left|right"
This sets the text alignment within the column group. The default value is "center"

VALIGN="Vertical alignment"
This sets the vertical text alignment for the column (or column group). It accepts values of baseline, bottom, middle or top, with middlebeing the default value.

SPAN="value"
This can be used to set the number of columns upon which the ALIGN attribute is to act.

WIDTH="initial column width"
The WIDTH attribute can be used to set the initial column width for the column(s) that the <COL> element covers.

TITLE="informational ToolTip"
The Internet Explorer 4.0 (and above) specific TITLE attribute is used for informational purposes. As the <COL> element doesn't render in the document, the TITLE text will not get used as a ToolTip.

CLASS="Style Sheet class name"
The CLASS attribute is used to specify the <COL> element as using a particular style sheet class. See the Style Sheets topic for details.

STYLE="In line style setting"
As well as using previously defined style sheet settings, the <COL> element can have in-line stylings attached to it. See the Style Sheets topic for details.

ID="Unique element identifier"
The ID attribute can be used to either reference a unique style sheet identifier, or to provide a unique name for the <COL> element for scripting purposes. Any <COL> element with an ID attribute can be directly manipulated in script by referencing its ID attribute, rather than working through the All collection to determine the element. See the Scripting introduction topic for more information.

Every <COL> element in a document is an object that can be manipulated through scripting. Note that scripting of the <COL> element/object is only supported by Internet Explorer 4.0 in its Dynamic HTML object model. Netscape does not support direct scripting of the <COL> element at all.

<COL...> Properties
Of the standard Dynamic HTML properties, the <COL...> element/object supports the following: className, document, id, isTextEdit, parentElement, parentTextEdit, sourceIndex, style, tagName and title. Details of these can be found in the standard Dynamic HTML properties topics.
Also, the <COL> element supports properties of align, span, vAlign and width, all of which reflect the values of their respective attributes.

<COL...> Methods
Of the standard Dynamic HTML methods, the <COL...> element/object supports the following: click, contains, getAttribute, removeAttribute and setAttribute. Details of these can be found in the standard Dynamic HTML Methods topics.

<COL...> Events
The <COL...> element/object doesn't support any events.

© 1995-1998, Stephen Le Hunte


Tables and Style Sheets

NOTE : presented here is an overview of the table section of the Style Sheet specification. More complete information can be obtained from the Style Sheet specification, available from http://www.w3.org/pub/WWW/Style/

For simple styling of tables, normal Style Sheet methods can be employed (i.e. defining the elements style within the <STYLE> elements, or by using CLASS, ID and STYLE attributes. For more information, see the Style Sheets topic).

For example :

<STYLE>
TABLE { font-size : 12pt;
color : #FF0000}
TH { font-size : 14pt;
font-weight : bold}
</STYLE>
are acceptable.

The problem with tables comes when considering the borders present and therefore any border styling methods. According to the HTML 3 table model, there are only three sections of a table that can be considered as having well defined borders (the <TABLE> itself, row groups (as defined by <THEAD>, <TBODY> and <TFOOT>) and table cells - <TD> and <TH>). Table rows can be considered to be nested within the table and table cells can be considered to be nested within the table rows. It is counter-intuitive to think of tables like this (as a three level nested object) and so the Style Sheet table model treats tables as single level objects (i.e. the border/edge of a cell at the edge of a table and the table are considered to share a border). Essentially, considering elements in the nesting order of a table, elements higher in the nesting order will take precedence. That is, the border style of a <TABLE> will be used, but the border style of rows, or cells will only be used when there is no border specified for the table.

The style sheet table model adds a couple of values to the border-style property and adds a new elevation property. For details of style sheet properties and values, see the Properties and Values topic.

Additions to the 'border-style' property.
The table model adds the blank and bevel values to the border property. Blank differs from the 'none' property allowed for borders by preventing the border style being over-ridden by elements lower in the table nesting order. Bevel specifies that the table has a 3-D border style (necessary to allow the elevation property below)

The 'elevation' property.
This property specifies the elevation (in the z-direction - towards the viewer from the screen) of the table border-styles. It will only work if the border-style of bevel is used. The elevations of <TR>, <THEAD>, <TBODY> and <TFOOT> are used to determine the elevation of table cells (but aren't displayed) while the elevation of the <TABLE> element is used to determine the elevation of the cells contained within the table. It requires a unitless value which is used as the size of the 3-D border.

© 1995-1998, Stephen Le Hunte


Table examples

Below are some sample HTML <TABLE> fragments together with their accompanying renderings.

NOTE : Some of the tables are browser specific, where this is the case, the 'browser dependancy graphic' is displayed (i.e. the browser logo will be visible).

NOTE : Tables no 5 and 6 use <TH> elements nested inside <TD> elements. While the examples render correctly, it is not good practice to nest headers inside data cells and using those tables as the basis of other tables may cause the new tables to render incorrectly. It would be better to emphasis data cells to make them appear as headers, by using the <STRONG> element.

The tables are:
1) A Simple table
2) A table using ROWSPAN
3) A table using COLSPAN
4) A table using headers
5) A table using all of the above
6) A table using ALIGN/VALIGN
7) Nested tables
8) Floating tables
9) A coloured table
10) A HTML 3.2 table

1) A simple table

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

Data cell 1 | Data cell 2
Data cell 3 | Data cell 4

top

2) A table using ROWSPAN

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

This cell spans two rows | These cells | would
 | contain | other data

top

3) A table using COLSPAN

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

Data cell 1 | This cell spans 2 columns
Data cell 2 | Data cell 3 | Data cell 4

top

4) A table using headers

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

Netscape | Internet Explorer | Mosaic
X | X | -
X | - | X

top

5) A table using all of the above

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

 |  | Browser
 |  | Netscape | Internet Explorer | Mosaic
Element | <DFN> | - | X | -
 | <DIR> | X | X | X

top

6) A table using ALIGN/VALIGN
This table adds ALIGN and VALIGN attributes to the above 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>

 |  | Browser
 |  | Netscape | Internet Explorer | Mosaic
Element | <DFN> | - | X | -
 | <DIR> | X | X | X

top

7) Nested tables
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>

This cell spans two rows
Data cell 1 | Data cell 2
Data cell 3 | Data cell 4
 These cells would
contain other data

top

8) Floating tables

<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 tall neatly beside the table
<BR CLEAR=all>
<HR>

This is a two row table
It is aligned to the left of the page
This text will be to the right of the table, and will fall neatly beside the table
This is a two row table
It is aligned to the right of the page
This text will be to the left of the table, and will fall neatly beside the table

top

9) A coloured table
NOTE :Netscape does not display the border colourings of this table.

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

This is the first cell | This is the second cell
This is the third cell | This is the fourth cell
This is the fifth cell | This is the sixth cell

top

IEx 10) A HTML 3.2 table IEx

<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>&lt;BASE ...&gt;</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>&lt;BASEFONT ...&gt;</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>&lt;BGSOUND ...&gt;</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>

A section of the Comparison Table
Element | Internet Explorer | Netscape | Mosaic
<B> | X | X | X
<BASE ...> | X | X | X
...HREF | X | X | X
...TARGET | X | X |
<BASEFONT ...> | X | X |
...SIZE | X (only visible when FONT SIZE= used as well) | X |
...FACE | X |  |
<BGSOUND ...> | X |  | X (will spawn player for .mid files)

top

© 1995-1998, Stephen Le Hunte


Character Data

Within a HTML document, any characters between the HTML elements represents text. A 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 recognised 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 HTML user agent implementors should follow the guidelines in the Special Characters section.

In addition, HTML provides character entity 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.

© 1995-1998, Stephen Le Hunte


Control Characters

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 heterogeneous 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.

© 1995-1998, Stephen Le Hunte


Special Characters

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 of the format of the text:

Space
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> elements. Within preformatted text elements, a space is interpreted as a nonbreaking space.

Hyphen
This is interpreted as a hyphen glyph in all contexts.

The following entity names are used in HTML, always prefixed by 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.

Glyph | Name | Syntax | Description
< | lt | &lt; | Less than sign
> | gt | &gt; | Greater than sign
& | amp | &amp; | Ampersand
" | quot | &quot; | Double quote sign

© 1995-1998, Stephen Le Hunte


Character Entity Reference

The entire ISO-8859-1 character set (commonly called Latin-1) is supported by HTML. This covers characters commonly occuring in many European languages other than English. However, differences in the characters supported by localised keyboards mostly don't allow for such special characters to be directly typed into a HTML document. This is why HTML supports two mechanisms for the insertion of these special characters. The entire characters set may be included in a HTML document, by referencing them with their number in the ISO-8859-1 character set, with certain commonly used characters being supported by a more memorable entity name. I.e. :

&#211; and &Oacute;

both reference the same character - Ó - but generally the &Oacute; would be easier to remember.

The table below lists all of the ISO-8859-1 character set, together with their numeric entity reference and where supported, the named entity reference.

Number | Name | Description | Appearance
&#00;-&#08; | - | Unused | -
&#09; | - | Horizontal Tab | space
&#10; | - | Line feed | space
&#11;-&#31; | - | Unused | -
&#32; | - | Space | space
&#33; | - | Exclamation mark | !
&#34; | &quot; | Quotation mark | "
&#35; | - | Number sign | #
&#36; | - | Dollar sign | $
&#37; | - | Percent sign | %
&#38; | &amp; | Ampersand | &
&#39; | - | Apostrophe | '
&#40; | - | Left parenthesis | (
&#41; | - | Right parenthesis | )
&#42; | - | Asterisk | *
&#43; | - | Plus sign | +
&#44; | - | Comma | ,
&#45; | - | Hyphen | -
&#46; | - | Period (full stop) | .
&#47; | - | Solidus (slash) | /
&#48;-&#57; | - | Digits (0-9) | 0 - 9
&#58; | - | Colon | :
&#59; | - | Semi-colon | ;
&#60; | &lt; | Less than | <
&#61; | - | Equals sign | =
&#62; | &gt; | Greater than | >
&#63; | - | Question mark | ?
&#64; | - | Commercial at | @
&#65;-&#90; | - | Upper case A-Z | A - Z
&#91; | - | Left square bracket | [
&#92; | - | Reverse solidus (backslash) | \
&#93; | - | Right square bracket | ]
&#94; | - | Caret | ^
&#95; | - | Horizontal bar | _
&#96; | - | Acute accent | `
&#97;-&#122; | - | Lower case a-z | a - z
&#123; | - | Left curly brace | {
&#124; | - | Vertical bar | |
&#125; | - | Right curly brace | }
&#126; | - | Tilde | ~
&#127;-&#159; | - | Unused | -
&#160; | &nbsp; | Non-breaking space |
&#161; | &iexcl; | Inverted exclamation | ¡
&#162; | &cent; | Cent sign | ¢
&#163; | &pound; | Pound sterling sign | £
&#164; | &curren; | General currency sign | ¤
&#165; | &yen; | Yen sign | ¥
&#166; | &brvbar; | Broken vertical bar | ¦
&#167; | &sect; | Section sign | §
&#168; | &uml; | Umlaut (dierisis) | ¨
&#169; | &copy; | Copyright | ©
&#170; | &ordf; | Feminine ordinal | ª
&#171; | &laquo; | Left angle quote, guillemot left | «
&#172; | &not; | Not sign | ¬
&#173; | &shy; | Soft hyphen |
&#174; | &reg; | Registered trademark | ®
&#175; | &macr; | Macron accent | ¯
&#176; | &deg; | Degree sign | °
&#177; | &plusmn; | Plus or minus | ±
&#178; | &sup2; | Superscript two | ²
&#179; | &sup3; | Superscript three | ³
&#180; | &acute; | Acute accent | ´
&#181; | &micro; | Micro sign | µ
&#182; | &para; | Paragraph sign | ¶
&#183; | &middot; | Middle dot | ·
&#184; | &cedil; | Cedilla | ¸
&#185; | &sup1; | Superscript one | ¹
&#186; | &ordm; | Masculine ordinal | º
&#187; | &raquo; | Right angle quote, guillemot right | »
&#188; | &frac14; | Fraction (one quarter) | ¼
&#189; | &frac12; | Fraction (one half) | ½
&#190; | &frac34; | Fraction (three quarters) | ¾
&#191; | &iquest; | Inverted question mark | ¿
&#192; | &Agrave; | Capital A, grave accent | À
&#193; | &Aacute; | Capital A, acute accent | Á
&#194; | &Acirc; | Capital A, circumflex accent | Â
&#195; | &Atilde; | Capital A, tilde | Ã
&#196; | &Auml; | Capital A, umlaut (dierisis) | Ä
&#197; | &Aring; | Capital A, ring | Å
&#198; | &AElig; | Capital AE dipthong (ligature) | Æ
&#199; | &Ccedil; | Capital C, cedilla | Ç
&#200; | &Egrave; | Capital E, grave accent | È
&#201; | &Eacute; | Capita E, acute accent | É
&#202; | &Eirc; | Capital E, circumflex accent | Ê
&#203; | &Euml; | Capital E, umlaut (dierisis) | Ë
&#204; | &Igrave; | Capital I, grave accent | Ì
&#205; | &Iacute; | Capital I, acute accent | Í
&#206; | &Icirc; | Capital I, circumflex accent | Î
&#207; | &Iuml; | Capital I, umlaut (dierisis) | Ï
&#208; | &ETH; | Capital Eth, Icelandic | Ð
&#209; | &Ntilde; | Capital N, tilde | Ñ
&#210; | &Ograve; | Capital O, grave accent | Ò
&#211; | &Oacute | Capital O, acute accent | Ó
&#212; | &Ocirc; | Capital O, circumflex accent | Ô
&#213; | &Otilde; | Capital O, tilde | Õ
&#214; | &Ouml; | Capital O, umlaut (dierisis) | Ö
&#215; | &times; | Multiply sign | ×
&#216; | &Oslash; | Capital O, slash | Ø
&#217; | &Ugrave | Capital U, grave accent | Ù
&#218; | &Uacute; | Capital U, acute accent | Ú
&#219; | &Ucirc; | Capital U, circumflex accent | Û
&#220; | &Uuml; | Capital U, umlaut (dierisis) | Ü
&#221; | &Yacute; | Capital Y, acute accent | Ý
&#222; | &THORN; | Capital Thorn, Icelandic | Þ
&#223; | &szlig; | Small sharp s, German (sz ligature) | ß
&#224; | &agrave; | Small a, grave accent | à
&#225; | &aacute; | Small a, acute accent | á
&#226; | &acirc; | Small a, circumflex accent | â
&#227; | &atilde; | Small a, tilde | ã
&#228; | &auml | Small a, umlaut (dierisis) | ä
&#229; | &aring; | Small a, ring | å
&#230; | &aelig; | Small ae dipthong (ligature) | æ
&#231; | &ccedil; | Small c, cedilla | ç
&#232; | &egrave; | Small e, grave accent | è
&#233; | &eacute; | Small e, acute accent | é
&#234; | &ecirc; | Small e, circumflex accent | ê
&#235; | &euml; | Small e, umlaut (dierisis) | ë
&#236; | &igrave; | Small i, grave accent | ì
&#237; | &iacute; | Small i, acute accent | í
&#238; | &icirc; | Small i, circumflex accent | î
&#239; | &iuml; | Small i, umlaut (dierisis) | ï
&#240; | &eth; | Small eth, Icelandic | ð
&#241; | &ntilde; | Small n, tilde | ñ
&#242; | &ograve; | Small o, grave accent | ò
&#243; | &oacute; | Small o, acute accent | ó
&#244; | &ocirc; | Small o, circumflex accent | ô
&#245; | &otilde; | Small o, tilde | õ
&#246; | &ouml; | Small o, umlaut (dierisis) | ö
&#247; | &divide; | Division sign | ÷
&#248; | &oslash; | Small o, slash | ø
&#249; | &ugrave; | Small u, grave accent | ù
&#250; | &uacute; | Small u, acute accent | ú
&#251; | &ucirc; | Small u, circumflex accent | û
&#252; | &uuml; | Small u, umlaut (dierisis) | ü
&#253; | &yacute; | Small y, acute accent | ý
&#254; | &thorn; | Small thorn, Icelandic | þ
&#255; | &yuml; | Small y, umlaut (dierisis) | ÿ
&#338; | &OElig; | Latin Capital OE (ligature) | Œ
&#339; | &oelig; | Latin Small OE (ligature) | œ
&#352; | &Scaron; | Capital S with caron | Š
&#353; | &scaron; | Small s with caron | š
&#376; | &Yuml; | Capital Y with dierisis | Ÿ
&#710; | &circ; | Circumflex accent | ˆ
&#732; | &tilde; | Small tilde | ˜
&#8211; | &ndash; | En dash | –
&#8212; | &mdash; | Em dash | —
&#8216; | &lsquo; | Left single quotation mark | ‘
&#8217; | &rsquo; | Right single quotation mark | ’
&#8218; | &sbquo; | Single low-9 quotation mark | ‚
&#8220; | &ldquo; | Left double quotation mark | “
&#8221; | &rdquo; | Right double quotation mark | ”
&#8222; | &bdquo; | Double low-9 quotation mark | „
&#8224; | &dagger; | Dagger | †
&#8225; | &Dagger; | Double Dagger | ‡
&#8240; | &permil; | Per mille (thousand) sign | ‰
&#8249; | &lsaquo; | Single left-pointing angle quotation mark | ‹
&#8250; | &rsaquo; | Single right-pointing angle quotation mark | ›
&#8364; | &euro; | Euro sign* | €

* = Only the numeric character reference (i.e. &#8364;) is supported at the time of writing.

The following character references are largely unsupported at the time of writing, but are included in the HTML 4.0 specification. As both Netscape and Microsoft have pledged to support the full HTML 4.0 standard, their support can be expected.

Number | Name | Description | Appearance
&#402; | &fnof; | florin (latin small f with hook) | ƒ
&#913; | &Alpha; | Greek capital Alpha | Α
&#914; | &Beta; | Greek capital Beta | Β
&#915; | &Gamma; | Greek capital Gamma | Γ
&#916; | &Delta; | Greek capital Delta | Δ
&#917; | &Epsilon; | Greek capital Epsilon | Ε
&#918; | &Zeta; | Greek capital Zeta | Ζ
&#919; | &Eta; | Greek capital Eta | Η
&#920; | &Theta; | Greek capital Theta | Θ
&#921; | &Iota; | Greek capital Iota | Ι
&#922; | &Kappa; | Greek capital Kappa | Κ
&#923; | &Lambda; | Greek capital Lambda | Λ
&#924; | &Mu; | Greek capital Mu | Μ
&#925; | &Nu; | Greek capital Nu | Ν
&#926; | &Xi; | Greek capital Xi | Ξ
&#927; | &Omicron; | Greek capital Omicron | Ο
&#928; | &Pi; | Greek capital Pi | Π
&#929; | &Rho; | Greek capital Rho | Ρ
&#931; | &Sigma; | Greek capital Sigma | Σ
&#932; | &Tau; | Greek capital Tau | Τ
&#933; | &Upsilon; | Greek capital Upsilon | Υ
&#934; | &Phi; | Greek capital Phi | Φ
&#935; | &Chi; | Greek capital Chi | Χ
&#936; | &Psi; | Greek capital Psi | Ψ
&#937; | &Omega; | Greek capital Omega | Ω
&#945; | &Alpha; | Greek small Alpha | α
&#946; | &Beta; | Greek small Beta | β
&#947; | &Gamma; | Greek small Gamma | γ
&#948; | &Delta; | Greek small Delta | δ
&#949; | &Epsilon; | Greek small Epsilon | ε
&#950; | &Zeta; | Greek small Zeta | ζ
&#951; | &Eta; | Greek small Eta | η
&#952; | &Theta; | Greek small Theta | θ
&#953; | &Iota; | Greek small Iota | ι
&#954; | &Kappa; | Greek small Kappa | κ
&#955; | &Lambda; | Greek small Lambda | λ
&#956; | &Mu; | Greek small Mu | μ
&#957; | &Nu; | Greek small Nu | ν
&#958; | &Xi; | Greek small Xi | ξ
&#959; | &Omicron; | Greek small Omicron | ο
&#960; | &Pi; | Greek small Pi | π
&#961; | &Rho; | Greek small Rho | ρ
&#962; | &Sigma; | Greek small final Sigma | ς
&#963; | &Sigma; | Greek small Sigma | σ
&#964; | &Tau; | Greek small Tau | τ
&#965; | &Upsilon; | Greek small Upsilon | υ
&#966; | &Phi; | Greek small Phi | φ
&#967; | &Chi; | Greek small Chi | χ
&#968; | &Psi; | Greek small Psi | ψ
&#969; | &Omega; | Greek small Omega | ω
&#977; | &thetasym; | Greek theta symbol | ϑ
&#978; | &upsih; | Greek Upsilon with hook | ϒ
&#982; | &piv; | Greek Pi symbol | ϖ
&#8194; | &ensp; | En space |
&#8195; | &emsp; | Em space |
&#8201; | &thinsp; | Thin space |
&#8204; | &zwnj; | Zero width non-joiner | ‌
&#8205; | &zwj; | Zero width joiner | ‍
&#8206; | &lrm; | Left-to-right mark | ‎
&#8207; | &rlm; | Right-to-left mark | ‏
&#8226; | &bull; | Small black circle | •
&#8230; | &hellip; | Horizontal Ellipsis | …
&#8242; | &prime; | Prime = minutes = feet | ′
&#8254; | &oline; | Overline = Spacing overscore | ‾
&#8260; | &frasl; | Fraction Slash | ⁄
&#8472; | &weierp; | Script capital P = Weierstrass p | ℘
&#8465; | &image; | Blackletter capital I (imaginary part) | ℑ
&#8476; | &real; | Blackletter capital R (real part) | ℜ
&#8482; | &trade; | Trademark symbol | ™
&#8501; | &alefsym; | Alef symbol = first transfinite | ℵ
&#8592; | &larr; | Leftwards arrow | ←
&#8593; | &uarr; | Upwards arrow | ↑
&#8594; | &rarr; | Rightwards arrow | →
&#8595; | &darr; | Downwards arrow | ↓
&#8596; | &harr; | Left Right arrow | ↔
&#8629; | &crarr; | Donwards arrow with corner leftwards | ↵
&#8656; | &lArr; | Leftwards double arrow | ⇐
&#8657; | &uArr; | Upwards double arrow | ⇑
&#8658; | &rArr; | Rightwards double arrow | ⇒
&#8659; | &dArr; | Downwards double arrow | ⇓
&#8660; | &hArr; | Left Right double arrow | ⇔
&#8704; | &forall; | For All | ∀
&#8706; | &part; | Partial Differential | ∂
&#8707; | &exist; | There exists | ∃
&#8709; | &empty; | Empty Set | ∅
&#8711; | &nabla; | Nabla = Backward difference | ∇
&#8712; | &isn; | Element Of... | ∈
&#8713; | &notin; | Not an elementof | ∉
&#8715; | &ni; | Contains as member | ∋
&#8719; | &prod; | n-ary product = product sign | ∏
&#8721; | &sum; | n-ary summation | ∑
&#8722; | &minus; | Minus sign | −
&#8730; | &radic; | Square root = radical sign | √
&#8733; | &prop; | Proportional to | ∝
&#8734; | &infin; | Infinity symbol | ∞
&#8736; | &ang; | Angle | ∠
&#8743; | &and; | Logical and = wedge | ∧
&#8744; | &or; | Logical or = vee | ∨
&#8745; | &cap; | Intersection | ∩
&#8746; | &cup; | Union = cup | ∪
&#8747; | &int; | Integral | ∫
&#8756; | &there4; | Therefore | ∴
&#8764; | &sim; | Tilde operator | ∼
&#8773; | &cong; | Approximately equal to | ≅
&#8776; | &asymp; | Almost equal to = Asymptotic | ≈
&#8800; | &ne; | Not equal to | ≠
&#8801; | &equiv; | Identical to | ≡
&#8804; | &le; | Less than or euqal to | ≤
&#8805; | &ge; | Greater than or equal to | ≥
&#8834; | &sub; | Subset of | ⊂
&#8835; | &sup; | Superset of | ⊃
&#8836; | &nsub; | Not a subset of | ⊄
&#8838; | &sube; | Subset of or equal to | ⊆
&#8839; | &supe; | Superset of or equal to | ⊇
&#8853; | &oplus; | Circle plus | ⊕
&#8855; | &otimes; | Circled times | ⊗
&#8869; | &perp; | Othogonal = Perpendicular to | ⊥
&#8901; | &sdot; | Dot operator | ⋅
&#8968; | &lceil; | Left ceiling | ⌈
&#8969; | &rceil; | Right ceiling | ⌉
&#8970; | &lfloor; | Left floor | ⌊
&#8971; | &rfloor; | Right floor | ⌋
&#9001; | &lang; | Left pointing angle bracket | 〈
&#9002; | &rang; | Right pointing angle bracket | 〉
&#9674; | &loz; | Lozenge | ◊
&#9824; | &spades; | Black Spade suit | ♠
&#9827; | &clubs; | Black Clubs suit | ♣
&#9829; | &hearts; | Black Hearts suit | ♥
&#9830; | &diams; | Black Diamonds suit | ♦

© 1995-1998, Stephen Le Hunte


Dynamic Documents

Recent browsers (i.e. Netscape and the Internet Explorer) support various mechanisms for introducing dynamic content into previously static HTML documents.

Dynamic HTML
New for the v4.0 browsers, is Dynamic HTML. Expansive extensions to the scripting Object Models of both browsers mean that largely all content is now available to scripting functions (Internet Explorer takes Dynamic HTML to an extreme level, making everything in the document available). See the Dynamic HTML Overview for more information.

Server push
The server sends down a chunk of data; the browser display the data but leaves the connection open; whenever the server wants it sends more data and the browser displays it, leaving the connection open; at some later time the server sends down yet more data and the browser displays it; etc.

Client pull
The server sends down a chunk of data, including a directive (in the HTTP response or the document header) that says "reload this data in 5 seconds", or "go load this other URL in 10 seconds". After the specified amount of time has elapsed, the client loads the given URL.

JavaScript
Netscape Navigator 2.0 and Netscape Navigator Gold 2.0 (and above) and Internet Explorer provide flexible, lightweight programmability via the Netscape scripting language, a programmable API that allows cross-platform scripting of events, objects, and actions. It allows the page designer to access events such as startups, exits, and user mouse clicks. Based on the Java language, the Netscape scripting language extends the programmatic capabilities of Netscape Navigator to a wide range of authors and is easy enough for anyone who can compose HTML. Use the Netscape scripting language to glue HTML, inline plug-ins, and Java Applets to each other. Note : Recently, Netscape presented Javascript 1.1 to the ECMA, where it has evolved into ECMAScript (or rather ECMA-262), "A general purpose, cross-platform programming language". Netscape then proceeded to make extensions to Javascript, which became Javascript 1.2 as supported in the Navigator component of Netscape Communicator. Microsoft's JScript (v3.0 of which ships with Internet Explorer 4.0 is currently the only full implementation of ECMAScript. All Javascript 1.2 extensions are also supported by Internet Explorer 4.0 through its enhanced scripting object model.

Java
From Sun Microsystems comes Java, the platform independent programming language for creating executable content within web pages. Based on C++, this is not a language to be taken lightly, but when mastered, could prove as limitless as the authors imagination. Indeed, some have even gone so far as to predict that the computer software industry is seriously under threat, because in a few years, all applications will be in the form of applets, downloaded as and when they are required.

ActiveX
The recent technology from Microsoft based around ActiveX controls (previously known as OLE controls). A new control requirement specification has meant that OLE controls previously burdened with code inappropriate for use on the Internet can now be much more streamlined, making it possible to embed them as <OBJECT>s into web pages. This (like Java) allows almost limitless activity and interactivity within web pages. (Internet Explorer for Windows 95/NT specific)

Visual Basic Script
A lightweight, yet fully compatible version of Visual Basic, designed for use on the Internet, Visual Basic Script allows full automation, customisation and scripting within web pages. Coming into its own when used to control ActiveX controls, Of all the available methods for creating dynamic content, Visual Basic Script is the easiest to learn. (Internet Explorer for Windows 95/NT specific)

Server Side Includes
Server side includes (SSI) applied to an HTML document, provide for interactive real-time features such as echoing current time, conditional execution based on logical comparisons, querying or updating a database, sending an e-mail etc., with no programming or CGI scripts. (HTTP Server specific)

© 1995-1998, Stephen Le Hunte


Server Push

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. It's main advantage over Client Pull though, is that using Server Push, it is possible to replace single elements within a HTML document.

The exact Server Push mechanism is technically complex and is outside the scope of this reference. Those that are interested in utilising Server Push in CGI scripts, or web server based executable applications should visit the Netscape site (http://www.netscape.com/) for more information. It should be noted that only Netscape supports the use of Server Push.

© 1995-1998, Stephen Le Hunte


Client Pull

The main use of client pull is to cause a document to be automatically reloaded on a regular basis. For example, consider the following document :

<META HTTP-EQUIV="Refresh" CONTENT="x">
<TITLE>Document ONE</TITLE>
<H1>This is a document</H1>
Here's some text.

If loaded into a browser supporting Client Pull, it would re-load itself every x seconds.

In most cases, Client Pull is used to automatically load another document (automatic re-direction). For this, the HTTP response header needs to be :

Refresh: x; URL=http://foo.bar/blatz.html

and the corresponding <META> element syntax is:

<META HTTP-EQUIV="Refresh" CONTENT="x; URL=http://foo.bar/blatz.html">

This loads the document referenced by the URL part of the CONTENT attribute after x seconds.

© 1995-1998, Stephen Le Hunte


ActiveX

Microsoft's ActiveX technology, recently announced and supported by Internet Explorer 3.0 (for Windows 95/NT) only, represents a huge advance in the capabilities of the Internet Explorer. ActiveX has relaxed the OLE control requirements to practically nothing. While previous OLE controls (such as the .OCX files shipped with Visual Basic) contained a lot of baggage inappropriate to use on the internet, new ActiveX controls (conforming to the re-designed control requirements specification) can be a lot more streamlined, facilitating the easy production of high quality dynamic content for HTML documents.

Internet Explorer 3.0 allows for the use of ActiveX controls, active scripts (such as Visual Basic Script) and active documents. (NOTE : The embedding mechanism, using the <OBJECT> element has been designed in coalition with the W3C, a technical report of which can be found at http://www.w3.org/pub/www/TR/WD-object.html) ActiveX can be used encapsulate practically any application or applet, for use within HTML documents, or any ActiveX control container (i.e. Visual Basic, MS Access, Visual C++ etc.)

The specific method of construction of ActiveX controls is outside the scope of this reference. Users interested in the use of ActiveX components are encouraged to visit the Microsoft Internet Explorer web site at http://www.microsoft.com/ie/, where the ActiveX SDK is available and Visual Basic programmers are encouraged to investigate the Visual Basic Control Creation Edition, which can create ActiveX controls. (Currently this is available in beta form as a free download, visit http://www.microsoft.com/vbasic/ for more information).

Microsoft (and various other software companies) have made available a number of ActiveX controls, which can be readily downloaded and used within HTML documents. Also, the ActiveX development kit can be downloaded, this kit contains many ActiveX/ActiveX Script/Visual Basic Script examples as well as all the specifications necessary for ActiveX control authoring.

The Ncompass plug-in for Netscape allows embedded ActiveX controls to work within Netscape.

Example
This HTML fragment uses the 'label' ActiveX control. NOTE : Netscape will not display these controls. For these to work, you require Internet Explorer 3 with the control installed.

<OBJECT
classid="clsid:99B42120-6EC7-11CF-A6C7-00AA00A47DD2"
id=lbl1
width=50
height=325
align=left
>
<param name="angle" value="90">
<param name="alignment" value="2">
<param name="BackStyle" value="0">
<param name="caption" value="The HTML Reference">
<param name="FontName" value="Arial">
<param name="FontSize" value="24">
<param name="FontBold" value="1">
<param name="Forecolor" value="8421376">
</OBJECT>
<BR><BR>
<B>Welcome to the new Reference pages</B>

NOTE : Netscape will not display the label in the above example. As yet, Netscape doesn't support the <OBJECT> element.

© 1995-1998, Stephen Le Hunte


ActiveX examples

As the ActiveX controls available from Microsoft keep changing (and their number increases), the topics previously topics contained in this section have been removed, so as not to provide confusing/outdated information.

There are examples of ActiveX <OBJECT> embedding on the <OBJECT> page and Visual Basic Script examples on the Visual Basic Script page

Also try the HTMLib Gadgets section, for some ActiveX/VBScript examples. There, there is a full-blown ActiveX control, together with a HTML Layout control version of the Colour Wizard, both of which incorporate scripting.

© 1995-1998, Stephen Le Hunte


Server Side Includes

NOTE : Server Side Includes are HTTP server specific. At present SSI+ has been implemented in the WebQuest and WebQuest95 Web servers from Questar Microsystems, Netscape and Spry Web servers and the Microsoft Internet Information Server. You should check with your server maintainer to be sure that implementing SSI+ tokens in your HTML documents will have the desired effect.

The SSI specification document is written by Mark West of Questar Microsystems. For complete and up to date versions of the specification, visit the Questar Web site at http://www.questar.com/

Server side includes (SSI) applied to an HTML document, provide for interactive real-time features such as echoing current time, conditional execution based on logical comparisons, querying or updating a database, sending an e-mail etc., with no programming or CGI scripts.

As the SSI specification is continually updated, what is presented here is just a taster of SSI+ usage. For the complete and most recent documentation visit the Questar web site (see the link above)

The possible SSI+ tags that are currently useable are :

'echo' | Allows the insertion of certain variables into a HTML document
'include' | Allows the insertion of files into HTML documents
'fsize' | Allows for the insertion of a file's size in a HTML document
'flastmod' | Allows for the insertion of a file's last modification date into a HTML document
'exec' | Executes an external executable file
'config' | Allows setting of various options for other SSI+ tags
'odbc' | Allows the querying and updating of external ODBC databases
'email' | Sends an e-mail whenever a page is accessed or a form is submitted
'if' | Allows conditional execution of other SSI tags and conditional printing of documents based on logical comparisons
'goto' | Makes a jump to a pre-defined SSI 'label'
'label' | Provides a target for 'goto' jumps
'break' | Terminates the HTML document at any point

Some brief examples
'echo'
The 'echo' tag is used for inserting certain variable data into a HTML document. For example :

You are using a <!--#echo var="HTTP_USER_AGENT" --> browser

would translate in the document as being (for the sake of this example, the browser is Internet Explorer 3.0 for Windows 95) :

You are using a Mozilla/2.0 (compatible; MSIE 3.0A; Windows 95) browser.

The various different var values that this tag accepts are described fully in the SSI specification.

'include'
The 'include' tag provides the answer to one of the most common questions within HTML discussions. Namely, ‘How can I insert a file into an HTML page?’

By using the following in an HTML document :

<!--#include virtual="/includes/page.htm"-->

would insert the contents of the file /includes/page.htm into the current HTML document at the insertion point.

'email'
The 'email' tag can be used to send an e-mail message whenever (for example) a page is accessed, or some form data sent to a remote site.

Using the following in a document :

<!--#email tohost="htmlib.com" message="Thanks for the HTMLib" toaddress="response@htmlib.com" subject="The HTMLib" -->

would cause the mail message (specified in the message attribute) to the address specified in the toaddress attribute (if they actually existed.)

As can be seen, the possibilities of SSI+ tags are extensive and it provides a mechanism for performing many common actions that would normally require CGI scripting. As said above, SSI+ use is server specific. If you wish to employ SSI+ tags in your HTML, consult your server maintainer to see if it is possible and also consult the Questar Web site (URL above) for the most recent specification.

© 1995-1998, Stephen Le Hunte


Frames overview

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 sub-divided into separate sections, each of which 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 for example). Within this reference for example, frames are employed to allow constant access to the navigation controls.

Frames are generated by two elements: FRAMESET and FRAME. Netscape only supports full framed documents, while the Internet Explorer also supports floating frames

Frame Document
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 a HTML document should be included within the <FRAMESET> ... </FRAMESET> elements.

NOTE : For an explanation of a working frame example, see the example page.

© 1995-1998, Stephen Le Hunte


<FRAMESET>
This is the main container for a Frame. The FRAMESET element has a matching end element, and within the FRAMESET you can only have other nested FRAMESET, FRAME, or the 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 frame set by using a complete set of pixel values, because browsers use a variety of different screen resolutions when viewing documents, so 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.

E.g.
To specify a three vertical framed layout, where the first section uses 20% 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%">

NOTE : 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.

BORDER="pixel value"
Netscape allows the global setting of frame border thicknesses by using this attribute within the <FRAMESET> element. It accepts a pixel value, which determines the thickness of any borders used within the frame set.

BORDERCOLOR="#rrggbb or colour name"
This Netscape specific attribute sets the colours for the border of the specified frameset. It can also be used in the <FRAME> element (see below) for setting the border colours of a specific frame. It accepts any #rrggbb hex triplet as a value. Any BORDERCOLOR setting in a <FRAMESET> element is over-ridden by a setting present in the <FRAME> element.

FRAMEBORDER="yes|no|0"
Netscape claims support for this attribute (in a similar fashion to that supported by Internet Explorer in the <FRAME> element) to set the borders globally for an entire <FRAMESET>, using values of either "yes" or "no". However, on testing, didn't appear to. Internet Explorer does support the use of this attribute in the <FRAMESET> element, using the value "0" to produce borderless frames. To produce this effect, it also requires using the FRAMESPACING="0" attribute. (The FRAMESPACING attribute sets the amount of 'grey' space between each frame of the frame set.) See the <FRAME> topic for an example of browser-independent borderless frames.

TITLE="informational ToolTip"
The Internet Explorer 4.0 (and above) specific TITLE attribute is used for informational purposes. The <FRAMESET> element is not rendered on screen and so doesn't produce a ToolTip with the contents of the TITLE attribute.

LANG="language setting"
The LANG attribute can be used to specify what language the <FRAMESET> element is using. It accepts any valid ISO standard language abbreviation (for example "en" for English, "de" for German etc.) For more details, see the Document Localisation section for more details.

LANGUAGE="Scripting language"
The LANGUAGE attribute can be used to expressly specify which scripting language Internet Explorer 4.0 uses to interpret any scripting information used in the <FRAMESET> element. It can accept values of vbscript, vbs, javascript or jscript. The first two specify the scripting language as Visual Basic Script, the latter two specify it as using Javascript (the default scripting language used if no LANGUAGE attribute is set.

CLASS="Style Sheet class name"
The CLASS attribute is used to specify the <FRAMESET> element as using a particular style sheet class. See the Style Sheets topic for details.

ID="Unique element identifier"
The ID attribute can be used to either reference a unique style sheet identifier, or to provide a unique name for the <FRAMESET> element for scripting purposes. Any <FRAMESET> element with an ID attribute can be directly manipulated in script by referencing its ID attribute, rather than working through the All collection to determine the element. See the Scripting introduction topic for more information.

Every <FRAMESET> element in a document is an object that can be manipulated through scripting. Scripting of the <FRAMESET> element is supported by both Internet Explorer and Netscape, although Netscape only supports the events - none of the properties, or methods for the <FRAMESET> element are available to Netscape.

<FRAMESET...> Properties
Of the standard Dynamic HTML properties, the <FRAMESET...> element/object supports the following: className, document, id, isTextEdit, lang, language, parentElement, parentTextEdit, sourceIndex, tagName and title. Details of these can be found in the standard Dynamic HTML properties topics.
Also, the <FRAMESET> element supports the following properties, which all reflect the values in the attributes described above: border, borderColor, cols, frameBorder, frameSpacing and rows.

<FRAMESET...> Methods
Of the standard Dynamic HTML methods, the <FRAMESET...> element/object supports the following: contains, getAttribute, removeAttribute, scrollIntoView and setAttribute. Details of these can be found in the standard Dynamic HTML Methods topics.

<FRAMESET...> Events
The <FRAMESET...> element/object supports the following events:

onblur
As a <FRAMESET> element essentially describes different windows, using the onblur event (fired when the user removes the focus from the <FRAMESET> and therefore the window) is equivalent to using the onblur event of the Window Object.

onfocus
Again, using the onfocus event for a <FRAMESET> element (fired when the user focuses on the <FRAMESET> window definition) is the same as using the onfocus event of the Window Object.

onload
The onload event is fired when the <FRAMESET> window definition loads. Using the event in the <FRAMESET> element is the same as using it from the Window Object.

onunload
The onload event is fired when the <FRAMESET> window definition is un-loaded (by the user shutting the browser down, or by navigating to another page. Using the event in the <FRAMESET> element is the same as using it from the Window Object.

© 1995-1998, Stephen Le Hunte


<FRAME>
This element defines a single frame in a frameset. Its possible attributes are:

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 frame set.

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 frame set.) 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).

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 scroll bars 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|0"
This attribute allows control of the frame border display. With this attribute set to "0" (Internet Explorer), the borders for the specific frame are not drawn. Netscape claims supports use of this attribute (using values of "yes|no") in the <FRAME> and <FRAMESET> elements, but on testing didn't appear to. Netscape can support borderless frames, using the example given below.

A note about borderless frames
Internet Explorer and Netscape have different methods for producing borderless frames. In Netscape specifying BORDER="0" in the first <FRAMESET> element is sufficient to remove all the borders from the frame set. Internet Explorer on the other hand, doesn't support this attribute and requires setting of the FRAMEBORDER and FRAMESPACING attributes (both to "0") in the first frame set to remove all the borders. For a browser independent (i.e. working in Netscape and Internet Explorer) borderless frame layout, use :

<HTML>
<HEAD>
<TITLE>Borderless Frames example</TITLE>
</HEAD>
<FRAMESET FRAMEBORDER="0" FRAMESPACING="0" BORDER="0" COLS="165,*" >
<FRAME SRC="contents.htm" NAME="contents">
... other <FRAME> elements (including other <FRAMESET> elements)
...

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 40 pixels.

BORDERCOLOR
This Netscape specific attribute sets the colours for the border of the specified frame. It can also be used in the <FRAMESET> element (see above) for globally setting the border colours of a whole frameset. It accepts any #rrggbb hex triplet as a value. Setting the BORDERCOLOR attribute in the <FRAME> element over-rides any setting given in the <FRAMESET> element, of which the <FRAME> is a part.

TITLE="informational ToolTip"
The Internet Explorer 4.0 (and above) specific TITLE attribute is used for informational purposes. The value of the TITLE attribute aren't presented as a ToolTip for the <FRAME> element.

LANG="language setting"
The LANG attribute can be used to specify what language the <FRAME> element is using. It accepts any valid ISO standard language abbreviation (for example "en" for English, "de" for German etc.) For more details, see the Document Localisation section for more details.

LANGUAGE="Scripting language"
The LANGUAGE attribute can be used to expressly specify which scripting language Internet Explorer 4.0 uses to interpret any scripting information used in the <FRAME> element. It can accept values of vbscript, vbs, javascript or jscript. The first two specify the scripting language as Visual Basic Script, the latter two specify it as using Javascript (the default scripting language used if no LANGUAGE attribute is set.

CLASS="Style Sheet class name"
The CLASS attribute is used to specify the <FRAME> element as using a particular style sheet class. See the Style Sheets topic for details.

ID="Unique element identifier"
The ID attribute can be used to either reference a unique style sheet identifier, or to provide a unique name for the <FRAME> element for scripting purposes. Any <FRAME> element with an ID attribute can be directly manipulated in script by referencing its ID attribute, rather than working through the All collection to determine the element. See the Scripting introduction topic for more information.

DATAFLD="Column Name"
The DATAFLD attribute can be used to specify a data column name from the Data source (see DATASRC) that the <FRAME> is bound to. For more information on the DATAFLD attribute, see the Data Binding topic. For the <FRAME> element, the data received from the data source is used for the SRC attribute, therefore, the data source column should contain valid URL's/URL fragments.

DATASRC="Data Source"
The DATASRC attribute can be used to specify a data source that the <FRAME> is bound to. For more information on the DATASRC attribute, see the Data Binding topic.

Every <FRAME> element in a document is an object that can be manipulated through scripting. Scripting of the <FRAME> element is supported by both Internet Explorer and Netscape, although Netscape only supports the events - none of the properties, or methods for the <FRAME> element are available to Netscape.

<FRAME...> Properties
Of the standard Dynamic HTML properties, the <FRAME...> element/object supports the following: className, document, id, isTextEdit, lang, language, parentElement, parentTextEdit, sourceIndex, tagName and title. Details of these can be found in the standard Dynamic HTML properties topics.
Also, the <FRAME> element supports the following properties, which all reflect the values in the attributes described above: borderColor, dataFld, dataSrc, frameBorder, marginHeight, marginWidth, noResize and src.

<FRAME...> Methods
Of the standard Dynamic HTML methods, the <FRAME...> element/object supports the following: contains, getAttribute, removeAttribute, scrollIntoView and setAttribute. Details of these can be found in the standard Dynamic HTML Methods topics.

<FRAME...> Events
The <FRAME...> element/object doesn't support any events.

© 1995-1998, Stephen Le Hunte


<NOFRAMES>
This element is provided for HTML authors who want to create alternative content for browsers that can not 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 recognised by non-frame capable browsers. As with any HTML, if the browser does not recognise the element, it ignores it. Non frame-capable browsers 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 recognises. 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.

© 1995-1998, Stephen Le Hunte


<IFRAME>

The Internet Explorer (version 3 and above) has introduced the concept of floating frames. These are much like standard frames, except they can be anywhere within a standard HTML document. A floating frame must be enclosed within <IFRAME> ... </IFRAME> elements. Any HTML between the start and end elements will be displayed by browsers that do not support floating frames, while the frame specified in the <IFRAME> elements will be displayed by those browsers that do.

For example :

<IFRAME NAME="content_frame" width="488" height="244" SRC="welcome.htm">This site uses floating frames</IFRAME>

The above HTML fragment would display the file "content_frame" in Internet Explorer, but would display the text 'This site uses floating frames' to any other browser.

The other main difference between floating and normal frames, is that floating frames accept WIDTH, HEIGHT and standard <IMG> HSPACE, VSPACE and ALIGN attributes, to set the display size and alignment of the frame within the document. They can have other files loaded into them exactly as normal frames (by use of the TARGET attribute in the link and the NAME attribute of the frame).

For an example of floating frames, see the examples page

The other floating frame attributes are:

TITLE="informational ToolTip"
The Internet Explorer 4.0 (and above) specific TITLE attribute is used for informational purposes. If present, the value of the TITLE attribute is presented as a ToolTip when the users mouse hovers over the <IFRAME> section.

LANG="language setting"
The LANG attribute can be used to specify what language the <IFRAME> element is using. It accepts any valid ISO standard language abbreviation (for example "en" for English, "de" for German etc.) For more details, see the Document Localisation section for more details.

LANGUAGE="Scripting language"
The LANGUAGE attribute can be used to expressly specify which scripting language Internet Explorer 4.0 uses to interpret any scripting information used in the <IFRAME> element. It can accept values of vbscript, vbs, javascript or jscript. The first two specify the scripting language as Visual Basic Script, the latter two specify it as using Javascript (the default scripting language used if no LANGUAGE attribute is set.

CLASS="Style Sheet class name"
The CLASS attribute is used to specify the <IFRAME> element as using a particular style sheet class. See the Style Sheets topic for details.

STYLE="In line style setting"
As well as using previously defined style sheet settings, the <IFRAME> element can have in-line stylings attached to it. See the Style Sheets topic for details.

ID="Unique element identifier"
The ID attribute can be used to either reference a unique style sheet identifier, or to provide a unique name for the <IFRAME> element for scripting purposes. Any <IFRAME> element with an ID attribute can be directly manipulated in script by referencing its ID attribute, rather than working through the All collection to determine the element. See the Scripting introduction topic for more information.

BORDER="Border Size"
The BORDER attribute can be used to specify the thickness of the border to be rendered around the floating frame. Note that it requires the FRAMEBORDER attribute to be set.

BORDERCOLOR="#rrggbb or Colour Name"
The BORDERCOLOR attribute sets the colour of the border to be rendered around the frame. Note that it requires the frame to have a border, by setting the FRAMEBORDER attribute.

DATAFLD="Column Name"
The DATAFLD attribute can be used to specify a data column name from the Data source (see DATASRC) that the <IFRAME> is bound to. For more information on the DATAFLD attribute, see the Data Binding topic. As with <FRAME>, the data retrieved from the data source will be used for the SRC attribute of the <IFRAME> element, so should contain valid URLs/URL fragments.

DATASRC="Data Source"
The DATASRC attribute can be used to specify a data source that the <IFRAME> is bound to. For more information on the DATASRC attribute, see the Data Binding topic.

FRAMEBORDER="Sets Border"
The FRAMEBORDER attribute accepts boolean values of either "yes" (or "1") or "no" (or "0") to specify whether the frame will be rendered with a border. The default (and also if no FRAMEBORDER attribute is set is "yes"/"1".

NAME="Frame Name"
The NAME attribute names the frame to allow it to be referenced through the Frames collection.

SCROLLING="Scrollbars"
By default, scrollbars will be presented to the reader if the contents of the frame are larger than the specified HEIGHT and WIDTH attributes. To remove the scrollbars, use SCROLLING="no". Using SCROLLING="auto" will only apply scrollbars if the content is too large and using SCROLLING="no" will disable the scrollbars completely.

Every <IFRAME> element in a document is an object that can be manipulated through scripting. Scripting of the <IFRAME> element is only supported by Internet Explorer as Netscape doesn't support the <IFRAME> element.

<IFRAME...> Properties
The <IFRAME...> element/object supports all of the standard Dynamic HTML properties (i.e. className, document, id, innerHTML, innerText, isTextEdit, lang, language, offsetHeight, offsetLeft, offsetParent, offsetTop, offsetWidth, outerHTML, outerText, parentElement, parentTextEdit, sourceIndex, style, tagName and title). Details of these can be found in the standard Dynamic HTML properties topics. Also, the <IFRAME> element supports the following properties, which all reflect the values in the attributes described above: align, border, borderColor, dataFld, dataSrc, frameBorder, height, hspace, scrolling, src, vspace and width.

<IFRAME...> Methods
The <IFRAME...> element/object supports all of the standard Dynamic HTML methods (i.e. click, contains, getAttribute, insertAdjacentHTML, insertAdjacentText, removeAttribute, scrollIntoView and setAttribute). Details of these can be found in the standard Dynamic HTML Methods topics.

<IFRAME...> Events
The <IFRAME...> element/object supports the following events:

onblur
As a <IFRAME> element essentially describes different windows, using the onblur event (fired when the user removes the focus from the <IFRAME> and therefore the window) is equivalent to using the onblur event of the Window Object.

onfocus
Again, using the onfocus event for a <IFRAME> element (fired when the user focuses on the <IFRAME> window definition) is the same as using the onfocus event of the Window Object.

onload
The onload event is fired when the <IFRAME> window definition loads. Using the event in the <IFRAME> element is the same as using it from the Window Object.

onunload
The onload event is fired when the <IFRAME> window definition is un-loaded (by the user shutting the browser down, or by navigating to another page. Using the event in the <IFRAME> element is the same as using it from the Window Object.

© 1995-1998, Stephen Le Hunte


Frames examples

First, a standard frame based layout shall be discussed. Below that, there is an example of the use of Internet Explorer Floating Frames

For the purposes of this example, the layout of an imaginary frame based HTMLib (actually the first version of the HTML based HTMLib) will be used for discussion. Firstly, the main document setting up the framed display shall be explained, then a more detailed examination of the use of the TARGET and NAME attributes shall be looked at.

The initial page that sets up the framed display is called index.htm and looks like this :

The framed layout it generates can be seen below

<HTML>
<HEAD>
<TITLE>The HTML Reference Library - HTMLib</TITLE>
</HEAD>
<FRAMESET COLS="25%,*"> 1
<FRAMESET ROWS="100, *"> 2
3 <FRAME SRC="buttons.htm" NORESIZE SCROLLING="no" NAME="buttons">
4 <FRAME SRC="qr.htm" NORESIZE SCROLLING="yes" NAME="QR">
</FRAMESET> 5
<FRAMESET ROWS="75, *"> 6
7 <FRAME SRC="title.htm" NORESIZE SCROLLING="no" NAME="TITLE">
8 <FRAME SRC="intro.htm" NORESIZE SCROLLING="auto" NAME="main">
</FRAMESET> 9
</FRAMESET> 10
</HTML>

Each line has been labelled with a number. This is for the following line by line breakdown:

1 <FRAMESET COLS="25%,*">
This line splits the viewing window into two vertical sections, the first being 25% of the viewing window and the second column comprising of the rest of the available window space. This is the same as using <FRAMESET COLS="25%","75%">

2 <FRAMESET ROWS="100,*">
This line specifies a frameset that is inside the first vertical column specified in line 1. It divides the column into two horizontal sections, the top section being 100 pixels high, the lower section using the rest of the available viewing window.

3 <FRAME SRC="buttons.htm" NORESIZE SCROLLING="yes" NAME="buttons">
This is the first FRAME element in the document. It specifies the contents of the top frame defined in line 2 as being the file buttons.htm (which lays out the buttons for accessing the Quick Reference sections easily). This frame is set to not allow resizing and is allowed to use scroll bars whenever necessary.

4 <FRAME SRC="qr.htm" NORESIZE SCROLLING="yes" NAME="QR">
Like line 3, this line specifies a document called qr.htm (the document containing the quick reference look up information) to be the contents of the lower frame defined in line 2. As with the above definition, the frame can not be resized and is allowed scroll bars where necessary. It has been named QR. All the links in the file buttons.htm (the file used in the above section) use TARGET="QR" attributes to enable the button graphics to link to certain sections of the file qr.htm.

5 </FRAMESET>
This line closes the FRAMESET definition opened in line 2

6 <FRAMESET ROWS="75,*">
This line (similar to line 2) defines the horizontal division of the right hand frame defined in line 1. It splits it into two section, the top being 75 pixels high and the lower section comprising of the rest of the available viewing space.

7 <FRAME SRC="title.htm" NORESIZE SCROLLING="no" NAME="TITLE">
This line (similar to line 3) specifies the file to be used for the contents of the top section as defined in line 6. The file is title.htm (which contains the ever present 'site' title). This time, the section has been set to be non-scrollable. It is not a problem if some of the title is missing due to an altered viewing area (at least not that much of a problem).

8 <FRAME SRC="intro.htm" NORESIZE SCROLLING="auto" NAME="main">
This line (similar to line 3) specifies the contents of the lower section of the frame defined in line 6. This has been named main and is the main window for the content of the 'site'. Its scrolling attribute has been set to "auto" as some topics will be bigger than others, requiring scrolling, but where the topic is small enough to fit in the window, scroll bars will not be displayed, maximising the space available to the frame.

9 </FRAMESET>
This line closes the FRAMESET definition opened in line 6

10 </FRAMESET>
This line closes the initial FRAMESET definition opened in line 1

The following diagram can be used to show how the TARGET and NAME attributes are used within the frame set up of this 'site'.

A screenshot of this 'site'.

The section labelled 1 is NAMEd "buttons". All of its links use TARGET="QR" in them, to specify that the documents to be loaded by the link (all of the graphics are links) are to be loaded into the frame section that is NAMEd "QR", which in this case is the frame labelled 2.

For example, the button 'M' in the top section, has the following as its link:

<A HREF="qr.htm#QRM" TARGET="QR">
<IMG SRC="images/m.gif" BORDER="0" WIDTH="17" HEIGHT="17" ALT="M">
</A>

which specifies that the document qr.htm#QRM (in this case, the fragment of qr.htm that has been set as <A NAME="QRM">) is to be loaded into the frame NAMEd "QR" (the section labelled 2) when the graphic 'M' is clicked on.

The section labelled 4 is NAMEd "main". All of the links from the file "qr.htm" (displayed in the frame labelled 2) use TARGET="main" in them, so that activating any of the links in the Quick Reference, will load the required document into this window. All of the links in documents that appear in this window do not use any TARGET attributes, which means that any documents they load will be loaded on top of the one containing the link.

Most care should be taken when using external links within a framed set up. If you don't specify a TARGET using one of the special reserved names (see Frames), or set the TARGET to use a name not specified anywhere in your frame set up then the new document will be loaded into whichever frame of your own frame layout the link originated from. If the external target is also a framed document, this can get exceedingly messy.
By far the best way to avoid this 'frame retention' is to always use TARGET="_top" in all links of your site that link to documents external to your own site. That way, the browser will load the document you have linked to, in a clean window, removing all of your frame set up first.

Floating frames
The Internet Explorer allows floating frames to be used within standard documents. To do this, it only requires that a frame be employed within a standard HTML document. For example, for the main interface to the 'Activated HTMLib' section of the HTMLib web site, a floating frame is specified for all of the subsequent HTML documents (both framed and normal) to be displayed in.

The HTML used to do this is :

<IFRAME NAME="content_frame" width="488" height="244" SRC="welcome.htm"></IFRAME>

This sets the frame as being called "content_frame" and being initially loaded with the file "welcome.htm" . The WIDTH and HEIGHT attributes serve to set the size of the frame within the page. The image below shows the resulting floating frame (highlighted with a red border)

ScreenShot showing a floating frame

© 1995-1998, Stephen Le Hunte


White Space elements

These elements are used within a document to break up the flow of the content. Mostly (except for <HR> and <SPACER>) they do not render anything on the screen, except for some extra space.

The 'White Space' elements are :

<BR>
<HR>
<NOBR>
<SPACER>
<WBR>

© 1995-1998, Stephen Le Hunte


<BR>

The Line Break element specifies that a new line must be started at the given point. The amount of line space used is dependant on the particular browser, but is generally the same as it would use when wrapping a paragraph of text over multiple lines.

Example of use:

<P>
Mary had a little lamb<BR>
It's fleece was white as snow<BR>
Everywhere that Mary went<BR>
She was followed by a little lamb.

With the addition of floating images (I.e. the ability to align an embedded image to the left or right of the browser display window) it became necessary to expand the <BR> element. Normal <BR> still just inserts a line break. A CLEAR attribute was added to <BR>, so :

CLEAR=left will break the line, and move vertically down until you have a clear left margin (I.e. where there are no floating images).
CLEAR=right does the same for the right margin.
CLEAR=all moves down until both margins are clear of images.

NOTE : The CLEAR attribute (as well as floating images) are currently only supported by Netscape and the Internet Explorer.

CLASS="Style Sheet class name"
The CLASS attribute is used to specify the <BR> element as using a particular style sheet class. For <BR> elements, style sheet settings such as line-height adjustments are useful. See the Style Sheets topic for details.

STYLE="In line style setting"
As well as using previously defined style sheet settings, the <BR> element can have in-line stylings attached to it. See the Style Sheets topic for details. For <BR> elements, style sheet settings such as line-height adjustments are useful.

ID="Unique element identifier"
The ID attribute can be used to either reference a unique style sheet identifier.

Every <BR> element in a document is an object that exposes certain properties and can be manipulated with certain methods. Note that scripting of the <BR> element/object is only supported by Internet Explorer 4.0 in its Dynamic HTML object model. Netscape does not support direct scripting of the <BR> element at all.

<BR...> Properties
Of the standard Dynamic HTML properties, the <BR...> element/object supports the following className, document, id, isTextEdit, lang, language, offsetHeight, offsetLeft, offsetParent, offsetTop, offsetWidth, outerHTML, outerText, parentElement, parentTextEdit, sourceIndex, style, tagName and title. Details of these can be found in the standard Dynamic HTML properties topics.
The <BR> element also supports the clear property that reflects the value of the CLEAR attribute (as described above).

<BR...> Methods
Of the standard Dynamic HTML methods, the <BR...> element/object supports the following contains, getAttribute, insertAdjacentHTML, insertAdjacentText, removeAttribute, scrollIntoView and setAttribute. Details of these can be found in the standard Dynamic HTML Methods topics.

<BR...> Events
The <BR...> element/object doesn't support any events.

© 1995-1998, Stephen Le Hunte


<HR>

A Horizontal Rule element is a divider between sections of text such as a full width horizontal rule or equivalent graphic.

Example of use:

<HR>
<ADDRESS>August 20<SUP>th</SUP>, 1996, Swansea</ADDRESS>
</BODY>

would render as :

August 20th, 1996, Swansea

The <HR> element specifies that a horizontal rule of some sort (The default being a shaded engraved line) be drawn across the page. Recent browsers have added new attributes to this element, which can be used to describe the colouring, size and position of the horizontal rule.

<HR SIZE=number>
The SIZE attributes lets the author give an indication of how thick they wish the horizontal rule to be.

<HR WIDTH=number|percent>
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 document width.

<HR ALIGN=left|right|center>
Now that horizontal rules do not have to be the width of the page it is necessary to allow the author to specify whether they should be pushed up against the left margin, the right margin, or centred in the page.

<HR NOSHADE>
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.

<HR COLOR>=name|#rrggbb
Internet Explorer allows the specifying of the hard rule colour. Accepted values are any of the Internet Explorer supported colour names (see <BODY BGCOLOR=...>, or any acceptable rrggbb hex triplet.

TITLE="informational ToolTip"
The Internet Explorer 4.0 (and above) specific TITLE attribute is used for informational purposes. If present, the value of the TITLE attribute is presented as a ToolTip when the users mouse hovers over the <HR> section.

LANG="language setting"
The LANG attribute can be used to specify what language the <HR> element is using. It accepts any valid ISO standard language abbreviation (for example "en" for English, "de" for German etc.) For more details, see the Document Localisation section for more details.

LANGUAGE="Scripting language"
The LANGUAGE attribute can be used to expressly specify which scripting language Internet Explorer 4.0 uses to interpret any scripting information used in the <HR> element. It can accept values of vbscript, vbs, javascript or jscript. The first two specify the scripting language as Visual Basic Script, the latter two specify it as using Javascript (the default scripting language used if no LANGUAGE attribute is set.

CLASS="Style Sheet class name"
The CLASS attribute is used to specify the <HR> element as using a particular style sheet class. See the Style Sheets topic for details.

STYLE="In line style setting"
As well as using previously defined style sheet settings, the <HR> element can have in-line stylings attached to it. See the Style Sheets topic for details.

ID="Unique element identifier"
The ID attribute can be used to either reference a unique style sheet identifier, or to provide a unique name for the <HR> element for scripting purposes. Any <HR> element with an ID attribute can be directly manipulated in script by referencing its ID attribute, rather than working through the All collection to determine the element. See the Scripting introduction topic for more information.

Examples:

<HR>
<HR SIZE="5">
<HR WIDTH="50%">
<HR WIDTH="50%" ALIGN="right">
<HR WIDTH="50%" ALIGN="center" NOSHADE>

would render as :

Every <HR> element in a document is an object that can be manipulated through scripting. Note that scripting of the <HR> element/object is only supported by Internet Explorer 4.0 in its Dynamic HTML object model. Netscape does not support direct scripting of the <HR> element at all.

<HR...> Properties
Of the standard Dynamic HTML properties, the <HR...> element/object supports the following: className, document, id, isTextEdit, lang, language, offsetHeight, offsetLeft, offsetParent, offsetTop, offsetWidth, outerHTML, outerText, parentElement, parentTextEdit, sourceIndex, style, tagName and title. Details of these can be found in the standard Dynamic HTML properties topics.
It also supports the align, color, noShade, size and width properties, which directly reflect the attribute values (described above).

<HR...> Methods
The <HR...> element/object supports all of the standard Dynamic HTML methods (i.e. click, contains, getAttribute, insertAdjacentHTML, insertAdjacentText, removeAttribute, scrollIntoView and setAttribute). Details of these can be found in the standard Dynamic HTML Methods topics.

<HR...> Events
The <HR...> element/object supports all of the standard Dynamic HTML events (i.e. onclick, ondblclick, ondragstart, onfilterchange, onhelp, onkeydown, onkeypress, onkeyup, onmousedown, onmousemove, onmouseout, onmouseover, onmouseup and onselectstart). Details of these can be found in the standard Dynamic HTML events topics.

© 1995-1998, Stephen Le Hunte


<NOBR>

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. While <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 the Internet Explorer.

© 1995-1998, Stephen Le Hunte


<SPACER>

This Netscape specific attribute can be used to include hard coded white space in a document. It accepts the following attributes :

TYPE="horizontal|vertical|block"
The TYPE of <SPACER> can be either horizontal, vertical or block. A horizontal <SPACER> inserts horizontal white space in between words. A vertical <SPACER> inserts vertical space between lines and the block <SPACER> behaves like an image (except doesn't display an image.) It essentially, reserves a block of space within the document.

SIZE="value"
When a <SPACER TYPE="horizontal"> or <SPACER TYPE="vertical"> is used, the SIZE attribute specifies its size in pixels. Any setting of this attribute is ignored if a <SPACER TYPE="block"> is used.

WIDTH="value"
When a <SPACER TYPE="block"> is used, the WIDTH attribute specifies the WIDTH of the block to be reserved as white space.

HEIGHT="value"
When a <SPACER TYPE="block"> is used, the HEIGHT attributes specifies the HEIGHT of the block to be reserved as white space.

ALIGN="alignment"
When a <SPACER TYPE="block"> is used, the ALIGN attributes specifies the alignment of the white space block and can accept any alignments as used by the <IMG> element for embedding images.

Example
The following HTML fragment inserts a horizontal spacer of 25 pixels between two words, as shown below

<P>Hello and Welcome<SPACER TYPE="horizontal" SIZE="25">to the HTML Reference Library. To those of you familiar with the previous incarnation of this project (The HTML Reference Library - HTMLib in Windows .HLP format) the content and working of these pages will probably be obvious.

would display as :

Hello and Welcome to the HTML Reference Library. To those of you familiar with the previous incarnation of this project (The HTML Reference Library - HTMLib in Windows .HLP format) the content and working of these pages will probably be obvious.

© 1995-1998, Stephen Le Hunte


<WBR>

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 : The <WBR> Element is supported only by Netscape and the Internet Explorer.

© 1995-1998, Stephen Le Hunte


Document Localisation

Document localisation (known as 'HTML Inernationalisation' in the RFC documents) is a separate extension to standard HTML, to provide methods for creating HTML documents in other languages other than English. In most Western languages for example, the text flows from right to left and from the top to the bottom of the page. In other languages (Hebrew, Arabic, some Chinese dialects), this isn't the case. HTML Internationalisation is effectively a pair of specifications to address such issues.

A full discussion of HTML Internationalisation is outside the scope of this reference and so users are encouraged to obtain the following documents:

RFC1766 (Tags for the Identification of Languages)
This rfc discusses (in detail) the standardised use of the LANG attribute, for specifying the language content of elements. Basically, the LANG attribute takes any ISO-standard language code, which basically specifies, in two parts the language, followed by a sub-definition which specifies information such as dialect descriptors etc. For example, 'fr' for French, 'de' for German, 'en-valleys' for English language, with a South Wales 'valley' regional accent/dialect.

RFC2070 (Internationalization of the Hypertext Markup Language)
RFC2070 builds on RFC1766 and introduces attributes such as CHARSET, DIR and elements such as <BDO>. These attributes are intended to be supported by all elements that contain, or display some textual information that may be language dependant.

For further details about document internationalisation, readers are encouraged to seek out the two above-mentioned RFC documents.

Note that with recent advances in font-embedding technology with the version 4.0x browsers, it's possible to dynamically embed fonts in documents. These can include localised fonts (Japanese character sets for example). For example, for Netscape 4.0 and above, an author can create a font-definition file which can be included into a style sheet by using:

<STYLE TYPE="text/css">
<!--
@fontdef url(http://www.htmlib.com/fonts/htmlib.pfr);
-->
</STYLE>

or:

<LINK REL=FONTDEF SRC="http://www.htmlib.com/fonts/htmlib.pfr">

with elements then using the font as they normally would for style sheets. Internet Explorer 4.0 supports the @font-face style sheet property for embedding fonts. For more details about font embedding, visit either the Netscape, or Microsoft web sites.

© 1995-1998, Stephen Le Hunte


Expando Attributes/Properties

Internet Explorer 4.0 now supports what Microsoft have named 'expando' properties. Basically, this means that any attribute used in a known element can be manipulated through scripting. Also, within a script function, properties of referenced elements can be created, even if the attribute for the new property was never set. This is even taken a stage further, in that unknown elements can be used within a HTML document, setting attribute/property values which can be utilised in a script.

A good example of this has been used within the HTMLib. In each title (the non-scrolling region above this topic), the links that open the scripting and syntax windows use extra attributes of XSIZE and YSIZE, which are used to specify the size of the window that is opened to view the syntax, or scripting topic. For example:

<A HREF="expandos.htm" ID="SyntaxLink" ... XSIZE="375" YSIZE="390">Expando Syntax</A>

Within the HTMLib front-end, these properties are picked up when the link is activated and used to size the new window created. Within a HTML document:

SyntaxLink.xsize

would return the value given in the XSIZE attribute, if VBScript was the scripting language for the element. JScript (Javascript) is case-sensitive, so the reference would have to be:

SyntaxLink.XSIZE

otherwise, a new expando property of the referenced element would be created, with the lowercase name (which could cause hard-to-find scripting bugs).

Note that for expando properties to be activated within a document, the document.expando property must be set to true. This is the default value.

As you can see, this brings almost unlimited attribute access through scripting, as now you're free to set up/manipulate any attribute/property value. Any unknown attributes set in an element are accessible as a property of the element.

© 1995-1998, Stephen Le Hunte


Style sheets - overview

NOTE : Presented here is a brief overview of the Style Sheet specification. For a more complete reference, visit the Style Sheet resource page at the W3C (at http://www.w3.org/pub/WWW/Style/). Also, Microsoft have produced an excellent "Users guide to stylesheets" document available from the Microsoft Web Development Workshop web site at http://www.microsoft.com/workshop/

Style Sheets allow the HTML author to separate presentation definitions from content in HTML documents. HTML was designed primarily as a content based mark up language and the introduction of various text level formatting elements and attributes only served to confuse the issue. Microsoft have led the way by implementing style sheet support in Internet Explorer 3.0 (at the time of writing, this was the only common browser supporting style sheets).

Anyone who does a lot of work using a word processor should be familiar with the concept of style sheets. Basically, styles are defined and then applied to blocks of text (or even single characters) by referring to the definition in the available style range.

The simplest form of style sheet could be:

P {color : #800000}

This would cause any text that is classified as a paragraph (i.e. uses a <P> element) to be rendered using a dark red colour. For a breakdown of the possible properties for use in style sheets, see the Properties and Values topic.

Applying a style sheet to a document
Style definitions can be applied to documents and their elements in on of four ways.

  • Using the <LINK> attribute to point to an external style sheet. (See <LINK> for details)
  • Using the <STYLE> element within the <HEAD> of a document. (See <STYLE> for details)
  • Using the @import mechanism (similar to the <LINK> method above, this allows the importing of external style sheets.)
  • Using the STYLE attribute in an element. This is allowed for any elements allowed within the <BODY> of a HTML document.

The fourth option above, while allowed, is not recommended as it mixes style definitions with content, which goes against the style sheet concept. An example would be :

<H1 STYLE="color : #FF0000">Heading 1</H1>

Note : If multiple style sheet declaration methods are used (i.e. a stylesheet is <LINK>ed in and a <STYLE> block is also used, then multiple element style settings will be used in the order they are read. For example, if both the <LINK>ed style sheet and the <STYLE> block have settings for the <Hx> element, then that in the <STYLE> block will take precedence. Settings using different properties on the same element will all be applied together for the element. For example, if the <LINK>ed style sheet contains A { color:red } and the <STYLE> block contains A:link { color:blue } then all <A> elements will be red, with links (i.e. <A HREF="...">) being blue. Likewise, style settings set in the STYLE attribute of an element will override any settings in a <STYLE> block, or a linked style sheet.

There are various methods for denoting the style declaration and all use separate methods within the HTML to determine the style to be used :

CLASS as selector
The CLASS attribute was first proposed in the now expired HTML 3 specification. All elements that can reside within the <BODY> of a HTML document can be addressed using a CLASS attribute.

Within the style sheet definition, the style class is set thus:

P.redtext { color : #FF0000}

So, any paragraphs denoted by a <P CLASS="redtext">text</P> HTML sequence would be rendered using a red coloured text. If the style class is defined with no major element, i.e. :

.redtext { color : #FF0000}

then all elements that use CLASS="redtext" would be coloured red.

ID as selector
Like the CLASS attribute above, the ID attribute was first introduced in the HTML 3 specification. The difference between it and the CLASS attribute is that the ID attribute must be guaranteed a unique identifier within the document. It must also be addressed within the style sheet preceded with a # character. I.e.:

#redtext { color : #FF0000}

<P ID="redtext">some text</P> would be coloured red.

Context sensitive selectors
Suppose that you wanted to make all text that was defined as strong within a paragraph be rendered using a lime green colour. You could use :

STRONG { color : #00FF00}

in the style sheet definition. However, this would cause all text that was enclosed in <STRONG> ... </STRONG> elements to be rendered lime green. This is where context sensitive selectors are useful. If you use :

P STRONG { color : #00FF00}

in the style sheet definition, then only text enclosed in <STRONG> ... </STRONG> elements enclosed in <P> ... </P> elements would be lime green. For instance :

<P><STRONG>This will be lime green</STRONG></P> This <STRONG>other bit</STRONG> won’t be.

As with the two methods of style definition above, this can be used for all elements normally contained within the body of a document.

Hopefully, this has provided enough starter information about style sheets. Users interested in employing style sheet presentation to their documents should obtain the Cascading Style Sheet specification from the W3C Style Sheet Resource page for more detailed information.

© 1995-1998, Stephen Le Hunte


Javascript Style sheets

Note : Javascript Style Sheets are only supported by the Navigator component of Netscape Communicator.

As well as fully supporting the Cascading Style Sheets specification (see Style Sheets overview), Netscape introduced Javascript Style Sheets. Even though all CSS style sheet declarations can be re-written in JSS, the results would only be visible in Netscape v4.0 and above and the style sheet declarations can not be manipulated through scripting without re-loading the document.

The most basic method of declaring a style using Javascript Style Sheets is to reference the particular element through Netscape's tags array (a property of the Document Object). For example:

<STYLE TYPE="text/javascript">
tags.P.color = "#FF0000"
</STYLE>

Note the different TYPE attribute for the <STYLE> element. The above declaration sets all <P> elements to use a red colour in the document. For specifying multiple declarations for the same element, the width keyword can be used. For example:

<STYLE TYPE="text/javascript">
with (tags.P) {
color = "#FF0000";
fontSize = "20pt";
margin = "0.5in";
}
</STYLE>

Note the subtle difference between the JSS syntax (e.g. fontSize) and that of standard CSS (e.g. font-size). A more complete listing of the changes is given below.

To specify classes of style sheet declaration (i.e. as you would with .className {declaration} in CSS), the classes property must be used. For example:

<STYLE TYPE="text/javascript">
classes.yellow.all.color="#FF0000"
</STYLE>

The style could then be used as :

<P CLASS="yellow"> some yellow text

To specify classes for just one element, change the all keyword for the element name (i.e classes.red.P.color="#FF0000" / <P CLASS="red">.

Javascript style sheets also have a similar mechanism for using the ids property, to set styles for elements that use their ID property to reference a style sheet. This can allow multiple styles to be attached to a single element. For example, setting:

<STYLE TYPE="text/javascript">
classes.BigText.all.fontSize = "20pt"
ids.BlueText.color = "#0000FF"
</STYLE>

and then using:

<P CLASS="BigText" ID="BlueText">Some big blue text

would give the paragraph text a blue colouring, as well as it being big text.

For contextual selection of style declarations, simply use:

<STYLE TYPE="text/javascript">
contextual(tags.H1, tags.EM).color = "green";
</STYLE>

this is the same as using H1 EM {color:green} as one would when using standard Style Sheets.

CSS vs. JSS property names
As with the Internet Explorer specific Style Object, Netscape renamed some of the style sheet properties for use with Javascript Style Sheets. Basically, where the style sheet name has a hyphen, the Javascript style sheet name uses an unhyphenated, mixed case name. I.e. border-color would be borderColor, text-align is textAlign. That aside, the property values that can be attributed to the various Javascript style sheets properties are the same as those that can be set for the various standard CSS properties. Take a look through the Properties and Values topics for more information on style sheet attribute values.

© 1995-1998, Stephen Le Hunte


Style Sheet Properties and Values

NOTE : The information presented here is abridged from the style sheet specification (along the lines of the properties quick reference guide at the W3C web site (http://www.w3.org/pub/WWW/Style/) For more detailed information, consult the Style Sheet specification.

The Style Sheet properties can be split into the following groups:

Colour and background properties
Font properties
Text properties
Box properties
Classification properties
Positioning properties
Printing properties
Filter properties
Miscellaneous properties
Also, some information about units
Length units
Percentage units
Colour units
URL

© 1995-1998, Stephen Le Hunte


Pseudo Classes & Elements

Several pseudo-classes and pseudo-elements exist in CSS. Pseudo-classes refer to dynamically linked groups of class definitions (i.e. all links etc.) while pseudo-elements refer to a sub-section of a larger elements content (i.e. the first line of a paragraph etc.).

The various pseudo-classes are:

A:link
This pseudo-class can be used to set the style definitions for all links in the document (it's the same as using <BODY LINK="...">. Note that this is different to setting a style definition for a single A element, as it only sets style definitions for links. Any anchors in the document (i.e. <A NAME="...">) will not be affected by this pseudo-class. It's used as:

A:link { color:#FF0000}

which would set all the documents links to a bright red colour.

A:active
This pseudo-class can be used to set the style definitions for all active links in the document, the style settings being visible for the moment that the user activates a link (it's the same as using <BODY ALINK="...">. It's used as:

A:active { color:#0000FF}

which would set all the documents links to a bright blue colour when they're activated.

A:visited
This pseudo-class can be used to set the style definitions for all visited links in the document, the style settings being applied for links that navigate to documents that the user has already seen (it's the same as using <BODY VLINK="...">. It's used as:

A:visited { color:#800000}

which would set all the documents links to a dark blue colour after they've been activated.

A:hover
Using the A:hover pseudo-class is essentially the same as using an OnMouseOver/OnMouseOut pair of script event handlers for links in the document. Whatever style settings are applied to the :hover pseudo-class will be applied to links when the users mouse 'hovers' over them, with the links reverting back to any default settings when the users mouse moves away from the link. For example:

A:hover { font-weight : bold }

causes the documents links to bolden when the user passes the mouse over them. Try it with with this link.

Note : As with the above link, it's possible to mix standard class settings with pseudo-classes. The above link boldens when the mouse hovers over it, but none of the other links in the document do. That's because it mixes a class definition, with the :hover pseudo-class. For example:

A.external:hover { font-weight:bold}

So, any links that use the CLASS="external" class descriptor, will bolden upon mouse hovering, but links that use different CLASS="..." descriptors, or none at all, will stay the same font weight as normal (assuming no other style sheet definitions have been applied to the <A> element).

Note : At the time of writing, A:hover was only supported by Internet Explorer 4.0 and above.

The various pseudo-classes are:

:first-letter
The :first-letter pseudo-element (commonly referred to as 'Initial Caps' in typography circles) should apply the defined stylings to the first letter only of the block-level element that it's defined for. For example:

P:first-letter {font-size : 20pt}

would cause the first letter of all <P> element content to be rendered as 20pt. At the time of writing, the :first-letter pseudo-class wasn't supported by any of the major browsers.

:first-line
The :first-line pseudo-element should apply the defined styles to the first line of the block-level element to which it is attached. For example:

BODY:first-line {font-variant : small-caps}

should cause the first line of the document text to be rendered in small capital letters. At the time of writing, the :first-letter pseudo-class wasn't supported by any of the major browsers.

© 1995-1998, Stephen Le Hunte


Colour properties

color
Value: <color>
Initial: UA specific
Applies to: all elements
Inherited: yes
Percentage values: N/A

This property describes the text color of an element (often referred to as the foreground color). There are different ways to specify red:

EM { color: red } /* natural language */ EM { color: rgb(255,0,0) } /* RGB range 0-255 */

See the Colour Units topic for more details about colour units.

background-color
Value: <color> | transparent
Initial: transparent
Applies to: all elements
Inherited: no
Percentage values: N/A

This property sets the background color of an element.

H1 { background-color: #F00 }

background-image
Value: <url> | none
Initial: none
Applies to: all elements
Inherited: no
Percentage values: N/A

This property sets the background image of an element. When setting a background image, one should also set a background color that will be used when the image is unavailable. When the image is available, it is overlaid on top of the background color.

BODY { background-image: url(marble.gif) }
P { background-image: none }

background-repeat
Value: repeat | repeat-x | repeat-y | no-repeat
Initial: repeat
Applies to: all elements
Inherited: no
Percentage values: N/A

If a background image is specified, the value of 'background-repeat' determines how/if the image is repeated.

A value of 'repeat' means that the image is repeated both horizontally and vertically. The 'repeat-x' ('repeat-y') value makes the image repeat horizontally (vertically), to create a single band of images from one side to the other. With a value of 'no-repeat', the image is not repeated.

BODY {
background: red url(pendant.gif);
background-repeat: repeat-y;
}

In the example above, the image will only be repeated vertically.

background-attachment
Value: scroll | fixed
Initial: scroll
Applies to: all elements
Inherited: no
Percentage values: N/A

If a background image is specified, the value of 'background-attachment' determines if it is fixed with regard to the canvas or if it scrolls along with the content.

BODY {
background: red url(pendant.gif);
background-repeat: repeat-y;
background-attachment: fixed;
}

Note : Browsers may treat 'fixed' as 'scroll'. However, it is recommended they interpret 'fixed' correctly, at least on the <HTML> and BODY elements, since there is no way for an author to provide an image only for those browsers that support 'fixed'.

background-position
Value: [<percentage> | <length>]{1,2} | [top | center | bottom] || [left | center | right]
Initial: 0% 0%
Applies to: block-level and replaced elements
Inherited: no
Percentage values: refer to the size of the element itself

If a background image has been specified, the value of 'background-position' specifies its initial position.

With a value pair of '0% 0%', the upper left corner of the image is placed in the upper left corner of the box that surrounds the content of the element (i.e., not the box that surrounds the padding, border or margin). A value pair of '100% 100%' places the lower right corner of the image in the lower right corner of the element. With a value pair of '14% 84%', the point 14% across and 84% down the image is to be placed at the point 14% across and 84% down the element.

With a value pair of '2cm 2cm', the upper left corner of the image is placed 2cm to the right and 2cm below the upper left corner of the element.

If only one percentage or length value is given, it sets the horizontal position only, the vertical position will be 50%. If two values are given, the horizontal position comes first. Combinations of length and percentage values are allowed, e.g. '50% 2cm'. Negative positions are allowed.

One can also use keyword values to indicate the position of the background image. Keywords cannot be combined with percentage values, or length values. The possible combinations of keywords and their interpretations are as follows:

'top left' and 'left top' both mean the same as '0% 0%'. 'top', 'top center' and 'center top' mean the same as '50% 0%'. 'right top' and 'top right' mean the same as '100% 0%'. 'left', 'left center' and 'center left' mean the same as '0% 50%'. 'center' and 'center center' mean the same as '50% 50%'. 'right', 'right center' and 'center right' mean the same as '100% 50%'. 'bottom left' and 'left bottom' mean the same as '0% 100%'. 'bottom', 'bottom center' and 'center bottom' mean the same as '50% 100%'. 'bottom right' and 'right bottom' mean the same as '100% 100%'. examples:

BODY { background: url(banner.jpeg) right top }
BODY { background: url(banner.jpeg) top center }
BODY { background: url(banner.jpeg) center }
BODY { background: url(banner.jpeg) bottom }

If the background image is fixed with regard to the canvas (see the 'background-attachment' property above), the image is placed relative to the canvas instead of the element. E.g.:

BODY {
background-image: url(logo.png);
background-attachment: fixed;
background-position: 100% 100%;
}

In the example above, the image is placed in the lower right corner of the canvas.

background
Value: <background-color> || <background-image> || <background-repeat> || <background-attachment> || <background-position>
Initial: not defined for shorthand properties
Applies to: all elements
Inherited: no
Percentage values: allowed on <background-position>

The 'background' property is a shorthand property for setting the individual background properties (i.e., 'background-color', 'background-image', 'background-repeat', 'background-attachment' and 'background-position') at the same place in the style sheet.

Possible values on the 'background' properties are the set of all possible values on the individual properties.

BODY { background: red }
P { background: url(chess.png) gray 50% repeat fixed }

The 'background' property always sets all the individual background properties. In the first rule of the above example, only a value for 'background-color' has been given and the other individual properties are set to their initial value. In the second rule, all individual properties have been specified.

© 1995-1998, Stephen Le Hunte


Font properties

font-size
Value: <absolute-size> | <relative-size> | <length> | <percentage>
Initial: medium
Applies to: all elements
Inherited: yes
Percentage values: relative to parent element's font size

<absolute-size>
An <absolute-size> keyword is an index to a table of font sizes computed and kept by the browser. Possible values are: [ xx-small | x-small | small | medium | large | x-large | xx-large ]. On a computer screen a scaling factor of 1.5 is suggested between adjacent indexes; if the 'medium' font is 10pt, the 'large' font could be 15pt. Different media may need different scaling factors. Also, the UA should take the quality and availability of fonts into account when computing the table. The table may be different from one font family to another.

<relative-size>
A <relative-size> keyword is interpreted relative to the table of font sizes and the font size of the parent element. Possible values are: [ larger | smaller ]. For example, if the parent element has a font size of 'medium', a value of 'larger' will make the font size of the current element be 'large'. If the parent element's size is not close to a table entry, the browser is free to interpolate between table entries or round off to the closest one. The browser may have to extrapolate table values if the numerical value goes beyond the keywords. Length and percentage values should not take the font size table into account when calculating the font size of the element.

Negative values are not allowed.

On all other properties, 'em' and 'ex' length values refer to the font size of the current element. On the 'font-size' property, these length units refer to the font size of the parent element.

Note that an application may reinterpret an explicit size, depending on the context. E.g., inside a VR scene a font may get a different size because of perspective distortion.

P { font-size: 12pt; }
BLOCKQUOTE { font-size: larger }
EM { font-size: 150% }
EM { font-size: 1.5em }

If the suggested scaling factor of 1.5 is used, the last three declarations are identical.

font-family
Value: [[<family-name> | <generic-family>],]* [<family-name> | <generic-family>]
Initial: UA specific
Applies to: all elements
Inherited: yes
Percentage values: N/A

The value is a prioritized list of font family names and/or generic family names. Values are separated by a comma to indicate that they are alternatives:

BODY { font-family: gill, helvetica, sans-serif }

There are two types of list values:

<font-family>
The name of a font family of choice. In the last example, "gill" and "helvetica" are font families.

<generic-family>
In the example above, the last value is a generic family name. The following generic families are defined:

'serif' (e.g. Times)
'sans-serif' (e.g. Helvetica)
'cursive' (e.g. Zapf-Chancery)
'fantasy' (e.g. Western)
'monospace' (e.g. Courier)

It is useful to offer a generic font family as a last alternative, in case the specified font is not available on the viewers system.

Font names containing white space should be quoted:

BODY { font-family: "new century schoolbook", serif }
<BODY STYLE="font-family: 'My own font', fantasy">

font-weight
Value: normal | bold | bolder | lighter | 100 | 200 | 300 | 400 | 500 | 600 | 700 | 800 | 900
Initial: normal
Applies to: all elements
Inherited: yes
Percentage values: N/A

The 'font-weight' property selects the weight of the font. The values '100' to '900' form an ordered sequence, where each number indicates a weight that is at least as dark as its predecessor. The keyword 'normal' is synonymous with '400', and 'bold' is synonymous with '700'. Keywords other than 'normal' and 'bold' have been shown to be often confused with font names and a numerical scale was therefore chosen for the 9-value list.

P { font-weight: normal }
H1 { font-weight: 700 }

The 'bolder' and 'lighter' values select font weights that are relative to the weight inherited from the parent:

STRONG { font-weight: bolder }

Child elements inherit the resultant weight, not the keyword value.

font-style
Value: normal | italic | oblique
Initial: normal
Applies to: all elements
Inherited: yes
Percentage values: N/A

The 'font-style' property selects between normal (sometimes referred to as "roman" or "upright"), italic and oblique faces within a font family.

A value of 'normal' selects a font that is classified as 'normal' in the browsers (typically, the systems) font database, while 'oblique' selects a font that is labeled 'oblique'. A value of 'italic' selects a font that is labeled 'italic', or, if that is not available, one labeled 'oblique'.

The font that is labeled 'oblique' in the UA's font database may actually have been generated by electronically slanting a normal font.

Fonts with Oblique, Slanted or Incline in their names will typically be labeled 'oblique' in the UA's font database. Fonts with Italic, Cursive or Kursiv in their names will typically be labeled 'italic'.

H1, H2, H3 { font-style: italic }
H1 EM { font-style: normal }

In the example above, emphasized text within 'H1' will appear in a normal face.

font-variant
Value: normal | small-caps
Initial: normal
Applies to: all elements
Inherited: yes
Percentage values: N/A

Another type of variation within a font family is the small-caps. In a small-caps font the lower case letters look similar to the uppercase ones, but in a smaller size and with slightly different proportions. The 'font-variant' property selects that font.

A value of 'normal' selects a font that is not a small-caps font, 'small-caps' selects a small-caps font. It is acceptable (but not required) in CSS1 if the small-caps font is a created by taking a normal font and replacing the lower case letters by scaled uppercase characters. As a last resort, uppercase letters will be used as replacement for a small-caps font.

The following example results in an 'H3' element in small-caps, with emphasized words in oblique small-caps:

H3 { font-variant: small-caps } EM { font-style: oblique }

There may be other variants in the font family as well, such as fonts with old-style numerals, small-caps numerals, condensed or expanded letters, etc. CSS1 has no properties that select those.

font
Value: [<font-style> || <font-variant> || <font-weight> ]? <font-size> [ / <line-height> ]? <font-family>
Initial: not defined for shorthand properties
Applies to: all elements
Inherited: yes
Percentage values: allowed on <font-size> and <line-height> only

The 'font' property is a shorthand property for setting 'font-style' 'font-variant' 'font-weight' 'font-size', 'line-height' and 'font-family' at the same place in the style sheet. The syntax of this property is based on a traditional typographical shorthand notation to set multiple properties related to fonts.

For a definition of allowed and initial values, see the previously defined properties. Properties for which no values are given are set to their initial value.

P { font: 12pt/14pt sans-serif }
P { font: 80% sans-serif }
P { font: x-large/110% "new century schoolbook", serif }
P { font: bold italic large Palatino, serif }
P { font: normal small-caps 120%/120% fantasy }

In the second rule, the font size percentage value ('80%') refers to the font size of the parent element. In the third rule, the line height percentage refers to the font size of the element itself.

In the first three rules above, the 'font-style', 'font-variant' and 'font-weight' are not explicitly mentioned, which means they are all three set to their initial value ('normal'). The fourth rule sets the 'font-weight' to 'bold', the 'font-style' to 'italic' and implicitly sets 'font-variant' to 'normal'.

The fifth rule sets the 'font-variant' ('small-caps'), the 'font-size' (120% of the parent's font), the 'line-height' (120% times the font size) and the 'font-family' ('fantasy'). It follows that the keyword 'normal' applies to the two remaining properties: 'font-style' and 'font-weight'.

@font-face
Value: {font-family : <font-family>; url(<url>;)
Initial: not defined
Applies to: all elements
Inherited: yes
Percentage values: n/a

The @font-face property specifies a font to embed into your HTML document. This feature allows you to use specific fonts that might not be available on your local system. The URL should point to an embedded OpenType file (.eot or .ote format). The file contains compressed, subsetted font data that is converted to a TrueType font and installed by T2embed.dll.

© 1995-1998, Stephen Le Hunte


Text properties

word-spacing
Value: normal | <length>
Initial: normal
Applies to: all elements
Inherited: yes
Percentage values: N/A

The length unit indicates an addition to the default space between words. Values can be negative, but there may be implementation-specific limits. The UA is free to select the exact spacing algorithm. The word spacing may also be influenced by justification (which is a value of the 'align' property).

H1 { word-spacing: 0.4em }

Here, the word-spacing between each word in 'H1' elements would be increased by '1em'.

Note : Internet Explorer 4.0 does not support the word-spacing style sheet property.

letter-spacing
Value: normal | <length>
Initial: normal
Applies to: all elements
Inherited: yes
Percentage values: N/A

The length unit indicates an addition to the default space between characters. Values can be negative, but there may be implementation-specific limits. The UA is free to select the exact spacing algorithm. The letter spacing may also be influenced by justification (which is a value of the 'align' property).

BLOCKQUOTE { letter-spacing: 0.1em }

Here, the letter-spacing between each character in <BLOCKQUOTE> elements would be increased by '0.1em'.

With a value of 'normal', the browsers may change the space between letters to justify text. This will not happen if 'letter-spacing' is explicitly set to a <length> value:

BLOCKQUOTE { letter-spacing: 0 }
BLOCKQUOTE { letter-spacing: 0cm }

When the resultant space between two letters is not the same as the default space, UAs should not use ligatures.

text-decoration
Value: none | [ underline || overline || line-through || blink ]
Initial: none
Applies to: all elements
Inherited: no, but see clarification below
Percentage values: N/A

This property describes decorations that are added to the text of an element. If the element has no text (e.g. the <IMG> element in HTML) or is an empty element (e.g. '<EM></EM>'), this property has no effect. A value of 'blink' causes the text to blink.

The color(s) required for the text decoration should be derived from the 'color' property value.

This property is not inherited, but elements should match their parent. E.g., if an element is underlined, the line should span the child elements. The color of the underlining will remain the same even if descendant elements have different 'color' values.

A:link, A:visited, A:active { text-decoration: underline }

The example above would underline the text of all links (i.e., all <A> elements with a HREF attribute), using various pseudo-classes.

Browsers must recognize the keyword 'blink', but are not required to support the blink effect.

vertical-align
Value: baseline | sub | super | top | text-top | middle | bottom | text-bottom | <percentage>
Initial: baseline
Applies to: inline elements
Inherited: no
Percentage values: refer to the 'line-height' of the element itself

The property affects the vertical positioning of the element. One set of keywords is relative to the parent element:

baseline
align the baseline of the element (or the bottom, if the element doesn't have a baseline) with the baseline of the parent
middle
align the vertical midpoint of the element (typically an image) with the baseline plus half the x-height of the parent
sub
subscript the element
super
superscript the element
text-top
align the top of the element with the top of the parent element's font
text-bottom
align the bottom of the element with the bottom of the parent element's font

Another set of properties are relative to the formatted line that the element is a part of:

top
align the top of the element with the tallest element on the line
bottom
align the bottom of the element with the lowest element on the line

Using the 'top' and 'bottom' alignment, unsolvable situations can occur where element dependencies form a loop.

Percentage values refer to the value of the 'line-height' property of the element itself. They raise the baseline of the element (or the bottom, if it has no baseline) the specified amount above the baseline of the parent. Negative values are possible. E.g., a value of '-100%' will lower the element so that the baseline of the element ends up where the baseline of the next line should have been. This allows precise control over the vertical position of elements (such as images that are used in place of letters) that don't have a baseline.

It is expected that a future version of CSS will allow <length> as a value on this property.

text-transform
Value: capitalize | uppercase | lowercase | none
Initial: none
Applies to: all elements
Inherited: yes
Percentage values: N/A

capitalize
uppercases the first character of each word
uppercase
uppercases all letters of the element
lowercase
lowercases all letters of the element
none
neutralizes inherited value.

The actual transformation in each case is human language dependent.

H1 { text-transform: uppercase }

The example above would put <H1> elements in uppercase text.

text-align
Value: left | right | center | justify
Initial: UA specific
Applies to: block-level elements
Inherited: yes
Percentage values: N/A

This property describes how text is aligned within the element. The actual justification algorithm used is UA and human language dependent.

Example:

DIV.center { text-align: center }

Since 'text-align' inherits, all block-level elements inside the <DIV> element with CLASS=center will be centered. Note that alignments are relative to the width of the element, not the canvas. If 'justify' is not supported, the UA will supply a replacement. Typically, this will be 'left' for western languages.

text-indent
Value: <length> | <percentage>
Initial: 0
Applies to: block-level elements
Inherited: yes
Percentage values: refer to parent element's width

The property specifies the indentation that appears before the first formatted line. The value of 'text-indent' may be negative, but there may be implementation-specific limits. An indentation is not inserted in the middle of an element that was broken by another (such as 'BR' in HTML).

Example:

P { text-indent: 3em }

line-height
Value: normal | <number> | <length> | <percentage>
Initial: normal
Applies to: all elements
Inherited: yes
Percentage values: relative to the font size of the element itself

The property sets the distance between two adjacent lines' baselines.

When a numerical value is specified, the line height is given by the font size of the current element multiplied with the numerical value. This differs from a percentage value in the way it inherits: when a numerical value is specified, child elements will inherit the factor itself, not the resultant value (as is the case with percentage and other units).

Negative values are not allowed.

The three rules in the example below have the same resultant line height:

DIV { line-height: 1.2; font-size: 10pt } /* number */
DIV { line-height: 1.2em; font-size: 10pt } /* length */
DIV { line-height: 120%; font-size: 10pt } /* percentage */

A value of 'normal' sets the 'line-height' to a reasonable value for the element's font. It is suggested that UAs set the 'normal' value to be a number in the range of 1.0 to 1.2.

© 1995-1998, Stephen Le Hunte


Box properties

margin-left, margin-right, margin-top, margin-bottom, margin
Value: [ <length> | <percentage> | auto ]{1,4} (for 'margin' property)
Initial: 0
Applies to: all elements
Inherited: no
Percentage values: refer to parent's width

These properties set the margin of an element, while the 'margin' property can be used to set the border for all four sides. The other four properties only set their respective side.

For the 'margin' property, the four lengths apply to top, right, bottom and left respectively. If there is only one value, it applies to all sides, if there are two or three, the missing values are taken from the opposite side.

For example :

BODY { margin: 1em 2em 3em }

and

BODY {
margin-top: 1em;
margin-right: 2em;
margin-bottom: 3em;
margin-left: 2em
}

would produce the same result.

padding-top, padding-right, padding-bottom, padding-left, padding
Value: [ <length> | <percentage> | auto ]{1,4}
Initial: 0
Applies to: all elements
Inherited: no
Percentage values: refer to parent's width

These properties describe how much space is inserted between the border and the content of the element. The order is top, right, bottom, left. A single value applies to all sides, while using two or three values set the respective sides, with the missing values being copied from the opposite side.

The 'padding' property is a shorthand property for setting 'padding-top', 'padding-right' 'padding-bottom' and 'padding-left' at the same place in the style sheet.

If four values are specified they apply to top, right, bottom and left respectively. If there is only one value, it applies to all sides, if there are two or three, the missing values are taken from the opposite side.

The surface of the padding area is set with the 'background' property.

Note that 'padding' properties cannot be negative values.

border-top-width, border-right-width, border-bottom-width, border-left-width, border-width
Value: [thin | medium | thick | <length>] {1,4}
Initial: medium
Applies to: all elements
Inherited: no
Percentage values: N/A

The 'border-width' property is a shorthand property for setting 'border-top-width', 'border-right-width', 'border-bottom-width' and 'border-left-width' at the same place in the style sheet.

There can be from one to four values, with the following interpretation:

  • one value: all four border widths are set to that value
    i.e.
    H1 { border-width: thin }

    all 4 'border-*-width' properties are set to 'thin'

  • two values: top and bottom border widths are set to the first value, right and left are set to the second
    i.e.
    H1 { border-width: thin thick }

    border-top-width and border-bottom-width are set to 'thin', while border-right-width and border-left-width are set to 'thick'

  • three values: top is set to the first, right and left are set to the second, bottom is set to the third
    i.e.
    H1 { border-width: thin thick medium }

    border-top-width is set to 'thin', while border-right-width and border-left-width are set to 'thick' and border-bottom-width is set to 'medium'

  • four values: top, right, bottom and left, respectively
    i.e.
    H1 { border-width: thin thick medium none }

    border-top-width is set to 'thin', border-right-width is set to 'thick', border-bottom-width is set to 'medium' and border-left-width is set to 'none'

In the examples below, the comments indicate the resulting widths of the top, right, bottom and left borders:

border-top-color, border-right-color, border-bottom-color, border-left-color, border-color
Value: <color> | {1,4}
Initial: medium
Applies to: all elements
Inherited: no
Percentage values: N/A

These properties set the border colour properties for all four borders of the element, with border-color being short hand for the other four properties. The reasoning for setting individual border colours is as for border widths, namely that 1 to 4 values can be used in the border-color property, with missing declarations using that declared for the opposite side.

border-top-style, border-right-style, border-bottom-style, border-left-style, border-style
Value: none | dotted | dashed | solid | double | groove | ridge | inset | outset | {1,4}
Initial: medium
Applies to: all elements
Inherited: no
Percentage values: N/A

These properties set the border style properties for all four borders of the element, with border-style being short hand for the other four properties. The reasoning for setting individual border styles is as for border widths, namely that 1 to 4 values can be used in the border-style property, with missing declarations using that declared for the opposite side.

The various styles are as follows:

none
no border is drawn (regardless of the 'border-width' value)
dotted
the border is a dotted line drawn on top of the background of the element
dashed
the border is a dashed line drawn on top of the background of the element
solid
the border is a solid line
double
the border is a double line drawn on top of the background of the element. The sum of the two single lines and the space between equals the <border-width> value.
groove
a 3D groove is drawn in colors based on the <color> value.
ridge
a 3D ridge is drawn in colors based on the <color> value.
inset
a 3D inset is drawn in colors based on the <color> value.
outset
a 3D outset is drawn in colors based on the <color> value.

border-top, border-right, border-bottom, border-left, border
Value: <border-*-width> | <border-*-style> | <border-*-color> | {1,4}
Initial: medium
Applies to: all elements
Inherited: no
Percentage values: N/A

The border properties can be used to globally set the border widths, styles and colours for all four borders of an element. For example, the first rule below is equivalent to the set of four rules shown after it:

P { border: solid red }
P {
border-top: solid red;
border-right: solid red;
border-bottom: solid red;
border-left: solid red
}

Unlike the shorthand 'margin' and 'padding' properties, the 'border' property cannot set different values on the four borders. To do so, one or more of the other border properties must be used.

Since the properties to some extent have overlapping functionality, the order in which the rules are specified becomes important. Consider this example:

BLOCKQUOTE {
border-color: red;
border-left: double
color: black;
}

In the above example, the color of the left border will be black, while the other borders are red. This is due to 'border-left' setting the width, style and color. Since the color value is not specified on the 'border-left' property, it will be taken from the 'color' property. The fact that the 'color' property is set after the 'border-left' property is not relevant.

Note that while the 'border-width' property accepts up to four length values, this property only accepts one.

width
Value: <length> | <percentage> | auto
Initial: auto
Applies to: all elements
Inherited: no
Percentage values: refer to parent's width

This property can be applied to text elements, but it is most useful with inline images and similar insertions. The width is to be enforced by scaling the image if necessary, preserving the aspect ratio of the image if the 'height' property is 'auto'.

height
Value: <length> | auto
Initial: auto
Applies to: block-level and replaced elements
Inherited: no
Percentage values: N/A

As above, this property can be applied to text, but it is most useful with inline images and similar insertions. The height is to be enforced by scaling the image if necessary, preserving the aspect if the 'width' property is 'auto'.

float
Value: left | right | none
Initial: none
Applies to: all elements
Inherited: no
Percentage values: N/A

This property is most often used with inline images, to allow floating images (c.f. <IMG ALIGN ...>

clear
Value: none | left | right | both
Initial: none
Applies to: all elements
Inherited: no
Percentage values: N/A

This property specifies if elements allow floating elements (normally images) to the left or right. With 'clear' set to 'left', an element will be moved below any floating element on the left side. (c.f. <BR CLEAR= ...>)

© 1995-1998, Stephen Le Hunte


Classification properties

These properties classify elements into categories rather than setting visual display styles

display
Value: block | inline | list-item | none
Initial: block
Applies to: all elements
Inherited: no
Percentage values: N/A

This property describes how/if an element is displayed on the canvas (which may be on a printed page, a computer display etc.).

An element with a 'display' value of 'block' opens a new box. The box is positioned relative to adjacent boxes according to the CSS formatting model. Typically, elements like <H1> and <P> are of type 'block'. A value of 'list-item' is similar to 'block' except that a list-item marker is added. In HTML, <LI> will typically have this value.

An element with a 'display' value of 'inline' results in a new inline box on the same line as the previous content. The box is dimensioned according to the formatted size of the content. If the content is text, it may span several lines, and there will be a box on each line. The margin, border and padding properties apply to 'inline' elements, but will not have any effect at the line breaks.

A value of 'none' turns off the display of the element, including children elements and the surrounding box.

P { display: block }
EM { display: inline }
LI { display: list-item }
IMG { display: none }

The last rule turns off the display of images.

The initial value of 'display' is 'block', but a browser will typically have default values for all HTML elements according to the suggested rendering of elements in the HTML specification.

white-space
Value: normal | pre | nowrap
Initial: normal
Applies to: block-level elements
Inherited: yes
Percentage values: N/A

Declares how white space inside the element should be handled: the 'normal' way (where white space is collapsed) or as the <PRE> element in HTML, or as 'nowrap' (the same as using the <NOBR> element, forcing line breaks with <BR>).

list-style-type
Value: disc | circle | square | decimal | lower-roman | upper-roman | lower-alpha | upper-alpha | none
Initial: disc
Applies to: elements with 'display' value 'list-item'
Inherited: yes
Percentage values: N/A

This property is used to determine the appearance of the list-item marker if 'list-style-image' is 'none' or if the image pointed to by the URL cannot be displayed.

OL { list-style-type: decimal } /* 1 2 3 4 5 etc. */
OL { list-style-type: lower-alpha } /* a b c d e etc. */
OL { list-style-type: lower-roman } /* i ii iii iv v etc. */5.6.4

list-style-image
Value: <url> | none
Initial: none
Applies to: elements with 'display' value 'list-item'
Inherited: yes
Percentage values: N/A

This property sets the image that will be used as the list-item marker. When the image is available it will replace the marker set with the 'list-style-type' marker.

UL { list-style-image: url(http://png.com/ellipse.png) }

list-style-position
Value: inside | outside
Initial: outside
Applies to: elements with 'display' value 'list-item'
Inherited: yes
Percentage values: N/A

The value of 'list-style-position' determines how the list-item marker is drawn with regard to the content. Using a list-style of 'inside' causes the same effect as using <UL COMPACT> for a compact list.

list-style
Value: <keyword> || <position> || <url>
Initial: not defined for shorthand properties
Applies to: elements with 'display' value 'list-item'
Inherited: yes
Percentage values: N/A

The 'list-style' property is a shorthand notation for setting the three properties 'list-style-type', 'list-style-image' and 'list-style-position' at the same place in the style sheet.

UL { list-style: upper-roman inside }
UL UL { list-style: circle outside }
LI.square { list-style: square }

Setting 'list-style' directly on <LI> elements can have unexpected results. Consider:

<STYLE TYPE="text/css">
OL.alpha LI { list-style: lower-alpha }
UL LI { list-style: disc }
</STYLE>
<BODY>
<OL CLASS=alpha>
<LI>level 1
<UL>
<LI>level 2
</UL>
</OL>
</BODY>

Since the specificity (as defined in the cascading order) is higher for the first rule in the style sheet in the example above, it will override the second rule on all <LI> elements and only 'lower-alpha' list styles will be used. It is therefore recommended to set 'list-style' only on the list type elements:

OL.alpha { list-style: lower-alpha }
UL { list-style: disc }

In the above example, inheritance will transfer the 'list-style' values from <OL> and <UL> elements to <LI> elements.

A URL value can be combined with any other value:

UL { list-style: url(http://png.com/ellipse.png) disc }

In the example above, the 'disc' will be used when the image is unavailable.

© 1995-1998, Stephen Le Hunte


Positioning properties

clip
Value: <shape> | auto
<shape>: rect (<top> <right> <bottom> <left>)
<top> <right> <bottom> <left>: auto | <length>
Initial: auto
Applies to: elements with the 'position' property of type 'absolute'.
Inherited: no
Percentage values: N/A

Clipping alters the display of HTML, though it does not affect how it is laid out. The clipping region defines what portion of the element's physical representation is visible. It is computed by the intersection of the parent's clipping region with the value of the element's 'clip' property.

Lengths are specified with respect to the element's top-left corner. Negative values are permitted. When converted to pixel coordinates, the bottom-right corner is excluded from the clipping rectangle. This rule is necessary to permit the definition of zero-width or zero-height rectangles.

Any length can be replaced by the value 'auto', which causes the respective extent of the clipping rectangle to match the element's extent in the given direction, including padding, borders and child elements. The default value for the 'clip' property causes the clip rectangle to encompass the entire element. In effect, 'auto' provides for an infinite clipping region.

For now, all clipping regions are rectangular. We anticipate future extensions to permit non-rectangular clipping.

Note: If the clipping region exceeds the bounds of the browsers document window, contents may be clipped to that window by the native operating environment.

width, height
Value: <length> | <percentage> | auto
Initial: auto
Applies to: block-level and replaced elements, elements with 'position' property value of 'absolute'
Inherited: no
Percentage values: refer to parent element's width and height. If parent's height is 'auto', percentage of height is undefined.

For elements with 'position' of type 'relative' and 'static', the behavior of 'width' and 'height' is unchanged from that defined by the CSS1 formatting model.

For 'absolute' positioned elements:

  • The 'auto' value of the width property is such that the right edge of the positioned element is placed immediately inside the right inner edge of its enclosing element. If this places the right edge of the element to the left of its left edge, the width is set to zero.
  • Percentage values can be specified for both 'height' and 'width', and are computed with respect to the height and width of the parent element. However, specifying a percentage value for 'height' if the parent element's height is set to 'auto' has undefined behavior.

left, top
Value: <length> | <percentage> | auto
Initial: auto
Applies to: elements with the 'position' property of type 'absolute' or 'relative'.
Inherited: no
Percentage values: refer to parent element's width and height. If parent's height is set to 'auto', percentage is undefined.

For elements with 'absolute' positioning, 'left' and 'top' are based on the current positioning context.

For elements with 'relative' positioning:

  • 'Left' and 'top' are offsets to the normally rendered position of the element. For 'left', positive offsets are toward the right side of the document. For 'top', positive offsets are toward the bottom of the document. The space reserved for the normally rendered element does not move with the element. When the contents of these elements are moved, they may obscure any content below them depending upon the corresponding z-index attribute. These elements maintain their original shape, including line breaks, if any.
  • If the element is moved, its positioning context moves with it. Similarly, elements that are positioned 'relative' within another 'relative' element will move when the parent 'relative' element is moved.

overflow
Value: visible | hidden | scroll | auto
Initial: visible
Applies to: elements with the 'position' property of type 'absolute'.
Inherited: no
Percentage values: N/A

'Overflow' determines what happens when an element's rendered contents exceed its height or width.

A value of 'visible' indicates that the element's bounding box should be enlarged enough to contain all of its rendered contents. In other words, its height or width can be made bigger than the declared value. Any padding or border will remain outside the rendered content. Any additional width will be added in the direction of primary text flow, e.g. to the right side in left-to-right languages, while additional height will be added to the bottom.

A value of 'hidden' indicates that the element's contents should be clipped to its height and width, and that no scrolling mechanism should be provided. Padding and border will be applied to the regular height and width of the element, as if its contents did not exceed its bounds. Any contents that exceed the element's bounds will be unavailable to the user.

The behavior of the 'auto' value is browser-dependent, but should cause a scrolling mechanism to be invoked when the element's rendered contents exceed its bounds.

Finally, the 'scroll' value indicates that if the UA supports a visible scrolling mechanism, that mechanism should be displayed whether or not the element's rendered contents exceed its bounds. This avoids any problem with scrollbars appearing and disappearing in a dynamic environment.

Note: Even if 'overflow' is set to 'visible', contents may be clipped to a UA's document window by the native operating environment. In addition, the 'clip' property can cause otherwise visible "overflowed" contents to be clipped.

The default value ('auto') represents the current position in the document at the time the element is rendered. This value is calculated by the UA for 'absolute' positioned elements, and is 0 (no offset) for 'relative' positioned elements.

position
Value: absolute | relative | static
Initial: static
Applies to: all elements
Inherited: no
Percentage values: N/A

Each variety of 'position' establishes one or more of the following:

  • A new rectangular overlay, outside of the document flow, into which the element's contents are flowed (absolute)
  • A box positioning context (absolute) or a Cartesian positioning context (relative) for absolutely positioned child elements
  • A new clipping region for child elements (absolute)
  • A position either within the current positioning context (absolute) or relative to the normally rendered position (relative)
  • A z-order relative to the current positioning context (absolute, relative)

'Absolute' Positioned elements act like block-level elements from a CSS1 formatting perspective. However, since they fall completely outside of the normal document flow, the following CSS1 properties do not apply: 'float', 'clear', 'margin-top', 'margin-right', 'margin-bottom', 'margin-left', 'margin'.

visibility
Value: inherit | visible | hidden
Initial: inherit
Applies to: all elements
Inherited: if value is 'inherit'

Visibility determines the initial display state of an element, but does not affect its layout. Elements that are hidden still take up the same physical space as they would were they visible, they are just rendered transparently. This differs from the behavior of 'display: none', in which the element is ignored, as if it were not present in the document at all. Visibility can be used in a scripting environment to dynamically display only one of several elements which overlap one another.

z-index
Value: auto | <integer>
Initial: auto
Applies to: positionable elements
Inherited: no
Percentage values: N/A

The 'z-index' property is used to specify the stacking order of positionable elements. The default ('auto') behavior is to stack them bottom-to-top in the order they appear in the HTML source within the current positioning context. The 'z-index' property allows an element's z-order to be given as an integer that specifies stacking order relative to its positionable sibling and parent elements:

  • Sibling elements are stacked bottom-to-top in order of increasing 'z-index' value. Sibling elements with identical 'z-index' values have unspecified relative stacking order.
  • Elements that have negative 'z-index' values are stacked below their parent element and elements with positive 'z-index' values are stacked above their parent element. In other words, each positionable element defines a positioning context for z-order in which their own 'z-index' is 0.

The relative z-order of two elements that are neither siblings nor parent/child can be determined by evaluation of the above rules for both elements' ancestors.

© 1995-1998, Stephen Le Hunte


Printing properties

These Style Sheet printing extensions are aimed at documents that will use the <STYLE MEDIA="print"...> style sheet setting, specifying the style sheet as being suitable for printed documents. Note that the printing extensions are only a recent addition to Style Sheets and are claimed to be supported by Internet Explorer 4.0.

page-break-after
Value: auto | always | left | right
Initial: auto
Applies to: block-level elements outside of tables
Inherited: no
Percentage values: N/A

The values are:

auto
do a page break after the element only if necessary (e.g. if there is no remaining space on the current page)
always
always do a page break after the element
left
do one or two page breaks after the element until a blank left page is reached
right
do one or two page breaks after the element until a blank right page is reached

As an example, a hard page break may be inserted in the document with the BR tag as follows:

<STYLE>
BR.page { page-break-after: always }
</STYLE>
...
<BR CLASS=page>
...

If there are conflicts between this property and the 'page-break-before' value on the previous element (as formatted on the canvas), the value that results in the largest number of page breaks will be used.

Note: a way to suppress page breaks after an element is currently under discussion by the W3C, but the syntax is not yet defined.

page-break-before
Value: auto | always | left | right
Initial: auto
Applies to: block-level elements outside of tables
Inherited: no
Percentage values: N/A

The values are:

auto
do a page break before the element only if necessary (e.g. if there is no remaining space on the current page)
always
always do a page break before the element
left
do one or two page breaks before the element until a blank left page is reached
right
do one or two page breaks before the element until a blank right page is reached

As an example, a page break may be inserted in the document before all H1 elements:

<STYLE>
H1 { page-break-before: always }
</STYLE>
...
<H1 CLASS=chapter>
...

If there are conflicts between this property and the 'page-break-after' value on the next element (as formatted on the canvas), the value that results in the largest number of page breaks will be used.

Note: a way to suppress page breaks before an element is currently under discussion by the W3C, but the syntax is not yet defined.

© 1995-1998, Stephen Le Hunte


Filter properties

The properties presented here are valid for any Visual Filter applied to an element. See that topic for more information about visual filters.

filter
Value: filtername (param1, param2...)
Applies to: all elements
Inherited: no
Percentage values: N/A

The filter property can be used to set which filter, or collection of filters are applied to the element. For more details, see Visual Filter topic.

blendTrans
Value: blendTrans (duration=time)
Applies to: all elements
Inherited: no
Percentage values: N/A

The Blend Transition filter performs a fade (in or out) of the selected visual object.

duration
Length of time the transition should take to complete. Value, double, float. Value is expressed in seconds.milliseconds (0.000).

For more details, see Visual Filter topic.

revealTrans
Value: revealTrans (duration=time, transition=transition)
Applies to: all elements
Inherited: no
Percentage values: N/A

The Reveal Transition Filter allows you to show or hide visual objects, using any of the 23 predefined types of patterns.

duration
Length of time the transition should take to complete. Value, double, float. Value is expressed in seconds.milliseconds (0.000).
transitionshape
Shape of the transition (Reveal transition only). Integer. A value from 0 to 23. The transition shape is determined by one of the values shown in the following table.

Transition type | Value
Box in | 0
Box out | 1
Circle in | 2
Circle out | 3
Wipe up | 4
Wipe down | 5
Wipe right | 6
Wipe left | 7
Vertical blinds | 8
Horizontal blinds | 9
Checkerboard across | 10
Checkerboard down | 11
Random dissolve | 12
Split vertical in | 13
Split vertical out | 14
Split horizontal in | 15
Split horizontal out | 16
Strips left down | 17
Strips left up | 18
Strips right down | 19
Strips right up | 20
Random bars horizontal | 21
Random bars vertical | 22
Random | 23

© 1995-1998, Stephen Le Hunte


Miscellaneous properties

@import
Value: <url>
Initial: N/A
Applies to: style sheet.
Inherited: no
Percentage values: N/A

The @import style sheet property specifies a style sheet to import. The statement must occur at the start of a style sheet, before any declarations.

Rules in the style sheet override rules in the imported style sheet. For example, if the imported style sheet and the embedded one contained declarations for a level1 heading element, level 1 heading would be styled according to the declarations contained in the embedded style sheet.

cursor
Value: auto | crosshair | default | hand | move | e-resize | ne-resize | nw-resize | n-resize | se-resize | sw-resize | s-resize | w-resize | text | wait | help
Initial: auto
Applies to: all elements.
Inherited: yes
Percentage values: N/A

The cursor property specifies the type of cursor to be displayed for the mouse pointer.

Move the mouse over the boxes below to see the different cursor types

crosshair | default | hand
move | e-resize | ne-resize
n-resize | nw-resize | w-resize
sw-resize | s-resize | se-resize
text | wait | help

© 1995-1998, Stephen Le Hunte


Length units

The format of length values is an optional sign character ('+' or '-', with '+' being the default) immediately followed by a number (with or without a decimal point) immediately followed by a unit identifier (a two-letter abbreviation).

There are two types of length units: relative and absolute. Relative units specify a length relative to another length property. Style sheets that use relative units will more easily scale from one medium to another (e.g. from a computer display to a laser printer). Percentage units (described below) and keyword values (e.g. 'x-large') offer similar advantages.

The following relative units are supported (NOTE : The elements shown are used as an example, the settings can be applied to any element)

H1 { margin: 0.5em } | ems, the height of the element's font
H1 { margin: 1ex } | x-height, ~ the height of the letter 'x'

The relative units 'em' and 'ex' are relative to the font size of the element itself. The only exception to this rule in CSS1 is the 'font-size' property where 'em' and 'ex' values refer to the font size of the parent element.

Pixel units, as used in the last rule, are relative to the resolution of the canvas, i.e. most often a computer display. If the pixel density of the output device is very different from that of a typical computer display, the UA should rescale pixel values. The suggested reference pixel is the visual angle of one pixel on a device with a pixel density of 90dpi and a distance from the reader of an arm's length. For a nominal arm's length of 28 inches, the visual angle is about 0.0227 degrees.

Child elements inherit the computed value, not the relative value:

BODY {
font-size: 12pt;
text-indent: 3em; /* i.e. 36pt */
}
H1 { font-size: 15pt }

In the example above, the 'text-indent' value of 'H1' elements will be 36pt, not 45pt.

Absolute length units are only useful when the physical properties of the output medium are known. These absolute units are supported (NOTE : The elements shown are used as an example, the settings can be applied to any element)

H1 { margin: 0.5in } | inches, 1in = 2.54cm
H2 { line-height: 3cm } | centimeters
H3 { word-spacing: 4mm } | millimeters
H4 { font-size: 12pt } | points, 1pt = 1/72 in
H4 { font-size: 1pc } | picas, 1pc = 12pt

In cases where the specified length cannot be supported, UAs should try to approximate. For all CSS1 properties, further computations and inheritance should be based on the approximated value.

© 1995-1998, Stephen Le Hunte


Percentage units

The format of a percentage value is an optional sign character ('+' or '-', with '+' being the default) immediately followed by a number (with or without a decimal point) immediately followed by '%'.

Percentage values are always relative to another value, for example a length unit. Each property that allows percentage units also defines what value the percentage value refer to. Most often this is the font size of the element itself:

For example :
P { line-height: 120% } 120% of the element's 'font-size'

In all inherited CSS1 properties, if the value is specified as a percentage, child elements inherit the resultant value, not the percentage value.

© 1995-1998, Stephen Le Hunte


Colour units

A colour is a either a colour name or a numerical RGB specification. The Style Sheet specification (and style sheets as implemented by Microsoft in the Internet Explorer) supports all of the Netscape colour names.

The following all specify a red colour
EM { color: #F00 } | #RGB
EM { color: #FF0000 } | #RRGGBB
EM { color: rgb(255,0,0) | integer range 0 - 255
EM { color: rgb(100%, 0%, 0%) | float range 0.0% - 100.0%

Note that a three-digit RGB notation (#RGB) is converted into six-digit form (#RRGGBB) by replicating digits, not by adding zeros. For example, #fb0 expands to #ffbb00.

Values outside the numerical ranges will be rounded off. The three rules below are therefore equivalent:
EM { color: rgb(255,0,0) | integer range 0 - 255
EM { color: rgb(300,0,0) | rounded off to 255
EM { color: rgb(110%, 0%, 0%) | rounded off to 100%

© 1995-1998, Stephen Le Hunte


URL units

A Uniform Resource Locator (URL) is identified with a functional notation. For example :

BODY { background: url(http://www.bg.com/pinkish.gif) }

Partial URLs are interpreted relative to the source of the style sheet, not relative to the document.

© 1995-1998, Stephen Le Hunte


Style Sheet examples

NOTE : The following examples are provided with screenshots of the resulting document.

Consider the following document.

<HTML>
<HEAD>
<TITLE>The HTML Reference Library</TITLE>
</HEAD>
<BODY>
<P>The HTML Reference Library is a Windows HLP file, detailing all currently useable HTML syntax. It is available in the following formats :
<UL>
<LI>Windows 3.x
<LI>Windows 95/NT
</UL>
<P>For more information about the HTMLib, contact <A HREF="mailto:htmlib@htmlib.demon.co.uk">htmlib@htmlib.demon.co.uk</A>
</BODY>
</HTML>

Style Sheet example number 1

As above, it appears dull and lifeless. The first simple thing that can be done with it is to use some different fonts for the sections of the page. For example :

<HTML>
<HEAD>
<TITLE>The HTML Reference Library</TITLE>
<STYLE>
P.main {font-family : Arial;
font-size : 12pt}
P.info { font-family : Arial;
font-style : italic}
</STYLE>
</HEAD>
<BODY>
<P CLASS="main">The HTML Reference Library is a Windows HLP file, detailing all currently useable HTML syntax. It is available in the following formats :
<UL>
<LI>Windows 3.x
<LI>Windows 95/NT
</UL>
<P CLASS="info">For more information about the HTMLib, contact <A HREF="mailto:htmlib@htmlib.demon.co.uk">htmlib@htmlib.demon.co.uk</A>
</BODY>
</HTML>

note the use of CLASS selectors to separate the different paragraphs and the way that the unordered list inherits the style attached to the previous paragraph.

Style Sheet example number 2

This looks slightly more appealing, but would be better perhaps with some colour and highlighting of the link text and HTMLib references (note the way the highlighting, using the <SPAN> element inherits the colour of the paragraph in which it resides) :

<HTML>
<HEAD>
<TITLE>The HTML Reference Library</TITLE>
<STYLE>
BODY { background : #006000}
P.main { font-family : Arial;
font-size : 12pt;
color : white}
P.info { font-family : Arial;
font-style : italic;
color : #80C000}
P SPAN { font-style : italic;
font-size : 14pt}
A { color : #C0C8FF;
font-weight : bold}
</STYLE>
</HEAD>
<BODY>
<P CLASS="main">The <SPAN>HTML Reference Library</SPAN> is a Windows HLP file, detailing all currently useable HTML syntax. It is available in the following formats :
<UL>
<LI>Windows 3.x
<LI>Windows 95/NT
</UL>
<P CLASS="info">For more information about the <SPAN>HTMLib</SPAN>, contact <A HREF="mailto:htmlib@htmlib.demon.co.uk">htmlib@htmlib.demon.co.uk</A>
</BODY>
</HTML>

Style Sheet example number 3

The nest step in enhancing the presentation of the document is to force some aesthetically grand text over-lay effects. Adding the text and highlight CLASS descriptions into the style sheet definition defines two styles. By using the negative top-margin property in the highlight class, text specified as using this class can be over-laid on other text.

<HTML>
<HEAD>
<TITLE>The HTML Reference Library</TITLE>
<STYLE>
BODY { background : #006000}
P.main { font-family : Arial;
font-size : 12pt;
color : white}
P.info { font-family : Arial;
font-style : italic;
color : #80C000}
P SPAN { font-style : italic;
font-size : 14pt}
A { color : #C0C8FF;
font-weight : bold}
.text { color: red;
margin-left: 10px;
font-size: 28px;
font-family: Arial Black }
.highlight { margin-top: -38px;
margin-left: 8px;
color: darkred;
font-size: 28px;
font-family: Arial Black }
</STYLE>
</HEAD>
<BODY>
<P CLASS="main"><DIV CLASS="text" STYLE="{color : white; font-style : italic}">The HTML Reference Library</DIV>
<DIV CLASS="highlight" STYLE="{color : gray; font-style : italic}">The HTML Reference Library</DIV>
<P CLASS="main">is a Windows HLP file, detailing all currently useable HTML syntax. It is available in the following formats :
<UL>
<LI><DIV CLASS="text">Windows 3.x</DIV>
<DIV CLASS="highlight">Windows 3.x</DIV>
<LI><DIV CLASS="text" STYLE="{color : blue"}>Windows 95/NT</DIV>
<DIV CLASS="highlight" STYLE="{color : darkblue"}>Windows 95/NT</DIV>
</UL>
<P CLASS="info">For more information about the <SPAN>HTMLib</SPAN>, contact <A HREF="mailto:htmlib@htmlib.demon.co.uk">htmlib@htmlib.demon.co.uk</A>
</BODY>
</HTML>

Style Sheet example number 4

Also note how the text and highlight class descriptions can have certain properties altered within the <DIV> element, by using the STYLE attribute. This means that the style can be described once and then have colours attached to it at the text level, rather than specifying new classes for the different coloured sections.

Note : The various drop-shadow techniques described above (i.e. absolute positioning of identical text) can be done in Internet Explorer 4.0 using a Visual Filter. This degrades better in browsers that don't support the filters, as only one copy of the text is displayed. Using the above method, both sections of the text will be displayed, which could lead to confusion.

NOTE : The above is a (very) simple example of how a page can be transformed easily, using style sheet definitions in the <STYLE> elements in the <HEAD> of the document. Using style sheets makes changing the appearance of a page much easier as it no longer becomes necessary to dig through pages altering separate colouring attributes. This can be especially useful, if the style sheet is used externally to the documents and <LINK>ed to.

© 1995-1998, Stephen Le Hunte


Scripting overview

Scripting within HTML documents has come a long way since Netscape first introduced Javascript in Netscape 2.0. SO much so that in Netscape, recent Javascript enhancements make a large proportion of the document content available through scripting, which allows significant display manipulation on the client side, saving slower trips back to servers to update pages. Microsoft have fully embraced and indeed extended scripting in HTML, including JScript and Visual Basic Script in Internet Explorer, also adopting various W3C specifications to the point where everything that is included in a document is available to be manipulated in various ways through either of their supported scripting languages.

The scripting reference of the HTMLib starts off with an overview of methods of attaching scripts to document elements, followed by an overview of Javascript and Visual Basic Script. There are details of all of the standard Dynamic HTML properties, methods and events, followed by a detailed look at the various element objects exposed in the browsers Scripting Object models.

Scripting for Internet Explorer 4.0 exposes every element in a document for scripting manipulation - changing its position, colour, style, adding or removing elements etc, while Netscape has rather more limited scripting support, although the most important parts of a document are available for scripting.

© 1995-1998, Stephen Le Hunte


Attaching Scripts to documents

There are various methods of invoking scripts in HTML pages. Basically, a script can be written in a discrete block in the document, can be written into the HTML element attributes (this is mainly what this section of the HTMLib describes), or can be given in the URL of a hypertext anchor. (Also, there is an Internet Explorer specific method, using the ID attribute)

1. Calling a discrete <SCRIPT> block
For example, if as part of a HTML document, you had a button in the page, that when pressed, displayed a 'Hello' message on the screen. Using the first method mentioned above, the HTML could be written as :

<INPUT TYPE="button" NAME="btnHello" VALUE="Click for greeting">
. . .
<SCRIPT LANGUAGE="VBScript">
<!--
Sub btnHello_OnClick
alert "Hello"
End Sub
-->
</SCRIPT>

When the button is pressed, the script is invoked. It knows that it refers to the button, by using the buttons NAME value in the name of the script routine, followed by the event that executes the script (in this case OnClick, i.e. when the button is clicked). This would appear thus :

NOTE : The above example uses Visual Basic Script, but JavaScript can also be used in this way.

2. Using a scripting attribute
As mentioned above, scripting can also be included as an attribute of the HTML element itself. Using this method for the same button as above would require the same general <INPUT> declaration, but include the OnClick event in the element thus :

<INPUT TYPE="button" NAME="btnHello2" VALUE="Click for greeting" OnClick="pressed">
. . .
<SCRIPT LANGUAGE="VBScript">
<!--
Sub pressed
alert "Hello again"
End Sub
-->
</SCRIPT>

This would appear (in much the same way as above) like

NOTE : As in the first example, this example uses Visual Basic Script, but JavaScript can also be used in this way.

2a. Including the script in the scripting attribute
The above example, uses the OnClick scripting event handler to execute the script defined in a separate <SCRIPT> block. It is also possible using this method with such a simple script, to include the script in the OnClick event in the <INPUT> definition, avoiding the overhead of writing a separate script block. This could be done by using :

<INPUT TYPE="button" NAME="btnHello3" VALUE="Click for greeting" OnClick="alert 'We have got to stop meeting like this'">

Which would appear in the document like :

NOTE : Take note of the use of the ' character surrounding the message to display, rather than double quotes characters (") previously used. This is because the script function is already enclosed in double quotes, as an attribute of the element. Using double quotes to surround the message would cause an error in the script.

2b. An Internet Explorer specific method of 2a.
The <SCRIPT> element can also be used, using FOR= and EVENT= syntax. For example, the first example given above, could also be written as :

<FORM>
<INPUT TYPE="button" NAME="btnHello4" VALUE="Click for greeting">
<SCRIPT FOR="btnHello4" EVENT="OnClick" LANGUAGE="VBScript">
<!--
alert "Enough examples, my head hurts!"
-->
</SCRIPT>
</FORM>

This would appear as :

NOTE : With the above example, it is necessary for the <INPUT> element to be enclosed in its parent <FORM> element for the scripting to work. Also, only Internet Explorer (at the time of writing) supports this scripting method.

3. Scripting as a URL
As mentioned in the first paragraph, script events can also be included as URL's. For example :

<A HREF="javascript:alert('You can never have enough examples')">This is the link text</A>

Would display as : This is the link text

NOTE : At the time of writing, only JavaScript was supported using this method. It works in both Netscape and Internet Explorer. Future versions of Internet Explorer will include support for a <A HREF="vbscript:...."> syntax.
However, Internet Explorer allows for cross-language referencing. You can use the above construct to call a scripting function, which can be a Visual Basic Script function. For example :

<A HREF="javascript:Exec_function()">This is the link text</A>
<SCRIPT LANGUAGE="VBScript">
<!--
Sub Exec_function
Alert "You executed a Visual Basic Script function called from a JavaScript reference"
End Sub
-->
</SCRIPT>

Give it a try : This is the link text

As you will see further in this scripting reference section, the anchor (<A>) element also supports various events using the above methods. This allows scripting to be combined with hypertext links, so that the link is not exclusively executing a script.

4. Using the ID attribute
Internet Explorer can support scripting functions using the ID attribute. For example, a standard <A> element, given an ID attribute can be scripted as :

<A ID="eglink" HREF="another_page.html">This is the link text</A>
<SCRIPT LANGUAGE="VBScript">
<!-- Sub eglink_OnClick()
alert "Are you bored of this yet?"
End Sub
-->
</SCRIPT>

which would work as : This is the link text

NOTE : Due to this method using the ID attribute, it is Internet Explorer specific. Also note the use of the double parenthesis ('()') characters after the scripting event in the script block. Without these, the script wouldn't work. Also note that navigation to the document specified in the HREF attribute will be attempted always. In this example, it points to a non-existent document which can cause an error.

Where to position Script functions in the document
There is much debate about where <SCRIPT> ... </SCRIPT> blocks should be positioned within the document. Generally, it is considered best to include script blocks in the <HEAD> ... </HEAD> section of the document. This is so that you can be sure that any script functions used by any of the scriptable elements will be available before the elements that use the scripts are displayed. For instance, if you have some <A> links that rely on a script function for their functionality (for example, changing documents in two frames at the same time) and the script function is below them in the document, the script function will not be evaluated by the browser until after the links have been displayed. If the user clicks one of the links as the document is downloading, then the browser will throw a scripting error.

On the next pages, the various standard HTML elements that support scripting event handlers as attributes will be described. Keep in mind the above method variations though, as different solutions will require different methods.

© 1995-1998, Stephen Le Hunte


Javascript

NOTE : JavaScript is currently supported by the Netscape Navigator (version 2 and above) and Internet Explorer (version 3.0 and above). Recently, Netscape presented Javascript 1.1 to the ECMA, where it has evolved into ECMAScript (or rather ECMA-262), "A general purpose, cross-platform programming language". Netscape then proceeded to make extensions to Javascript, which became Javascript 1.2 as supported in the Navigator component of Netscape Communicator. Microsoft's JScript (v3.0 of which ships with Internet Explorer 4.0) is currently the only full implementation of ECMAScript. All Javascript 1.2 extensions are also supported by Internet Explorer 4.0 through its enhanced scripting object model.

For more information on JavaScript, visit http://home.netscape.com/ for Netscape's JavaScript information, or http://www.microsoft.com/jscript/ for Microsoft's 'JScript' JavaScript implementation, or the ECMA site for the official ECMAScript specification. The information provided here only details how to include JavaScript scripts within HTML documents, not how to author actual scripts. Such information is well beyond the scope of this reference.

NOTE : A Scripting Reference is now included in the HTMLib. This details various methods of invoking scripts, and a description of the object models of both browsers. Note that the Internet Explorer object model available through scripting languages covers every element, whereas the Netscape one doesn't.

A script is embedded in HTML within a <SCRIPT> element.

<SCRIPT>...</SCRIPT>

The text of a script is inserted between <SCRIPT> and its end element.

Attributes within the <SCRIPT> element can be specified as follows:

<SCRIPT LANGUAGE="JavaScript">
. . .
</SCRIPT>

The LANGUAGE attribute is mandatory unless the SRC attribute is present and specifies the scripting language. NOTE : Use of the LANGUAGE attribute is important now that Internet Explorer supports JavaScript. In order for the Internet Explorer to know it is to process the script as JavaScript, it needs to be told that it is JavaScript. See below for JavaScript versioning information.

The SRC attribute is optional and, if given, specifies a URL that loads the text of a script.

<SCRIPT LANGUAGE="language" SRC="url">

Both attributes may be present.

NOTE : For Netscape to be able to properly use external JavaScript files, the server on which the files are to reside must have the MIME type application/x-javascript mapped into its list of MIME types (with a suitable extension mapped to it - Netscape recommend ".js") for Netscape to properly respond to the script when it is loaded. Internet Explorer is more relaxed about the extension of the external script document, though it will still need to be registered with the MIME types on the web server, to ensure proper functioning.

Scripts should be placed inside comment fields to ensure that the script is not displayed when the page's HTML is viewed with a browser unaware of the <SCRIPT> element. The entire script is encased by HTML comment elements:

<SCRIPT LANGUAGE="language" SRC="url">
<!-- Begin to hide script contents from old browsers.
. . . Script functions/routines go here
End the hiding here.-->
</SCRIPT>

Note that in Netscape, the final HTML comment must be 'commented' out using a JavaScript comment '//' otherwise an error occurs. For more information about scripts, the JavaScript language and some examples, see http://home.netscape.com/. Also visit http://www.microsoft.com/, especially http://www.microsoft.com/jscript - the Microsoft JScript (Microsoft's JavaScript implementation) Web site.

JavaScript version control
There are various versions of JavaScript supported by both Netscape and Internet Explorer. Because the various versions of JavaScript support subtly different object models and function capabilities, you can version out various browsers that do not support the scripting capabilities you've authored. The support breaks down as follows :

Version | LANGUAGE value | Internet Explorer | Netscape
1.0 | Javascript | From version 3.0 | From version 2.0 onwards
1.1 | Javascript1.1 | IEx 3.0x doesn't support all functionality. IEx 4.0+ does. | From version 3.0 onwards
1.2 | JavaScript1.2 | IEx 3.0x throws ''function' not defined' error. Is supported by IEx 4.0+ | Version 4.0 only

So, if you're authoring using JavaScript v1.1 (as supported by Netscape 3.0 and above, for example, if you're manipulating the image object), then use LANGUAGE="Javascript1.1" in the <SCRIPT> element. The code functions will then be ignored by Netscape browsers older than version 3.0. Note that Internet Explorer understands both 'Javascript' and 'Javascript1.1' as values of the LANGUAGE attribute, but doesn't currently support certain functionality in Javascript 1.1.
By using versioning in the LANGUAGE attribute, you can author alternative scripting functions for the various different versions of Netscape within the same document, allowing great flexibility.

Example
Here is a quick (and very simple) example, where pressing the button provides a greeting according to the present time of day on your system.

© 1995-1998, Stephen Le Hunte


Visual Basic Script

NOTE : A Scripting Reference is now included in this HTMLib. This details various methods of invoking scripts, event handlers that can be included in various standard HTML elements and an Object Model Comparison between Internet Explorer and Netscape. For some more Visual Basic Script information, see the Scripting Reference topics.

Visual Basic Script recently introduced by Microsoft represents a step further towards active web pages. Like JavaScript, Visual Basic Script provides scripting, automation and customisation capabilities for Internet Explorer. It is a subset of the Visual Basic programming language that is fully compatible with Visual Basic and Visual Basic for Applications.

To use Visual Basic Script within a HTML document, the code needs to be wrapped in <SCRIPT> ... </SCRIPT> elements, just like JavaScript (or contained in a separate text file and referenced using the SRC="URL" attribute). As with JavaScript, the LANGUAGE attribute is required, in this case needing the value "VBScript". Visual Basic Script comes into its own when used in conjunction with ActiveX OLE controls, which allow for full automation with any OLE compliant application, but can be used for almost any purpose on a page, allowing for truly interactive web sites to be created relatively easily.

NOTE : Internet Explorer only supports external Visual Basic Script files from 3.02 onwards. The script file is just a text file, containing the functions etc., of the script required by the document and can have any extension (proper MIME type mapping will be required to ensure correct functionality)

The following code section, assigns the action described in the script (namely that a message box pops up when the button is pushed) to the button, named 'btnHello' which has been embedded within the page.

<SCRIPT LANGUAGE="VBScript">
<!-- These comment delimiters ensure the code is hidden from those browsers that do not support Visual Basic Script
Sub btnHello_OnClick
MsgBox "Hello, It's a fine day"
End Sub
-->
</SCRIPT>

NOTE : Netscape will not activate the script on pressing the button. It can be made to act similarly using JavaScript.

The button, called 'btnHello' responds to being clicked by displaying a message box with the text "Hello, It's a fine day". For information on how to embed ActiveX controls, see the <OBJECT> element. (The button in the above example was embedded into the page using a standard <INPUT TYPE=BUTTON> element. For more details, see the Forms section.)

As with JavaScript, a complete description of Visual Basic Script is well outside the scope of this reference and you are encouraged to visit http://www.microsoft.com/vbscript/ for more information and a complete copy of the language documentation.

Examples
NOTE : Netscape will not display or work the following scripted examples properly.

This is the Visual Basic Script version of the example given on the JavaScript page. It gives a greeting according to the time of day.

Here is another, more involved example. There isn't really room to put all the example code in here, so use the View Source option (via a right mouse click in Internet Explorer) to see how this is done. It's a version of the ever popular Scissors, Paper, Stone game, done entirely in Visual Basic Script. It keeps a running score and even offers some criticism on how the game went if the scores are refreshed. Ever so simple to do, see for yourself (view the source and watch out for the comments)

Scissors, Paper, Stone, using Visual Basic Script
Drawn : | I've won : | You've won :

The 'Activated Colour Wizard' (an ActiveX/Visual Basic Script based Web application) should also be viewed as an example of ActiveX/Visual Basic Script interaction. To see the example, go to the ActiveX/VBScript examples topic.

© 1995-1998, Stephen Le Hunte


<NOSCRIPT>

Netscape and Internet Explorer now support use of the <NOSCRIPT> ... </NOSCRIPT> container in HTML, which allows authors to write alternative content to cater for those users who browse with scripting capabilities disabled in the browser (or for those using non scriptable browsers). If your intended HTML document completely relies on a Script for its effect, then the alternative content should be contained within the <NOSCRIPT> ... </NOSCRIPT> container.

For example :

<HTML>
<HEAD><TITLE>Welcome to the HTMLib world of JavaScript</TITLE>
<SCRIPT LANGUAGE="JavaScript">
<!--
All of the JavaScript that controls the page goes here
// -->
</SCRIPT>
</HEAD>
<BODY>
<NOSCRIPT>
Sorry, you need a JavaScript capable browser to get the best from this page
</NOSCRIPT>
</BODY>
</HTML>

Users browsing with a script capable browser (Netscape and Internet Explorer) that have scripting enabled will get the full effect from the Script contained in the document. For those browsing with scripting disabled, or using a non scriptable browser, they will see the message "Sorry, you need a JavaScript capable browser to get the best from this page" (The alternative, standard HTML content should go there)

The <NOSCRIPT> ... </NOSCRIPT> container can be placed either inside or outside the <BODY> element.

© 1995-1998, Stephen Le Hunte


<SERVER>

Note : The <SERVER> element is supported by Netscape only.

The <SERVER> element can be used to execute Javascript functions via LiveWire (Netscapes server application development system). When a LiveWire compatible server encounters the <SERVER> element, all the code in between will be processed by the server and not served in the page that the user sees. This is similar to the <% ... %> or <SCRIPT RUNAT="server"> elements for ASP documents running on the Microsoft Internet Information Server.

For more information about LiveWire development, visit the Netscape web site.

© 1995-1998, Stephen Le Hunte


Dynamic HTML overview

What is Dynamic HTML?
Reviewing the W3C 'Document Object Model' section http://www.w3.org/pub/WWW/MarkUp/DOM/, it's clear what the W3C sees as 'Dynamic HTML'. The current draft requirements detail an 'open' standard object model that allows total document and content manipulation, that all elements (event those not directly supported by the browser) within the document are programmable objects with support for mouse and keyboard events, that all the document content can be manipulated (content added, changed or removed 'on-the-fly', without a return trip to the server) and that the document style sheet settings are also exposed as programmable objects, allowing stylings to be changed on-the-fly. As such, it represents a significant enhancement to static HTML and also to currently available 'dynamic' methods (i.e. scripting, server-side scripting/CGI etc.) 'Dynamic HTML' is apparently supported by both Microsoft and Netscape in Internet Explorer 4.0 and Communicator 4.0. An 'open' standard supported by both browsers...surely this is too good to be true...

Implementation differences
Yes, it is!
Netscape's implementation of 'Dynamic HTML' revolves around a slightly enhanced scripting object model, dynamic style sheets (through proprietary Javascript style sheets), absolute positioning (primarily through the use of layers - see <LAYER> and <ILAYER> and the Layer Object for all style sheet positioned elements). Netscape does support full CSS positioning of elements, but their position can only be manipulated by working through the Layers collection - and dynamic fonts (allowing fonts to be embedded in pages and downloaded along with them). Microsoft's implementation revolves around a significantly enhanced object model, dynamic style sheets (through the W3C standard CSS object model), absolute positioning (for all elements) and also implements some of the finer points of what 'Dynamic HTML' should be by allowing direct document and content manipulation (the ability to add, remove, or change any element or content). Essentially, Microsoft have fully embraced the 'Document Object Model concept and HTML 4.0, previously known as Cougar, for support in Internet Explorer 4.0.
To see what the W3C envisage as 'Dynamic HTML', visit http://www.w3.org/pub/WWW/MarkUp/DOM/drafts/requirements.html, as mentioned above, a document that details the requirements of the 'Document Object Model' - the name the W3C is using, where Microsoft and Netscape use 'Dynamic HTML'.

Dynamic HTML specifics
The following pages detail the various standard 'Dynamic HTML' properties, methods and events. Note that most of these are supported for almost every possible HTML element by Internet Explorer, with Communicator support being somewhat more limited. The details are basically an overview (with examples) of the properties, methods and events. For element/object specific properties, methods and events (and relevant browser support details), see the specific element/object topics.

© 1995-1998, Stephen Le Hunte


Dynamic HTML standard properties

Standard Properties
Internet Explorer 4.0's scripting object model is all-encompassing, to the point that unknown attributes for known elements are available through scripting. I.e. for any element that Internet Explorer 4.0 supports, any attributes of your choice can be added to the element and their values are available through scripting. Inquisitive readers will have noticed that the title documents in the HTMLib use XSIZE and YSIZE attributes in their links. These are available to the rest of the HTMLib for scripting, enabling the popups to work. Detailed below are the standard Dynamic HTML properties supported for practically every element in Internet Explorer 4.0

className
The className property can be used to determine, or set, which particular style sheet class the referenced element uses, from the documents style sheet settings, i.e. whatever the CLASS attribute is set to. For example, the following <A> element utilises the style sheet class "warning"

<A HREF="warning.htm" CLASS="warning">Read the warning first</A>

thus, its className property would be warning.

Dynamically setting an elements class to one that doesn't exist causes the element to use the browsers default settings for the element, or the default style sheet setting for the element in any style sheet declarations attached to the document.

dataFld
The dataFld property directly reflects the value of the elements DATAFLD property, for those elements that support Data Binding. The DATAFLD attribute is used to set the column name that the element will take data from - the column name being a valid column in the Data source object referenced by the DATASRC attribute/property (see below). For more information, see the Data Binding topic.

dataFormatAs
The dataFormatAs property directly reflects the DATAFORMATAS attribute for those elements that supported HTML formatted Data Binding. The DATAFORMATAS attribute can have values of "Text" or "HTML" and specifies whether the data provided by the Data Source object should be treated literally ("Text"), or parsed ("HTML"). Note that if the data contains HTML formatting, but the DATAFORMATAS="HTML" attribute is not set, it will be treated as plain text.

dataSrc
The dataSrc property directly reflects the DATASRC attribute for elements that support Data Binding. The DATASRC attribute referenced the Data Source that has been bound to elements in the document using the <OBJECT> element. For more information, see the Data Binding topic.

document
The document property contains a reference to the Document Object in which the element is contained. Through it, various properties of the Document Object can be obtained.

filters
The filters collection property represents a Filters collection applied to the referenced element. For example:

<IMG ID="logo" SRC="images/logo2.gif" WIDTH="384" HEIGHT="154" STYLE="filter:revealTrans(Duration=3.0, Transition=12);VISIBILITY:hidden" ALT="HTMLib logo" ALIGN="center">
. . .
call logo.filters.item(0).Apply()
logo.style.visibility=""
call logo.filters.item(0).Play()

The image has a Transition filter applied to it and is later referenced in a script by calling the first item of the elements filters collection.

id
The id property reflects the referenced element's ID property (if set), which contains a unique identifier for the element, within the document content.

innerHTML
The innerHTML property reflects the content contained by the referenced element, including all the HTML elements. For example, consider the following <ADDRESS> element:

<ADDRESS ID="Address1">
Stephen Le Hunte,<BR>
1, HTMLib Way,<BR>
Swansea,<BR>
U.K.
</ADDRESS>

The address' innerHTML property (obtained by referencing it via its ID property) would be:

Stephen Le Hunte,<BR>1, HTMLib Way,<BR>Swansea,<BR>U.K.<BR>

The innerHTML property has read-write permissions, meaning that HTML content can be 'written' into any element through scripting, with the document being re-displayed accordingly, dynamically re-positioning surrounding document content. The new HTML content would adopt whatever stylings (and ID) were applied to the referenced element, before the new content was supplied. Note that inappropriate nesting cannot occur when using the innerHTML property. For example, a <BUTTON> cannot contain another <BUTTON> element, so trying to apply some <BUTTON> HTML to the innerHTML property of another <BUTTON> element will fail. Also, note that adding elements through an elements innerHTML property changes the documents All collection and any associated sourceIndex properties.

innerText
Like the innerHTML property described above, the innerText property reflects the content of any referenced element, but without the actual HTML elements included in the content. For example, the innerText property of the above example would be:

Stephen Le Hunte,
1, HTMLib Way,
Swansea,
U.K.

Note that the <BR> element's are honoured. If the contents of the innerText property were displayed using the alert method (see the Window Object for details), then the displayed message would include such white space (Paragraph elements (<P>) and horizontal rules(<HR>) are other elements that are represented in the innerText property)

The innerText property has read-write permissions, meaning that text content can be 'written' into any element through scripting, with the document being re-displayed accordingly, dynamically re-positioning surrounding document content. The new text written into the element would adopt whatever stylings (and ID) were applied to the element beforehand.

isTextEdit
The isTextEdit property has a boolean value, reflecting whether or not the referenced element is one that accepts text editing. Currently, this is just <BUTTON>, <TEXTAREA> and <INPUT TYPE="text"> elements. If the referenced element is such an element, then the isTextEdit property value would be true, otherwise it's false. The isTextEdit property is most useful when trying to determine whether the referenced object can have a TextRange Object created from its contents. Those elements that return true can, those that return false can't.

lang
The lang property directly reflects the referenced elements LANG attribute value (if set). LANG is a standard HTML attribute supported by most elements for describing the language of the elements content. For more information, see the Document Localisation topic.

language
The language property reflects the referenced elements LANGUAGE attribute value (if set). As most elements support direct in-line scripting (i.e. using scripting event handlers within the element), the LANGUAGE property is used to explicitly tell the browser which particular scripting language the event handler information is written for. Internet Explorer defaults to using JScript (the Microsoft JavaScript implementation) to attempt to execute in-line script functions.

offsetHeight
The offsetHeight property is read-only and returns a value specifying the height of the referenced element (in pixels), relative to its parent containing element.

offsetLeft
The offsetLeft property is also read-only and returns a pixel value for the referenced elements left offset, relative to its parent containing objects left-most position.

offsetParent
The offsetParent element is read-only and returns a reference to the current referenced elements parent containing element object. This is the element whose positions are used to determine the relative offset* properties for any referenced element.

offsetTop
The offsetTop property is also read-only and returns a pixel value for the referenced elements top offset, relative to its parent containing objects top-most position.

offsetWidth
The offsetWidth property is read-only and returns a value specifying the width of the referenced element (in pixels), relative to its parent containing element.

outerHTML
The outerHTML property is much like the innerHTML property, except that reflects the HTML of the whole element, including any content. For example:

<A HREF="#footnote"><STRONG>Make sure</STRONG> to read the footnotes</A>

would have an innerHTML property of <STRONG>Make sure</STRONG> to read the footnotes, while its outerHTML property would be:

<A HREF="#footnote"><STRONG>Make sure</STRONG> to read the footnotes</A>

I.e., exactly what the element is.

The outerHTML property has read-write permissions, meaning that entire HTML elements can be changed to a different element through scripting, with the document being re-displayed accordingly, dynamically re-positioning surrounding document content. The only styling (and ID) information applied to the new element would be whatever is specified in the new contents of the outerHTML property. Note that changing an element through its outerHTML property changes the documents All collection and the referenced elements sourceIndex property.

outerText
Like the innerText property described above, the outerText property reflects text contained in the referenced element. Any text outside the element, is not considered part of the element's content, so the values of the two properties are identical. However, as the outerText property has read-write permissions, entire HTML elements can be replaced with straight text through scripting, with the document being re-displayed accordingly, dynamically re-positioning surrounding document content.

parentElement
The parentElement property can be used to obtain a reference to the element immediately preceding the element specified, whose properties and/or methods can be manipulated and/or invoked respectively. Note that the parentElement property is read-only and works on a 'content-model' basis. This means that the parentElement property of elements will be their containing Block Formatting Element, with the parentElement property of BLock formatting elements being the <BODY> element, unless they're contained in another Block-level element.

parentTextEdit
If the isTextEdit property returns false, indicating that the referenced element does not support TextRange object creation, then the parentTextEdit can be used to determine the next element object up in the element hierarchy that does support text editing (and the creation of TextRange objects) and would completely enclose the referenced element in a TextRange object.

recordNumber
When a data bound repeating table is set up (i.e. one that shows only a certain amount of records from a Data Source at any one time), the recordNumber property reflects the current record number, from the data source that the referenced object is displaying. For more information on Data Binding, see the Data Binding topic.

sourceIndex
For each document, Internet Explorer creates an indexed array of all the opening HTML elements. The sourceIndex property reflects the referenced elements position in this array. Essentially, the value returned by the sourceIndex property is identical to the elements index in the All collection. For an example, consider the following document :

<HTML>
<HEAD><TITLE>Document Title</TITLE>
</HEAD>
<BODY>
<P>Here's some text, <A HREF="other_page.html">Here's a link</A>
</BODY>
</HTML>

The anchors sourceIndex property would be 5. The <HTML> element would be 0, the <HEAD> element 1, the <TITLE> element 2 etc.

NOTE : Internet Explorer 4.0 inserts <HTML>, <TITLE>, <HEAD> and <BODY> into the sourceIndex array and All collection regardless of whether they existed in the document or not. Also, <TBODY> elements are inserted after any <TABLE> elements (if no <TBODY> element is set). So, if the above document were modified to :

. . .
<P>
<TABLE>
<TR><TD>
Here's some text, <A HREF="other_page.html">Here's a link</A>
</TD></TR>
</TABLE>
. . .

then the anchors sourceIndex property would be 9 (instead of 8 as expected). The sourceIndex property is read-only.

style
The style property reflects any stylings that the referenced element may have. Internet Explorer 4.0 only reflects in-line stylings, included using the STYLE attribute in the opening element and not those attached to an element via a style sheet (within the document, or external).
The style property actually returns a reference to a Style object for the referenced element, whose properties and methods can then be manipulated or invoked. See the Style Object topic for more details.

tagName
The tagName property reflects the actual element name. For example, for anchors, their tagName property is A, <TABLE> returns TABLE etc. The tagName property is read-only and would prove useful for determining a particular element through its sourceIndex property, or its position in the All collection.

title
The title attribute reflects the referenced elements TITLE attribute setting (if set). TITLE attribute values are generally used (in Internet Explorer 4.0) as ToolTips, displayed when the mouse passes over the particular element. It is possible to dynamically change the title property through scripting.

© 1995-1998, Stephen Le Hunte


Dynamic HTML standard Methods

Standard Methods
All of the following methods are specific to Internet Explorer 4.0's Dynamic HTML object model. None are supported by Netscape or any previous versions of Internet Explorer

click
The click method can be used to 'click' a referenced object through scripting, forcing an onClick event for the particular element. For example, click the top of the following two links and it 'clicks' the second link:

Link 1
Link 2

contains
The contains method can be used to determine whether the referenced element totally encloses (contains) another element. For example:

<P ID="para1">Some <STRONG ID="str1">strong, bold</STRONG> text</P>

alert (para1.contains(str1)) would return true.

getAttribute
the getAttribute method can be used to retrieve the value of a specific attribute for the referenced element. For example:

varCol=document.all.MySpan.getAttribute("BGCOLOR",false)

would retrieve the value of the BGCOLOR attribute of the element whose ID is MySpan. The false argument is a boolean value (i.e. true or false), specifying whether or not the search to find the attribute is case-sensitive or not. 'True' means that the attribute case must match that give in the attribute value, for the getAttribute method to work - the default value is 'false'. Depending on the value of the attribute, the getAttribute method returns either a string, a number, or a variant.

insertAdjacentHTML
The insertAdjacentHTML method can be used to insert a new HTML element into the document, without removing a previous one (as manipulation of the innerHTML and outerHTML Properties insertAdjacentHTML places the string specified in the second argument, at the position specified in the first argument. For example:

document.all.tags("P").item(1).insertAdjacentHTML("BeforeBegin", "<P>Here's a new paragraph")

would add <P>Here's a new paragraph before the second paragraph in the document. The possible values for the positioning are:

BeforeBegin
Insert the HTML before the referenced elements opening element.
AfterBegin
Insert the HTML after the referenced elements opening element, but before its text content
BeforeEnd
Insert the HTML before the referenced elements closing element, after its text content.
AfterEnd
Insert the HTML after the referenced elements closing element

insertAdjacentText
The insertAdjacentText method is essentially identical to the insertAdjacentHTML method, except that it inserts literal text, regardless of the strings actual content. It takes the same argument set - i.e. (string, position) where position can be one of the four values mentioned above.

removeAttribute
removeAttribute can be used to remove an attribute and its associated value from the referenced element. This is subtly different to dynamically setting the attribute property value to nothing. Using the removeAttribute value forces removal of the attribute, as if it had never been set in the first place. The removeAttribute method returns a boolean (i.e. true or false) value depending on whether the attribute was successfully removed or not. Its optional second argument is a boolean value, which specifies whether to use a case-sensitive search to locate the attribute to remove. For example:

bKilldataSrc=dataTable.removeAttribute "DATASRC", "false"

would make the bKilldataSrc true or false, depending on whether the DATASRC attribute was removed from the element referenced by dataTable. The search is case-insensitive. The default value for the case-sensitivity argument, if none is given, is 'true'.

scrollIntoView
The scrollIntoView method can be used to force the current viewing window to scroll to a referenced element object. It accepts a boolean argument (true or false) which determines whether the window should be scrolled so that the referenced element object is at the top (true) or bottom (false) of the window. For example, the button below will scroll the links given in the click example, so that they're at the bottom of the viewing window.

setAttribute
Like the other *Attribute methods, setAttribute can be used to set the value of a specific attribute for a referenced element. For example:

MyTable.setAttribute "DATASRC", "#Comp1", true

would set the DATASRC attribute to #Comp1 for the element referenced by MyTable. Basically, the first and second arguments for the method specify the attribute and its value to be set, with the third argument being 'true' or 'false', specifying whether case sensitive setting of the attribute is used or not. If this is set to 'true' (the default) and the attribute name you specify for the referenced element has a different case than any existing setting of that attribute, then a new attribute will be created, with the value specified in the value argument.

© 1995-1998, Stephen Le Hunte


Dynamic HTML standard Events

Standard Events
NOTE : Certain events detailed here are supported by some versions of Netscape and older versions of Internet Explorer for certain HTML elements (see the particular element for browser specific details). To use browser v4.0 specific scripting, ensure your target audience is using the required browser, or they've been re-directed appropriately.

onclick
Unsurprisingly, the onclick event can be used to execute script functions when the user clicks on the particular element. Internet Explorer 4.0 supports this event for almost all HTML elements, while Netscape and earlier versions of Internet Explorer only support it in a handful of elements (such as links, image map 'hot-spots' etc). See the onmouse* event ordering section for details of the order in which mouse related events occur.

ondblclick
The ondblclick event occurs when the user double-clicks on the particular element (almost all elements for Internet Explorer 4.0, link, document and area objects (see <A>, Document Object and <AREA> for details) for Communicator). For example, the following link does not respond to single-clicking in the normal fashion, but double-clicking navigates to the new document. This event handler is Internet Explorer 4.0 and above and Netscape 4.0 and above specific. Netscape 3.0 fully supports the onclick event and would 'kill' the link when single-clicking, but doesn't support the ondblclick event, so essentially, to Netscape 3.0 users, the link would be totally dead. Internet Explorer 3.0x users would receive a scripting error, as Internet Explorer 3.0 doesn't support the link 'killing' method.

<A HREF="other_page.htm" onclick="javascript:return false" ondblclick="self.location.href ='other_page.htm'">Link text</A>

Give it a try (note that the link won't navigate anywhere, even on double-clicking, but will present a message for the purposes of the example).

Link text

Note that the system mouse settings are used to determine the difference between a single and double-click - as a HTML author, you have no method for setting what counts as a double-click. See the onmouse* event ordering section for details of the order in which mouse related events occur.

ondragstart
Whenever the user focuses on an element or a text selection and attempts to drag it somewhere different in the document, the ondragstart event is fired. As a simple example, the following link text will change when the link is dragged.

Give it a try: Drag me

NOTE : For the purposes of this example, the default action of the dragging procedure has been cancelled. The normal action would be to load the document referenced in the link on top of all documents currently displayed, which would 'break' the HTMLib display. This means that the 'dragging' cursor (the normal pointer, with a 'shortcut' attachment) will not be seen when dragging the example.

onfilterchange
Whenever a Filter applied to an element is changing, it fires an onfilterchange event. The srcFilter property of the Event Object can be used to obtain a reference to the exact filter object that is causing the event to occur.

onhelp
The onhelp event is used to execute script functions when the user presses the 'F1' key. Note that for the event to be fired from an object, the object must currently have the focus (i.e. the user has 'tabbed' to the link, or clicked on it). It could be used for example, to open a new window, containing user-assistance on the current document, or the specific element. As a simple example, the following link only responds to double-clicking (see ondblclick above), so provides a 'help' message to the confused user who is single-clicking it (provided they press the F1 key after single-clicking the link produced no response).

<A HREF="other_page.htm" LANGUAGE="Javascript" onclick="return false"
onhelp="alert ('Double-click this link to view the target document');return false"
ondblclick="self.location.href= 'other_page.htm'">Link text</A>

Give it a try : Link text

Note the use of the return false keyword in the onhelp event handler, to cancel the default action of the event. Internet Explorer 4.0's default action on pressing the 'F1' key (firing the onhelp event is to bring up the Internet Explorer help file. Using return false in the event handler prevents this happening.

onkeydown
The onkeydown event can be used (in conjunction with the event object) to determine whether the user is holding down any keys when the referenced element has the current users focus. By using the keyCode and altKey, ctrlKey and shiftKey properties of the event object it's possible to determine any key combination that the user may be using when the element has the focus. Note : The onkeydown event is supported by Netscape Communicator for the document, image, link and textarea objects (see the relevant Document Object, <IMG>, <A> and <TEXTAREA> topics)

onkeypress
The onkeypress event is similar to the onkeydown event (described above), except that it returns the UNICODE value of the key or keys being pressed when the event occurs. This allows for case-sensitivity detection when using the shift key in conjunction with other keys. For example, the onkeydown event is fired by pressing the 'Alt', 'Ctrl', or 'Shift' keys and the keyCode property of the event object returns the corresponding code, whereas the onkeypress event isn't. If the onkeypress event is used instead, then the 'Alt', 'Ctrl' and 'Shift' keys can be combined with other keys to fire the event. I.e. 'Shift+S' (returning the keyCode value for a capital 'S') can be separated from 's' (returning the keyCode value for a lower case s). Note : The onkeypress event is supported by Netscape Communicator for the document, image, link and textarea objects (see the relevant Document Object, <IMG>, <A> and <TEXTAREA> topics)

onkeyup
The onkeyup event is fired when a previously pressed key is released while the referenced element has the focus. It returns the same keyCode property as the onkeydown event would. Note : The onkeyup event is supported by Netscape Communicator for the document, image, link and textarea objects (see the relevant Document Object, <IMG>, <A> and <TEXTAREA> topics)

onmousedown
The onmousedown event fires whenever the user presses a button on the mouse, with the event being initially fired for the element that has the focus when the mouse button is clicked, and bubbling up through the element objects until an onmousedown event handler is found. (Note : Initial versions of the Internet Client SDK detailed the onmousedown event as having various arguments for detecting keystates and the mouse button pressed etc. - these have since been removed from the event declaration, as they're supported through the Event Object for all events that occur).
See the onmouse* event ordering section for details of the order in which mouse related events occur. Note : Netscape Communicator supports the onmousedown event for button, document and link objects - see <INPUT>, Document Object and <A> topics)

onmousemove
The onmousemove event occurs whenever the users mouse moves over a document (essentially, it is continually firing). onmousemove event handlers can be written for almost any element (for Internet Explorer 4.0 - Netscape 4.0 only supports it for the Document Object and Window Object), which will then handle the onmousemove events for whenever the mouse moves over the referenced elements only. Note that nested onmousemove events should cancel the bubbling of the event in order to work properly. For example, consider:

<P onmousemove="top.status='Over the P'">Here's some <EM onmousemove="top.status='Over the EM'">italicised</EM> text</P>

The status bar will imply that the mouse is only ever moving over the <P> element contents, as the event bubbles from the <EM> element, when the mouse moves over it, causing both onmouseover events to fire. However:

<P onmousemove="top.status='Over the P'">Here's some <EM onmousemove="top.status='Over the EM';self.event.cancelBubble=true">italicised</EM> text</P>

Try it, the second line cancels the event bubbling

Here's some italicised text

Here's some italicised text

would cancel the bubbling and the two distinct status bar messages will be seen.
See the onmousedown event for details of the correct argument list order and values of the mouse button and key states.

onmouseout
The onmouseout event fires when the users mouse leaves the area defined by the referenced element. See the onmouse* event ordering section for details of the order in which mouse related events occur. Note : Netscape supports the onmouseout event for area, layer and link objects. See <AREA>, <LAYER>/<ILAYER> and <A>)

onmouseover
The onmouseover event fires when the users mouse enters the area defined by the referenced element. See the onmouse* event ordering section for details of the order in which mouse related events occur. Note : Netscape supports the onmouseout event for area, layer and link objects. See <AREA>, <LAYER>/<ILAYER> and <A>)

onmouseup
The onmouseup event can be used to execute script functions after the users mouse has been pressed and released - the opposite of the onmousedown event in effect. See the onmouse* event ordering section for details of the order in which mouse related events occur. Note : Netscape supports the onmouseout event for button, document and link objects. See <INPUT>, Document Object and <A>)

onselectstart
The onselectstart event is fired whenever the users starts to select some text that is the contents of the referenced element. For example, selecting any of the text in the white paragraph below causes it to change its style (fairly drastically) :

Selecting any of this text will cause it to change its colours...sometimes wildly

onmouse* event ordering
During mouse events for which there is no button interaction (i.e. no clicking of either mouse buttons), the events occur in the following order:

onmouseover
onmousemove
onmouseout

So, any script functions executed by the onmouseover event will occur first, followed by those attached to the onmousemove event, followed by those attached to the onmouseout event.

For mouse events that also entail 'clicking' of the mouse, the event order changes to:

onmouseover
onmousemove
onmousedown
onmouseup
onclick
ondblclick
onmouseout

so any script functions executed by onmousedown or onmouseup events would occur before the onclick or ondblclick events.

© 1995-1998, Stephen Le Hunte


Data Binding

Note : This is not by any means an exhaustive guide to Data Binding HTML elements, nor a control reference for the TDC control, or RDS. Some information on data binding is available in the Internet Client SDK, and some feature articles at the Sitebuilder Network describe Data Binding in greater detail. Data Binding is only currently supported by Internet Explorer 4.0.

Data binding represents a relatively simple way to display data in web pages without having to write extensive server side procedures. Basically, you insert a standard <OBJECT> element, which inserts a Data Source object. Then, HTML elements that support Data Binding can use the data referenced by the Data Source object in the HTML document.

Data Sources
Internet Explorer 4.0 supports 2 types of data sources. RDS (Remote Data Service - formerly known as ADC) and TDC (the Tabular Data Control).

Generally speaking, the RDS Data Binding component would be used if you wish to publish data from ODBC, SQL, Access, Oracle etc, databases, or you wish for users to be able to interact with the data from the database (i.e. add, or update records for example). The somewhat simpler to use TDC Data Binding component can be used if you have simple data to display. For example, if you just want to publish some data that's been extracted from a data source as a standard text file. Using the TDC Data Binding component doesn't allow any udpate/creation interaction with the data, although the user can sort, filter and manipulate the data in any way you allow through scripting in the document.

Displaying Data
Once you've decided on a Data Source object and what data is going to be presented to the user, you need to decide how that data is presented to the user. There's three basic options:

  1. Tabular
    Display the entire data set in one go in a table that essentially repeats itself for every record in the dataset referenced.
  2. Single Record
    You can choose to display one record at a time. This is useful for RDS based Data Binding - especially if you're allowing users to dynamically update the data in the data source. Only one record is displayed at a time (most commonly using <FORM> fields, allowing the user to change the data), with scripted navigation buttons, allowing the user to navigate forwards and backwards through the recordset.
  3. A combination
    Both Repeated tables and single-record presentation can be combined. This may be necessary with more complex data.

Binding HTML elements
Once the data source and presentation method are decided, the elements that are going to be used for the presentation of the data need to be bound to the Data Source. Below are the Data Binding HTML attribute extensions, supported by elements that support Data Binding.

DATAFLD
The DATAFLD attribute is used to set which column in the data referenced by the data source the element is going to use as the contents of its display. See the examples for an example

DATAFORMATAS
The DATAFORMATAS attribute accepts either text or HTML as its values and specifies whether the data being taken from the data source should be displayed literally DATAFORMATAS="text" or parsed before being displayed DATAFORMATAS="HTML". If the data source column being used contains HTML formatting, then DATAFORMATAS="HTML" should be explicitly used. DATAFORMATAS defaults to text if not specified, and any HTML from the data source would be treated as plain text.

DATAPAGESIZE
For repeated Data bound tables, the DATAPAGESIZE attribute specifies how many records should be displayed by the table at any one time. The table will then be repeated to display that number of records only. If this doesn't cover the entire contents of the data source data, then navigational buttons will need to be used to allow the user to retrieve the next 'block' of records. Using data bound tables in this way can greatly increase the perceived speed of your site, as the rendering time for smaller tables is less.

DATASRC
The DATASRC attribute is the most important Data Binding attribute, as it defines for the element, which Data Source object it is to use, to retrieve the data from. Once a Data Source object has been included in the document (with the <OBJECT> element), the DATASRC attribute should be set to #ID, where ID reflects the ID attribute of the <OBJECT> element used to insert the Data Source object.
Note that the DATASRC attribute can be inherited. In the case of repeated tables, if the DATASRC attribute specifies a valid data source in the main <TABLE>, then subsequent DATAFLD attributes in elements contained within the table need only specify a DATAFLD attribute - the data source referenced will be resolved by looking to the parent <TABLE> element for a valid DATASRC attribute.

Data Binding Scripting
When elements are data bound, they support a number of properties and events. The dataFld, dataFormatAs, dataPageSize and dataSrc properties are all read-only and directly reflect the DATAFLD, DATAFORMATAS, DATAPAGESIZE and DATASRC attribute settings for the elements. For the HTML elements that support in-place editing/Data Binding (e.g. <INPUT>, <SELECT>, <TEXTAREA> etc.) and certain other Data Consumers support the following events (when used with RDS Data Binding, which is allowing user updates to the data source). (Note : Review the element topic to see what (if any) of the following topics it supports. Also, these are events that are supported on the element object, not the data source object. For such information, consult the ADO/TDC/RDS documentation in the Internet Client SDK).

onafterupdate
The onafterupdate event is fired after data is transferred from the element to the data provider and will only fire after the onbeforeupdate event has fired and was successful.

onbeforeupdate
onbeforeupdate fires when a data bound element loses the focus, or the current document is unloaded and will only fire if the value of the element is different to the original value that was present when the element received the users focus. Note that onbeforeupdate is a cancelable event (setting returnValue=false for the Event object), which allows the document /script author a chance to validate the new data entered by the user on the client-side, before sending the data to the data provider.

onerrorupdate
The onerrorupdate event fires when a data transfer error occurs, through some action by the user (i.e. pressing the 'Stop' button on the browser for example), but not if a script generates the transfer error.

onrowenter
The onrowenter event fires on the data source control when the current record has been changed, so new data is available to populate the HTML display elements that are bound to the data source. Somewhat confusingly, this will typically happen after the onrowexit event has been fired.

onrowexit
The onrowexit event is fired immediately before the data source changes the current record (i.e. when the user has requested another record, or set of records by pressing a button perhaps). Note that unlike the onafterupdate and onbeforeupdate events, onrowexit is fired by the data source, not any of the HTML elements used to display the data. Changes to the data in the HTML elements should have been transferred to the data source (with validation being taken care of in the on*update events). onrowexit will also fire if the record position is changed through scripting.

onbeforeunload
The onbeforeunload event fires on the document (via the Window Object), firing before any onunload events, in order to give the author a chance to do any necessary data updates, before the page is unloaded. For example, the user makes some data edits, but before moving to another record (and having the changes committed to the data source through the on*update events), they close down the browser, or navigate to a different site. Any unsaved data changes should be taken care of in the onbeforeunload event. For security reasons, the onbeforeunload event is not cancelable, but a string value can be returned from the event, which is used as a prompt to the user.

Data Source Object events
Only the <OBJECT> and <APPLET> elements can insert Data source objects into a document. For these elements, the following properties and events have been introduced with data binding.

recordset
The recordset property returns a reference to the ADO recordset supplied by the Data Source object. For more information, see the ADO reference in the Internet Client SDK.

ondatasetchanged
The ondatasetchanged event is fired when a new set of data is available and a recordset can be retrieved from that set of data, or when an existing set of data has been changed - for example after a filter has been applied to the data.

ondataavailable
The ondataavailable event being fired indicates that more records for the referenced Data Source Object are available. It doesn't necessarily fire for every single additional record though.

ondatasetcomplete
When all the data in the referenced recordset is available, the ondatdasetcomplete event fires. For the ondatasetcomplete event, a reason parameter is available through the Event Object, which can have values of 0, 1 or 2, corresponding to successful completion, Aborted completion (i.e. 'Stop' button pressed for example), or Error (some other error) respectively.

<TABLE> Paging
For most small data sets, using the standard <TABLE> template method of table repetition will be OK, but for larger datasets, to prevent swamping the user with data, the DATAPAGESIZE attribute in the <TABLE> can be used to specify that only a certain number of records are retrieved and displayed at any one time. The table still repeats, as normal, but only by the number of times specified in the DATAPAGESIZE attribute.

When such a table is used, the previousPage() and nextPage() methods can be used (typically attached to buttons in the document) to refresh the table with the next, or previous DATAPAGESIZE records from the data set. Whenever the amount of records to display is less than the value of the DATAPAGESIZE attribute, then the table will simply repeat its content until all the records are displayed and then close - i.e. 'shrinking' to fit the amount of data shown.

Data Binding examples
Presented here is a brief and simple data binding example, with the necessary code explained. Firstly, the code will be examined, then the table example will be shown. For the purposes of this example, a portion of the HTMLib Comparison table will be used to provide the data.

Inserting the TDC control
The TDC control that ships with Internet Explorer 4.0 is just like any other ActiveX control and is inserted into a document with the <OBJECT> element, as below:

<OBJECT id=comp CLASSID="clsid:333C7BC4-460F-11D0-BC04-0080C7055A83">
<PARAM NAME="DataURL" VALUE="compdata.txt">
<PARAM NAME="UseHeader" VALUE="True">
 </OBJECT>

Notice the ID attribute that's been used - that's what is used to bind the <TABLE> to the Data Source.

Creating the <TABLE> template
Next, the <TABLE> template needs to be set up. The data file that we're using compdata.txt is a comma delimited file, which looks like this.

As you can see, in the data file there is references to images and some text that needs to be formatted as HTML. The main <TABLE> element used in the template is:

<TABLE datasrc="#comp" BORDER DATAPAGESIZE="10" ID="TABLE1">

The DATASRC attribute references the TDC control inserted into the document earlier and the DATAPAGESIZE attribute is set to 10, which means that only 10 records from the data set will be displayed at any one time. The main part of the table that is repeated for each record is:

<TBODY>
<TR>
<TD><DIV DATAFLD="Element" DATAFORMATAS="html"></DIV></TD>
<TD><IMG DATAFLD="IEx" WIDTH="11" HEIGHT="11" ALT="Y"></TD>
<TD><IMG DATAFLD="Netscape" WIDTH="11" HEIGHT="11" ALT="Y"></TD>
<TD><IMG DATAFLD="Mosaic" WIDTH="11" HEIGHT="11" ALT="Y"></TD>
<TD><DIV DATAFLD="Spec" DATAFORMATAS="text"></DIV></TD>
</TR>
</TBODY>

The DATAFLD attribute for each element specifies the column name that it uses from the data file (see above), with the DATAFORMATAS attribute specifying whether the two text fields are formatted as HTML, or text. Note that for the <IMG> element, the data taken from the data source is used for the SRC attribute of the element, so extra attributes, such as WIDTH and HEIGHT etc., still need to be specified. The <TBODY> element is used to separate what is actually repeated for each record. Only table rows/cells between the <TBODY> and </TBODY> elements are repeated.

What's next?
That's about as much as it takes to set up a data bound repeating table. The only HTML that's not been included in the sample code given above is additional stylings and the table header and footer. For a complete list of the code, click here. All that's left is a pair of navigational buttons. Remember, only 10 records are being displayed at any one time, so there must be a way for the user to navigate through the records. Any standard button will do, the script function it runs just needs to be:

TABLE1.nextPage()

or

TABLE1.previousPage()

Depending on whether it's navigating forwards or backwards through the recordset.

What it looks like
So, that's how to set up a data bound repeating table. One has already been set up in this document, just press the 'Load table' button to load it, then move through the records with the two navigational buttons.

Element | IEx | NS | Mos | Spec
 | Y | Y | Y |
The Comparison Table

Notice how the table shrinks and expands as needed, according to the content of the cells.

© 1995-1998, Stephen Le Hunte


Visual Filters

Note : The filters described here are only supported by Internet Explorer 4.0. Strictly speaking, Visual Filters should be detailed under Style Sheets as they are applied by using Style Sheet attributes. However, currently, they are a Microsoft Internet Explorer 4.0 specific style sheets extension (in early versions of Internet Explorer 4.0, the filters were implemented as a set of ActiveX controls, only being implemented as style sheet attributes in the later preview versions of Internet Explorer 4.0

The Visual Filters provide a way for manipulating visual objects (basically, anything on a page) to provide visual effects previously only manageable by using graphics. Also, through scripting, the applied filters are dynamically changeable, without reloading the document, which gives them a major advantage over images. Most commonly, they would be applied to <IMG> elements, but can be applied to <DIV> elements, which in turn can contain any HTML, so the visual filters can be applied to virtually any content. Note that if they are applied to text blocks (wrapped in <DIV> elements, then the <DIV> element must specify width and height style sheet attributes.

Inter-page/site transitions
Internet Explorer 4.0 also supports inter-page and inter-site transitions, using a Visual Filter set in the <META> element. These can be used to set transitions that play when a page is entered (i.e. first loaded) or exited or when a site (individual sites are determined by a change in the host - i.e. http://www.htmlib.com/ and http://faq.htmlib.com/ would be considered individual sites) is entered, or exited. Any of the standard Visual Filter effects can be used with either blend or reveal transitions. The syntax is as used for other Visual Filters, setting the filter type in the CONTENT attribute of the <META> element. For example:

<META HTTP-EQUIV="Page-Enter" CONTENT="filter:RevealTrans(Duration=3.000, Transition=23)">

This would play a random dissolve filter, over 3 seconds when the page is first displayed.

Note : For page-enter, page-exit, site-enter and site-exit transitions to work, the <META> element specifying the filter must be the first element in the <HEAD> section of the document and inter-page transitions do not appear to work across framed documents.

The Visual filters available are:

Filter effect | Description
Alpha | Sets a uniform transparency level.
Blur | Creates the impression of moving at high speed.
Chroma | Makes a specific color transparent.
DropShadow | Creates a solid silhouette of the object.
FlipH | Creates a horizontal mirror image.
FlipV | Creates a vertical mirror image.
Glow | Adds radiance around the outside edges of the object.
Gray | Drops color information from the image.
Invert | Reverses the hue, saturation, and brightness values.
Light | Projects a light source onto an object.
Mask | Creates a transparent mask from an object.
Shadow | Creates an offset solid silhouette.
Wave | Creates a sine wave distortion along the X axis.
XRay | Shows just the edges of the object.

Internet Explorer also supports two Transition Filters (Reveal and Blend transitions) for creating effects for revealing and blending objects.

The basic syntax for applying visual filters to an object is:

STYLE="filter:filtername(fparameter1, fparameter2...)}

where filtername is the name of the filter (as in the above table) and fparamter1... represents the parameters associated with each different filter type. These are detailed below, by filter name.

alpha
The Alpha visual filter can be used to set the opacity of an object, either the whole image, or a gradient region.

STYLE="filter:Alpha(Opacity=opacity, FinishOpacity=finishopacity, Style=style, StartX=startX, StartY=startY, FinishX=finishX, FinishY=finishY)"
Opacity
Opacity level, 0-100, where 0 is transparent, 100 is fully opaque
FinishOpacity
Optional finish opacity level, 0-100, 0 is transparent, 100 is fully opaque
Style
values can be 0 (uniform), 1 (linear), 2 (radial) or 3 (rectangular)
StartX
X coordinate for start of opacity gradient
StartY
Y coordinate for start of opacity gradient
FinishX
X coordinate for finish of opacity gradient
FinishY
Y coordinate for finish of opacity gradient

For example:

Pressing the button below the image causes the following filter to be applied:

filter:Alpha(Opacity="0",FinishOpacity="75",Style="2")

blur
The Blur filter gives the impression that the object is moving.

STYLE="filter:Blur(Add = add, Direction = direction, Strength = strength)"
Add
Boolean value, any integer value adds the original object to the blurred object, '0' doesn't
Direction
0 - 315 in increments of 45 - specifies the direction of the motion blur to be added
Strength
An integer value representing the number of pixels of 'depth' for the motion blur

For example:

Pressing the button below the image causes the following filter to be applied:

filter:Blur(Add="1",Direction="45",Strength="5")

chroma
The Chroma filter makes a specific colour of the object transparent.

STYLE="filter:Chroma(Color = color)"
Color
Any colour (as a #rrggbb triplet). For the Chroma filter to work properly, this must be a colour used in the object

For example:

Pressing the button below the image causes the following filter to be applied:

filter:Chroma(Color="#FFFFFF")

dropShadow
The dropShadow filter adds a solid silhouette of the object, offset in the specified direction.

STYLE="filter:DropShadow(Color=color, OffX=offX, OffY=offY, Positive=positive)"
Color
A #rrggbb hex triplet, specifying the colour to use for the shadow
OffX
Horizontal offset for the shadow
OffY
Vertical offset for the shadow
Positive
A boolean value. Any nonzero integer (true) creates a shadow for non-transparent pixels in the object, '0' (false) creates a shadow for transparent pixels.

For example:

Pressing the button below the text causes the following filter to be applied:

filter:DropShadow(Color="#6699CC",OffX="5",OffY="5",Positive="1")

DropShadow this text!

flipH
The FlipH filter flips the object horizontally

STYLE="filter:FlipH"

For example:

Pressing the button below the text causes the following filter to be applied:

filter:FlipH

Flip this text!

flipV
The FlipV filter flips the object vertically

STYLE="filter:FlipV"

For example:

Pressing the button below the text causes the following filter to be applied:

filter:FlipV

Flip this text!

glow
The Glow filter adds radiance around the object, causing it to appear to glow.

STYLE="filter:Glow(Color=color, Strength=strength)"
Color
Any #rrggbb hex triplet for the colour of the glow
Strength
Glow intensity, from 0-100

For example:

Pressing the button below the text causes the following filter to be applied:

filter : Glow(Color="#6699CC",Strength="5")

Make me glow

gray
The Gray filter drops colour information from the object, rendering it in gray scales only.

STYLE="filter:Gray"

For example:

Pressing the button below the image causes the following filter to be applied:

filter:Gray

invert
The Invert filter reverses the hue, saturation and brightness of the object

STYLE="filter:Invert"

For example:

Pressing the button below the image causes the following filter to be applied:

filter:Invert

light
The Light filter can be used to make the object appear as if a light source is illuminating it. Initially, Light filters need to be applied, then have the light source specified with one of the following methods.

AddAmbient(R,G,B,strength)
Adds an ambient light source to the image. Ambient light is non-directional and lights the entire area. The sun emits ambient light. The syntax is:

call object.style.filters.Light(n).addAmbient(R,G,B,strength)

where R, G and B are values (0-255) to determine the ambient light colour and strength determines the 'amount' of light cast.

AddCone(x1,y1,z1,x2,y2,R,G,B,strength,spread)
Adds a cone light source to the image. Cone light is directional and lights only a defined area. The syntax is:

call object.style.filters.Light(n).addCone(x1,y1,z1,x2,y2,R,G,B,strength,spread)

where x1, y1 represent the location of the source light, x2 and y2 represent the location that the light is targeted towards, R, G and B are values (0-255) to determine the light colour, strength determines the 'amount' of light cast and spread determines the angle of spread (0-90, in degrees).

AddPoint(x,y,z,R,G,B,strength)
Adds an point light source to the image. Point light is emitted by light bulbs. The syntax is:

call object.style.filters.Light(n).addPoint(x,y,z,R,G,B,strength)

where x, y and z represent the point lights coordinates, R, G and B are values (0-255) to determine the ambient light colour and strength determines the 'amount' of light cast.

For example:

Pressing the button below the text causes the following script function to execute:

call document.all.divLight.filters.Light(0).addPoint(10,10,100,255,255,255,1000)
call divLight.filters.Light(0).addAmbient(0,0,255,50)

which adds a white point light and a blue ambient light to the text.

Light me up

The following methods are also available for the Light Visual filter:

ChangeColor(lightnumber, r,g,b, fAbsolute)
The ChangeColor method will change the colour of a light filter applied to an object. Use lightnumber to identify the particular light source whose colour is to be changed (it's position in the Lights array), r,g and b, represent the new colour to be changed to and fAbsoloute is a boolean flag. If fAbsoloute is true (nonzero), then the referenced Light filter colour is changed to the new amount specified, if false (i.e. zero), then the referenced Light filter colour is changed by the specified amount.

ChangeStrength(lightnumber, strength, fAbsolute)
ChangeStrength changes the strength of the particular Light filter (referenced by the lightnumber argument) to the strength specified in strength if the fAbsolute flag is true (nonzero), or by the amount specified if it's false (zero).

Clear
The Clear method removes all light sources for the referenced Light filter.

MoveLight(lightnumber, x, y, z, fAbsolute)
The MoveLight method moves the light source (for point lights), or the target location (for cone lights) and has no effect on ambient lights. The x, y and z values represent positions to move the light to, either absolutely (fAbsoloute=nonzero) or relatively (fAbsolute=false).

mask
The Mask filter takes all the transparent pixels in a visual object, sets them to a certain colour and creates a transparent mask from the nontransparent pixels. The syntax is:

STYLE="filter:Mask(Color=color)"

where Color is the colour to be used for the mask.

For example:

Pressing the button below the image causes the following filter to be applied:

filter:Mask (Color="#FFFFE0")

Mask Me

shadow
The shadow filter can be used to apply a shadow to the specified object. The syntax is:

filter:Shadow(Color=color, Direction=direction)
Color
A #rrggbb hex triplet that specifies the shadow colour
Direction
0-315 in 45 degree increments, specifying the direction that the shadow should be applied for.

For example:

Pressing the button below the image causes the following filter to be applied:

filter:Shadow (Color="#6699CC", Direction="135")

Spooky Shadows

wave
The wave causes sine wave distortion of the referenced object. The syntax is:

filter: Wave(Add=add, Freq=freq, LightStrength=strength, Phase=phase, Strength=strength)
Add
A Boolean value specifying whether the original object is added (true, nonzero) to the filtered object or not (false, zero)
Freq
An integer value specifying the number of waves to appear in the distortion
LightStrength
Strength of the light on the wave effect as a percentage value
Phase
Specifying the angular offset of the wave, in percentage (i.e. 0/100% = 360 degrees, 25% = 90 degrees
Strength
An integer value specifying the intensity of the wave effect

For example:

Pressing the button below the image causes the following filter to be applied:

filter: wave(Add="0", Phase="4", Freq="5", LightStrength="5", Strength="2")

Make me Wavey

xray
The xray filter causes the object to appear as if it had been x-rayed. The syntax is:

STYLE="filter:Xray"

For example:

Pressing the button below the image causes the following filter to be applied:

filter:Xray

Transition Filters
There are two types of transition filter supported by Internet Explorer 4.0, the Reveal Transition and the Blend Transition. As their names suggest, the Reveal Transition filter allows selective revealing of any visual object and the blend transition performs a fade in/out of a visual object.

RevealTrans Filter
The RevealTrans filter can be applied to any visual object, to selectively show or hide it, using a variety of different techniques. The basic syntax is:

STYLE="filter: revealtrans(duration=duration, transition=transitionshape)

where Duration is a time value that the transition will take. It accepts values in the format of seconds.milliseconds For example 2.1 = 2 seconds, 100 milliseconds. Transition can be any one of the following:

Value | Description
0 | Box in
1 | Box out
2 | Circle in
3 | Circle out
4 | Wipe up
5 | Wipe down
6 | Wipe right
7 | Wipe left
8 | Vertical blinds
9 | Horizontal blinds
10 | Checkerboard across
11 | Checkerboard down
12 | Random dissolve
13 | Split vertical in
14 | Split vertical out
15 | Split horizontal in
16 | Split horizontal out
17 | Strips left down
18 | Strips left up
19 | Strips right down
20 | Strips right up
21 | Random bars horizontal
22 | Random bars vertical
23 | Random effect (any of the other 23)

Note : The Reveal Transition Filter is most useful when used with the following events:

Apply
The Apply method is used to actually apply the filter. Event though it may have been specified in the STYLE attribute of the element, it still needs to be applied via the apply method.

Play
The Play method causes the referenced Reveal Transition filter to start playing. It starts the transition type, for the time specified in the Duration attribute (if no Duration argument is specified in the method. A Duration can be specified in the Play method, which will override any settings in the elements filter declaration.

Stop
The Stop method is used to stop a transition and can be called at any time while the transition is playing. To determine whether the transition is playing, use the status property (described below).

Properties
Reveal Transition filters have status and duration properties. The Duration property reflects the current duration set for the filter and status returns a value depending on the current status of the transition. "0" = transition stopped, "1" = transition applied, "2" = transition playing.

For example. Pressing the button below the (currently hidden) image below starts the random dissolve transition. The image is initially hidden, so that the filter is applied to dissolve the image into appearance, rather than dissolve it away.

The script function executed when the button is pressed is:

call logo.filters.item(0).Apply()
logo.style.visibility=""
call logo.filters.item(0).Play()

which applies the filter, then resets the images visibility before playing the dissolve transition.

BlendTrans Filter
The BlendTrans filter can be applied to any visual object, to fade it in or out, over a certain time period. The basic syntax is:

STYLE="filter: blendtrans(duration=duration)"

where Duration is a time value that the transition will take. It accepts values in the format of seconds.milliseconds For example 2.1 = 2 seconds, 100 milliseconds.

For example, below there is an image above the button that's not displayed yet. When the button is clicked, the following script function is executed:

call logo2.filters.item(0).Apply()
logo2.style.display="inline"
logo2.style.visibility=""
call logo2.filters.item(0).Play()

which applies the blendTrans filter on the image, sets it to display as an 'in-line' element, makes it visible and finally, plays the transition (causing it to blend in over a 3 second period).

© 1995-1998, Stephen Le Hunte


Scripting Object Models

NOTE : The following topics are a very condensed paraphrasing of various documentation provided by Microsoft and Netscape. Highly detailed and complete documentation of JavaScript (version 1.0 as supported by Navigator v2.0 and version 1.1 as supported by Navigator v3.0) can be found at the Netscape Web site at http://www.netscape.com and documentation of Visual Basic Script (and JScript, Microsoft's JavaScript implementation) can be found in Microsoft's Internet Client SDK and at their Visual Basic Script web site http://www.microsoft.com/vbscript/ and their JScript web site at http://www.microsoft.com/jscript/.
The following topics are basically an object quick reference and should not be treated as any kind of replacement for the documentation provided by either Microsoft or Netscape. Indeed, readers interested in scripting HTML documents are encouraged to seek out the 'official' documentation from both companies.

For scripting purposes, practically every part of the browser and HTML document can be treated as a discrete object that has several properties and methods that can be accessed and invoked respectively. The hierarchy is as follows :

Window
Location
History
Navigator
Event
Screen
Layer
Document
 Selection
Style
TextRange
All
Anchors
Applets
Areas
Cells
Embeds
Filters
Forms
 Elements
Options
 Frames
Images
Imports
Layers
Links
Plugins
Rows
Scripts
StyleSheets / StyleSheet Object

© 1995-1998, Stephen Le Hunte


The Window object

The Window object is the top level object and represents the window of the browser. It is the parent of the objects below it in the hierarchy list.

Window objects are either the current window (if the browser is displaying only a single document), or those created with a window.open() method (where the name is specified in the code), or separate frames, if the document is laid out using a <FRAMESET> definition (where the windows are named in the <FRAME> element). As the Window object is the top level object in the object hierarchy and the existance of the current window is assumed, most Window properties need not be prefixed by Window. For example, the following two references are identical :

window.defaultStatus
defaultStatus

and would both return the default text of the status bar for the current window. NOTE : The only exception to this is the open() and close() methods, which require an explicit window. prefix (i.e. window.open() and window.close()). Windows can also be referenced by using the properties top, parent or name, where the name property is replaced with the actual window name (as specified in the window.open() code, or <FRAMESET>. The parent and top properties are exactly as those used in <A HREF="..." TARGET="..."> constructs if the windows are part of a frameset.

Window Properties
client
The client property reflects the Navigator Object and can be used to retrieve information about the browser client.

closed
The Internet Explorer 4.0 specific closed property has a read-only boolean value, which represents whether the referenced window is closed (closed=true) or not (closed=false).

defaultStatus
The defaultStatus property can be accessed to return or set the text to be shown in the status bar of the browser while the current document. The defaultStatus property is different to the status property in that the text is always shown in the status bar. As seen below, the status property can be used to temporarily alter the status bar text. Internet Explorer currently set this property as the default status text and so works as the status property.

dialogArguments
The dialogArguments property returns any arguments that were used when the referenced modal dialog window was created. Note that this property only applies to windows created with the showModalDialog method. For example, if the following is used to open a modal dialog window:

self.showModalDialog "dialog.htm", "Enter search string"

and dialog.htm contains a text box (with an ID attribute of txtSearch), then running:

txtSearch.value=window.dialogArguments

would put the text "Enter search string" into the text box.

dialogHeight
The Internet Explorer 4.0 specific dialogHeight property reflects the height of the referenced modal dialog window. It is set as one of the features in the showModalDialog method.

dialogLeft
The Internet Explorer 4.0 specific dialogLeft property reflects the horizontal offset of the referenced modal dialog window, relative to the left hand edge of the desktop. It is set as one of the features in the showModalDialog method.

dialogTop
The Internet Explorer 4.0 specific dialogTop property reflects the vertical offset of the referenced modal dialog window, relative to the top edge of the desktop. It is set as one of the features in the showModalDialog method.

dialogWidth
The Internet Explorer 4.0 specific dialogWidth property reflects the width of the referenced modal dialog window. It is set as one of the features in the showModalDialog method.

document
The document property references the The Document Object for the referenced window. The document object has properties that contain information about the current document being viewed in the browser window object. For example :

vColour=parent.document.bgColor

stores the background colour of the document in the current window's parent in the variable vColour.

event
The event property references the Event Object, through which key and mouse states/positions can be determined for any event that occurs. Note that the Event Objects supported by both Internet Explorer and Netscape are different. Details are given in the Event Object topic.

external
The Internet Explorer 4.0 specific external property can be used to reference the object model of applications that host Internet Explorer. Various properties, methods and events exposed by the host application would then be available to scripting in HTML documents being displayed in the Internet Explorer application inside the host. Two methods are inherent to the external property though:

addChannel
Presents a user with a dialog box allowing them to add a channel to their system, or modify its properties if the channel is already installed. The addChannel method takes the single argument of a URL which should be the complete URL of the CDF file that defines the channel. Note that Microsoft intend this function only for publishers pre-installing channels when re-distributing Internet Explorer 4.0. As with the Internet Client SDK, it's included here for completeness.
isSubscribed
Returns a boolean (i.e. true or false) value representing whether the user is currently subscribed to the channel referenced in the URL argument of the method. A scripting error will occur if the referenced channel is not in the same secondary domain (i.e. http://beta.htmlib.com/ and http://www.htmlib.com/ both have the same secondary domain) as the document calling the method.

For further information on channels and information on creating channels, download the Internet Client SDK from Microsoft.

frames
The frames property references the The Frames collection. When a document is a framed document, the individual frames are indexed, starting at 0. So, for example, to access the location object of the frame defined third in the <FRAME> definitions, the following could be used :

vLocation=window.frames(2).location

NOTE : The above example uses Visual Basic Script notation (i.e. '(' and ')') to denote the index. JavaScript functions require the use of square bracket ('[' and ']').

history
The history property is also an object in its own right, with properties and methods. For more information, see The History Object. It represents the browsers current history list (a list of recently visited sites).

innerHeight
The Netscape 4.0 specific innerHeight property returns a value representing the referenced windows viewing area height (i.e. not including toolbars, scrollbars etc), in pixels.

innerWidth
Like the innerHeight property, the The Netscape 4.0 specific innerWidth property returns a value representing the referenced windows viewing area width (i.e. not including toolbars, scrollbars etc.), in pixels.

length
The length property returns the number of frames in a window object (when used under the window object. The length property is common to many scriptable objects). For example :

vFrames=HelpWin.length

would store the number of frames in the window named HelpWin (which is either a single frame, or a window created using the window.open() method) in the variable vFrames.

location
The location property returns the URL of the window objects current document (because href is its default property). This is actually an object in its own right, with various properties. For more details, see the Location Object.

locationbar
In Netscape 4.0, the Window Object supports the locationbar property, which has a boolean property of visible. Setting:

window.locationbar.visible=false

would remove the referenced windows location bar. Note : This can only be done via a 'signed script'. For information on signed scripts, see Netscape DevEdge Online.

menubar
As with the locationbar property, the menubar property is Netscape 4.0 specific and can be used (by setting the visible property to false) to remove the menu bar of the navigator window. This too requires a signed script.

name
The name property represents the name of a window object. It is read-only (that is, script functions can interrogate window names, but can not define them dynamically)

navigator
The navigator property references the Navigator Object property. See that topic for information about the navigator object.

offscreenBuffering
When Internet Explorer 4.0 is downloading a page, it initially sets the offscreenBuffering property to a string value of "auto" and it decides whether offscreen buffering is necessary. This can be over-ridden in a script function, by explicitly setting the offscreenBuffering property to "true" or "false". Once it has been set (either way), it returns a boolean value, representing whether offscreen buffering if enabled or not.

opener
The opener property returns the name of the window that created the current window (via a window.open() event). It can be used with further object properties (such as location etc.) to access properties of the window/document that opened the current window, or methods such as close() to automatically close the window that created the current window. For example :

self.opener.close()

would automatically close the window that created the new window. Note that recent enhancements to Javascript means that the first window used (i.e. the first browser window) cannot be closed in a script without the user confirming this (a confirm? dialog box appears)

outerHeight
The Netscape 4.0 specific outerHeight property returns a value representing the referenced windows total height (i.e. including toolbars, scrollbars etc), in pixels.

outerWidth
The Netscape 4.0 specific outerWidth property returns a value representing the referenced windows total width (i.e. including toolbars, scrollbars etc), in pixels.

pageXOffset
The Netscape specific pageXOffset property reflects the difference between the current horizontal position in the page and the pages left-most edge. That is, as a page is scrolled horizontally, the pageXOffset will increase, or decrease, being 0 if the current viewing area is the left-most edge of the page. (Note : This is similar to Internet Explorers scrollLeft property, but the two are incompatible)

pageYOffset
Similar to the pageXOffset property, the pageYOffset property reflects the same difference (of current vertical positions) between the current viewing area and the top-most edge of the window. (Note : This is similar to Internet Explorers scrollTop property, but the two are incompatible)

parent
The parent object returns the current windows parent object if the current window is part of a frame set (if it isn't, then accessing the parent property returns the current window object, acting as the self property). For example :

vStrParentName=parent.name

would store the name property of the parent window of the current window in the variable vStrParentName.

personalbar
In Netscape 4.0, the Window Object supports the personalbar property, which has a boolean property of visible. Setting:

window.personalbar.visible=false

would remove the referenced windows 'personal bar'. Note : This can only be done via a 'signed script'. For information on signed scripts, see Netscape DevEdge Online.

returnValue
This Internet Explorer 4.0 specific property reflects the return value of a modal dialog window, created with the showModalDialog method.

screen
The Internet Explorer 4.0 specific screen property provides a reference to the Screen Object, for obtaining properties of the users current resolution etc.

scrollbars
Like the other Netscape 4.0 specific *bars properties, the scrollbars property has the boolean visible property, which can be used to remove the scroll bars from a window. Note that this can only be performed by a signed script.

self
The self property returns the window object of the current window. For example :

vStrStatus=self.status

stores the text in the current window's status bar in the variable vStrStatus.

status
As said above, the status property can be used to temporarily change the text displayed in the status bar of a browser window. It is commonly used to set the status bar text when the mouse is moved over links in a document, so that more explanatory text, instead of a URL is displayed. For example :

self.status="This goes to the HTMLib web site"

would set the text in the status bar to "This goes to the HTMLib web site". Note that when documents are presented in a frame based layout, windows don't share common access to the browsers status bar, so using self.status in any frame based document, may not have any effect, but accessing top.status would change the status bar text.

statusbar
Like the other Netscape 4.0 specific *bars properties, the statusbar property has the boolean visible property, which can be used to remove the status bars from a window. Note that this can only be performed by a signed script.

toolbar
Again, the Netscape 4.0 specific toolbar has the boolean visible property, which can remove the tool bar from the navigator window. As with the other *bar properties, this can only be performed by a signed script.

top
The top property returns the window object of the top-most browser window. For example :

vLocation=top.location

sets the vLocation variable to the complete URL of the document in the top-most browser window.

window
The window property is a synonym for the current window. Like self, it references the current window.

Window Methods
alert
The alert method can be used to display a message to the user. (Internet Explorer Visual Basic Script also allows the use of the MsgBox function to do the same, with more interaction options). For example :

alert "Hi there, welcome to my page"

would display the message "Hi there, welcome to my page" over the current window. (NOTE : As alert is a method of the window object (the top level object), it does not require the window. prefix.) Also note that the message string can be a text string, or a property of any existing object.

back
The Netscape 4.0 specific back method causes the referenced window to navigate back one URL in its history list. It's the same as if the user had pressed the 'Back' button, or the history object had been scripted to cause a jump back.

blur
This Netscape specific method can be used to forceably remove focus from a given window object. For example, suppose you have created a window (via window.open() code, called 'HelpWin'), the following :

HelpWin.blur()

would remove focus from the newly created window.

captureEvents
This Netscape 4.0 specific event can be used to set the a window (or Document) object to handle single, or various events that would otherwise be handled by different document elements. For example:

window.captureEvents( Event.Click | Event.DblClick)

sets up the window to capture all click and double-click events (onclick and ondblclick). Once a window has captured events, you then need to decide what happens with them. The various options are:

  1. Return true
    Whatever element received the event that was captured by the window event will perform its default action (i.e. an <A> element's default action is to navigate to the URL provided in its HREF attribute).
  2. Return false
    The default action of the element receiving the event will not occur (e.g. the link will not navigate to the URL)
  3. Call routeEvent method
    This causes JavaScript to search for other event handlers for the event. For example, the Document Object may have been trying to capture the event. Failing another object trying to capture the event, Javascript will look to the original intended target of the event, in order to decide what to do.
  4. Call the handleEvent method
    This will force another element/object (that can handle such an event) to handle it, normally by performing its default action.

clearInterval
The clearInterval method cancels a corresponding setInterval method (described below. The syntax is :

clearInterval (MyInterval)

clearTimeout
The clearTimeout method is used to clear a specified setTimeout method, by referencing it by the ID of the setTimeout method. For example, to clear the setTimeout given in the previous example, use the following code :

clearTimeout MyTimeOut

NOTE : both the setTimeout and clearTimeout do not need the window. prefix, as they are methods of the top level Window object.

close
The window.close() method closes the window specified in the window. prefix, which is required. Any window can be closed using this method, providing it is referenced either by its name property, or by parent, self or top. NOTE : From JavaScript 1.1 (as supported by Navigator 3.0 and above), the window.close() method only allows automatic closing of windows generated by a corresponding window.open() event. Attempting to close any other window will display a confirm dialog, prompting the user to choose whether the window is closed or not.

confirm
Similar to the alert method, the confirm method displays a message to the user, but offers basic "OK" and "Cancel" buttons. For example, the following code displays a confirmation message and if the user chooses OK, the browser goes to the HTMLib web site. If they choose Cancel, then nothing happens.

function leave()
{
if (confirm("Are you sure you want to visit the HTMLib web site?"))
{location.href= "http://subnet.virtual-pc.com/~le387818"}
}

disableExternalCapture
The Netscape 4.0 specific disableExternalCapture method allows a signed script to capture events in pages that have been loaded from different servers. For example, in a framed set-up, 'foreign' (i.e. not on the same server as the current document) pages can be loaded into a frame and a signed script can capture events on these pages. The disableExternalCapture method would be used to stop the capture of events from the 'foreign' pages. For more information on signed scripts, visit Netscape DevEdge Online

enableExternalCapture
As with the disableExternalCapture method described above, the enableExternalCapture method can be used to capture events on pages from different servers. It too requires a signed script. Visit the URL above for more details on script signing.

execScript
The Internet Explorer 4.0 specific execScript method can be used to execute script functions in a certain language.

find
This Netscape 4.0 specific method invokes the 'Find' window of the browser, allowing the user to search for any text in the current document. Its effect is as if the user had chosen the 'Find' command from the Edit menu.

focus
This Netscape specific method can be used to force the focus to any window object. For example, given that there is a window named 'HelpWin', the following function snippet :

HelpWin.focus()

would pass the focus to the newly created window named HelpWin.

forward
This Netscape 4.0 specific method forces the browser to navigate forwards one URL in the history list - it's equivalent to the user pressing the 'Forward' button, or history manipulation through the History Object.

handleEvent
The Netscape 4.0 specific handleEvent method can be used to force a different object in the document to handle an event. Note that the object in question must be able to handle the event normally for the handleEvent method to succeed. The handleEvent works with the captureEvents, releaseEvents and routeEvent methods.

home
This Netscape 4.0 specific method forces the browser to navigate to the URL designated as 'Home' in the browser settings. It's identical to the user pressing the browsers 'Home' button.

moveBy
The moveBy method can be used to re-position the Navigator window, relative to its current position. For example :

self.moveBy (50,200)

would move the current window 50 pixels to the right and 200 pixels down from its current position. ('self' is used above, but any valid reference to a window object is useable). Note that it is only possible to move a Netscape browser window off-screen in a signed script. See Netscape DevEdge Online for information on script signing.

moveTo
The moveTo can be used to move the Navigator window to a specific point on the screen, by moving the top-left corner of the Navigator to the position specified :

self.moveTo (50,200)

would move the window to the position 50,200 on the users screen. Again, note that it is only possible to move a Netscape browser window off-screen in a signed script. See Netscape DevEdge Online for information on script signing.

navigate
The Internet Explorer 4.0 specific navigate method is equivalent to setting the location.href property to a different value, in that it causes the browser to navigate to the URL specified. For example:

sel.navigate ("http://subnet.virtual-pc.com/~le387818")

Note : For Internet Explorer 4.0, this method is only available to Visual Basic Script.

open
The open method allows script functions to create new browser windows and load documents into them. It also allows control over the window's appearance and size. The basic syntax is :

Variable=window.open("URL", windowname, "window_appearance")

where URL is the URL of the document to be loaded into the new window, windowname is the name given to the new window (subsequently its name property (see above)) and window_appearance is a comma-delimited list setting the window features. The window features are boolean values (i.e. either '0' or '1', or 'no' or 'yes'). The features controllable are :

toolbar
Specifies whether the browser's toolbar is displayed or not.
location
Specifies whether the location bar (showing the current URL) of the browser is displayed or not.
directories
Specifies whether the Netscape directory buttons are displayed or not.
status
Specifies whether the browser status bar is displayed or not.
menubar
Specifies whether the browser's menu bar is displayed or not.
scrollbars
Specifies whether the window will allow scrollbars or not.
resizable
Specifies whether the new window is resiz(e)able or not.
width="pixels"
Specifies the width of the new window.
height="pixels"
Specifies the height of the new window.
top="pixels"
Specifies the top co-ordinate to display the new window. (Internet Explorer and Navigator 4.0 and above only)
left="pixels"
Specifies the left co-ordinate to display the window. (Internet Explorer and Navigator 4.0 and above only)
*outerWidth*="pixels"
(Navigator 4.0 specific) Specifies the outer width of the Navigator window, instead of the viewable area contained within.
*outerHeight*="pixels"
(Navigator 4.0 specific) Specifies the outer height of the Navigator window, instead of the viewable area contained within.
*innerHeight*="pixels"
(Navigator 4.0 specific) Specifies the inner height of the Navigator window - the viewable area contained within. (Note that this replaces the height window feature, which is maintained for backwards compatibility). To produce a new shorter narrower than 100 pixels requires a signed script.
*innerWidth*="pixels"
(Navigator 4.0 specific) Specifies the inner width of the Navigator window - the viewable area contained within. (Note that this replaces the width window feature, which is maintained for backwards compatibility) To produce a new window narrower than 100 pixels requires a signed script.
*alwaysRaised*="yes|no||1|0"
(Navigator 4.0 specific) Forces the new window to always remain above other windows, whether it has the focus or not (as certain Windows Help files are displayed - hence, it would be useful for a 'help' window helping users with web-based applications.) Note : This is a secure feature that can only be set in a signed script.
*alwaysLowered*="yes|no||1|0"
(Navigator 4.0 specific) Forces the new window to always remain below other windows, whether it has the focus or not. Note : This is a secure feature that can only be set in a signed script.
*dependent*="yes|no||1|0"
(Navigator 4.0 specific) Creates the new window as a child of the opening window, which will close when the parent window closes. Note that a dependent window does not show in the taskbar.
*hotkeys*="yes|no||1|0"
(Navigator 4.0 specific) If set to true, then most of the hotkeys in the new window (if it doesn't have a menu bar are disabled, apart from the security and quit keys. (HotKeys are key combinations to perform menu operations - e.g. Ctrl+F for the File menu etc.)
*screenX*="yes|no||1|0"
(Navigator 4.0 specific) screenX replaces left as the setting for the horizontal placement (in pixels) of the new window (relative to the left hand side of the screen). Note that to create a new window off screen requires a signed script.
*screenY*="yes|no||1|0"
(Navigator 4.0 specific) screenY replaces top as the setting for the vertical placement (in pixels) of the new window (relative to the top of the screen). Note that to create a new window off screen requires a signed script.
*z-lock*="yes|no||1|0"
(Navigator 4.0 specific) Creates a new window that never rises above other windows, even when activated. This is a secure feature that can only be set using a signed script.
**fullscreen**="yes|no||1|0"
(Internet Explorer specific) This window feature forces the newly opened window into whats known as 'kiosk mode', where the window takes the entire screen and displays with no toolbar or menubar. Care should be taken using this setting, as most users will not appreciate a new window being created that blocks their entire screen. Note : At the time of writing, Internet Explorer only responded to fullscreen=1|0.
**channelmode**="yes|no||1|0"
(Internet Explorer 4.0 specific) Creates a new window in 'channel' mode, displaying the window in theater mode, with the channel bar. Note : At the time of writing, Internet Explorer only responded to channelmode=1|0.

NOTE : The window features labelled above, with '*' characters are only supported in Javascript 1.2, as supported by Navigator 4.0 and above. To be sure that any Javascript functions using these extended features don't throw a scripting error (or produce unwanted results), make sure to version the LANGUAGE attribute of the <SCRIPT> appropriately and provide version specific scripts if necessary. For more information, see Versioning Javascript..

NOTE : When using Visual Basic Script, the parenthesis characters must not be used surrounding the various window.open methods. I.e., the method should be used as follows under Visual Basic Script :

window.open URL,"window_name","window_options"

Internet Explorer now fully supports (from 3.02) the previously Netscape specific format of the window.open method. For example :

WindowName=window.open (URL,"WindowName","window_options")

where WindowName can then be used to control the newly created window.

Note : Internet Explorer 4.0 supports an extra argument to the window.open method - the replace argument. For example:

WindowName=window.open("http://www.mysite.com/", "NewWin", "toolbar=no;...", "replace=true"

would cause the URL of the newly created window to over-write the URL of the creating window in the history list. Essentially, it's the same as the replace method of the Location Object, but for multiple windows.

The HTMLib Window Builder
Use the 'Window Builder' below to create a new window with whatever options you like (only the options supported by Internet Explorer 4.0 are included):

Note : Currently, Internet Explorer will allow you to create ludicrously small windows (1 x 1 pixel is even possible). So that you'll be able to actually do something with it, the Window Builder sets a minimum height and width for the new window. Also, pressing Alt&C will close the window while it has the focus.

Window Feature | Yes | No
Toolbar : |  |
Location : |  |
Directories : |  |
Status : |  |
Menubar : |  |
Scrollbars : |  |
Resizable : |  |
Fullscreen : |  |
ChannelMode : |  |
Width : |
Height : |

A note about the top and left window options
top and left should be used with care when positioning new windows exactly (i.e. by pixel measurements) because you can not be sure of the users screen resolution (although Navigator 4.0 now provides screen resizing and moving methods (see below)). Also, be aware of a current limitation in the Internet Explorer 3.01 support of these window settings. If the document calling the window.open method is displayed singularly (i.e. not part of a frameset), then top and left behave as expected and can be used to set the position of the new window, (in pixel units) on the screen.
If the document calling the window.open method is a framed document (i.e. displayed in a frame), however, then it starts to get a little complicated. For some as yet unknown reason the top and left co-ordinates should be reversed, to display the newly created window in the right position. For example if the following code is executed in a non-framed document,

NewWin=window.open(URL,name,"left=640,top=480");

then the new window would be created at a position x=640 pixels and y=480 pixels. However, if the same code was executed from a framed document, then the new window would be created and displayed at x=480 y=640 pixels. For the same code to work, displaying the window in the same position, called from a framed document, the code would need to be :

NewWin=window.open(URL,name,"left=480,top=640");

Just to add to the confusion, Internet Explorer 3.02 seems to have permanently reversed the top and left settings (so that calling ...left=x1, top=y1 actually places the new window at a position x=y1, y=x1 pixels), regardless of whether the document utilising the window.open method is framed or single. Support of these two method attributes is basically a legacy of the previously supported 'Explorer' object, which was supported in the Windows 95/NT4 v3.01 of Internet Explorer, but removed from v3.02 for security reasons.

NOTE : The top and left attributes are not officially documented as being supported by Internet Explorer, so should be used with care as their support may possibly change without notice.

print
This Netscape 4.0 specific method prints the document in the referenced window or frame, using the default printing properties for the browser. Its effect is as if the user had pressed the 'Print' button on the browser. It would be courteous to give users an option to print documents, rather than automatically printing them from a script function.

prompt
Again, like the above two methods, the prompt method allows you to present the user with a dialog allowing them to enter values (like Visual Basic Script's InputBox method). The method is called, defining a default value in the input box. For example, the following code asks the user to enter a year, giving 1996 as the default value.

prompt("Enter a year", 1996)

releaseEvents
The Netscape 4.0 specific releaseEvents method can be used to release events that had previously been captured using the captureEvents method. The syntax for releasing single, or multiple events is the same as for the captureEvents method.

resizeBy
As you'll probably have guessed, the resizeBy method resizes the window from its current size by the amounts specified. For example :

self.resizeBy (50,200)

would move the bottom right hand corner of the navigator window 50 pixels to the right and 200 pixels down, creating a larger window. Note that to resize a window to less than 100x100 pixels requires a signed script.

resizeTo
Like the moveTo method above, the resizeTo method can be used to resize the window to a specific size. For example :

self.resizeTo (640,480)

would resize the window to 640 by 480 pixels. Again, to resize a window to less than 100x100 pixels requires a signed script.

Be aware that you can not guarantee the viewers screen resolution, so regardless of the imposed restrictions, use these methods with caution. The sensible option would be to always use a moveTo method to set the window at the top-left corner of the users screen before performing any resizing methods, to ensure the entire viewing area is visible. Also limiting the maximum size of sites requiring this functionality to 640x480 pixels would also be sensible.

routeEvent
The Netscape 4.0 specific routeEvent method can be used to route an event that has been previously captured using the captureEvents method. It uses the following syntax:

objectReference.routeEvent(eventType)

for example:

document.BigLink.routeEvent(event.click)

would pass click events to the element whose ID property is BigLink

scroll
This specific method can be used to automatically move the user to any point in the current window. It is similar to mid page links, using <A HREF="#..."> constructs, except it moves the user to a position of pixel values, rather than links. For example :

HelpWin.scroll(200,300)

would scroll the user to the position 200,300 (in pixels). The number sequence is x-coordinate, y-coordinate.

scrollBy
As with the other *By methods, the scrollBy scrolls the viewing area of the window by the amounts specified in the values. For example :

self.scrollBy (50,100)

would scroll the viewing window 50 pixels to the left and 100 pixels down. Scrolling to the right would only be effective is there is content currently off the screen (for example, you may have layers currently off-screen, or very wide images).

scrollTo
This method scrolls the viewing window to an exact pixel position, given by the values. For example :

self.scrollTo (100,300)

scrolls to the point 100 pixels to the right and 300 pixels down.

Note : scrollTo extends the scroll method (see above), which is still supported in Navigator 4.0 and above for backwards compatibility.

setInterval
The setInterval method can be used to either call a Javascript function, or evaluate an expression, after a specified time interval (in millisecond) has expired. For example :

setInterval=MyInterval (startanim(),1000,20,100)

would execute the function startanim(), after 1 second has elapsed (1000 milliseconds), passing it 20 and 100 as arguments to the function. Any number of arguments can be passed in the setInterval method (i.e. as many as are required by the function). The setInterval method will repeatedly call the referenced function, or expression, until the user leaves the document that contains the script. This is essentially the only difference between it and the setTimeout method, which is only executed once, after the specified time interval.

setTimeout
The setTimeout method can be used to execute a script function, or access any existing object property or method, after a specified time interval. For example, the following code section would execute the script function TooMuchTime() after 5 seconds :

MyTimeOut=setTimeout ("TooMuchTime()", 5000)

The time interval is always specified in milliseconds.
In Javascript 1.2 (as supported by Navigator 4.0 and above), the setTimeout method can be used to evaluate an expression, as well as calling functions. Note that this will require using LANGUAGE="Javascript1.2" in the <SCRIPT> element, so as to prevent older browsers throwing a scripting error, or not functioning as expected.

showHelp
The Internet Explorer 4.0 specific showHelp method creates an instance of the HtmlHelp window, passing it the URL given as an argument to the method. For example:

self.showHelp "help.htm"

would load help.htm into a newly created HtmlHelp window. Note that HtmlHelp windows are children of the window that creates them, so the HtmlHelp window will close down when the window that created it is closed

Pressing this button demonstrates the showHelp method :

showModalDialog
The Internet Explorer 4.0 specific showModalDialog method can be used to create a modal dialog window. This is a special window that does not release the focus back to the window that created it until it is closed, preventing the user from switching back to the main document until they have satisfied the requirements of the modal dialog window (or closed it).

The showModalDialog method is:

Variant = object.showModalDialog(URL [, arguments [, features]])

where:

URL
represents the location of the file to open in the dialog.
arguments
can be a string value specifying some arguments for the opening window. I.e. initialisation values etc.
features
allows setting of the decoration for the dialog, covering the following:
feature name | Description
dialogWidth | Initial dialog width, in pixels
dialogHeight | Initial dialog height, in pixels
dialogTop | Initial vertical offset, in pixels
dialogLeft | Initial horizontal offset, in pixels
center | A boolean (yes|no|0|1) value describing whether to automatically centre the dialog in the screen
font | Specifies font settings, according to the font Style Sheet property (see Font properties for more information.
font-family | Specifies font family, according to the font-family Style Sheet property (see Font properties for more information.
font-size | Specifies font size, according to the font-size Style Sheet property (see Font properties for more information.
font-weight | Specifies font weight (boldness), according to the font-weight Style Sheet property (see Font properties for more information.
font-style | Specifies font style settings, according to the font-style Style Sheet property (see Font properties for more information.
font-variant | Specifies font variant, according to the font-variant Style Sheet property (see Font properties for more information.
border | Specifies the border width (thick|think)
help | A boolean value setting whether to show the '?' button to the title bar
minimize | A boolean value setting whether to show the minimise button to the title bar
maximize | A boolean value setting whether to show the maximise button to the title bar

Note : At the time of writing, Internet Explorer 4.0 modal dialogs would lose their 'modality' if the file loaded caused a scripting error.

stop
This Netscape 4.0 specific method causes downloading of the page to stop, as if the user had pressed the 'Stop' button on the browser.

A note about window references for the positioning/moving methods
For the moveBy, moveTo, resizeBy and resizeTo methods, the whole navigator window is moved or resized. This means that if the methods are invoked in a framed document, then the entire Navigator window is altered, regardless of the window reference (providing that it is valid). I.e. using 'top', 'self' and 'parent', or referencing any framed document currently in the same Navigator display window all have the same effect. Single documents, or separate windows (created from links, or the open method) can be referenced by their name.
For the scrollBy and scrollTo methods, all windows (framed or otherwise) can be manipulated by using a valid reference. However, if the window referenced doesn't contain sufficient content for scrollbars to be necessary, then both these methods will do nothing.

Window Events
Internet Explorer 4.0 only supports the onHelp Standard Dynamic HTML events. Netscape supports some of these events for the Window Object. See the standard Dynamic HTML events for details. Additionally, the following events are supported:

OnBeforeUnload
This Internet Explorer 4.0 specific event fired before the onunload event (see below). It has been added with Data Binding, to allow data to be updated prior to the page being unloaded.

OnBlur
This event handler can be used in <BODY> and <FRAMESET> elements, as well as for the Window object. It is fired whenever the user removes focus from the referenced window object. For extra details, see the <BODY> and <FRAMESET> topics.

OnDragDrop
The Netscape 4.0 specific OnDragDrop event for the window object occurs when the user attempts to drag and drop an object (typically an HTML document) onto the current window. Using various Event Object for Netscape, it's possible to perform script functions whenever the user drops an object on the navigator window.

OnError
This event handler can be used in <BODY> and <FRAMESET> elements, as well as the more general Window object and is fired when an error occurs for the window, for example, the document doesn't load, or a script error occurs.

OnFocus
This event handler can be used in <BODY> and <FRAMESET> elements as well as the general window object and is fired whenever the user focuses on the referenced window. For exact details, see those topics. OnLoad
The OnLoad event can be used in window objects. It is generally used in the <BODY> element, or <FRAMESET> elements (Netscape only) and executes functions when the document (framed or normal) has finished loading. For information about this event, see the relevant element topics.

OnMove
This Netscape 4.0 specific event is fired whenever a MoveBy or MoveTo method (see above) is used on any valid Window Object, or the user moves the referenced window.

OnResize
This Internet Explorer 4.0 specific event is fired whenever the user resizes the referenced window. Content that is sized according to the users viewing window could be resized when this event fires for example.

OnScroll
The Internet Explorer 4.0 specific onScroll event is fired whenever the user scrolls in the referenced window.

OnUnLoad
The opposite of the above event, the OnUnLoad event is used to execute script functions when the user exits a window object (a frame window, or a normal window). It is also used only in the <BODY> and <FRAMESET> elements (supported in both elements, by both browsers). For details, see those topics.

© 1995-1998, Stephen Le Hunte


The History object

The History object represents the browsers history list, which can allow script functions to access the browsers history list.

The History object contains a list of URLs recently visited by the user. It can be accessed to manipulate specific navigation methods.

History Properties
Length
The length property returns the number of current entries in the current history object (i.e. the browser's history list).

History Methods
Back
The back method can be used to load the URL of the document that the browser previously visited. Essentially, it is the same as if the user pressed the 'Back' button on their browser toolbar. I.e.

history.back()

Forward
The Forward method is used to load the URL that is next in the document list (NOTE : This assumes that the user has already navigated 'back' through their history list).

history.forward()

Go
The Go method acts different when used in Netscape or Internet Explorer. In Netscape, the Go method can be used, together with a negative or positive integer value to navigate to any URL present in the history list (assuming that the history object contains enough entries to navigate the required integer value). For example :

history.go(3)

would navigate to the URL three entries ahead of the current document, while :

history.go(-2)

would navigate to the URL 2 entries previous to the current document in the history object.

In Internet Explorer, the Go method is used with a single integer value which represents the absolute position in the history list of the URL to navigate to. For example :

history.go(3)

would navigate to the URL third in the history list.

History Events
The History object has no events.

© 1995-1998, Stephen Le Hunte


The Navigator object

The Navigator object represents the particular browser and allows script functions to access information about the browser being used to access the document.

The Navigator object provides information about the browser that the user is currently using. All the properties are read-only and can not be dynamically changed. Typically the Navigator object properties are used to determine the users browser and navigate to sections of the site containing browser-specific content.

Note : The examples below are targeted at the Window range of platforms (3.1(1), Windows 95 and Windows NT) - this reference does not support possible cross-platform differences for browsers.

Navigator Properties
appCodeName
The appCodeName property returns the code name of the current browser. For example :

vCodeName=navigator.appCodeName

would store the current browsers appCodeName property in the variable vCodeName. The navigator.appCodeName value for both Netscape and Internet Explorer is 'Mozilla'.

appMinorVersion
The Internet Explorer 4.0 specific appMinorVersion property returns the minor version of the navigator object (the users browser). For example, Internet Explorer 4.0 would return 0, a version of Internet Explorer 4.1 would return 1. This will prove useful for browser-determination scripting for future browser versions.

appName
The appName property returns the name of the current browser. For example :

vName=navigator.appName

would store the current browsers appName property in the variable vName. The navigator.appName values for Netscape and Internet Explorer are 'Netscape' and 'Microsoft Internet Explorer' respectively.

appVersion
The appVersion property returns the version of the current browser. For example :

vVersion=navigator.appVersion

would store the current browsers appVersion property in the variable vVersion.
The Netscape navigator.appVersion string contains information of the following format :

<version> (<Operating_System>; I)

where <Operating_System> is 'Win16', 'Win95', or 'WinNT'. For example, for Netscape 3.0 on the Windows 95 platform, the navigator.appVersion string would be :

3.0 (Win95; I)

The Internet Explorer navigator.appVersion string contains information of the following format :

<compatible_Netscape_version> (compatible; <version>; <Operating_System>)

Where <compatible_Netscape_version> is 2.0 for Internet Explorer 3.01 (and 3.02) and <Operating_System> is either 'Windows 3.1(1)', 'Windows 95' or 'Windows NT'. For example, for Internet Explorer 3.02 on the Windows 95 platform, the navigator.appVersion string would be :

2.0 (compatible; MSIE 3.02; Windows 95)

browserLanguage
The Internet Explorer 4.0 specific browserLanguage returns the ISO code representing the localised language of the users browser. For example, a german Internet Explorer would return 'DE' for the browserLanguage property. (see language property for Netscape determination of the users browser language.)

connectionSpeed
The Internet Explorer 4.0 specific connectionSpeed property returns a value representing the speed of the users current connection. This proves useful for possible re-direction of users to less multimedia-heavy versions of sites, if their connections aren't enough for the site content.

cookieEnabled
The Internet Explorer 4.0 specific cookieEnabled property returns a boolean value representing whether or not the user has cookies enabled in the browser.

cpuClass
The Internet Explorer 4.0 specific cpuClass property returns a value representing the class of processor on the users machine. For example 'x86' for 486/Pentium etc. machines, 'Alpha' for Digital machines etc.

language
The Netscape 4.0 specific language property reflects the current language translation of the Navigator client being used. It returns ISO standard country codes, depending on the version; for example en for English versions, fr for French versions etc. (see browserLanguage property for Internet Explorer determination of the users browser language.)

mimeTypes
The mimeTypes property is supported by Internet Explorer 4.0, although it returns no values. It has been added to the Internet Explorer 4.0 object model, to retain compatibility with Netscape browsers. Netscape supports the mimeTypes property of the navigator object as containing an array detailing all the mimeTypes that the users browser can handle, either natively, by helper applications, or by plug-in modules. As an object, it has its own properties, which are :

type
Details the particular MIME type that is handled by the particular plug-in. For example, the LiveAudio plug-in (as standard with Netscape), handles (amongst others), the MIME-type : audio/x-wav
description
A description of the particular MIME type. For example, the description of the above LiveAudio handled MIME type is : WAV
enabledPlugin
This gives a reference to whether the particular MIME type is to be handled by a Plug-in. It details whether the particular plug-in is enabled or not.
suffixes
This gives the suffixes (file extensions) of the file types of the particular MIME types. For example, the suffix for the above MIME type is wav
length
This returns the total number of MIME types that Netscape can handle, internally, or via installed plug-ins.

As an example, the following code section checks to see whether the user has a suitable VRML plug-in available and if so, displays a VRML world, giving a notice if the plug-in isn't available :

var vVRMLallowed = navigator.mimeTypes["x-world/x-vrml"]
if (vVRMLallowed)
document.writeln("Click <A HREF='htmlib.wrl'>here</A> to see a " + vVRMLallowed.description)
else
document.writeln("Too bad, can't show you any virtual worlds.")

NOTE : See how it's possible to reference MIME types in the mimeTypes object by its actual type property. The type and description properties can be used in this way.

onLine
The Internet Explorer 4.0 specific onLine property returns a boolean (i.e true or false) value depending on whether the user has chosen to 'Work Offline' - a feature of Internet Explorer 4.0 whereby pages can still be viewed directly from the cache. A value of true shows that the user is currently 'on-line' (or has not chosen the 'Work Offline' option - but may still be disconnected); a value of false indicates that the browser is 'Offline'.

platform
The platform property reflects the machine type that the browser is currently running on. For example, on the WindowsNT platform, navigator.platform returns Win32.

plugins
The plugins property is different for both browsers. For more details, see the PlugIns collection.

systemLanguage
The Internet Explorer 4.0 specific systemLanguage property returns a value indicating the language of the users system (as opposed to browserLanguage which returns the localised language of the browser). If you're site is authored in multiple languages, interrogating the systemLanguage property would allow re-direction to the appropriate content.

userAgent
The userAgent property returns a property which is the combination of appCodeName and appVersion properties for the the current browser. For example :

vuAgent=navigator.userAgent

would store the current browsers userAgent property in the variable vuAgent.
Both Netscapes and Internet Explorers navigator.userAgent string is of the format :

appCodeName/appVersion

So, using the above examples, Netscape 3.0 on the Windows 95 platform returns :

Mozilla/3.0 (Win95; I)

while Internet Explorer 3.02 on the Windows 95 platform returns :

Mozilla/2.0 (compatible; MSIE 3.02; Windows95)

for the navigator.userAgent value.

userLanguage
The Internet Explorer 4.0 specific userLanguage property is synonymous with the browserLanguage property and returns a value representative of the users current language settings.

userProfile
The Internet Explorer 4.0 specific userProfile property provides a way for determining any of the 'Profile' properties that the user has set in Internet Explorer (View|Internet Options|Content|Personal Information). Specifically, it allows the following methods:

addReadRequest
sets an entry in the 'Read Request' queue
clearRequest
clears the current request queue, ready for more addReadRequests to be set
doReadRequest
performs the read requests as queued by the addReadRequest method
getAttribute
get values from the users 'Personal Information' store, ready for use later

The syntax for these methods is as follows:

navigator.addReadRequest (attribute [,isRequired], success)
The attribute argument specifies the personal information that the script wishes to obtain from the user. isRequired is reserved for future versions of Internet Explorer 4.0 and is currently ignored and success returns a boolean value - true if the request has been added to the queue, false if it hasn't. See the getAttribute method (below) for details of the possible attributes that can be retrieved from the personal information store.

navigator.clearRequest
Clears any requests queued by the addReadRequest method.

navigator.doReadRequest (usageCode [, friendlyName [, domain [, path [, expiration]]]])
The doReadRequest method performs the request for the information asked for in the request queue. For obvious security reasons, no script can access any users personal information settings without them knowing and when the doReadRequest method is used, the user is presented with a dialog, telling them that their information has been requested, also giving them the chance to deny the information to the requesting script. usageCode is any of the following codes, as defined by the Internet Privacy Working group:

Code | Meaning
0 | Used for system admin.
1 | Used for research/development
2 | Used for completion/support of a current transaction
3 | Used for site customisation
4 | Used to improve (i.e. target) advertising on site
5 | Used to notify visitors about updates to the site
6 | Used for marketing departments to contact site visitors
7 | Used for linking other collected information
8 | Used by the site for other purposes
9 | Disclosed to others for customisation of sites
10 | Disclosed to others for marketing purposes
11 | Disclosed to others who may contact you for marketing, but will request your permission first
12 | Disclosed to others for any purpose

This information is passed to the user in the 'Privacy' section of the request dialog box, giving them an idea of the intended use of the personal information by the script/script author.

var = navigator.getAttribute (attributeName, attributeValue)
The getAttribute method is used after the Request queue has been set up and the doReadRequest method has been called to alert the user that the script function is attempting to retrieve personal information. If the attributeName argument is left blank, then nothing is returned. Setting anything for the attributeValue argument currently causes a scripting error. The various attribute properties that can be requested are of the form vCard.property and can be any of the following:

vCard.Email | vCard.DisplayName
vCard.FirstName | vCard.LastName
vCard.MiddleName | vCard.Cellular
vCard.Gender | vCard.JobTitle
vCard.Pager | vCard.Company
vCard.Department | vCard.Notes
vCard.Office | vCard.Homepage
vCard.Home.StreetAddress | vCard.Home.City
vCard.Home.State | vCard.Home.Zipcode
vCard.Home.Country | vCard.Home.Phone
vCard.Home.Fax | vCard.Business.StreetAddress
vCard.Business.City | vCard.Business.Phone
vCard.Business.Fax | vCard.Business.URL
vCard.Business.State | vCard.Business.Country
vCard.Business.Zipcode |

which all correspond to information contained in the personal information store of Internet Explorer

userProfile example
Clicking the button above the following text fields requests various information from you, which you can allow, or deny, for the usage code (see above) chosen from the code box. If you allow the information, it will the be filled in in the text fields.

Your Name
Your e-mail
Your homepage

To do this, it runs the following script functions:

navigator.userprofile.addreadrequest("vcard.displayname")
navigator.userprofile.addreadrequest("vcard.email")
navigator.userprofile.addreadrequest("vcard.homepage")
navigator.userprofile.doreadrequest <usageCode>,"The HTML Reference Library"
name = navigator.userprofile.getattribute("vcard.displayname")
email = navigator.userprofile.getattribute("vcard.email")
URL=navigator.userprofile.getattribute("vcard.homepage")

where <usageCode> is the number provided by the list box

Navigator Methods
javaEnabled
The javaEnabled method can be used to determine whether the user has Java capabilities enabled in their browser. For example :

if (navigator.javaEnabled()) {
doSomeJavathing()
}
else doSomethingElse()

would execute the doSomeJavathing() code if the user has Java enabled, or do the doSomethingElse() code if Java is disabled.

taintEnabled
Note that the taintEnabled method is understood by Internet Explorer, but it always returns a value of 'false' as data tainting isn't supported by Internet Explorer. Data Tainting is the Javascript process of protecting data for sending over networks. It prevents supposedly secure and private information from being sent without the users permission. The taintEnabled method takes a boolean value which can be used to set, or remove Data tainting. For more information on Data Tainting, visit the Javascript documentation at http://www.netscape.com/.

preference
The Netscape 4.0 specific preference method can be used to set various browser preferences (that would normally be set by the user in the 'Preferences' dialog) through scripting. Obviously, this will require a signed script. For information on signed scripts, see Netscape DevEdge Online

Navigator Events
The Navigator object has no events.

© 1995-1998, Stephen Le Hunte


The Location object

The Location object contains information about the current documents location and can be used to manipulate browser navigation.

For a general example for the location object, consider your browser is currently visiting the rather over-complete URL :

http://www.htmlib.com:80/example_files/file.html#findme?Stephen

all will become clear.

Location Properties
hash
The hash property returns, or sets the URL fragment part of the current location. For example, from the URL above :

vFrag=self.location.hash

would set the variable vFrag to 'findme'.

host
The host property sets or returns the host section of the current URL. The host section of a URL is basically the hostname property (see below), together with the port property (see below). So, using the above example :

vHost=self.location.host

would set vHost to www.htmlib.com:80. Note the subtle difference between this and the hostname property. (If the current URL does not contain a port setting, then host and hostname are effectively the same).

hostname
The hostname property (as mentioned above) is the name of the host computer (either a name, or IP address). For example :

vHostName=self.location.hostname

sets the vHostNane variable to www.htmlib.com

href
The href property can be regarded as a concatenation of all the other location properties. That is, if the current URL was the one given above for the example, then :

vHref=self.location.href

would make vHref be http://www.htmlib.com:80/example_files/file.html#findme?Stephen

pathname
The pathname property provides the current path for the URL. This is the section in between the hostname (including protocol) if any and the hash, or search (see below) sections (if either exists). For example :

vPathName=self.location.pathname

would return example_files/file.html as the contents of the vPathName variable.

port
As you may suspect, the port property represents any port settings for the current URL. Given the above example,

vPort=self.location.port

sets vPort to 80 (the common port for Web servers).

protocol
This property represents the protocol currently in use for the displayed document. For example :

vProtocol=self.location.protocol

sets vProtocol to 'http:'. For commonly used protocols, see the <A HREF="..."> element.

search
The search property contains information about any search strings in the current URL. For example :

vSearch=self.location.search

returns 'Stephen' as the contents of the vSearch variable.

Location Methods
assign
The Internet Explorer 4.0 specific method takes one argument (URL). It then loads the document referenced at the URL (if it exists) in place of the currently displayed document. Basically, it performs the same as changing the href property.

reload
The reload method forces a re-loading of the current URL. It should be noted that Netscape decides how to interact with the server for re-loading according to the Network Preference settings (i.e whether the user has set documents to be verified once, all the time, or never). Saying that however, this decision can be over-ruled by specifying a true parameter. This forces the browser to re-load the current document from the server, despite the current users preference settings. For example :

self.location.reload()

may re-load the document, depending on user preferences, while :

self.location.reload(true)

forces Netscape to re-visit the server to retrieve a new copy of the document.
This can be especially useful if your document changes rapidly, avoiding users seeing old copies of the document due to disk/memory caches, or if they are browsing through a proxy/cache server.

replace
This is much like the reload method, except that it loads another document and replaces the history object entry for the previous URL with the new URL loaded. Essentially, this prevents the user from returning to the previous URL, by using the browsers back button. For example, suppose you are at the URL given above for the examples and the following code gets executed :

self.location.replace('http://www.microsoft.com/')

The browser would navigate to the Microsoft web site and replace the www.htmlib.com entry in the history object with http://www.microsoft.com Unless you'd remembered the previous URL, there would be no navigating back to it.

Location Events
The Location object has no events.

© 1995-1998, Stephen Le Hunte


The Document object

The Document object represents the current document being viewed in the browser. As this is a HTML document, made up of various elements (links, forms, etc), then the Document object is the parent of the various document level elements below it in the hierarchy list, but below the Window object object in the object model hierarchy.

Document Properties
activeElement
The Internet Explorer 4.0 specific activeElement property returns the currently active element (i.e that which has the focus) in the document. Note that for most elements, the activeElement property will return a reference to the main document <BODY> element, except if the element with the focus is a control-like element (i.e. any of the Form elements) or is contained within a suitable container (such as the Table elements). The activeElement property is Internet Explorer 4.0 specific.

alinkColor
The alinkColor property reflects the active link colouring, as set by any <BODY ALINK="..."> settings for the current document. It is a writable property, that is, the document active link colour can be set dynamically. For example :

document.alinkColor="#FF0000"

would set the current documents active link colour to red. NOTE : Internet Explorer doesn't support the ALINK attribute, so while the property may be readable (the author may have set the ALINK attribute for Netscape users), attempting to dynamically change the active link colour would do nothing.

all
The all property is an indexed array of all the elements contained in a document. For more information, see the All collection. The all collection/property is Internet Explorer 4.0 specific.

anchors
The anchors property is an indexed array containing all the current document's anchors. For more information, see the Anchors collection/array topic.

applets
The applets property is an indexed array of all the Java applets contained in a document. For more information, see the Applets collection/array.

areas
The areas property is an indexed array of all the <AREA> elements contained in a document. For more information, see the Areas collection/array.

bgColor
The bgColor property reflects the document's background colour, as set by any <BODY BGCOLOR="..."> settings for the current document. It is a writable property, that is, the document background colour can be set dynamically. For example :

document.bgColor="#FFFFE0"

would set the current documents background colour to a light yellow (the colour of this current topic).NOTE : In Internet Explorer, trying to dynamically alter a documents background colour, if that colour has been set in a style sheet, would not do anything.

body
The body property is a reference to the documents <BODY> element and as such contains the entire text of the document. The body property is useful for creating Text Range objects from the documents text. For more information, see the TextRange object. The body property is Internet Explorer 4.0 specific.

cookie
The cookie property reflects the string value of a cookie accessed, or created by the current document. For more details about the use of cookies, visit http://home.netscape.com/newsref/std/cookie_spec.html

domain
The domain property can be used to set or returns the security domain for a document, which will allow documents originating from different servers to be able to communicate with each other. For example, if you have different servers for www.mysite.com and beta.mysite.com, documents loaded from each server (perhaps into a framed setup) would not initially be able to communicate and share properties etc., unless the document.domain=mysite.com property has been set in all the documents that require such resource sharing.

embeds
The embeds property is an indexed array of any data embedded into a document, to be used by any available plug-in modules. For more information, see the Embeds collection/array.

expando
The Internet Explorer 4.0 specific expando property accepts a boolean value (i.e. either true or false) that sets whether arbitrary properties can be declared for any element in the document. Internet Explorer 4.0 allows unknown properties (and attributes) to be set on element objects. This can be useful as a debugging aid when authoring JScript script functions. Internet Explorer 4.0's JScript implementation (based on the ECMA standard scripting language) is totally case-sensitive, so setting:

document.all['elExample'].style.fontsize="24"

would actually create a new property for the style of the element referenced by elExample if the expando property on the document object was set to true (the default). This may not hold the same value as the fontSize property of the elements Style Object. For example, the title topics in this HTMLib all use an extra XSIZE and YSIZE attribute in <A> elements, which is interpreted by the host application to size the popups. If the expando property was set to false, the HTMLib would crash when trying to use these attributes.

fgColor
The fgColor property reflects the document's foreground colour, as set by any <BODY TEXT="..."> settings for the current document. It is a writable property, that is, the document foreground colour can be set dynamically. For example :

document.fgColor="#0000FF"

would set the current documents foreground (i.e. text) colour to blue. NOTE : In Internet Explorer, trying to dynamically alter a documents text colour, if that colour has been set in a style sheet, would not do anything.

forms
The forms property is an indexed array of any forms contained in a document. It is itself an object and for more information, see the Forms Collection topic.

frames
The frames property is an indexed array of any <IFRAME>, floating frames contained in a document. For more information, see the Frames Collection topic. Note : The Frames collection, as a property of the Document object, is Internet Explorer specific. Netscape maintains the Frames collection as a property of the Window Object topic for more information.

images
The images property is an indexed array of a documents images. For more information, see the Images collection.

lastModified
This property stores the date that the document was last modified (as stored by the web server). It cannot be altered dynamically, but can be read. For example :

document.write ("Last modified : " & document.lastModified)

would insert the document's most recent modification date where the script portion is positioned in the document.

layers
The layers property contains a reference to each Layer Object in the document (as defined by <LAYER> and <ILAYER> elements). For more information, see the Layer Object topic. Note : The layers property is Netscape 4.0 specific.

linkColor
The linkColor property reflects the document's hypertext link colour, as set by any <BODY LINK="..."> settings for the current document. It is a writable property, that is, the document link colour can be set dynamically. For example :

document.linkColor="#008000"

would set the current documents link colour to a dark green. NOTE : In Internet Explorer, trying to dynamically alter a documents text colour, if that colour has been set in a style sheet, would not do anything.

links
The links property is an indexed array of all the document's links. For more information, see the Links collection.

location
The location property contains a reference to each documents Location Object. See the Location Object topic for more information.

parentWindow
The parentWindow property returns a reference to the referenced documents parent window. For example, if documents are loaded into new windows, the parentWindow property could be interrogated to obtain a reference to the documents window, to then be able to manipulate that window. The parentWindow property is Internet Explorer 4.0 specific.

plugins
The plugins property is an indexed array of any plug-in objects contained in a document. Note that the plug-ins collection is subtly different for Internet Explorer and Netscape. For more information, visit the PlugIns collection

readyState
The readyState property can be one of 4 values, depending on the current state of the document. The possible values of the readyState property are:

Value | Meaning
complete | The resource has completely loaded and is available to the document and therefore manipulation.
interactive | The resource hasn't completely downloaded, but is available to the document and scripting
loading | The resource is being downloaded
uninitialized | The resource is not available - normally, this value indicates that the resource is downloading

Note that the readystate property is read-only and is Internet Explorer 4.0 specific

referrer
This property is a read-only property that contains the URL of the source document that the user navigated from to get to the current document. NOTE : Netscape rightly reports the URL of the source document used to navigate to the current document, but Internet Explorer appears to always return the URL of the current document only.

scripts
The scripts property is a reference to the Scripts collection (an indexed array, referencing every <SCRIPT> element in the document. For more information, see the Scripts collection topic. The scripts property is Internet Explorer 4.0 specific.

selection
The selection property is a reference to any current document content that the user may have selected. It's a reference to a Selection object, see that topic for more information. The selection property is Internet Explorer 4.0 specific, although Netscape supports the getSelection method of the document object (see below).

styleSheet
The styleSheets property is a reference to any Style Sheets attached to the current document. It is an indexed array (see the StyleSheets collection) of StyleSheet Objects. The styleSheets property is Internet Explorer 4.0 specific.

tags
The tags collection is used for Netscape specific Javascript Style Sheets. See the Javascript Style Sheets topic for more information.

title
The title property reflects the document's title, as set in the <TITLE> element.

URL
The URL property contains the fully qualified URL of a document and is typically identical to the location.href property of the Location and Window objects.

vlinkColor
The vlinkColor property reflects the document's visited link colour, as set by any <BODY VLINK="..."> settings for the current document. It is a writable property, that is, the document visited link colour can be set dynamically. For example :

document.vlinkColor="#400040"

would set the current documents visited link colour to a dark purple (the default colour for visited links). NOTE : In Internet Explorer, trying to dynamically alter a documents text colour, if that colour has been set in a style sheet, would not do anything.

Document Methods
clear
This Internet Explorer specific method closes the data stream and updates display of any text/HTML written to the document by write or writeLn methods. It is essentially identical to the close method.

close
The close method is used to close the data stream after a series of document write or writeLn method operations. It forces the display of the text/images (any standard HTML) sent during the write or writeLn methods.

createElement
The createElement method can be used to create a new instance of either an <IMG> or <OPTION> element, which can then be added to the Images collection or Options collection respectively. For example:

newOption = document.createElement("OPTION")

creates a new <OPTION> element and:

document.forms(index).elements("<SELECT>reference").options.add newOption, 0

would add the newly created <OPTION> object to the Options collection of the <SELECT> element referenced by <SELECT>reference on the form referenced by forms(index), where index is the index of the referenced form in the documents Forms collection.

For example, enter some text in the text box below, then click the button to add that text to the <SELECT> options collection:

Note that the size of the <SELECT> drop-down box will increase to accommodate the new option text.

Note : At the time of writing, Internet Explorer 4.0 was not supporting the creation of new <IMG> elements using the createElement method. Also note that this method is Internet Explorer 4.0 specific.

createStyleSheet
The createStyleSheet method can be used to create and add a StyleSheet Object to the referenced document. It accepts two optional arguments of URL and index. If URL is specified the new StyleSheet Object will be added to the StyleSheets Collection as if it were <LINK>d into the document. If no URL is given, then the new Style Sheet object will be added to the StyleSheets collection as if it were an embedded style sheet using the <STYLE> element.

elementFromPoint
The elementFromPoint method can be used to determine the element at any given position in the document, according to its x and y co-ordinates (relative to the top-left corner of the current viewing window). For example:

set whichElement=document.elementFromPoint(100,50)

would set the whichElement object reference to the element whose content covers the point 100 pixels in and 50 pixels down from the top-left corner of the current viewing window. Enter some co-ordinates in the following two text boxes, then click the button to retrieve the tagName property of the element at those co-ordinates (which will also be highlighted).

x :
y :

Note : This method is Internet Explorer 4.0 specific.

execCommand
The Internet Explorer 4.0 specific execCommand method can be used to execute a number of commands over an entire document, or a Text Range. The syntax is:

Boolean = object.execCommand(command [, bool [, value]])

where:

command
is one of the possible Command Identifier (see below)
bool
A boolean value setting whether to show any possible interface that the particular command may have
value
A possible value, the contents/data type of which are determined by the specific command used

The possible Command Identifiers are:

Command | Description | Value
BackColor | sets the background colour of the referenced text | #rrggbb|Colour name
Bold | Wraps a <B> element around the referenced object | -
Copy | Copies the referenced object to the clipboard | -
CreateBookmark | Wraps a <A NAME="..."> element around the referenced object | String - bookmark to use
Create Link | Wraps a <A HREF="..."> element around the referenced object | String - URL for link
Cut | Copies the referenced object to the clipboard, then removes it from the document | -
Delete | Deletes the referenced object | -
FontName | Sets the typeface for the referenced object | String - Font Name
FontSize | Sets the font size for the referenced object | String - size
ForeColor | Sets the foreground (i.e. text) colour for the referenced object | #rrggbb | Colour Name
FormatBlock | Wraps a specified block-level element around the referenced object | String - block level element to use
Indent | Indents the referenced object | -
InsertButton | Inserts a <BUTTON> element at the current insertion point | String - ID value
InsertFieldSet | Inserts a <FIELDSET> element at the current insertion point | String - ID value
InsertHorizontalRule | Inserts a <HR> element at the current insertion point | String - ID value
InsertIFrame | Inserts a <IFRAME> element at the current insertion point | String - SRC value
InsertInputButton | Inserts a <INPUT TYPE="button"> element at the current insertion point | String - ID value
InsertInputCheckbox | Inserts a <INPUT TYPE="checkbox"> element at the current insertion point | String - ID value
InsertInputFileUpload | Inserts a <INPUT TYPE="FileUpload"> element at the current insertion point | String - ID value
InsertInputHidden | Inserts a <INPUT TYPE="hidden"> element at the current insertion point | String - ID value
InsertInputPassword | Inserts a <INPUT TYPE="password"> element at the current insertion point | String - ID value
InsertInputRadio | Inserts a <INPUT TYPE="radio"> element at the current insertion point | String - ID value
InsertInputReset | Inserts a <INPUT TYPE="reset"> element at the current insertion point | String - ID value
InsertInputSubmit | Inserts a <INPUT TYPE="submit"> element at the current insertion point | String - ID value
InsertInputText | Inserts a <INPUT TYPE="text"> element at the current insertion point | String - ID value
InsertMarquee | Inserts a <MARQUEE> element at the current insertion point | String - ID value
InsertOrderedList | Inserts a <OL> element at the current insertion point | String - ID value
InsertParagraph | Inserts a <P> element at the current insertion point | String - ID value
InsertSelectDropdown | Inserts a <SELECT TYPE="dropdown"> element at the current insertion point | String - ID value
InsertSelectListbox | Inserts a <SELECT TYPE="Listbox"> element at the current insertion point | String - ID value
InsertTextArea | Inserts a <TEXTAREA> element at the current insertion point | String - ID value
InsertUnorderedList | Inserts a <IL> element at the current insertion point | String - ID value
Italic | Wraps a <I> element around the referenced object | -
JustifyCenter | Centers the referenced object | -
JustifyFull | Full justifies the referenced object | -
JustifyLeft | Left justifies the referenced object | -
JustifyRight | Right justifies the referenced object | -
Outdent | Outdents the referenced object | -
OverWrite | Sets the typing mode - insert or over-write | Boolean - true=over-write, false=insert
Paste | Places clipboard contents at the current insertion point (can only paste text copied by the copy command in script | -
PlayImage | Starts playing any dynamic (i.e. video, animated GIF's etc) images with the referenced object | -
Refresh | Reloads the source of the current document | -
RemoveFormat | Removes formatting for the referenced object | -
RemoveParaFormat | Removes any paragraph formatting for the referenced object | -
SelectAll | Selects the whole document text | -
StopImage | Stops playing of all dynamic images | -
Underline | Wraps a <U> around the referenced object | -
Unlink | Removes a link | -
Unselect | Empties any selections from the document | -

Note : Different Command Identifiers are supported 4.0 for the Document Object (or the Text Range object). However, it's clear to see the intention behind the execCommand method. Total content manipulation capabilities will for example, allow people to build totally customisable WYSIWYG HTML editors, based on Internet Explorer 4.0, which will put the Internet Explorer 4.0 HTML rendering engine in a very strong position.

getSelection
This Netscape 4.0 specific method returns a string which contains the text of the current users selection.

open
The open method is used to open a data stream, typically followed by write or writeLn methods. It can accept a MIME type as a parameter, but by default uses 'text/html', so that standard HTML can be written to the document using the aforementioned write and writeLn methods.

queryCommandEnabled
The Internet Explorer 4.0 specific queryCommandEnabled method allows you to determine whether a specific command (as defined by its command identifier is available for the referenced object. As mentioned before, certain commands aren't available for the respective Document Object or Text Range objects, so the queryCommandEnabled method should be used to determine whether the command is enabled for the referenced object before attempting to use the command. The queryCommandEnabled method takes one argument, which should be a string containing one of the Command Identifiers.

queryCommandIndeterm
The Internet Explorer 4.0 specific queryCommandIndeterm method can be used to determine whether a specific command is in the indeterminate state or not. It accepts one argument - a string value containing the Command Identifier in question.

queryCommandState
The Internet Explorer 4.0 specific queryCommandState method is used to determine the state of any command issued with the execCommand method (see above). It returns true if the command was successfully carried out on the referenced object, false if the command failed.

queryCommandSupported
The Internet Explorer 4.0 specific queryCommandSupported method can be used to determine whether the command is currently on or off. It accepts a single argument of a string value defining the Command Identifier to be queried and returns a boolean value of true is the command is on for the referenced object, or false if it isn't.

queryCommandText
The Internet Explorer 4.0 specific queryCommandText method can be used to determine the the string associated with a command. It accepts the standard string argument of the Command Identifier together with a string value which can be either Name or StatusText which specified whether to return the short name of the command in question, or the status bar text which may appear with the specific command.

queryCommandValue
The Internet Explorer 4.0 specific queryCommandValue method can be used to determine the value argument used in the execCommand method. See the Command Identifiers for details of the values used with certain commands.

write
This method can be used to write data (text, or any standard HTML) to a document. For example :

document.write "Hello, I've been scripted into the document"

would write the text string given into the document. It would appear wherever the script that contains the write method is placed in the document, unless the string to write to the document contains certain formatting data. For example :

document.write "<P ALIGN='right'>Hello, I've been scripted into the document"

would write the same text to the document, but it would be a separate, right-aligned paragraph.

writeLn
The writeLn method is essentially identical to the write method, except that it implies a line break after the string to write to the document. As line breaks are ignored by browsers though, the two methods tend to act identically.

Document Events
Internet Explorer 4.0 supports the following standard Dynamic HTML Events: onclick, ondblclick, ondragstart, onhelp, onkeydown, onkeypress, onkeyup, onmousedown, onmousemove, onmouseout, onmouseover, onmouseup and onselectstart. See the standard Dynamic HTML Events topic for details of these. Netscape supports some of these events for the Document Object. See the standard Dynamic HTML events for details. Additionally, it supports the following events:

onerror
The onerror event fires whenever there is an error when attempting to display a document. Note : The onerror event for the Document Object is Internet Explorer 4.0 specific.

onload
The onload event fires whenever the document finishes loading. For entire documents, the onload event is more commonly handled in the Window Object.

© 1995-1998, Stephen Le Hunte


The Layer object

A Layer Object entry (and corresponding layers array entry) is created for every layer (specified by either <LAYER> or <ILAYER> elements, or for any element using the position:absolute or position:relative style sheet positioning attributes). These objects expose various methods, properties and events.

Referencing Layers
All layers defined in a document (the Layer object and layers array are properties of the Document object) can be referenced by their name (given in their NAME attribute) or by their index in the layers array. It's generally easier to reference layers by their name though, as their index in the layers array is determined by their z-order, from back (i.e. the furthest away) to front (the front-most layer). This isn't always the same as their zIndex property (or Z-INDEX attribute in the <ILAYER> or <LAYER> element) as these don't take account of the z-order of the layer with respect to any parent/sibling layers that the particular layer you are trying to reference may have. To reference a particular layer, use :

document.layerName...

or

document.layers.['layerName']...

Each layer object in the layers array has a document property, through which any child layers can be referenced through its parent layer, thus :

document.layers.['parentlayerName'].document.layers['layerName']..

To reference a layer in a different window, a valid window reference will need to be used to access the document object (a property of the Window Object), to access the layer object, or layers array.

Layer Properties
above
The above property returns a reference to the layer object that is above the referenced layer in the z-order, of all the layers in the document. For example, if you authored two layers, one NAMEd 'Red' and one NAMEd 'Blue', with the 'Blue' layer having a higher z-order than the 'Red' layer, then :

document.layers['Red'].above

would return a reference to the 'Blue' layer. (You'd need to append another property, such as name - see below - to be able to make sense of that layer object reference). If the referenced layer is the top-most layer (or the only layer), then the above property would return 'null'. The above property is read-only.

background
This property returns a reference to the referenced layers background image (if any - it returns 'null' if the referenced layer has no background image). Each background image is an Image Object (see the Images collection), whose properties can be interrogated, or methods manipulated. The background property can be dynamically changed.

below
The below property is the opposite of the above property (see above), in that it returns a reference to the layer that is immediately below (in terms of z-order) the currently referenced layer, or 'null' if the current layer is the bottom, or only layer. The below property is read-only.

bgColor
This property reflects the referenced layers background colour (as set in the BGCOLOR attribute of either the <ILAYER> or <LAYER> elements). It can be dynamically changed, by setting the property to a new colour, using any valid colour referencing technique (i.e. a #rrggbb hex triplet, or colour name).

clip
The clip property has 6 sub-properties, namely clip.top, clip.left, clip.right, clip.bottom, clip.width and clip.height, which can be used to determine, or dynamically set the clipping area (the area of the layer that is actually displayed) for the current layer.

left
This property reflects the referenced layers left-most point in pixels, relative to either its parent layer, or the left-most edge of the browser window if it has no parent layer. It can be manipulated to move the layer.

name
The name property reflects the referenced layers name, as set in the NAME attribute of either the <ILAYER> or <LAYER> element that defines the layer.

pageX
The pageX property represents the horizontal position of the referenced layer object, in pixels, relative to the main document page.

pageY
The pageY property represents the vertical position of the referenced layer object, in pixels, relative to the main document page.

parentLayer
The parentLayer property references the immediate parent layer of the currently referenced layer. If the currently referenced layer has no parent, then parentLayer returns 'null'.

siblingAbove
siblingAbove references the layer that is above the currently referenced layer (in terms of z-order), of all the layers that share the same parent layer. If the currently referenced layer is has no parent, or is a top-most layer, the siblingAbove property returns 'null'.

siblingBelow
siblingBelow references the layer that is below the currently referenced layer (in terms of z-order), of all the layers that share the same parent layer. If the currently referenced layer is has no parent, or is a bottom-most layer, the siblingBelow property returns 'null'.

src
The src property reflects the document that contains the content for the currently referenced layer (i.e. set by the SRC attribute of the <ILAYER> or <LAYER> element that defines the layer. It is read-only, that is, layer content can not be dynamically changed.

top
This property reflects the referenced layers top-most point in pixels, relative to either its parent layer, or the top-most edge of the browser window if it has no parent layer. It can be manipulated to move the layer.

visibility
The visibility property reflects the value of the VISIBILITY attribute (as set in the <ILAYER> or <LAYER> element). It can be manipulated to hide the currently referenced layer or force it to inherit its parent layers (if any) visibility (by setting the visibility property to inherit or hide within a script function.

zIndex
The zIndex property can be used to determine, or dynamically set the z-order (only with respect to parent or sibling layers) of the currently referenced layers. This can be useful for dynamically changing the overlap of any layers within the document.

Layer Methods
load (URL,width)
The load method can be used to replace the contents of the referenced layer object with a new source document, referenced by the URL argument of the method, the newly loaded source document also resizing the referenced layer object according to the width argument, which is specified in pixels.

moveAbove (LayerName)
The moveAbove method accepts one argument which must be a valid layer name. The layer referenced for the method is then placed above (in terms of z-order) the layer named in the argument, without physically altering its position on the screen. After the z-order change, both layers then share the same parent (if one of the layers was a child layer to start with).

moveBelow (LayerName)
The moveBelow method accepts one argument which must be a valid layer name. The layer referenced for the method is then placed below (in terms of z-order) the layer named in the argument, without physically altering its position on the screen. After the z-order change, both layers then share the same parent (if one of the layers was a child layer to start with).

moveBy (x,y)
The moveBy method moves the referenced layer horizontally (by the pixel amount given in the x argument) and vertically (by the pixel amount given in the y argument) relative to its current horizontal and vertical position.

moveTo (x,y)
The moveTo layer accepts two arguments which are screen positions in pixel values. For example :

document.layers['RedLayer'].moveTo (50,200)

would move the layer whose NAME is RedLayer to the position x=50, y=200 on the screen. The position can be anywhere on, or even off, the current browser viewing area.

moveToAbsolute (x,y)
The moveToAbsolute method moves the referenced layer to the position specified by the x and y arguments in the page, regardless of the position of the containing layer object.

resizeBy(x,y)
The resizeBy method resizes the referenced layer according to the pixel measurements given in the x and y arguments, relative to the referenced layers current size.

resizeTo(x,y)
The resizeTo method resizes the referenced layer absolutely, according to the x and y pixel measurements, regardless of its original size.

Layer Events
Each layer object in the Layers array/collection, fires the following events:

onblur
The onblur event fires whenever the referenced layer loses the users current focus.

onfocus
Whenever the user focuses (by clicking on) the referenced layer, the onfocus event fires.

onload
The onload event is fired when the document containing the referenced layer is fully loaded, regardless of the referenced layers visibility.

onmouseout
When the users mouse leaves the referenced layer, the onmouseout event is fired.

onmouseover
The onmouseover event is fired whenever the users mouse moves over the referenced layer.

© 1995-1998, Stephen Le Hunte


The Event object

The Event Object is supported by both Internet Explorer 4.0 and Netscape (from 3.0). Properties of the event object are available for every event that occurs on every scriptable object within a document. However, while both browsers support it, the property names supported by each are different, which complicates things slightly. Below is a description of the properties, with a section for each browser.

Internet Explorer 4.0 event object properties.
altKey
The altKey property has a boolean value, which is true if the Alt key was pressed at the time of the event occuring, false if it wasn't.

button
The button property contains an integer value which represents which of the mouse buttons were used when the event occurred. The possible values are:

Value | Button pressed
0 | No mouse button pressed
1 | Left mouse button pressed
2 | Right mouse button pressed
4 | Middle button pressed

cancelBubble
For events that 'bubble', the cancelBubble property can be used to allow the event to bubble, or to prevent the event from bubbling. It takes boolean values of true or false.

Hold on, what's 'Event Bubbling'?
Within a document, when certain events occur on elements, if that element doesn't have an event handler set for the event that occurred, then the event will rise successive levels in the document hierarchy, until it finds an event handler for the particular event. When it finds an event handler, it will perform whatever scripting is set for the event. If it rises ('bubbles') to the top of the document hierarchy (i.e. reaches the <BODY> element without finding an event handler, then nothing happens for the event. For example, consider the following document:

. . .
<P OnClick="alert ('P clicked')">Here's a paragraph, containing <STRONG OnClick="alert ('STRONG clicked')">some bold and <EM OnClick="alert ('EM clicked')">italic</EM> text</STRONG>
</BODY>

which displays as:

Here's a paragraph, containing some bold and italic text

Whichever section of the document you click on, a variety of Onclick event will occur. Play around, clicking different parts to see what happens. To prevent an event from bubbling, the cancelBubble property of the event needs to be set to true. For example, if we add:

. . .
<EM OnClick="alert ('EM clicked');self.event.cancelBubble=true">
...

Then we get:

Here's a paragraph, containing some bold and italic text

Now, clicking on the italicised text will prevent the event from 'bubbling' and so only one alert will be presented. Clicking on the contents of the <STRONG> element will still allow the event to bubble though.

Knowledge of event bubbling only really becomes a serious requirement if you have nested event handlers of the same type (as above). If you don't consider what happens when events bubble, then things may not happen as you wish them to.

clientX
The clientX property of the event object returns the horizontal position of the mouse when the event occurred, relative to the origin of the current viewing area. Note that this is subtly different to the offsetX and X properties. See the X-positioning example below.

clientY
The clientY property of the event object returns the vertical position of the mouse when the event occurred, relative to the origin of the current viewing area. Note that this is subtly different to the offsetY and Y properties. The X-positioning example below also applies to the *y position properties of the event object.

ctrlKey
The ctrlKey property has a boolean value, which is true if the Ctrl key was pressed at the time of the event occuring, false if it wasn't.

fromElement
The fromElement property of the event object is of use for onmouseover and onmouseout events. It contains a reference to the element object that the mouse cursor has moved from in order for the respective onmouseover or onmouseout event to occur.

keyCode
The keyCode property contains the UNICODE key character associated with the key that was pressed to cause the onkeypress, onkeydown or onkeyup event to occur. Note that setting this property in any event handler code causes the new code to be sent with the event object should the event 'bubble' up the document hierarchy.

offsetX
The offsetX property contains a value which represents the mouse position relative to the srcElement's containing element in the object hierarchy. See the X-positioning example below.

offsetY
The offsetY property contains a value which represents the mouse position relative to the srcElement's containing element in the object hierarchy. The X-positioning example below also applies to the *y position properties of the event object.

reason
When data bound element objects submit data back to the data source, the reason property of the event object contains an integer value representing the reason for the data-transfer completion. Its values can be:

Value | Reason
0 | Data transfer was successful
1 | Data transfer aborted
2 | A data transfer error occurred

For more information on data binding, see the Data binding.

returnValue
The returnValue property of the event object represents the return value for the event object. It accepts a boolean value and setting the returnValue property to false will cancel the default action of the event on the element that received it. For example, the default action on clicking a link is to navigate to the URL in the HREF attribute of the link. If self.event.returnValue=false is set for the onclick event handler in an <A> element, then the new document navigation will no occur.

screenX
The screenX property represents the mouse position at the time of the event occuring, relative to the left-most edge of the users screen. See the X-positioning example below.

screenY
The screenY property represents the mouse position at the time of the event occuring, relative to the top of the users screen. The X-positioning example below also applies to the *y position properties of the event object.

shiftKey
The shiftKey property has a boolean value, which is true if the Shift key was pressed at the time of the event occuring, false if it wasn't.

srcElement
The srcElement property contains a reference to the element object that originally received the event. It's useful when handling events at a top-level. For example, within a document, all onclick events could be handled by the Document Object and the srcElement property could be use to determine what object was clicked and act accordingly.

srcFilter
The srcFilter property contains a reference to the Filter caused the onfilterchange event to occur.

toElement
The toElement property of the event object is of use for onmouseover and onmouseout events. It contains a reference to the element object that the mouse cursor is moving to in order for the respective onmouseover or onmouseout event to occur.

type
The type property contains a string value, which defines the event that has occurred (i.e. 'click' for an onclick event etc.)

x
The x property represents the mouse cursors horizontal position, relative to the next style sheet positioned element up the element hierarchy. (For information about the Style Sheet positioning attributes, see the Positioning attributes topic.) If no element above the source element has been positioned using Style Sheet positioning, then the x property reflects the horizontal mouse position relative to the documents <BODY> element.

y
The y property represents the mouse cursors vertical position, relative to the next style sheet positioned element up the element hierarchy. (For information about the Style Sheet positioning attributes, see the Positioning attributes topic.) If no element above the source element has been positioned using Style Sheet positioning, then the y property reflects the vertical mouse position relative to the documents <BODY> element.

Example for the *x properties
Consider the following document fragment:

<TABLE ID="TABLE1">
<TR ID="TR1">
<TD="TD1">
Here's some <STRONG OnClick="showPos()">strong text</STRONG>
</TD>
</TR>
</TABLE>

which displays as:

Here's some strong text

clicking on the 'strong text' section will display the offsetX, clientX, screenX and x properties of the event object when the onclick event is fired. The offsetX value represents the horizontal position of the mouse relative to the event source elements containing element (i.e the <TD> element). The clientX property represents the horizontal position of the mouse relative to the current viewing area (i.e. the left-most edge of the 'content' frame. The screenX property returns the x-position relative to the screen and the x position returns the same as clientX, as the <TD> element has not been positioned using CSS positioning attributes.

Netscape 4.0 event object properties.
data
If a DragDrop event occurs (firing an ondragdrop event for the Window Object, then the data property contains an array of string values, representing the URL's of all the objects that were dropped on the navigator window.

layerX
The layerX property represents the mouse cursors horizontal position relative to the left-most edge of the layer object in which the event occurred.

layerY
The layerY property represents the mouse cursors vertical position relative to the left-most edge of the layer object in which the event occurred.

modifiers
The modifiers property covers the various special keyboard keys that can be pressed when an event occurs. The modifiers property returns a string value of either ALT_MASK, CONTROL_MASK, SHIFT_MASK or META_MASK depending on which of the keys were pressed when the event occurred. (c.f. altKey, ctrlKey and shiftKey for Internet Explorer 4.0)

pageX
The pageX property reflects the mouse cursors horizontal position at the time of the event occuring, relative to the current viewing window. (c.f. clientX for Internet Explorer 4.0)

pageY
The pageY property reflects the mouse cursors vertical position at the time of the event occuring, relative to the current viewing window. (c.f. clientY for Internet Explorer 4.0)

screenX
The screenX property reflects the mouse cursors horizontal position at the time of the event occuring, relative to the users screen. (c.f. screenY for Internet Explorer 4.0)

screenY
The screenY property reflects the mouse cursors vertical position at the time of the event occuring, relative to the users screen. (c.f. screenX for Internet Explorer 4.0)

target
The target property contains a string value representing the object to which the event was originally sent (e.g. for an <A> anchor object, the target property will return a string, corresponding to the HREF attribute value setting for the <A> element clicked.)

type
The type property returns a string representing the event type that occurred (i.e. 'click' for an onclick event etc.)

which
The which property returns a number specifying which mouse button was pressed at the time of the event occuring, or the ASCII code of the key that was pressed. (c.f. button, keyCode for Internet Explorer 4.0)

© 1995-1998, Stephen Le Hunte


The Screen object

The Screen object is Internet Explorer 4.0 specific and can be used to determine details about the users screen size and colour depths etc. This can prove useful if content positioning relies on the size of the users screen.

Properties
availHeight
The availHeight property returns a value representing the available height of the users screen. This is the height property, minus that taken by any toolbars (i.e. the taskbar)

availWidth
The availWidth property returns a value representing the available width of the users screen. This is the width property, minus that taken by any toolbars (e.g. the Office toolbar)

bufferDepth
The bufferDepth property can be used to set an off screen buffering value. Setting the bufferDepth to "0", no explicit buffering is set and the colorDepth property is set to the screen depth. If bufferDepth is set to "-1" (the default), then off screen buffering is performed at the current screen depth and the colorDepth property matches the screen depth.

The bufferDepth property can be set to 1, 4, 8, 15, 16, 24 or 32, which then causes off screen buffering to occur at the set bit-per-pixel depth. i.e. bufferDepth=8 performs buffering at 8 bits per pixel, which is 256 colours. Setting the bufferDepth to any other value causes it to be set to "-1".

Note that when bufferDepth is "-1", if the user changes their system settings, the bufferDepth is automatically changed to the new screen depth.

colorDepth
The colorDepth property is read-only and reflects the users current system color depth settings, in bits-per-pixel. I.e. 256 colours, colorDepth=8, 16.7million colours, colorDepth=16.

Note that the colorDepth property is dependent on the bufferDepth property. If bufferDepth is set to 0 or -1, then colorDepth is equal to the bits-per-pixel value of the users system settings. However, if the bufferDepth has been explicitly set to a different value, then the colorDepth property is equal to the bufferDepth property.

fontSmoothingEnabled
The fontSmoothingEnabled property returns a boolean value indicating whether the user has font smoothing enabled on their system or not.

height
The height property reflects the users current screen height, in pixels.

updateInterval
The updateInterval property can be used to set (in mSec), the time between updates for the current viewing window. This is only really a problem when large (size or amount) moving, or continually refreshing images are present in a page.

setting updateInterval=0 resets the screen update Interval to its default setting, chosen by Internet Explorer.

width
The width property reflects the users current screen width, in pixels.

Methods
The Screen Object has no methods.

Events
The Screen Object has no events.

© 1995-1998, Stephen Le Hunte


The Selection object

The Selection object is Internet Explorer 4.0 specific and is an object that represents any currently selected section of a document. Sections of a document are typically selected by the user holding down a mouse button and dragging the mouse, but can also be created by scripts using the select method on a Text Range Object.

Properties
type
The type property is read-only and can be one of two values ("None" or "Text"). If the user has selected some text and/or other elements in a document, then the type property will return "Text", otherwise if no selection has been made, the type property will return "None".

Methods
clear
The clear method can be used to remove the current text selection from the document. This is going to prove useful for people wanting to build WYSIWYG HTML editors based on Internet Explorer 4.0. Coupled with methods like the execCommand method (see the Document Object) to insert HTML elements, a new breed of editors will start to appear based entirely on the Internet Explorer 4.0 HTML rendering engine.

createRange
The createRange method creates a Text Range object from the current active selection. This can then be manipulated through the properties, methods and events of the TextRange object.

empty
The empty method deselects the current selection, sets the selection type to "none", and sets the item property to null. The visual effect of the empty method is deselection of the text (i.e. its highlight is removed) Note : The two methods will only work in the text section below and at the time of writing, using the empty method caused the document to scroll to the top.

For example:

Select your method choice from the radio buttons below, then select any of this text (left-mouse button and drag) and press the right-mouse button to clear or empty the selection.

Events
The Selection Object has no events.

© 1995-1998, Stephen Le Hunte


The Style object

The Style object is Internet Explorer 4.0 specific and can be used to retrieve any in-line styles applied to an element object by using the STYLE attribute. Note that it doesn't retrieve stylings set in embedded, or externally linked stylesheets. To obtain information about these, use the StyleSheets collection.

Properties
The Style object has a property for every possible style setting for element objects. Basically any style sheet attribute is a property of the Style object. The only difference is grammatical, in terms of hyphenation. Below is a complete list of Style object properties and their corresponding Style Sheet attributes. For more information about the values of the attributes/properties, see the respective Style Sheets topic.

Style Object Property | Style Sheet attribute
background | background
backgroundAttachment | background-attachment
backgroundColor | background-color
backgroundImage | background-image
backgroundPostion | background-position
backgroundRepeat | background-repeat
border | border
borderBottom | border-bottom
borderBottomColor | border-bottom-color
borderBottomStyle | border-bottom-style
borderBottomWidth | border-bottom-width
borderColor | border-color
borderLeft | border-left
borderLeftColor | border-left-color
borderLeftStyle | border-left-style
borderLeftWidth | border-left-width
borderRight | border-right
borderRightColor | border-right-color
borderRightStyle | border-right-style
borderRightWidth | border-right-width
borderStyle | border-style
borderTop | border-top
borderTopColor | border-top-color
borderTopStyle | border-top-style
borderTopWidth | border-top-width
borderWidth | border-width
clear | clear
clip | clip
color | color
cursor | cursor
display | display
filter | filter
font | font
fontFamily | font-family
fontSize | font-size
fontStyle | font-style
fontVariant | font-variant
fontWeight | font-weight
height | height
left | left
letterSpacing | letter-spacing
lineHeight | line-height
listStyle | list-style
listStyleImage | list-style-image
listStylePosition | list-style-position
listStyleType | list-style-type
margin | margin
marginBottom | margin-bottom
marginLeft | margin-left
marginRight | margin-right
marginTop | margin-top
overflow | overflow
paddingBottom | padding-bottom
paddingLeft | padding-left
paddingRight | padding-right
paddingTop | padding-top
pageBreakAfter | page-break-after
pageBreakBefore | page-break-before
position | position
styleFloat | float
textAlign | text-align
textDecoration | text-decoration
textDecorationBlink | text-decoration
textDecorationLineThrough | text-decoration
textDecorationNone | text-decoration
textDecorationOverline | text-decoration
textDecorationUnderline | text-decoration
textIndent | text-indent
textTransform | text-transform
top | top
verticalAlign | vertical-align
visibility | visibility
width | width
zIndex | z-index

The Style object also supports the following properties:

cssText
The cssText property returns a string containing the contents of the referenced elements STYLE attribute.

Note : The contents of the cssText property returns an alphabetically sorted and expanded list of the style sheet attributes set in the referenced elements <STYLE> attribute. For example, if an element contains STYLE="border-color:red", then the cssText property of the elements style object will return:

BORDER-BOTTOM-COLOR: red;BORDER-LEFT-COLOR: red;BORDER-RIGHT-COLOR: red;BORDER-TOP-COLOR: red

expanding the single shorthand border-color property into its constituent parts.

backgroundPositionX
The backgroundPositionX property returns only the x-coordinate of the background property (see above), which reflects a STYLE="background:..." settings within the referenced element.

backgroundPositionY
The backgroundPositionY property returns only the y-coordinate of the background property (see above), which reflects a STYLE="background:..." settings within the referenced element.

pixelHeight
The pixelHeight property returns or sets the height of the referenced element in pixels, regardless of its height unit setting in its stylings.

pixelLeft
The pixelLeft position sets, or reflects the horizontal offset (relative to the current viewing window) of the left-most edge of the referenced element. The value returned is always in pixels.

pixelTop
pixelTop is much the same as pixelLeft except that it returns, or sets the vertical offset of the referenced element, in pixels.

pixelWidth
Like pixelHeight, pixelWidth returns, or sets the width of the referenced element in pixels, regardless of its length unit settings in the styling.

posHeight
The posHeight property sets or retrieves the height of the referenced element in the same units as the elements height is defined in, in the styling. Dynamically setting this property will alter the displayed height of the element, but not alter the height units it uses for display purposes.

posLeft
The posLeft property sets or returns the referenced elements left-most position, relative to the current viewing window, in the units specified in the style sheet height attribute. Again, dynamically setting the posLeft property will move the referenced element, but not affect the length units it uses to position itself.

posTop
posTop is the same as posLeft, the only difference being that it deals with vertical offsets, not horizontal ones.

posWidth
posWidth returns or sets the width of the current, in the units specified in the stylings width attribute. Again, changing it alters the elements display, but leaves its width units unaffected.

Methods
The Style object accepts the standard Dynamic HTML Methods getAttribute, removeAttribute and setAttribute. See that topic for details.

© 1995-1998, Stephen Le Hunte


The StyleSheet object

Note : The StyleSheet object is Internet Explorer 4.0 specific.

Each Style Sheet applied to a document (with a <LINK> or <STYLE>, or by using the @import method (see the Style Sheets overview)) is a style sheet and is available through the StyleSheets or Imports collections.

Each StyleSheet object has the following properties:

Properties
disabled
The disabled property directly reflects the value of the DISABLED attribute in either the <LINK> or <STYLE> element that declares the StyleSheet object. The disabled property will also be "false" if the referenced StyleSheet object has no TITLE attribute.

href
The href property will return (or can set) the URL for the referenced style sheet, if the referenced style sheet was included with a <LINK> element, returning "null" if it was set with a <STYLE>. For <LINK>ed Style Sheet objects, the href property can be changed, causing a different style sheet to be loaded for the document.

id
The id property directly reflects the referenced Style Sheet objects ID attribute (if set). The id property is read-only.

owningElement
The owningElement property returns the <LINK> or <STYLE> element that defined the referenced Style Sheet object in the document.

parentStyleSheet
For Style Sheets attached to a document by the @import method, the parentStyleSheet property will return a reference to the <LINK> or <STYLE> element that 'imported' them into the document.

readOnly
The readOnly property determines whether or not the addRule method (see below) can be used on the referenced Style Sheet. Style Sheets that aren't read-only, can have style rules added to them, using the addRule method described below.

type
The type property reflects the value of the TYPE attribute used in the <LINK> or <STYLE> element that defines the Style Sheet. Note that Style Sheets with type property/TYPE attribute values of anything other than 'text/css' aren't supported in Internet Explorer 4.0.

Methods
addImport
The addImport method can be used to include a new @imported Style Sheet object into the referenced Style Sheet object. The syntax is:

integer = stylesheet.addImport(url, [index])

where integer (the return value) specifies the index of the new @imported stylesheet in the Imports collection, url is the URL of the new Style Sheet to import and index (if specified) specifies the position of the new Style Sheet object in the StyleSheets collection. If no index is given, then the new Style Sheet object is appended to the end of the StyleSheets collection.

addRule
The addRule method can be used to add a new Style Sheet rule to the referenced Style Sheet object. For example:

intNewRule = <StyleSheet>reference.addRule "H1", "font-size:36pt"

would add a new Style for <H1> element to the Style Sheet object referenced by <StyleSheet>reference. The addRule method can also take a third argument of index which specifies where in the Rules collection the new style rule should go. By default, new rules will be appended to the end of the referenced style sheet, but by using the index property, a rule can be inserted anywhere, which can affect the use of the new rule. For example consider the case where the font-size and color of an element are changed by adding a new rule and an existing rule specifies a colour for that particular element. If the new rule is appended to the end of the Rules collection, then its colour setting will over-ride that of the existing rule. If it's included before the existing rule, then the new font-size will be used, but not the colour - that will be used from the existing style sheet rule.

© 1995-1998, Stephen Le Hunte


The TextRange object

Note : The TextRange object is Internet Explorer 4.0 specific.

The TextRange object can be used to manipulate any of the document content. It represents one of the major additions to Dynamic HTML, especially considered against the W3C's 'Document Object Model' (http://www.w3.org/pub/WWW/MarkUp/DOM/). One of the more distinctive points of that specification is the ability to be able to manipulate document content through scripting, which the TextRange object more than adequately covers.

A TextRange object can be created by calling the createTextRange() method from the <BODY>, <BUTTON>, <TEXTAREA> or <INPUT TYPE="text"...> elements, or by using the createRange() method on the users current selection through the Selection Object. The text in the resulting TextRange object can then be manipulate in various ways.

Properties
htmlText
The htmlText property returns the contents of the referenced TextRange object, with its HTML intact.

text
The text property returns the contents of the referenced TextRange object as plain text, regardless of any HTML formatting of the content.

For example, consider the following HTML fragment:

this is the <STRONG>contents</STRONG> of a TextRange object

The htmlText property of the TextRange would be:

this is the <STRONG>contents</STRONG> of a TextRange object

whereas the text property would be:

this is the contents of a TextRange object

Methods
collapse
The collapse method sets an insertion point at either the beginning (collapse(true)), or end (collapse(false)) of the referenced TextRange object. Insertion points are useful, as then various execCommand commands (see below) can be executed on the text range to insert new element into the HTML. For example, select some of the text below (the white paragraph) and then press the right mouse button. When this happens the following script function is executed:

. . .
set selectedRange = document.selection.createRange()
selectedRange.collapse(false)
selectedRange.execCommand "InsertHorizontalRule","HR1"

This creates a TextRange object from the current Selection Object, then forces the insertion point to the end of the resulting TextRange object and inserts a <HR> element with an ID attribute/property setting of HR1

Select some of the text, then press the right mouse button to insert a <HR> element anywhere in this text.

compareEndPoints
The compareEndPoints method can be used to compare the ends (either starting, or finishing ends) of two TextRange objects and returns a value of "-1", "0" or "1" depending on whether the compared TextRange object's end point is greater than, equal to, or less than the referenced

duplicate
The duplicate method can be used to create a temporary copy of a referenced TextRange object. For example:

set TR2 = TR1.duplicate()

would create a TextRange object TR2 that is a copy of the TextRange object TR1

ExecCommand
The Internet Explorer 4.0 specific execCommand method can be used to execute a number of commands over a TextRange object. The syntax is:

Boolean = object.execCommand(command [, bool [, value]])

where:

command
is one of the possible Command Identifier (see below)
bool
A boolean value setting whether to show any possible interface that the particular command may have
value
A possible value, the contents/data type of which are determined by the specific command used

The possible Command Identifiers are:

Command | Description | Value
BackColor | sets the background colour of the referenced text | #rrggbb|Colour name
Bold | Wraps a <B> element around the referenced object | -
Copy | Copies the referenced object to the clipboard | -
CreateBookmark | Wraps a <A NAME="..."> element around the referenced object | String - bookmark to use
Create Link | Wraps a <A HREF="..."> element around the referenced object | String - URL for link
Cut | Copies the referenced object to the clipboard, then removes it from the document | -
Delete | Deletes the referenced object | -
FontName | Sets the typeface for the referenced object | String - Font Name
FontSize | Sets the font size for the referenced object | String - size
ForeColor | Sets the foreground (i.e. text) colour for the referenced object | #rrggbb | Colour Name
FormatBlock | Wraps a specified block-level element around the referenced object | String - block level element to use
Indent | Indents the referenced object | -
InsertButton | Inserts a <BUTTON> element at the current insertion point | String - ID value
InsertFieldSet | Inserts a <FIELDSET> element at the current insertion point | String - ID value
InsertHorizontalRule | Inserts a <HR> element at the current insertion point | String - ID value
InsertIFrame | Inserts a <IFRAME> element at the current insertion point | String - SRC value
InsertInputButton | Inserts a <INPUT TYPE="button"> element at the current insertion point | String - ID value
InsertInputCheckbox | Inserts a <INPUT TYPE="checkbox"> element at the current insertion point | String - ID value
InsertInputFileUpload | Inserts a <INPUT TYPE="FileUpload"> element at the current insertion point | String - ID value
InsertInputHidden | Inserts a <INPUT TYPE="hidden"> element at the current insertion point | String - ID value
InsertInputPassword | Inserts a <INPUT TYPE="password"> element at the current insertion point | String - ID value
InsertInputRadio | Inserts a <INPUT TYPE="radio"> element at the current insertion point | String - ID value
InsertInputReset | Inserts a <INPUT TYPE="reset"> element at the current insertion point | String - ID value
InsertInputSubmit | Inserts a <INPUT TYPE="submit"> element at the current insertion point | String - ID value
InsertInputText | Inserts a <INPUT TYPE="text"> element at the current insertion point | String - ID value
InsertMarquee | Inserts a <MARQUEE> element at the current insertion point | String - ID value
InsertOrderedList | Inserts a <OL> element at the current insertion point | String - ID value
InsertParagraph | Inserts a <P> element at the current insertion point | String - ID value
InsertSelectDropdown | Inserts a <SELECT TYPE="dropdown"> element at the current insertion point | String - ID value
InsertSelectListbox | Inserts a <SELECT TYPE="Listbox"> element at the current insertion point | String - ID value
InsertTextArea | Inserts a <TEXTAREA> element at the current insertion point | String - ID value
InsertUnorderedList | Inserts a <IL> element at the current insertion point | String - ID value
Italic | Wraps a <I> element around the referenced object | -
JustifyCenter | Centers the referenced object | -
JustifyFull | Full justifies the referenced object | -
JustifyLeft | Left justifies the referenced object | -
JustifyRight | Right justifies the referenced object | -
Outdent | Outdents the referenced object | -
OverWrite | Sets the typing mode - insert or over-write | Boolean - true=over-write, false=insert
Paste | Places clipboard contents at the current insertion point (can only paste text copied by the copy command in script | -
PlayImage | Starts playing any dynamic (i.e. video, animated GIF's etc) images with the referenced object | -
Refresh | Reloads the source of the current document | -
RemoveFormat | Removes formatting for the referenced object | -
RemoveParaFormat | Removes any paragraph formatting for the referenced object | -
SelectAll | Selects the whole document text | -
StopImage | Stops playing of all dynamic images | -
Underline | Wraps a <U> around the referenced object | -
Unlink | Removes a link | -
Unselect | Empties any selections from the document | -

Note : Different Command Identifiers are supported 4.0 for the TextRange object (or the Document Object object).

expand
The expand method expands a TextRange object to totally cover any partial units. By using differing arguments, it can expand to cover characters, words, sentences, or an entire editable text range. For example, suppose the following is a users current text selection:

I'm only partly selected

Using:

bIsExpanded=TextRangereference.expand("word")

would return true (i.e. bIsExpanded=true) if the TextRange object was successfully expanded to cover the whole of the word 'partly'. Note that the expand method expands the TextRange at both ends to cover the amount specified in the method argument (this can be character, word, sentence or textedit)

findText
The findText method searches for text in the given TextRange object and if it finds the text, positions the TextRange object around the text. For example:

set TRange=document.body.createTextRange()
TRange.findText("HTMLib")
. . .

would search the whole document for the text "HTMLib".

getBookmark
The getBookmark method can be used to create a 'bookmark' for the referenced TextRange object, which can then be moved to later, using the moveToBookmark method (see below). This is useful when managing an entire document as a TextRange object, because it allows script functions to navigate back to certain points of the TextRange object.

inRange
The inRange method allows a script function to determine where a referenced TextRange object is contained within another TextRange object. For example:

bIsIn=TR1.inRange(TR2)

would return true (bIsIn=true) is the TextRange TR1 was contained in the TextRange TR2.

isEqual
Two separate TextRange objects are deemed to be equal if they're start and end points are the same position within the document content. The isEqual method can be used to determine whether or not two TextRange objects are considered equal.

bIsEqual=TR1.isEqual(TR2)

would return true is the TextRange object TR1 is equal to the TextRange object TR2.

move
The move method can be used to move a TextRange object by a set number of units. Possible units are character, word, sentence or textedit. The optional argument count can be used to move the TextRange a set number of units. For example, click the button below. It'll create a TextRange (with the button text), then move the text range 3 words, expand it by a word and highlight the resulting TextRange object.

The script code is:

set Range=document.all("btn1").createTextRange()
Range.move "word",3
Range.expand "word"
Range.select()

Note : Moving the collapsed TextRange by three words positions its start point between the third and fourth words, so it's the fourth word that is selected and highlighted.

moveEnd
The moveEnd method alters the size (and content) of the referenced TextRange object by moving its end point by a set number of units (again, these are character, word, sentence and textedit). For example, if we added:

Range.moveEnd "word",1

to the above example, it would highlight "very long" as the TextRange, instead of just "long".

moveStart
Like the moveEnd method, the moveStart method changes the start point of the referenced TextRange object (again in character, word, sentence, or textedit units.

moveToBookmark
The moveToBookmark moves the referenced TextRange object to a bookmark, previously defined using the getBookmark method (described above).

moveToElementText
The moveToElementText method moves the referenced TextRange's start and end points to encompass the text of any element contained in the original TextRange object. For example, the button below contained some <STRING> text that contains some <EM> emphasised text. Clicking it once will move the TextRange (created from the whole button) to the contents of the <STRong> element, clicking it twice will move the TextRange object to the text in the <EM> element.

It's clear how useful the moveToElementText method could be given TextRange objects that encompass an entire document. Any element in the document could be made into a TextRange object, event though most elements don't support direct TextRange object creation.

moveToPoint
The moveToPoint method can be used to create an initially empty TextRange object whose start and end points are specified in the x and y arguments of the method. The resulting TextRange object can then be expanded (using the expand method (described above) or the moveEnd and moveStart methods to encompass a certain amount of text.

parentElement
Every TextRange object has a parentElement property that contains a reference to the element that totally encloses the contents of the TextRange element. The element object reference returned represents the lowest element object (in the document hierarchy) that totally encloses the referenced TextRange. For example, the parentElement reference for any selected TextRange objects in the collapse method, is the <P> element.

pasteHTML
The pasteHTML method pastes the given HTML string into the contents of the referenced TextRange, over-writing the existing TextRange contents. The pasteHTML method will never fail, although to ensure the best results, you should take care to only use correct HTML in the pasteHTML method. For example <BUTTON> elements cannot be nested, so TextRange objects created from <BUTTON> elements should not have any <BUTTON> HTML inserted into them with the pasteHTML method.

queryCommandEnabled
The Internet Explorer 4.0 specific queryCommandEnabled method allows you to determine whether a specific command (as defined by its command identifier is available for the referenced object. As mentioned before, certain commands aren't available for the respective Document Object or Text Range objects, so the queryCommandEnabled method should be used to determine whether the command is enabled for the referenced object before attempting to use the command. The queryCommandEnabled method takes one argument, which should be a string containing one of the Command Identifiers.

queryComandIndeterm
The Internet Explorer 4.0 specific queryCommandIndeterm method can be used to determine whether a specific command is in the indeterminate state or not. It accepts one argument - a string value containing the Command Identifier in question.

queryCommandState
The queryCommandState method is used to determine the state of any command issued with the execCommand method (see above). It returns true if the command was successfully carried out on the referenced object, false if the command failed.

queryCommandSupported
queryCommandSupported method can be used to determine whether the command is currently on or off. It accepts a single argument of a string value defining the Command Identifier to be queried and returns a boolean value of true is the command is on for the referenced object, or false if it isn't.

queryCommandText
The Internet Explorer 4.0 specific queryCommandText method can be used to determine the the string associated with a command. It accepts the standard string argument of the Command Identifier together with a string value which can be either Name or StatusText which specified whether to return the short name of the command in question, or the status bar text which may appear with the specific command.

queryCommandValue
The Internet Explorer 4.0 specific queryCommandValue method can be used to determine the value argument used in the execCommand method. See the Command Identifiers for details of the values used with certain commands.

scrollIntoView
The scrollIntoView method is one of the standard Dynamic HTML methods and can be used to force the current viewing window to scroll to a referenced TextRange object. It accepts a boolean argument (true or false) which determines whether the window should be scrolled so that the referenced TextRange object is at the top (true) or bottom (false) of the window. For example, the button below will select the contents of the <BUTTON> element in the move method and scroll it into view, so that it's at the top of the viewing window.

select
The select method highlights the referenced TextRange object in whatever highlighting styles are set by the users system for highlighted text (for example, text selected in a document).

setEndPoint
The setEndPoint method sets the end point of one TextRange object, based on the contents of another TextRange object. It accepts two arguments - one specifying which end points should be matched (this can be either StartToEnd, StartToStart, EndToStart or EndToEnd) and a reference to the TextRange object whose end point is being matched.

© 1995-1998, Stephen Le Hunte


The All collection

Note : The All collection is Internet Explorer 4.0 specific. As Netscape doesn't support scripting for every HTML element, it doesn't support the All collection.

The All collection is an ordered, indexed array, containing a reference to every opening HTML element in a document. For example, consider the following document:

<HTML>
<HEAD>
<TITLE>Test Document</TITLE>
</HEAD>
<BODY>
<P>This is a test
<HR>
</BODY>
</HTML>

The all collection would be indexed from 0 to 5, with the elements being positioned:

Element | All index
<HTML> | 0
<HEAD> | 1
<TITLE> | 2
<BODY> | 3
<P> | 4
<HR> | 5

Element Object would normally be retrieved by their index in the All collection (for example, above document.all(3) contains a reference to the <BODY> element), but a string value can be used, as long as that string is a valid identifier (ID attribute value) for an element in the document.

E.g., changing the above example to:

<HTML>
<HEAD>
<TITLE ID="Title1">Test Document</TITLE>
</HEAD>
<BODY>
<P>This is a test
<HR>
</BODY>
</HTML>

...would mean that document.all('Title1') would be a reference to the <TITLE> element (whose ID is 'Title1'). This would be the same as document.all(2). Note that it is also equivalent to using document.all.item('Title1') (see the item method below).

Note : The All collection always includes a reference to <HTML>, <HEAD> and <BODY> elements, whether they exist in the document or not.

Properties

length
The length property returns the number of elements in the collection. Note that the length count starts at 1, not 0 as the all collection index does. Therefore, the length property may return a value of 5, but to access the 3rd element, you'd need to use document.all(2).property

Methods

item
The item method retrieves single items, or sub-collections from the all collection. It accepts the following arguments:

all.item(index, sub-index)

If index is a number, then the method returns a reference to the element object at that position in the all collections index. I.e. (using the example above)

strTag=document.all.item(2).tagName

would make strTag be TITLE - the value of the <TITLE> elements tagName property. As you can see, this is effectively the long-hand version of using document.all(2).property.

If the index property is a string value, then the item method returns a sub-collection, containing a reference to every element in the document that has its ID or NAME attribute set to the string contained in the index argument. To retrieve certain element objects from this sub-collection, the sub-index argument must be used. For example, assume that 5 elements in a document all have the NAME attribute set as radColour (these imaginary elements are radio buttons). To interrogate the 3rd of these elements, you could use:

strThird=document.all('radColour',2).propertyName

tags
The tags method returns a collection of element objects whose tagName property is the same as the tag argument used for the method. This differs from the item property in that that interrogates ID and NAME values if necessary.

document.all.tags('EM')

would return a collection of all the <EM> objects in the document.

© 1995-1998, Stephen Le Hunte


The Applets collection

Note : Both Netscape and Internet Explorer support the Applets collection (Netscape call it an array). For properties, methods and events that are supported by <APPLET> elements, see the <APPLET> topic.

The Applets collection is an ordered, indexed array, containing a reference to every <APPLET> element in a document.

Applet Objects would normally be retrieved by their index in the Applets collection. I.e.:

document.applets(1).code

returns the CODE attribute of the second applet in the document.

A string value can be used however, as long as that string is a valid identifier (ID attribute value) for an <APPLET> element in the document.

E.g.

document.applets('MyCoolApplet').code

would return the CODE attribute of the applet whose NAME (or ID) property is 'MyCoolApplet'.

Properties

length
The length property returns the number of applet objects in the collection. Note that the length count starts at 1, not 0 as the applets collection index does. Therefore, the length property may return a value of 5, but to access the 3rd anchor, you'd need to use document.applets(2).property

Methods

item
The item method retrieves single items, or sub-collections from the applets collection. It accepts the following arguments:

applets.item(index, sub-index)

If index is a number, then the method returns a reference to the applet at that position in the applets collections index. I.e.

strTag=document.applets.item(2).code

would make strTag be the value of the CODE attribute of the documents third applet. As you can see, this is effectively the long-hand version of using document.applets(2).property.

If the index property is a string value, then the item method returns a sub-collection, containing a reference to every anchor in the document that has its NAME or ID attribute set to the string contained in the index argument. To retrieve certain element objects from this sub-collection, the sub-index argument must be used.

© 1995-1998, Stephen Le Hunte


The Anchors collection

Note : Both Netscape and Internet Explorer support the Anchors collection (Netscape call it an array). For properties, methods and events that are supported by <A> elements, see the <A> topic.

The Anchors collection is an ordered, indexed array, containing a reference to every <A> element in a document, that has a valid NAME and/or ID attribute. (The Links collection contains <A HREF="..." ...> elements).

Anchor Objects would normally be retrieved by their index in the Anchors collection. I.e.:

document.anchors(1).title

returns the TITLE attribute of the second anchor in the document (which may not be the second <A> element in the document).

A string value can be used however, as long as that string is a valid identifier (ID attribute value) for an element in the document.

E.g.

document.anchors('Anchor1').title

would return the TITLE attribute of the anchor whose NAME property is 'Anchor1'.

Properties

length
The length property returns the number of anchors in the collection. Note that the length count starts at 1, not 0 as the anchors collection index does. Therefore, the length property may return a value of 5, but to access the 3rd anchor, you'd need to use document.anchors(2).property

Methods

item
The item method retrieves single items, or sub-collections from the anchors collection. It accepts the following arguments:

anchors.item(index, sub-index)

If index is a number, then the method returns a reference to the anchor at that position in the anchors collections index. I.e. (using the example above)

strTag=document.anchors.item(2).title

would make strTag be the value of the TITLE attribute of the documents third anchor. As you can see, this is effectively the long-hand version of using document.anchors(2).property.

If the index property is a string value, then the item method returns a sub-collection, containing a reference to every anchor in the document that has its NAME or ID attribute set to the string contained in the index argument. To retrieve certain element objects from this sub-collection, the sub-index argument must be used.

© 1995-1998, Stephen Le Hunte


The Cells collection

Note : The Cells collection is Internet Explorer 4.0 specific. For properties, methods and events that are supported by <TD> and <TH> elements, see their respective topics.

The Cells collection is an ordered, indexed array, containing a reference to every cell in contained in a referenced <TR> element. This is a collection containing <TH> and <TD> elements.

Cell Objects would normally be retrieved by their index in the Cells collection (for example document.MyTR.cells(3) contains a reference to the 4th cell in the table row referenced by the MyTR reference (this could be the rows ID attribute), but a string value can be used, as long as that string is a valid identifier (ID attribute value) for an element in the document.

E.g.

document.MyTR.cells('MyGreyCell').width

...would return the value of the WIDTH attribute for the <TH> or <TD> element whose ID property is MyGreyCell, contained in the <TR> element referenced by MyTR

Properties

length
The length property returns the number of elements in the collection. Note that the length count starts at 1, not 0 as the cells collection index does. Therefore, the length property may return a value of 5, but to access the 3rd cell, you'd need to use document.MyTR.cells(2).property

Methods

item
The item method retrieves single items, or sub-collections from the cells collection. It accepts the following arguments:

<TR>reference.item(index, sub-index)

If index is a number, then the method returns a reference to the cell object at that position in the cell collections index.

If the index argument is a string value, then the item method returns a sub-collection, containing a reference to every cell in the row that has its ID or NAME attribute set to the string contained in the index argument. To retrieve certain element objects from this sub-collection, the sub-index argument must be used.

tags
The tags method returns a collection of cell objects whose tagName property is the same as the tag argument used for the method. This differs from the item property in that that interrogates ID and NAME values if necessary.

document.MyTR.cells.tags('TD')

would return a collection of just the <TD> cell objects in the row.

© 1995-1998, Stephen Le Hunte


The Areas collection

Note : The Areas collection is Internet Explorer specific. Netscape includes all <AREA> element objects in the Links collection. For properties, methods and events that are supported by <AREA> element, see the Client Side Image Maps topic.

The Areas collection is an ordered, indexed array, containing a reference to every <AREA> element in a given <MAP> element. A separate Areas collection is available for each different <MAP> element in the document and the Areas collection can only be referenced through a reference to a valid <MAP> element object.

Area Objects would normally be retrieved by their index in the Areas collection. I.e.:

document.<MAP>reference.areas(1).href

returns the HREF attribute of the second <AREA> element in the <MAP> element referenced by <MAP>reference. For example, consider the following:

<MAP NAME="Map1">
<AREA SHAPE="circle" COORDS="52,49,35" HREF="index.htm">
<AREA SHAPE="rect" COORDS="53,34, 131,82" HREF="start.htm">
</MAP>

Calling the following in a script function:

document.all('Map1').areas(1).href

would return start.htm. (Note that the <MAP> element doesn't have to be referenced through the All Collection)

A string value can be used however, as long as that string is a valid identifier (ID attribute value) for an <AREA> element in the referenced <MAP> element in the document.

E.g.

document.<MAP>reference.areas('Area1').title

would return the TITLE attribute of the <AREA> whose NAME, or ID property is 'Area1', in the <MAP> element referenced by <MAP>reference.

Properties

length
The length property returns the number of areas in the collection. Note that the length count starts at 1, not 0 as the areas collection index does. Therefore, the length property may return a value of 5, but to access the 3rd area in a <MAP>, you'd need to use document.<MAP>reference.areas(2).property

Methods

item
The item method retrieves single items, or sub-collections from an areas collection. It accepts the following arguments:

areas.item(index, sub-index)

If index is a number, then the method returns a reference to the <AREA> at that position in the areas collections index. I.e.

strTag=document.<MAP>reference.areas.item(2).title

would make strTag be the value of the TITLE attribute of the <MAP>'s third <AREA>. As you can see, this is effectively the long-hand version of using document.<MAP>reference.areas(2).property.

If the index property is a string value, then the item method returns a sub-collection, containing a reference to every area in the map that has its NAME or ID attribute set to the string contained in the index argument. To retrieve certain element objects from this sub-collection, the sub-index argument must be used.

© 1995-1998, Stephen Le Hunte


The Children collection

Note : The Children collection is Internet Explorer 4.0 specific. As Netscape doesn't support scripting for every HTML element, it doesn't support the Children collection.

Like the All collection contains a reference to all elements in the document, the Children collection contains a reference to all the elements sub-ordinate to the referenced element, returning null (or a scripting error) if the referenced element has no child elements (the length property should be checked first to avoid this). The children collection is supported by Internet Explorer 4.0 for every HTML element.

For example, from the first paragraph of this topic:

<P ID="P1"><STRONG ID="STRONG1"><EM>Note : </EM></STRONG>The Children collection is <STRONG>Internet Explorer</STRONG> 4.0 specific. As <STRONG>Netscape</STRONG> doesn't support scripting for <EM>every</EM> HTML element, it doesn't support the Children collection.

The <STRONG> element whose ID is STRONG1 would only contain a reference to the following <EM> element in its child collection, while the <P> whose ID is P1 would contain references to all of the elements following it, except the first <EM> element, which is a child of the <STRONG> element only.

Properties

length
The length property returns the number of elements in the collection. Note that the length count starts at 1, not 0 as the children collection index does. Therefore, the length property may return a value of 5, but to access the 3rd child, you'd need to use object.children(2).property

Methods

item
The item method retrieves single items, or sub-collections from the children collection. It accepts the following arguments:

...children.item(index, sub-index)

If index is a number, then the method returns a reference to the element object at that position in the children collections index. I.e. (using the example above)

strTag=object.children.item(2).tagName

would make strTag be STRONG - the value of the <STRONG> elements tagName property. As you can see, this is effectively the long-hand version of using document.children(2).property.

If the index property is a string value, then the item method returns a sub-collection, containing a reference to every element in the collection that has its ID or NAME attribute set to the string contained in the index argument. To retrieve certain element objects from this sub-collection, the sub-index argument must be used. For example (getting back to the 5 radio buttons example) assume that 5 elements in the children collection all have the NAME attribute set as radColour. To interrogate the 3rd of these elements, you could use:

strThird=object.children('radColour',2).propertyName

tags
The tags method returns a collection of element objects whose tagName property is the same as the tag argument used for the method. This differs from the item property in that that interrogates ID and NAME values if necessary.

object.children.tags('EM')

would return a collection of all the <EM> element objects that were children of the referenced element object.

© 1995-1998, Stephen Le Hunte


The Elements collection

Note : Both Netscape and Internet Explorer support the Elements collection (Netscape call it an array).

The Elements collection is an ordered, indexed array, containing a reference to every element on a <FORM> object. The collection is ordered by source order i.e. the order that the elements appear in the document. The Elements collection consists of <INPUT>, <SELECT> and <TEXTAREA> elements. (See those topics for details of the elements properties, methods and events.

Elements Objects would normally be retrieved by their index in the Elements collection (for example document.<FORM>reference.elements(3) contains a reference to the 4th element object on the referenced <FORM>), but a string value can be used, as long as that string is a valid identifier (ID attribute value) for an element in the referenced <FORM>.

Properties

length
The length property returns the number of elements in the collection. Note that the length count starts at 1, not 0 as the elements collection index does. Therefore, the length property may return a value of 5, but to access the 3rd element, you'd need to use document.<FORM>reference.elements(2).property

Methods

item
The item method retrieves single items, or sub-collections from the elements collection. It accepts the following arguments:

elements.item(index, sub-index)

If index is a number, then the method returns a reference to the element object at that position in the elements collections index. I.e.

strTag=document.<FORM>reference.elements.item(2).tagName

would make strTag be the tagName property ('INPUT' for <INPUT>, 'SELECT' for <SELECT> etc.) for the third element contained on the <FORM> referenced by <FORM>reference.

If the index property is a string value, then the item method returns a sub-collection, containing a reference to every element in the referenced <FORM> that has its ID or NAME attribute set to the string contained in the index argument. To retrieve certain element objects from this sub-collection, the sub-index argument must be used.

tags
The tags method returns a collection of element objects whose tagName property is the same as the tag argument used for the method. This differs from the item property in that that interrogates ID and NAME values if necessary.

document.<FORM>reference.elements.tags('INPUT')

would return a collection of all the <INPUT> objects in the referenced <FORM>.

© 1995-1998, Stephen Le Hunte


The Embeds collection

Note : Both Netscape and Internet Explorer support the Embeds collection (Netscape call it an array). For properties, methods and events accessible through the Embeds array, see the <EMBED> topic.

The Embeds collection is an ordered, indexed array, containing a reference to every <EMBED> element in the document.

Embed Objects would normally be retrieved by their index in the Embeds collection (for example document.embeds(3) contains a reference to the 4th embedded object in the document), but a string value can be used, as long as that string is a valid identifier (ID attribute value) for an <EMBED> element.

Properties

length
The length property returns the number of elements in the collection. Note that the length count starts at 1, not 0 as the embeds collection index does. Therefore, the length property may return a value of 5, but to access the 3rd element, you'd need to use document.embeds(2).property

Methods

item
The item method retrieves single items, or sub-collections from the embeds collection. It accepts the following arguments:

embeds.item(index, sub-index)

If index is a number, then the method returns a reference to the embed object at that position in the embeds collections index. I.e.

strTag=document.embeds.item(2).pluginSpace

would make the value of strTag be the pluginSpace property (which reflects the PLUGINSPACE attribute) for the third <EMBED> element in the embeds collection.

If the index property is a string value, then the item method returns a sub-collection, containing a reference to every <EMBED> in the document that has its ID or NAME attribute set to the string contained in the index argument. To retrieve certain element objects from this sub-collection, the sub-index argument must be used.

© 1995-1998, Stephen Le Hunte


The Filters collection

Note : The Filters collection is only supported by Internet Explorer 4.0.

The Filters collection is an ordered, indexed array, containing a reference to all filter objects for a particular element. For information about the Visual Filters supported in Internet Explorer 4.0, see the Visual Filters topic.

Filter Objects can be retrieved by their index in the filters collection, or by the names by which they are applied to an element.

E.g.

MyImg.filters.transition.status

would return the current status of the 'transition' filter that has been applied to the element object referenced by 'MyImg'.

Properties

length
The length property returns the number of elements in the collection. Note that the length count starts at 1, not 0 as the filters collection index does. Therefore, the length property may return a value of 5, but to access the 3rd element, you'd need to use element.filters(2).property

Methods

item
The item method retrieves single items, or sub-collections from the filters collection. It accepts the following arguments:

all.item(index, sub-index)

If index is a number, then the method returns a reference to the filter object at that position in the filter collections index, for the referenced element. I.e.

strTag=MyImg.filters.item(2).duration

would make strTag equal the value of the duration property of the 3rd filter applied to the element.

If the index property is a string value, then the item method returns a sub-collection, containing a reference to every filter attached to the element that has the same name as the value of the string that is the index argument. To retrieve certain element objects from this sub-collection, the sub-index argument must be used.

© 1995-1998, Stephen Le Hunte


The Forms collection

Note : Both Netscape and Internet Explorer support the Forms collection (Netscape call it an array). For properties, methods and events that are supported by <FORM> elements, see the <FORM> topic.

The Forms collection is an ordered, indexed (in document source order) array, containing a reference to every <FORM> element in a document.

Discrete form objects would normally be retrieved by their index in the Forms collection (for example document.forms(0) contains a reference to the first <FORM> element in the document), but a string value can be used, as long as that string is a valid identifier (ID or NAME attribute value) for a <FORM> in the document.

E.g.

document.forms('frmFeedback')

or

document.frmFeedback

both identify the same <FORM> in the document. The first method makes scripts easier to read and understand though.

Properties

length
The length property returns the number of forms in the collection (and therefore the document). Note that the length count starts at 1, not 0 as the forms collection index does. Therefore, the length property may return a value of 5, but to access the 4th form, you'd need to use document.forms(3).property

Methods

item
The item method retrieves single items, or sub-collections from the all collection. It accepts the following arguments:

documentforms.item(index, sub-index)

If index is a number, then the method returns a reference to the form object at that position in the forms collections index. I.e.

strTag=document.forms.item(2).action

would make strTag equal to the ACTION attribute of the documents 3rd <FORM> element. As you can see, this is effectively the long-hand version of using document.forms(3).property.

If the index property is a string value, then the item method returns a sub-collection, containing a reference to every element in the document that has its ID or NAME attribute set to the string contained in the index argument. To retrieve certain element objects from this sub-collection, the sub-index argument must be used.

© 1995-1998, Stephen Le Hunte


The Frames collection

Note : Both Netscape and Internet Explorer support the Frames collection (Netscape call it an array). For properties, methods and events that are supported by frame elements, see the <FRAME> and <IFRAME> topics.

The Frames collection is an ordered, indexed (by source order) array, containing a reference to Window Objects. If the document contains a <BODY> element, then the frames collection contains references to the <IFRAME> elements in the document. If the document contains a <FRAMESET> element, then the frame collection is populated with references to <FRAME> elements. (Note : Netscape doesn't support <IFRAME> and so will only populate the frames collection with references to valid <FRAME> elements. Also, <IFRAME> elements that are referenced across frames/windows can only be accessed through the Document Object).

Properties

length
The length property returns the number of frames in the collection. Note that the length count starts at 1, not 0 as the frames collection index does.

Methods

item
The item method retrieves single items, or sub-collections from the all collection. It accepts the following arguments:

all.item(index)

If index is a number, then the method returns a reference to the frame object at that position in the frames collections index. I.e.

bIsScrolling=document.frames.item(2).scrolling

would make bIsScrolling be a boolean value, depending on the value of the SCROLLING attribute of the referenced frame object.

If the index property is a string value, then the item method returns the first valid frame object that has the NAME or ID used as the string contained in the index argument.

© 1995-1998, Stephen Le Hunte


The Images collection

Note : Both Netscape and Internet Explorer support the Images collection (Netscape call it an array). For properties, methods and events that are supported by <IMG> element, see the <IMG> topic.

The Images collection is an ordered, indexed (by document source order) array, containing a reference to every <IMG> element in a document. For example, consider the following document:

Image Objects would normally be retrieved by their index in the Images collection (for example, above document.images(3) contains a reference to the 4th image in the document element), but a string value can be used, as long as that string is a valid identifier (ID or NAME attribute value) for an image element in the document.

Properties

length
The length property returns the number of elements in the collection. Note that the length count starts at 1, not 0 as the images collection index does. Therefore, the length property may return a value of 5, but to access the 3rd element, you'd need to use document.images(2).property

Methods

item
The item method retrieves single items, or sub-collections from the all collection. It accepts the following arguments:

images.item(index, sub-index)

If index is a number, then the method returns a reference to the image object at that position in the images collection index. I.e.

bIsComplete=document.images.item(2).complete

would make bIsComplete be a boolean value dependant on the 3rd <IMG> elements complete property.

If the index property is a string value, then the item method returns a sub-collection, containing a reference to every image in the document that has its ID or NAME attribute set to the string contained in the index argument. To retrieve certain element objects from this sub-collection, the sub-index argument must be used.

© 1995-1998, Stephen Le Hunte


The Imports collection

The Imports collection is Internet Explorer 4.0 specific.

The Imports collection is a collection of all the imported style sheets, defined for the StyleSheet Object. (An imported style sheet is one that has been included in the document using the @import Style Sheet attribute in a <STYLE>. Note that the imports collection can only be accessed through the StyleSheet Object.

<STYLE TYPE="text/css" ID="CSS1">
@import: url (http://www.mysite.com/style/newstyle.css)
@import: url (http://www.mysite.com/style/bigred.css)
@import: url (http://www.mysite.com/style/bigblue.css)
@import: url (http://www.mysite..com/style/crazy.css)
H1 {font-size : 24pt; color : red}
</STYLE>

Referencing:

document.StyleSheets(0).imports(2).href

would return http://www.mysite.com/style/bigblue.css - the location of the third imported stylesheet for the document. (Note the use of the StyleSheets collection to interrogate the imports collection.

Properties

length
The length property returns the number of elements in the collection. Note that the length count starts at 1, not 0 as the imports collection index does.

Methods

item
The item method retrieves single items, or sub-collections from the all collection. It accepts the following arguments:

all.item(index)

For the imports collection, the index argument can only be a number, representing the index of the imported stylesheet of interest.

© 1995-1998, Stephen Le Hunte


The Links collection

Note : Both Internet Explorer and Netscape support the links collection.

The links collection is an ordered, indexed (by source order) array, containing a reference to every <A> and <AREA> elements in a document. Note that <A> elements that contain a NAME attribute (and are therefore Anchors) will be included in the links collection if they also have a HREF attribute (and are therefore both links and anchors). For properties, methods and events supported by <A> and <AREA> elements, see their respective topics.

LInk Objects would normally be retrieved by their index in the links collection (for example, above document.links(3).href would return the HREF property of the 4th link in the document (that may be an <A> or <AREA> element), but a string value can be used, as long as that string is a valid identifier (ID attribute value) for an element in the document.

E.g.

document.links('BigExternalLink').title

returns the value of the TITLE attribute of the link whose ID property is 'BigExternalLink. This would be the same as document.BigExternalLink.title.

Properties

length
The length property returns the number of elements in the collection. Note that the length count starts at 1, not 0 as the links collection index does. Therefore, the length property may return a value of 5, but to access the 3rd element, you'd need to use document.links(2).property

Methods

item
The item method retrieves single items, or sub-collections from the links collection. It accepts the following arguments:

all.item(index, sub-index)

If index is a number, then the method returns a reference to the link object at that position in the link collections index. I.e.

strTag=document.links.item(7).innerHTML

would make strTag equal to the innerHTML property of the documents 8th link.

If the index property is a string value, then the item method returns a sub-collection, containing a reference to every link in the document that has its ID or NAME attribute set to the string contained in the index argument. To retrieve certain element objects from this sub-collection, the sub-index argument must be used.

tags
The tags method returns a collection of link objects whose tagName property is the same as the tag argument used for the method. This differs from the item property in that that interrogates ID and NAME values if necessary.

document.all.tags('AREA')

would return a collection of all the <AREA> element objects in the document and none of the <A> element objects.

© 1995-1998, Stephen Le Hunte


The Options collection

Note : The Options Collection is supported by both Netscape and Internet Explorer.

The Options collection is an ordered, indexed array, containing a reference to every <OPTION> element in a given <SELECT> element. A separate options collection is available for each different <SELECT> element in the document and the options collection can only be referenced through a reference to a valid <SELECT> element object.

Option Objects would normally be retrieved by their index in the options collection. I.e.:

document.<SELECT>reference.options(1).value

returns the VALUE attribute of the second <OPTION> element in the <SELECT> element referenced by <SELECT>reference. For example, consider the following:

<SELECT NAME="Songs">
<OPTION VALUE="BuryLove" ID="BLove">Bury Your Love Like Treasure
<OPTION VALUE="JacketHangs" ID="JHangs">Jacket Hangs
<OPTION VALUE="LoverAndConfidante" ID="Lover">Lover And Confidante
<SELECT>

Calling the following in a script function:

document.Songs.options(1).value

would return JacketHangs.

A string value can be used however, as long as that string is a valid identifier (ID attribute value) for an <OPTION> element in the referenced <SELECT> element in the document.

E.g.

document.Songs.options('Lover').text

would return the Lover And Confidante - the displayed text for the <OPTION> element whose ID attribute is 'Lover'.

Properties

length
The length property returns the number of options in the collection. Note that the length count starts at 1, not 0 as the options collection index does. Therefore, the length property may return a value of 5, but to access the 3rd option in a <SELECT>, you'd need to use document.<SELECT>reference.options(2).property

Methods

add
The add method can be used to add option objects to the collection. Note that the new <OPTION> element must first be created by using the createElement method of the Document Object.

The add method takes the single argument of index which specifies where in the options collection the new element is to be placed. If no index argument is specified, the new option object is appended to the end of the collection.

item
The item method retrieves single items, or sub-collections from an areas collection. It accepts the following arguments:

options.item(index, sub-index)

If index is a number, then the method returns a reference to the <OPTION> at that position in the options collections index. I.e.

strTag=document.<SELECT>reference.options.item(2).value

would make strTag be the value of the VALUE attribute of the <SELECT>'s third <OPTION>. As you can see, this is effectively the long-hand version of using document.<SELECT>reference.options(2).property.

If the index property is a string value, then the item method returns a sub-collection, containing a reference to every option object in the select object that has its NAME or ID attribute set to the string contained in the index argument. To retrieve certain element objects from this sub-collection, the sub-index argument must be used.

remove
The remove method can be used to remove an option object from a select object. For example, using the <SELECT>/<OPTION> set from above, using:

document.Songs.options.remove(1)

would remove the second <OPTION> choice, compressing the options collection. Note that removal of option objects can also be achieved by setting their value property to "" (i.e. null).

© 1995-1998, Stephen Le Hunte


The Plugins collection

Note : The PlugIns collection is supported by both Netscape and Internet Explorer, although their respective support is somewhat different.

For Internet Explorer, the PlugIns collection is essentially an alias for the Embeds collection, while for Netscape, the PlugIns collection represents all the plug-ins currently installed on the client machine.

The properties of the plugins object are :

name
This property details the actual name of the plug-in. For example, on a standard Netscape installation, the plug-in installed to handle files of the audio/wav MIME type is named LiveAudio
filename
This returns the exact file name of the particular referenced plug-in module.
description
Contains a description of the plug-in module referenced. For example, the description of the LiveAudio plug-in is "LiveAudio - Netscape Navigator sound playing component".
length
This returns the total length of the plug-ins array. I.e. the number of plug-ins the user has installed and available for use.

As an example, the following code section checks to see whether the user has the Live3D plug-in available and if so, displays a VRML world, giving a notice if the plug-in isn't available :

var vVRMLallowed = navigator.plugins["Live3D Plugin DLL"]
if (vVRMLallowed)
document.writeln("Click <A HREF='htmlib.wrl'>here</A> to see a Virtual world"
else
document.writeln("Too bad, can't show you any virtual worlds.")

Note : It is possible to reference plugins by their name property.

© 1995-1998, Stephen Le Hunte


The Rows collection

Note : The Rows collection is Internet Explorer 4.0 specific. For properties, methods and events that are supported by <TR> element, see its topic.

The Rows collection is an ordered, indexed array, containing a reference to every row in contained in the <THEAD>, <TBODY> and <TFOOT> sections of a referenced <TABLE> element. This is a collection containing <TR> elements. Note that the Rows Collection for each <THEAD>, <TBODY>, <TFOOT> and the main <TABLE> element are subtly different. Each <TR> element that specifies a Row in the Rows Collection will have a reference in one of the Rows Collections for either the <THEAD>, <TBODY>, or <TFOOT> elements and a reference in the Rows Collection of the main <TABLE> element.

Rows Objects would normally be retrieved by their index in the Rows collection (for example document.MyTable.rows(3) contains a reference to the 4th row in the table referenced by the MyTable reference (this could be the <TABLE>'s ID attribute), but a string value can be used, as long as that string is a valid identifier (ID attribute value) for a <TABLE> element in the document.

E.g.

document.MyTable.rows('MySecondRow').bgColor

...would return the value of the BGCOLOR attribute for the <TR> element whose ID property is MySecondRow, contained in the <TABLE> element referenced by MyTable

Properties

length
The length property returns the number of <TR> elements in the collection. Note that the length count starts at 1, not 0 as the rows collection index does. Therefore, the length property may return a value of 5, but to access the 3rd row, you'd need to use document.MyTable.rows(2).property

Methods

item
The item method retrieves single items, or sub-collections from the rows collection. It accepts the following arguments:

<TABLE>reference.item(index, sub-index)

If index is a number, then the method returns a reference to the row object at that position in the row collections index.

If the index argument is a string value, then the item method returns a sub-collection, containing a reference to every row in the table that has its ID or NAME attribute set to the string contained in the index argument. To retrieve certain element objects from this sub-collection, the sub-index argument must be used.

© 1995-1998, Stephen Le Hunte


The Rules collection

Note : The Rules collection is Internet Explorer 4.0 specific. As Netscape doesn't support dynamic style sheets, it doesn't support the Rules collection.

The Rules collection returns an indexed array of all the style rules in a referenced StyleSheet object. These are the style declarations for elements, classes, ids etc., set in the style sheet. The Rules collection is populated with references to style sheet rules regardless of whether or not the referenced style sheet is disabled, although any scripting changes to the rules will only become visible if the referenced style sheet is enabled. Any style sheets linked via the @import method will have their rules expanded in-place inside the rules collection.

Note that individual rules can only be added to a rules collection, by using the addRule method of the StyleSheet object.

Properties

length
The length property returns the number of rules in the collection. Note that the length count starts at 1, not 0 as the rules collection index does. Therefore, the length property may return a value of 5, but to access the 3rd rule, you'd need to use object.rules(2).property

© 1995-1998, Stephen Le Hunte


The Scripts collection

Note : The Scripts collection is Internet Explorer 4.0 specific. The <SCRIPT> element supports the standard Internet Explorer 4.0 attributes of CLASS, ID, TITLE, as well as its own SRC, LANGUAGE, FOR and EVENT attributes (and Dynamic HTML properties of the same names and other standard Dynamic HTML properties and methods.

The Scripts collection is an ordered, indexed (by order in the source) array, containing a reference to every <SCRIPT> element in a document.

Script Objects would normally be retrieved by their index in the All collection (for example, above document.scripts(3) contains a reference to the third <SCRIPT> element in the document), but a string value can be used, as long as that string is a valid identifier (ID attribute value) for a <SCRIPT> element in the document.

E.g., consider the following to be the second <SCRIPT> element in the document

<SCRIPT LANGUAGE="VBScript" ID="HelloScript">
msgbox "Hello"
</SCRIPT>

both:

document.scripts(1).language

and

document.scripts("HelloScript").language

would return "VBScript" as they both reference the same script.

Properties

length
The length property returns the number of <SCRIPT> elements in the collection. Note that the length count starts at 1, not 0 as the scripts collection index does. Therefore, the length property may return a value of 5, but to access the 3rd element, you'd need to use document.scripts(2).property

Methods

item
The item method retrieves single items, or sub-collections from the scripts collection. It accepts the following arguments:

scripts.item(index, sub-index)

If index is a number, then the method returns a reference to the <SCRIPT> element object at that position in the scripts collections index.

If the index property is a string value, then the item method returns a sub-collection, containing a reference to every element in the document that has its ID or NAME attribute set to the string contained in the index argument (Note that if you are using ID attributes only to uniquely identify scripts, then the sub-collection will only contain the one item). To retrieve certain element objects from this sub-collection, the sub-index argument must be used.

© 1995-1998, Stephen Le Hunte


The StyleSheets collection

Note : The StyleSheets collection is Internet Explorer 4.0 specific. For properties of Style Sheets, see the StyleSheet Object topic.

The StyleSheets collection is an ordered, indexed (by order in the source) array, containing a reference to every Style Sheet object in the document. I.e. a collection of <LINK> and/or <STYLE> element.

StyleSheet Objects would normally be retrieved by their index in the StyleSheets collection (for example document.StyleSheets(1) contains a reference to the second stylesheet (which maybe from a <LINK> or <STYLE> element), but a string value can be used, as long as that string is a valid identifier (ID attribute value) for a stylesheet element in the document.

Properties

length
The length property returns the number of stylesheet objects in the collection. Note that the length count starts at 1, not 0 as the stylesheets collection index does. Therefore, the length property may return a value of 5, but to access the 3rd element, you'd need to use document.stylesheets(2).property

Methods

item
The item method retrieves single items, or sub-collections from the StyleSheets collection. It accepts the following arguments:

all.item(index, sub-index)

If index is a number, then the method returns a reference to the stylesheet object at that position in the stylesheets collections index.

If the index property is a string value, then the item method returns a sub-collection, containing a reference to every stylesheet in the document that has its ID or NAME attribute set to the string contained in the index argument. To retrieve certain stylesheet objects from this sub-collection, the sub-index argument must be used.

© 1995-1998, Stephen Le Hunte


The Tbodies collection

Note : The Tbodies collection is Internet Explorer 4.0 specific. As Netscape doesn't support the <TBODY> element, it doesn't support the Tbodies collection.

The Tbodies collection returns a collection of <TBODY> elements for a referenced <TABLE>. Note that Internet Explorer 4.0 inserts <TBODY> elements (for the All collection) whether they have been used in <TABLE> elements or not.

For example:

intRows=document.all.TABLE1.tbodies(0).rows.length

would make intRows the number of Rows in the referenced <TABLE> elements first <TBODY> section.

Properties

length
The length property returns the number of elements in the collection. Note that the length count starts at 1, not 0 as the tbodies collection index does.

Methods

item
The item method retrieves single items, or sub-collections from the tbodies collection. It accepts the following arguments:

...tbodies.item(index, sub-index)

If index is a number, then the method returns a reference to the <TBODY> element object at that position in the tbodies collection, for the referenced <TABLE>.

If the index property is a string value, then the item method returns a sub-collection, containing a reference to every <TBODY> element in the collection that has its ID or NAME attribute set to the string contained in the index argument. To retrieve certain element objects from this sub-collection, the sub-index argument must be used.

tags
The tags method returns a collection of <TBODY> element objects whose tagName property is the same as the tag argument used for the method. This differs from the item property in that that interrogates ID and NAME values if necessary.

© 1995-1998, Stephen Le Hunte


HTML Comparison Table

The HTMLib Comparison Table now uses Data Binding for its display. Hence, it's been split into 4 separate sections.

The table is split alphabetically, according to the HTML element. The sections are:

<A> - <EMBED>
<FIELDSET> - <ISINDEX>
<KBD> - <SELECT>
<SMALL> - <XMP>
Loading Data
The Comparison Table
The Comparison Table
The Comparison Table
The Comparison Table

NOTE : All elements that can be used within the <BODY> of a HTML document can take the CLASS, ID, LANG, LANGUAGE, STYLE and TITLE attributes as well as those listed below. They have not been added for reasons of brevity and clarity. Their browser support is as follows:

CLASS | Y from v3.0 | Y from v4.0 | 4.0
ID | Y from v3.0 | Y from v4.0 | 4.0
LANG | Y from v4.0 |  | 4.0
LANGUAGE | Y from v4.0 |  | 4.0
STYLE | Y from v3.0 | Y from v4.0 | 4.0
TITLE | Y from v4.0 |  | 4.0

NOTE : The browsers compared for this table were:
Internet Explorer :Windows 98/95/NT(4) version 4.01
Netscape :Windows 98/95/NT(4) version 4.04
Mosaic :Windows 95 version 3.0
A note about the 'Specification' column
For this column, I have tried to detail either which specification covers the element, or which version of which browser introduced the element or attribute. This required trailing through release documentation provided by the respective browser vendors, which up until recently has not been of the highest quality (in terms of completeness). Some entries may be wrong.
Where an element/attribute that was introduced by a browser and subsequently added to a HTML specification, only the specification is given.
HTML 4.0 is currently still in its draft specification stages, although is reaching stability, so has been quoted as 'HTML 4.0' instead of Cougar (it's original code name). The browser name abbreviations are as follows :
NS : Netscape
IEx : Internet Explorer
Mos : Mosaic

Where a '?' is put in the comparison box, it means that the attribute is claimed to be supported, but on testing, it didn't appear to be so.

© 1995-1998, Stephen Le Hunte


The HTMLib gadgets

The HTMLib (since version 2.2) has included an extra application, called the 'Colour Wizard'. For this all-new HTML based HTMLib, the Colour Wizard was going to come in three different guises - however, the Java applet and the ActiveX control didn't behave themselves properly in Internet Explorer 4.0, so were removed. If/when ever they get fixed, they'll be posted at the HTMLib Web Site. For now, enjoy the Activated Colour Wizard

Note : The Activated Colour Wizard requires the Microsoft Forms 2.0 controls to be installed. The Colour Wizard will attempt to download these automatically, but this may take a while. If you don't have these controls installed, it's recommended that you download the ActiveX Control Pad from Microsoft before continuing.

© 1995-1998, Stephen Le Hunte


The Activated Colour Wizard
Sample HTML page

This is the HTML sample page, the <BODY> attributes of which will change to reflect the colour choices of the Colour Wizard above.

So that you can see the changes in link colourings, here is a link to the ActiveX info topic. Also, here is a visited link and an example active link.

Here is some more text, this is how the text in your document would look. Here is another link, here is another example active link and here is another visited link.

The Activated Colour Wizard control is © 1996-1998, Stephen Le Hunte and may not be re-distributed in any way without first contacting the author.


BLANK - used for compiled HTMLib

Whoops!

The HTMLib content has been designed to be viewed through the HTMLib content viewer only. A Start Menu icon/entry should have been created during the installation process. Please use the viewer for viewing the content


<A ...> Syntax

<A HREF="link_destination"
 NAME="URL_fragment"
TITLE="Title_of_destination"
REL="Forward_relationship"
REV="Reverse_relationship"
URN="Uniform_Resource_Name"
METHODS="Function_information"
TARGET="Name_of_target_window_or_frameset"
ACCESSKEY="Shortcut_setting"
LANG="Document language"
LANGUAGE="Script_language"
INDEXSTRING="NetHelp_index_keyword"
TOCSTRING="NetHelp_contents_entry"
CLASS="className"
ID="unique_id"
STYLE="style_setting"
DATAFLD="Column name"
DATASRC="Data Source"
 >


<A...>
Related Topics Anchor Syntax Anchor Scripting


<A ...> Scripting

Besides the Standard Dynamic HTML properties, methods & events, <A...> supports:
Properties | Methods | Events
accessKey | blur | onblur
dataFld | focus | onfocus
dataSrc |  |
hash |  |
host |  |
hostname |  |
href |  |
Methods |  |
name |  |
pathname |  |
port |  |
protocol |  |
rel |  |
rev |  |
search |  |
target |  |
urn |  |


<ADDRESS>


<ADDRESS ...> Scripting

The <ADDRESS> element supports all of the standard Dynamic HTML Properties, Methods and Events.


<ADDRESS ...> Syntax

<ADDRESS...
CLASS="Style Sheet class"
ID="Style Sheet/scripting identifier"
LANG="Language"
LANGUAGE="Scripting language"
STYLE="In line styling"
TITLE="Informational ToolTip"
 >


<BLOCKQUOTE>
Related Topics <BLOCKQUOTE> syntax <BLOCKQUOTE> Scripting


<BLOCKQUOTE ...> Syntax

<BLOCKQUOTE...
CLASS="Style Sheet class"
ID="Style Sheet/scripting identifier"
LANG="Language"
LANGUAGE="Scripting language"
STYLE="In line styling"
TITLE="Informational ToolTip"
 >


<BLOCKQUOTE...> Scripting

The <BLOCKQUOTE> element supports all of the standard Dynamic HTML Properties, Methods and Events.


<CENTER ...> Syntax

<CENTER...
CLASS="Style Sheet class"
ID="Style Sheet/scripting identifier"
LANG="Language"
LANGUAGE="Scripting language"
STYLE="In line styling"
TITLE="Informational ToolTip"
 >


<CENTER>


<CENTER...> Scripting

The <CENTER> element supports all of the standard Dynamic HTML Properties, Methods and Events.


<DIV ...> Scripting
Besides the Standard Dynamic HTML properties, methods & events, <DIV...> supports:
Properties | Methods | Events
align | blur | onblur
clientHeight | focus | onfocus
clientWidth |  |
dataFld |  |
dataFormatAs |  |
dataSrc |  |
scrollHeight |  |
scrollLeft |  |
scrollTop |  |
scrollWidth |  |


<DIV ...> Syntax

<DIV...
ALIGN="Alignment"
CLASS="Style Sheet class"
DATAFLD="Column Name"
DATAFORMATAS="Text|HTML"
DATASRC="Data Source"
ID="Style Sheet/scripting identifier"
LANG="Language"
LANGUAGE="Scripting language"
STYLE="In line styling"
TITLE="Informational ToolTip"
 >


<DIV>
Related Topics <DIV> syntax <DIV> Scripting


<FIELDSET>
Related Topics <FIELDSET> syntax <FIELDSET> Scripting


<FIELDSET ...> Scripting
Besides the Standard Dynamic HTML properties, methods & events, <FIELDSET...> supports:
Properties | Methods | Events
clientHeight | blur | onblur
clientWidth | focus | onfocus
scrollHeight |  |
scrollLeft |  |
scrollTop |  |
scrollWidth |  |


<FIELDSET ...> Syntax

<FIELDSET...
CLASS="Style Sheet class"
ID="Style Sheet/scripting identifier"
LANG="Language"
LANGUAGE="Scripting language"
STYLE="In line styling"
TITLE="Informational ToolTip"
 >


<Hx>

<Hx> - Headings


<Hx ...> Syntax

<Hx...
ALIGN="Heading alignment"
CLASS="Style Sheet class"
ID="Style Sheet/scripting identifier"
LANG="Language"
LANGUAGE="Scripting language"
STYLE="In line styling"
TITLE="Informational ToolTip"
 >


<Hx...> Scripting

The <Hx> element supports all of the standard Dynamic HTML Properties, Methods and Events.

Additionally, the <Hx> elements support the align property.


<LAYER ...> Syntax

<LAYER
ABOVE="layer_name"
BACKGROUND="file_name.gif"
BELOW="layer_name"
BGCOLOR="#rrggbb|Colour Name"
CLIP="left, top, right, bottom"
LEFT="pixel_value"
NAME="Unique_identifier"
SRC="content_reference"
TOP="pixel_value"
VISIBILITY="show|hide|inherit"
WIDTH="pixel_value"
Z-INDEX="number"
>


<LAYER>
Related Topics <LAYER...> Syntax


<LEGEND ...> Scripting
Besides the Standard Dynamic HTML properties, methods & events, <LEGEND...> supports:
Properties | Methods | Events
clientHeight | blur | onblur
clientWidth | focus | onfocus
scrollHeight |  |
scrollLeft |  |
scrollTop |  |
scrollWidth |  |


<LEGEND ...> Syntax

<LEGEND...
ALIGN="Alignment"
CLASS="Style Sheet class"
ID="Style Sheet/scripting identifier"
LANG="Language"
LANGUAGE="Scripting language"
STYLE="In line styling"
TITLE="Informational ToolTip"
 >


<LEGEND>
Related Topics <LEGEND> syntax <LEGEND> Scripting


<LISTING>


<LISTING ...> Syntax

<LISTING...
CLASS="Style Sheet class"
ID="Style Sheet/scripting identifier"
LANG="Language"
LANGUAGE="Scripting language"
STYLE="In line styling"
TITLE="Informational ToolTip"
 >


<LISTING...> Scripting

The <LISTING> element supports all of the standard Dynamic HTML Properties, Methods and Events.


<MARQUEE ...> Scripting

Besides the Standard Dynamic HTML properties, methods & events, <MARQUEE...> supports:
Properties | Methods | Events
behavior | blur | onblur
bgColor | focus | onbounce
clientHeight | start | onfinish
clientWidth | stop | onfocus
dataFld |  | onresize
dataFormatAs |  | onscroll
dataSrc |  | onstart
direction |  |
height |  |
hspace |  |
loop |  |
scrollAmount |  |
scrollDelay |  |
scrollHeight |  |
scrollLeft |  |
scrollTop |  |
scrollWidth |  |
trueSpeed |  |
vspace |  |
width |  |


<MARQUEE ...> Syntax

<MARQUEE
ALIGN="left|right|top|middle|bottom"
BEHAVIOR="scroll|slide|alternate"
BGCOLOR="#rrggbb|colour name"
CLASS="Style sheet class"
DATAFLD="Data column name"
DATAFORMATAS="HTML|text"
DATASRC="Data source"
DIRECTION="left|right"
HEIGHT="value|value%"
ID="Style sheet/Scripting identifier"
HSPACE="value"
LANG="Language identifier"
LANGUAGE="Scripting language"
LOOP="value|-1|infinite"
SCROLLAMOUNT="value"
SCROLLDELAY="value"
STYLE="In line styling"
TITLE="Informational ToolTip"
TRUESPEED="Speed flag"
VSPACE="value"
WIDTH="value|value%"
>


<MARQUEE>
Related Topics <MARQUEE> syntax <MARQUEE> Scripting


<MULTICOL ...> Syntax

<MULTICOL...
COLS="Number of columns"
GUTTER="White space size"
WIDTH="Width of layout"
 >


<MULTICOL>
<MULTICOL> syntax


Block Formatting Elements


<P ...> Syntax

<P...
ALIGN="Heading alignment"
CLASS="Style Sheet class"
ID="Style Sheet/scripting identifier"
LANG="Language"
LANGUAGE="Scripting language"
STYLE="In line styling"
TITLE="Informational ToolTip"
 >


<P...> Scripting

The <P> element supports all of the standard Dynamic HTML Properties, Methods and Events.

Additionally, the <P> element supports the align property.


<P>


<PLAINTEXT ...> Syntax

<PLAINTEXT...
CLASS="Style Sheet class"
ID="Style Sheet/scripting identifier"
LANG="Language"
LANGUAGE="Scripting language"
STYLE="In line styling"
TITLE="Informational ToolTip"
 >


<PLAINTEXT ...> Scripting

The <PLAINTEXT> element supports all of the standard Dynamic HTML Properties, Methods and Events.


<PLAINTEXT>


<PRE ...> Syntax

<PRE...
CLASS="Style Sheet class"
ID="Style Sheet/scripting identifier"
LANG="Language"
LANGUAGE="Scripting language"
STYLE="In line styling"
TITLE="Informational ToolTip"
WIDTH="font pitch width"
 >


<PRE ...> Scripting

The <PRE> element supports all of the standard Dynamic HTML Properties, Methods and Events.

Additionally, the <PRE> element supports the width property.


<PRE>


<XMP ...> Syntax

<XMP...
CLASS="Style Sheet class"
ID="Style Sheet/scripting identifier"
LANG="Language"
LANGUAGE="Scripting language"
STYLE="In line styling"
TITLE="Informational ToolTip"
 >


<XMP ...> Scripting

The <XMP> element supports all of the standard Dynamic HTML Properties, Methods and Events.


<XMP>


Character Entity Reference

Character Entity References


Control Characters


Character Data


Special Characters


HTMLElementsAttributes,InternetExplorer,Netscape,Mosaic,Specification
<A HREF='../anchor/anchor.htm' TITLE='View the &lt;A&gt; element topic'><CODE>&lt;A&gt;</CODE></A>,../images/tick.gif,../images/tick.gif,../images/tick.gif,1.0
&nbsp;&nbsp;ACCESSKEY,../images/tick.gif,../images/notick.gif,../images/notick.gif,4.0
&nbsp;&nbsp;DATAFLD,../images/tick.gif,../images/notick.gif,../images/notick.gif,IEx 4.0
&nbsp;&nbsp;DATASRC,../images/tick.gif,../images/notick.gif,../images/notick.gif,IEx 4.0
&nbsp;&nbsp;HREF,../images/tick.gif,../images/tick.gif,../images/tick.gif,2.0
&nbsp;&nbsp;INDEXSTRING,../images/notick.gif,../images/tick.gif,../images/notick.gif,NS 4.0
&nbsp;&nbsp;METHODS,../images/qmark.gif,../images/qmark.gif,../images/qmark.gif,2.0
&nbsp;&nbsp;NAME,../images/tick.gif,../images/tick.gif,../images/tick.gif,2.0
&nbsp;&nbsp;REL,../images/qmark.gif,../images/qmark.gif,../images/qmark.gif,2.0
&nbsp;&nbsp;REV,../images/qmark.gif,../images/qmark.gif,../images/qmark.gif,2.0
&nbsp;&nbsp;TARGET,../images/tick.gif,../images/tick.gif,../images/notick.gif,4.0
&nbsp;&nbsp;TOCSTRING,../images/notick.gif,../images/tick.gif,../images/notick.gif,NS 4.0
&nbsp;&nbsp;URN,../images/qmark.gif,../images/qmark.gif,../images/qmark.gif,2.0
<A HREF='../infochar/acr.htm' TITLE='View the &lt;ACRONYM&gt; element topic'><CODE>&lt;ACRONYM&gt;</CODE></A>,../images/tick.gif,../images/notick.gif,../images/notick.gif,4.0
<A HREF='../block/address.htm' TITLE='View the &lt;ADDRESS&gt; element topic'><CODE>&lt;ADDRESS&gt;</CODE></A>,../images/tick.gif,../images/tick.gif,../images/tick.gif,2.0
<A HREF='../img/applet.htm' TITLE='View the &lt;APPLET&gt; element topic'><CODE>&lt;APPLET&gt;</CODE></A>,../images/tick.gif,../images/tick.gif,../images/notick.gif,3.2
&nbsp;&nbsp;ALIGN,../images/tick.gif,../images/tick.gif,../images/notick.gif,3.2/NS 2.0
&nbsp;&nbsp;ALT,../images/tick.gif,../images/tick.gif,../images/notick.gif,3.2/NS 2.0
&nbsp;&nbsp;ARCHIVE,../images/notick.gif,../images/tick.gif,../images/notick.gif,3.2/NS 3.0
&nbsp;&nbsp;CODE,../images/tick.gif,../images/tick.gif,../images/notick.gif,3.2/NS 2.0
&nbsp;&nbsp;CODEBASE,../images/tick.gif,../images/tick.gif,../images/notick.gif,3.2/NS 2.0
&nbsp;&nbsp;DATAFLD,../images/tick.gif,../images/notick.gif,../images/notick.gif,IEx 4.0
&nbsp;&nbsp;DATASRC,../images/tick.gif,../images/notick.gif,../images/notick.gif,IEx 4.0
&nbsp;&nbsp;HEIGHT,../images/tick.gif,../images/tick.gif,../images/notick.gif,3.2/NS 2.0
&nbsp;&nbsp;HSPACE,../images/tick.gif,../images/tick.gif,../images/notick.gif,3.2/NS 2.0
&nbsp;&nbsp;MAYSCRIPT,../images/notick.gif,../images/tick.gif,../images/notick.gif,NS 3.0
&nbsp;&nbsp;NAME,../images/tick.gif,../images/tick.gif,../images/notick.gif,3.2/NS 2.0
&nbsp;&nbsp;SRC,../images/tick.gif,../images/tick.gif,../images/notick.gif,3.2/NS 2.0
&nbsp;&nbsp;WIDTH,../images/tick.gif,../images/tick.gif,../images/notick.gif,3.2/NS 2.0
<A HREF='../img/csim.htm' TITLE='View the Client Side Image Maps topic'><CODE>&lt;AREA&gt;</CODE></A>,../images/tick.gif,../images/tick.gif,../images/tick.gif,3.2
&nbsp;&nbsp;ALT,../images/tick.gif,../images/tick.gif,../images/tick.gif,3.2/IEx 2.0
&nbsp;&nbsp;COORDS,../images/tick.gif,../images/tick.gif,../images/tick.gif,3.2/IEx 2.0
&nbsp;&nbsp;HREF,../images/tick.gif,../images/tick.gif,../images/tick.gif,3.2/IEx 2.0
&nbsp;&nbsp;NAME,../images/tick.gif,../images/tick.gif,../images/notick.gif,3.2/IEx 2.0
&nbsp;&nbsp;SHAPE,../images/tick.gif,../images/tick.gif,../images/tick.gif,3.2/IEx 2.0
&nbsp;&nbsp;TARGET,../images/tick.gif,../images/tick.gif,../images/notick.gif,3.2/IEx 2.0
<A HREF='../infochar/bold.htm' TITLE='View the &lt;B&gt; topic'><CODE>&lt;B&gt;</CODE></A>,../images/tick.gif,../images/tick.gif,../images/tick.gif,3.2
<A HREF='../docstr/base.htm' TITLE='View the &lt;BASE&gt; topic'><CODE>&lt;BASE&gt;</CODE></A>,../images/tick.gif,../images/tick.gif,../images/tick.gif,3.2
&nbsp;&nbsp;HREF,../images/tick.gif,../images/tick.gif,../images/notick.gif,2.0
&nbsp;&nbsp;TARGET,../images/tick.gif,../images/tick.gif,../images/notick.gif,2.0/NS 2.0
<A HREF='../docstr/basef.htm' TITLE='View the &lt;BASEFONT&gt; topic'><CODE>&lt;BASEFONT&gt;</CODE></A>,../images/tick.gif,../images/tick.gif,../images/notick.gif,4.0
&nbsp;&nbsp;COLOR,../images/tick.gif,../images/tick.gif,../images/notick.gif,4.0
&nbsp;&nbsp;FACE,../images/tick.gif,../images/notick.gif,../images/notick.gif,4.0/IEx 2.0
&nbsp;&nbsp;SIZE,../images/tick.gif,../images/tick.gif,../images/notick.gif,4.0
<A HREF='../img/bgsound.htm' TITLE='View the &lt;BGSOUND&gt; topic'><CODE>&lt;BGSOUND&gt;</CODE></A>,../images/tick.gif,../images/notick.gif,../images/tick.gif,IEx 2.0
&nbsp;&nbsp;BALANCE,../images/tick.gif,../images/notick.gif,../images/notick.gif,IEx 4.0
&nbsp;&nbsp;LOOP,../images/tick.gif,../images/notick.gif,../images/notick.gif,IEx 2.0
&nbsp;&nbsp;SRC,../images/tick.gif,../images/notick.gif,../images/notick.gif,IEx 2.0
&nbsp;&nbsp;VOLUME,../images/tick.gif,../images/notick.gif,../images/notick.gif,IEx 2.0
<A HREF='../infochar/big.htm' TITLE='View the &lt;BIG&gt; topic'><CODE>&lt;BIG&gt;</CODE></A>,../images/tick.gif,../images/tick.gif,../images/tick.gif,3.2
<A HREF='../block/blockq.htm' TITLE='View the &lt;BLOCKQUOTE&gt; topic'><CODE>&lt;BLOCKQUOTE&gt;</CODE></A>,../images/tick.gif,../images/tick.gif,../images/tick.gif,2.0
<A HREF='../docstr/body.htm' TITLE='View the &lt;BODY&gt; topic'><CODE>&lt;BODY&gt;</CODE></A>,../images/tick.gif,../images/tick.gif,../images/tick.gif,2.0
&nbsp;&nbsp;ALINK,../images/tick.gif,../images/tick.gif,../images/notick.gif,3.2
&nbsp;&nbsp;BACKGROUND,../images/tick.gif,../images/tick.gif,../images/notick.gif,3.2
&nbsp;&nbsp;BGCOLOR,../images/tick.gif,../images/tick.gif,../images/notick.gif,3.2
&nbsp;&nbsp;BGPROPERTIES,../images/tick.gif,../images/notick.gif,../images/notick.gif,IEx 2.0
&nbsp;&nbsp;BOTTOMMARGIN,../images/tick.gif,../images/notick.gif,../images/notick.gif,IEx 4.0
&nbsp;&nbsp;LEFTMARGIN,../images/tick.gif,../images/notick.gif,../images/notick.gif,IEx 4.0
&nbsp;&nbsp;LINK,../images/tick.gif,../images/tick.gif,../images/notick.gif,3.2
&nbsp;&nbsp;RIGHTMARGIN,../images/tick.gif,../images/notick.gif,../images/notick.gif,IEx 4.0
&nbsp;&nbsp;SCROLL,../images/tick.gif,../images/notick.gif,../images/notick.gif,IEx 4.0
&nbsp;&nbsp;TEXT,../images/tick.gif,../images/tick.gif,../images/notick.gif,3.2
&nbsp;&nbsp;TOPMARGIN,../images/tick.gif,../images/notick.gif,../images/notick.gif,IEx 4.0
&nbsp;&nbsp;VLINK,../images/tick.gif,../images/tick.gif,../images/notick.gif,3.2
<A HREF='../whitesp/br.htm' TITLE='View the &lt;BR&gt; topic'><CODE>&lt;BR&gt;</CODE></A>,../images/tick.gif,../images/tick.gif,../images/tick.gif,2.0
&nbsp;&nbsp;CLEAR,../images/tick.gif,../images/tick.gif,../images/tick.gif,3.2
<A HREF='../infochar/but.htm' TITLE='View the &lt;BUTTON&gt; topic'><CODE>&lt;BUTTON&gt;</CODE></A>,../images/tick.gif,../images/notick.gif,../images/notick.gif,4.0
&nbsp;&nbsp;ACCESSKEY,../images/tick.gif,../images/notick.gif,../images/notick.gif,4.0
&nbsp;&nbsp;DATAFLD,../images/tick.gif,../images/notick.gif,../images/notick.gif,IEx 4.0
&nbsp;&nbsp;DATAFORMATAS,../images/tick.gif,../images/notick.gif,../images/notick.gif,IEx 4.0
&nbsp;&nbsp;DATASRC,../images/tick.gif,../images/notick.gif,../images/notick.gif,IEx 4.0
&nbsp;&nbsp;DISABLED,../images/tick.gif,../images/notick.gif,../images/notick.gif,4.0
&nbsp;&nbsp;TYPE,../images/tick.gif,../images/notick.gif,../images/notick.gif,4.0
<A HREF='../tables/caption.htm' TITLE='View the &lt;CAPTION&gt; topic'><CODE>&lt;CAPTION&gt;</CODE></A>,../images/tick.gif,../images/tick.gif,../images/tick.gif,3.2
&nbsp;&nbsp;ALIGN,../images/tick.gif,../images/tick.gif,../images/notick.gif,3.2
&nbsp;&nbsp;VALIGN,../images/tick.gif,../images/tick.gif,../images/notick.gif,4.0/IEx 2.0
<A HREF='../block/center.htm' TITLE='View the &lt;BIG&gt; topic'><CODE>&lt;BIG&gt;</CODE></A>,../images/tick.gif,../images/tick.gif,../images/tick.gif,3.2
<A HREF='../infochar/cite.htm' TITLE='View the &lt;CITE&gt; topic'><CODE>&lt;CITE&gt;</CODE></A>,../images/tick.gif,../images/tick.gif,../images/tick.gif,2.0
<A HREF='../infochar/code.htm' TITLE='View the &lt;CODE&gt; topic'><CODE>&lt;CODE&gt;</CODE></A>,../images/tick.gif,../images/tick.gif,../images/tick.gif,2.0
<A HREF='../tables/col.htm' TITLE='View the &lt;COL&gt; topic'><CODE>&lt;COL&gt;</CODE></A>,../images/tick.gif,../images/tick.gif,../images/tick.gif,4.0
&nbsp;&nbsp;ALIGN,../images/tick.gif,../images/notick.gif,../images/notick.gif,4.0
&nbsp;&nbsp;VALIGN,../images/tick.gif,../images/notick.gif,../images/notick.gif,4.0
<A HREF='../tables/colg.htm' TITLE='View the &lt;COLGROUP&gt; topic'><CODE>&lt;COLGROUP&gt;</CODE></A>,../images/tick.gif,../images/tick.gif,../images/tick.gif,4.0
&nbsp;&nbsp;ALIGN,../images/tick.gif,../images/notick.gif,../images/notick.gif,4.0
&nbsp;&nbsp;SPAN,../images/tick.gif,../images/notick.gif,../images/notick.gif,4.0
&nbsp;&nbsp;VALIGN,../images/tick.gif,../images/notick.gif,../images/notick.gif,4.0
&nbsp;&nbsp;WIDTH,../images/tick.gif,../images/notick.gif,../images/notick.gif,4.0
<A HREF='../infochar/comm.htm' TITLE='View the &lt;COMMENT&gt; topic'><CODE>&lt;COMMENT&gt;</CODE></A>,../images/tick.gif,../images/tick.gif,../images/tick.gif,4.0
<A HREF='../list/dl.htm' TITLE='View the &lt;DL&gt; topic'><CODE>&lt;DD&gt;</CODE></A>,../images/tick.gif,../images/tick.gif,../images/tick.gif,2.0
<A HREF='../infochar/del.htm' TITLE='View the &lt;DEL&gt; topic'><CODE>&lt;DEL&gt;</CODE></A>,../images/tick.gif,../images/notick.gif,../images/notick.gif,4.0
&nbsp;&nbsp;CITE,../images/tick.gif,../images/notick.gif,../images/notick.gif,4.0
&nbsp;&nbsp;DATETIME,../images/tick.gif,../images/notick.gif,../images/notick.gif,4.0
<A HREF='../infochar/dfn.htm' TITLE='View the &lt;DFN&gt; topic'><CODE>&lt;DFN&gt;</CODE></A>,../images/tick.gif,../images/notick.gif,../images/notick.gif,3.2
<A HREF='../list/dir.htm' TITLE='View the &lt;DIR&gt; topic'><CODE>&lt;DIR&gt;</CODE></A>,../images/tick.gif,../images/tick.gif,../images/tick.gif,2.0
<A HREF='../block/div.htm' TITLE='View the &lt;DIV&gt; topic'><CODE>&lt;DIV&gt;</CODE></A>,../images/tick.gif,../images/tick.gif,../images/notick.gif,3.2
&nbsp;&nbsp;ALIGN,../images/tick.gif,../images/tick.gif,../images/notick.gif,3.2
&nbsp;&nbsp;DATAFLD,../images/tick.gif,../images/notick.gif,../images/notick.gif,IEx 4.0
&nbsp;&nbsp;DATAFORMATAS,../images/tick.gif,../images/notick.gif,../images/notick.gif,IEx 4.0
&nbsp;&nbsp;DATASRC,../images/tick.gif,../images/notick.gif,../images/notick.gif,IEx 4.0
&nbsp;&nbsp;COMPACT,../images/tick.gif,../images/tick.gif,../images/notick.gif,3.2
<A HREF='../list/dl.htm' TITLE='View the &lt;DL&gt; topic'><CODE>&lt;DT&gt;</CODE></A>,../images/tick.gif,../images/tick.gif,../images/tick.gif,2.0
<A HREF='../infochar/em.htm' TITLE='View the &lt;EM&gt; topic'><CODE>&lt;EM&gt;</CODE></A>,../images/tick.gif,../images/tick.gif,../images/tick.gif,2.0
<A HREF='../img/embed.htm' TITLE='View the &lt;EMBED&gt; topic'><CODE>&lt;EMBED&gt;</CODE></A>,../images/tick.gif,../images/tick.gif,../images/notick.gif,3.2
&nbsp;&nbsp;ALIGN,../images/tick.gif,../images/tick.gif,../images/notick.gif,3.2
&nbsp;&nbsp;ALT,../images/tick.gif,../images/tick.gif,../images/notick.gif,3.2
&nbsp;&nbsp;BORDER,../images/tick.gif,../images/tick.gif,../images/notick.gif,3.2
&nbsp;&nbsp;HIDDEN,../images/notick.gif,../images/tick.gif,../images/notick.gif,3.2
&nbsp;&nbsp;HSPACE,../images/tick.gif,../images/tick.gif,../images/notick.gif,3.2
&nbsp;&nbsp;NAME,../images/tick.gif,../images/tick.gif,../images/notick.gif,3.2
&nbsp;&nbsp;PALETTE,../images/tick.gif,../images/tick.gif,../images/notick.gif,3.2
&nbsp;&nbsp;PLUGINSPACE,../images/tick.gif,../images/tick.gif,../images/notick.gif,3.2
&nbsp;&nbsp;VSPACE,../images/tick.gif,../images/tick.gif,../images/notick.gif,3.2


HTMLElementsAttributes,InternetExplorer,Netscape,Mosaic,Specification
<A HREF='../block/field.htm' TITLE='View the &lt;FIELDSET&gt; topic'><CODE>&lt;FIELDSET&gt;</CODE></A>,../images/tick.gif,../images/notick.gif,../images/notick.gif,4.0
<A HREF='../infochar/font.htm' TITLE='View the &lt;FONT&gt; topic'><CODE>&lt;FONT&gt;</CODE></A>,../images/tick.gif,../images/tick.gif,../images/tick.gif,3.2
&nbsp;&nbsp;COLOR,../images/tick.gif,../images/tick.gif,../images/notick.gif,3.2
&nbsp;&nbsp;FACE,../images/tick.gif,../images/tick.gif,../images/notick.gif,3.2
&nbsp;&nbsp;POINT-SIZE,../images/notick.gif,../images/tick.gif,../images/notick.gif,NS 4.0
&nbsp;&nbsp;SIZE,../images/tick.gif,../images/notick.gif,../images/notick.gif,3.2
&nbsp;&nbsp;WEIGHT,../images/notick.gif,../images/tick.gif,../images/notick.gif,NS 4.0
<A HREF='../form/form.htm' TITLE='View the &lt;FORM&gt; topic'><CODE>&lt;FORM&gt;</CODE></A>,../images/tick.gif,../images/tick.gif,../images/tick.gif,2.0
&nbsp;&nbsp;ACTION,../images/tick.gif,../images/tick.gif,../images/tick.gif,2.0
&nbsp;&nbsp;ENCTYPE,../images/tick.gif,../images/tick.gif,../images/tick.gif,2.0
&nbsp;&nbsp;METHOD,../images/tick.gif,../images/tick.gif,../images/tick.gif,2.0
&nbsp;&nbsp;NAME,../images/tick.gif,../images/tick.gif,../images/tick.gif,2.0
&nbsp;&nbsp;TARGET,../images/tick.gif,../images/tick.gif,../images/notick.gif,3.2
<A HREF='../frames/frame.htm' TITLE='View the &lt;FRAME&gt; topic'><CODE>&lt;FRAME&gt;</CODE></A>,../images/tick.gif,../images/tick.gif,../images/notick.gif,4.0
&nbsp;&nbsp;BORDERCOLOR,../images/tick.gif,../images/tick.gif,../images/notick.gif,4.0
&nbsp;&nbsp;DATAFLD,../images/tick.gif,../images/notick.gif,../images/notick.gif,IEx 4.0
&nbsp;&nbsp;DATASRC,../images/tick.gif,../images/notick.gif,../images/notick.gif,IEx 4.0
&nbsp;&nbsp;FRAMEBORDER,../images/tick.gif,../images/tick.gif,../images/notick.gif,4.0
&nbsp;&nbsp;FRAMESPACING,../images/tick.gif,../images/tick.gif,../images/notick.gif,4.0
&nbsp;&nbsp;MARGINHEIGHT,../images/tick.gif,../images/tick.gif,../images/notick.gif,4.0
&nbsp;&nbsp;MARGINWIDTH,../images/tick.gif,../images/tick.gif,../images/notick.gif,4.0
&nbsp;&nbsp;NORESIZE,../images/tick.gif,../images/tick.gif,../images/notick.gif,4.0
&nbsp;&nbsp;SCROLLING,../images/tick.gif,../images/tick.gif,../images/notick.gif,4.0
&nbsp;&nbsp;SRC,../images/tick.gif,../images/tick.gif,../images/notick.gif,4.0
<A HREF='../frames/fset.htm' TITLE='View the &lt;FRAMESET&gt; topic'><CODE>&lt;FRAMESET&gt;</CODE></A>,../images/tick.gif,../images/tick.gif,../images/notick.gif,4.0
&nbsp;&nbsp;BORDER,../images/tick.gif,../images/tick.gif,../images/notick.gif,4.0
&nbsp;&nbsp;BORDERCOLOR,../images/tick.gif,../images/tick.gif,../images/notick.gif,4.0
&nbsp;&nbsp;COLS,../images/tick.gif,../images/tick.gif,../images/notick.gif,4.0
&nbsp;&nbsp;FRAMEBORDER,../images/tick.gif,../images/tick.gif,../images/notick.gif,4.0
&nbsp;&nbsp;FRAMESPACING,../images/tick.gif,../images/tick.gif,../images/notick.gif,4.0
&nbsp;&nbsp;ROWS,../images/tick.gif,../images/tick.gif,../images/notick.gif,4.0
<A HREF='../whitesp/hr.htm' TITLE='View the &lt;HR&gt; topic'><CODE>&lt;HR&gt;</CODE></A>,../images/tick.gif,../images/tick.gif,../images/tick.gif,2.0
&nbsp;&nbsp;ALIGN,../images/tick.gif,../images/tick.gif,../images/tick.gif,3.2
&nbsp;&nbsp;COLOR,../images/tick.gif,../images/tick.gif,../images/tick.gif,3.2
&nbsp;&nbsp;NOSHADE,../images/tick.gif,../images/tick.gif,../images/tick.gif,3.2
&nbsp;&nbsp;SIZE,../images/tick.gif,../images/tick.gif,../images/tick.gif,3.2
&nbsp;&nbsp;WIDTH,../images/tick.gif,../images/tick.gif,../images/tick.gif,3.2
<A HREF='../block/heading.htm' TITLE='View the &lt;Hx&gt; topic'><CODE>&lt;H<EM>x</EM>&gt;</CODE></A>,../images/tick.gif,../images/tick.gif,../images/tick.gif,2.0
&nbsp;&nbsp;ALIGN,../images/tick.gif,../images/tick.gif,../images/tick.gif,3.2
<A HREF='../infochar/italic.htm' TITLE='View the &lt;I&gt; topic'><CODE>&lt;I&gt;</CODE></A>,../images/tick.gif,../images/tick.gif,../images/tick.gif,2.0
<A HREF='../frames/fframe.htm' TITLE='View the &lt;IFRAME&gt; topic'><CODE>&lt;IFRAME&gt;</CODE></A>,../images/tick.gif,../images/notick.gif,../images/notick.gif,4.0
&nbsp;&nbsp;ALIGN,../images/tick.gif,../images/notick.gif,../images/notick.gif,4.0
&nbsp;&nbsp;BORDER,../images/tick.gif,../images/notick.gif,../images/notick.gif,4.0
&nbsp;&nbsp;BORDERCOLOR,../images/tick.gif,../images/notick.gif,../images/notick.gif,4.0
&nbsp;&nbsp;DATAFLD,../images/tick.gif,../images/notick.gif,../images/notick.gif,IEx 4.0
&nbsp;&nbsp;DATASRC,../images/tick.gif,../images/notick.gif,../images/notick.gif,IEx 4.0
&nbsp;&nbsp;FRAMEBORDER,../images/tick.gif,../images/notick.gif,../images/notick.gif,4.0
&nbsp;&nbsp;HEIGHT,../images/tick.gif,../images/notick.gif,../images/notick.gif,4.0
&nbsp;&nbsp;HSPACE,../images/tick.gif,../images/notick.gif,../images/notick.gif,4.0
&nbsp;&nbsp;NAME,../images/tick.gif,../images/notick.gif,../images/notick.gif,4.0
&nbsp;&nbsp;SCROLLING,../images/tick.gif,../images/notick.gif,../images/notick.gif,4.0
&nbsp;&nbsp;SRC,../images/tick.gif,../images/notick.gif,../images/notick.gif,4.0
&nbsp;&nbsp;VSPACE,../images/tick.gif,../images/notick.gif,../images/notick.gif,4.0
&nbsp;&nbsp;WIDTH,../images/tick.gif,../images/notick.gif,../images/notick.gif,4.0
<A HREF='../infochar/ilayer.htm' TITLE='View the &lt;ILAYER&gt; topic'><CODE>&lt;ILAYER&gt;</CODE></A>,../images/notick.gif,../images/tick.gif,../images/notick.gif,NS 4.0
&nbsp;&nbsp;ABOVE,../images/notick.gif,../images/tick.gif,../images/notick.gif,NS 4.0
&nbsp;&nbsp;BACKGROUND,../images/notick.gif,../images/tick.gif,../images/notick.gif,NS 4.0
&nbsp;&nbsp;BELOW,../images/notick.gif,../images/tick.gif,../images/notick.gif,NS 4.0
&nbsp;&nbsp;BGCOLOR,../images/notick.gif,../images/tick.gif,../images/notick.gif,NS 4.0
&nbsp;&nbsp;LEFT,../images/notick.gif,../images/tick.gif,../images/notick.gif,NS 4.0
&nbsp;&nbsp;NAME,../images/notick.gif,../images/tick.gif,../images/notick.gif,NS 4.0
&nbsp;&nbsp;SRC,../images/notick.gif,../images/tick.gif,../images/notick.gif,NS 4.0
&nbsp;&nbsp;TOP,../images/notick.gif,../images/tick.gif,../images/notick.gif,NS 4.0
&nbsp;&nbsp;VISIBILITY,../images/notick.gif,../images/tick.gif,../images/notick.gif,NS 4.0
&nbsp;&nbsp;WIDTH,../images/notick.gif,../images/tick.gif,../images/notick.gif,NS 4.0
&nbsp;&nbsp;Z-INDEX,../images/notick.gif,../images/tick.gif,../images/notick.gif,NS 4.0
<A HREF='../img/img.htm' TITLE='View the &lt;IMG&gt; topic'><CODE>&lt;IMG&gt;</CODE></A>,../images/tick.gif,../images/tick.gif,../images/tick.gif,2.0
&nbsp;&nbsp;ALIGN,../images/tick.gif,../images/tick.gif,../images/tick.gif,2.0
&nbsp;&nbsp;ALT,../images/tick.gif,../images/tick.gif,../images/tick.gif,2.0
&nbsp;&nbsp;BORDER,../images/tick.gif,../images/tick.gif,../images/tick.gif,2.0
&nbsp;&nbsp;CONTROLS,../images/tick.gif,../images/notick.gif,../images/notick.gif,IEx 2.0
&nbsp;&nbsp;DATAFLD,../images/tick.gif,../images/notick.gif,../images/notick.gif,IEx 4.0
&nbsp;&nbsp;DATASRC,../images/tick.gif,../images/notick.gif,../images/notick.gif,IEx 4.0
&nbsp;&nbsp;DYNSRC,../images/tick.gif,../images/notick.gif,../images/notick.gif,IEx 2.0
&nbsp;&nbsp;HEIGHT,../images/tick.gif,../images/tick.gif,../images/tick.gif,2.0
&nbsp;&nbsp;HSPACE,../images/tick.gif,../images/tick.gif,../images/tick.gif,3.2
&nbsp;&nbsp;ISMAP,../images/tick.gif,../images/tick.gif,../images/tick.gif,2.0
&nbsp;&nbsp;LOOP,../images/tick.gif,../images/notick.gif,../images/notick.gif,IEx 2.0
&nbsp;&nbsp;LOOPDELAY,../images/tick.gif,../images/notick.gif,../images/notick.gif,IEx 2.0
&nbsp;&nbsp;LOWSRC,../images/tick.gif,../images/tick.gif,../images/notick.gif,3.2
&nbsp;&nbsp;NAME,../images/tick.gif,../images/tick.gif,../images/notick.gif,3.2
&nbsp;&nbsp;SRC,../images/tick.gif,../images/tick.gif,../images/tick.gif,2.0
&nbsp;&nbsp;START,../images/tick.gif,../images/notick.gif,../images/notick.gif,IEx 2.0
&nbsp;&nbsp;USEMAP,../images/tick.gif,../images/tick.gif,../images/tick.gif,3.2
&nbsp;&nbsp;VRML,../images/tick.gif,../images/notick.gif,../images/notick.gif,IEx 3.0
&nbsp;&nbsp;VSPACE,../images/tick.gif,../images/tick.gif,../images/tick.gif,3.2
&nbsp;&nbsp;WIDTH,../images/tick.gif,../images/tick.gif,../images/tick.gif,2.0
<A HREF='../form/input.htm' TITLE='View the &lt;INPUT&gt; topic'><CODE>&lt;INPUT&gt;</CODE></A>,../images/tick.gif,../images/tick.gif,../images/tick.gif,2.0
&nbsp;&nbsp;ACCESSKEY,../images/tick.gif,../images/notick.gif,../images/notick.gif,4.0
&nbsp;&nbsp;ALIGN,../images/tick.gif,../images/tick.gif,../images/tick.gif,2.0
&nbsp;&nbsp;CHECKED,../images/tick.gif,../images/tick.gif,../images/tick.gif,2.0
&nbsp;&nbsp;DATAFLD,../images/tick.gif,../images/notick.gif,../images/notick.gif,IEx 4.0
&nbsp;&nbsp;DATAFORMATAS,../images/tick.gif,../images/notick.gif,../images/notick.gif,IEx 4.0
&nbsp;&nbsp;DATASRC,../images/tick.gif,../images/notick.gif,../images/notick.gif,IEx 4.0
&nbsp;&nbsp;DISABLED,../images/tick.gif,../images/notick.gif,../images/notick.gif,4.0
&nbsp;&nbsp;MAXLENGTH,../images/tick.gif,../images/tick.gif,../images/tick.gif,2.0
&nbsp;&nbsp;NAME,../images/tick.gif,../images/tick.gif,../images/tick.gif,2.0
&nbsp;&nbsp;READONLY,../images/tick.gif,../images/notick.gif,../images/notick.gif,4.0
&nbsp;&nbsp;SIZE,../images/tick.gif,../images/tick.gif,../images/tick.gif,2.0
&nbsp;&nbsp;SRC,../images/tick.gif,../images/tick.gif,../images/tick.gif,2.0
&nbsp;&nbsp;TABINDEX,../images/tick.gif,../images/notick.gif,../images/notick.gif,4.0
&nbsp;&nbsp;TYPE,../images/tick.gif,../images/tick.gif,../images/tick.gif,2.0
&nbsp;&nbsp;VALUE,../images/tick.gif,../images/tick.gif,../images/tick.gif,2.0
<A HREF='../infochar/ins.htm' TITLE='View the &lt;INS&gt; topic'><CODE>&lt;INS&gt;</CODE></A>,../images/tick.gif,../images/notick.gif,../images/notick.gif,4.0
&nbsp;&nbsp;CITE,../images/tick.gif,../images/notick.gif,../images/notick.gif,4.0
&nbsp;&nbsp;DATETIME,../images/tick.gif,../images/notick.gif,../images/notick.gif,4.0
<A HREF='../docstr/isindex.htm' TITLE='View the &lt;ISINDEX&gt; topic'><CODE>&lt;ISINDEX&gt;</CODE></A>,../images/tick.gif,../images/tick.gif,../images/tick.gif,2.0
&nbsp;&nbsp;ACTION,../images/tick.gif,../images/tick.gif,../images/notick.gif,2.0
&nbsp;&nbsp;PROMPT,../images/tick.gif,../images/tick.gif,../images/notick.gif,2.0


HTMLElementsAttributes,InternetExplorer,Netscape,Mosaic,Specification
<A HREF='../infochar/kbd.htm' TITLE='View the &lt;KBD&gt; topic'><CODE>&lt;KBD&gt;</CODE></A>,../images/tick.gif,../images/tick.gif,../images/tick.gif,2.0
<A HREF='../form/keygen.htm' TITLE='View the &lt;KEYGEN&gt; topic'><CODE>&lt;KEYGEN&gt;</CODE></A>,../images/notick.gif,../images/tick.gif,../images/notick.gif,NS 3.0
&nbsp;&nbsp;CHALLENGE,../images/notick.gif,../images/tick.gif,../images/notick.gif,NS 3.0
&nbsp;&nbsp;NAME,../images/notick.gif,../images/tick.gif,../images/notick.gif,NS 3.0
<A HREF='../form/label.htm' TITLE='View the &lt;INPUT&gt; topic'><CODE>&lt;INPUT&gt;</CODE></A>,../images/tick.gif,../images/notick.gif,../images/notick.gif,4.0
&nbsp;&nbsp;ACCESSKEY,../images/tick.gif,../images/notick.gif,../images/notick.gif,4.0
&nbsp;&nbsp;DATAFLD,../images/tick.gif,../images/notick.gif,../images/notick.gif,IEx 4.0
&nbsp;&nbsp;DATAFORMATAS,../images/tick.gif,../images/notick.gif,../images/notick.gif,IEx 4.0
&nbsp;&nbsp;DATASRC,../images/tick.gif,../images/notick.gif,../images/notick.gif,IEx 4.0
&nbsp;&nbsp;FOR,../images/tick.gif,../images/notick.gif,../images/notick.gif,4.0
<A HREF='../block/layer.htm' TITLE='View the &lt;LAYER&gt; topic'><CODE>&lt;LAYER&gt;</CODE></A>,../images/notick.gif,../images/tick.gif,../images/notick.gif,NS 4.0
&nbsp;&nbsp;ABOVE,../images/notick.gif,../images/tick.gif,../images/notick.gif,NS 4.0
&nbsp;&nbsp;BACKGROUND,../images/notick.gif,../images/tick.gif,../images/notick.gif,NS 4.0
&nbsp;&nbsp;BELOW,../images/notick.gif,../images/tick.gif,../images/notick.gif,NS 4.0
&nbsp;&nbsp;BGCOLOR,../images/notick.gif,../images/tick.gif,../images/notick.gif,NS 4.0
&nbsp;&nbsp;CLIP,../images/notick.gif,../images/tick.gif,../images/notick.gif,NS 4.0
&nbsp;&nbsp;LEFT,../images/notick.gif,../images/tick.gif,../images/notick.gif,NS 4.0
&nbsp;&nbsp;NAME,../images/notick.gif,../images/tick.gif,../images/notick.gif,NS 4.0
&nbsp;&nbsp;SRC,../images/notick.gif,../images/tick.gif,../images/notick.gif,NS 4.0
&nbsp;&nbsp;TOP,../images/notick.gif,../images/tick.gif,../images/notick.gif,NS 4.0
&nbsp;&nbsp;VISIBILITY,../images/notick.gif,../images/tick.gif,../images/notick.gif,NS 4.0
&nbsp;&nbsp;WIDTH,../images/notick.gif,../images/tick.gif,../images/notick.gif,NS 4.0
&nbsp;&nbsp;Z-INDEX,../images/notick.gif,../images/tick.gif,../images/notick.gif,NS 4.0
<A HREF='../block/leg.htm' TITLE='View the &lt;LEGEND&gt; topic'><CODE>&lt;LEGEND&gt;</CODE></A>,../images/tick.gif,../images/notick.gif,../images/notick.gif,4.0
&nbsp;&nbsp;ALIGN,../images/tick.gif,../images/notick.gif,../images/notick.gif,4.0
<CODE>&lt;LI&gt;,../images/tick.gif,../images/tick.gif,../images/tick.gif,2.0
&nbsp;&nbsp;TYPE,../images/tick.gif,../images/tick.gif,../images/notick.gif,4.0
<A HREF='../docstr/link.htm' TITLE='View the &lt;LINK&gt; topic'><CODE>&lt;LINK&gt;</CODE></A>,../images/tick.gif,../images/tick.gif,../images/tick.gif,2.0
&nbsp;&nbsp;DISABLED,../images/tick.gif,../images/notick.gif,../images/notick.gif,2.0
&nbsp;&nbsp;HREF,../images/tick.gif,../images/tick.gif,../images/tick.gif,2.0
&nbsp;&nbsp;REL,../images/tick.gif,../images/tick.gif,../images/tick.gif,2.0
&nbsp;&nbsp;REV,../images/notick.gif,../images/notick.gif,../images/tick.gif,2.0
&nbsp;&nbsp;TYPE,../images/tick.gif,../images/tick.gif,../images/tick.gif,2.0
<A HREF='../block/listing.htm' TITLE='View the &lt;LISTING&gt; topic'><CODE>&lt;LISTING&gt;</CODE></A>,../images/tick.gif,../images/tick.gif,../images/tick.gif,2.0
<A HREF='../img/csim.htm' TITLE='View the Client Side Image Maps topic'><CODE>&lt;MAP&gt;</CODE></A>,../images/tick.gif,../images/tick.gif,../images/tick.gif,3.2
&nbsp;&nbsp;NAME,../images/tick.gif,../images/tick.gif,../images/tick.gif,3.2
<A HREF='../block/marquee.htm' TITLE='View the &lt;MARQUEE&gt; topic'><CODE>&lt;MARQUEE&gt;</CODE></A>,../images/tick.gif,../images/notick.gif,../images/notick.gif,IEx 2.0
&nbsp;&nbsp;ALIGN,../images/tick.gif,../images/notick.gif,../images/notick.gif,IEx 2.0
&nbsp;&nbsp;BEHAVIOR,../images/tick.gif,../images/notick.gif,../images/notick.gif,IEx 2.0
&nbsp;&nbsp;BGCOLOR,../images/tick.gif,../images/notick.gif,../images/notick.gif,IEx 2.0
&nbsp;&nbsp;DATAFLD,../images/tick.gif,../images/notick.gif,../images/notick.gif,IEx 4.0
&nbsp;&nbsp;DATAFORMATAS,../images/tick.gif,../images/notick.gif,../images/notick.gif,IEx 4.0
&nbsp;&nbsp;DATASRC,../images/tick.gif,../images/notick.gif,../images/notick.gif,IEx 4.0
&nbsp;&nbsp;DIRECTION,../images/tick.gif,../images/notick.gif,../images/notick.gif,IEx 2.0
&nbsp;&nbsp;HEIGHT,../images/tick.gif,../images/notick.gif,../images/notick.gif,IEx 2.0
&nbsp;&nbsp;HSPACE,../images/tick.gif,../images/notick.gif,../images/notick.gif,IEx 2.0
&nbsp;&nbsp;LOOP,../images/tick.gif,../images/notick.gif,../images/notick.gif,IEx 2.0
&nbsp;&nbsp;SCROLLAMOUNT,../images/tick.gif,../images/notick.gif,../images/notick.gif,IEx 2.0
&nbsp;&nbsp;SCROLLDELAY,../images/tick.gif,../images/notick.gif,../images/notick.gif,IEx 2.0
&nbsp;&nbsp;TRUESPEED,../images/tick.gif,../images/notick.gif,../images/notick.gif,IEx 4.0
&nbsp;&nbsp;VSPACE,../images/tick.gif,../images/notick.gif,../images/notick.gif,IEx 2.0
&nbsp;&nbsp;WIDTH,../images/tick.gif,../images/notick.gif,../images/notick.gif,IEx 2.0
<A HREF='../list/menu.htm' TITLE='View the &lt;MENU&gt; topic'><CODE>&lt;MENU&gt;</CODE></A>,../images/tick.gif,../images/tick.gif,../images/tick.gif,2.0
<A HREF='../docstr/meta.htm' TITLE='View the &lt;META&gt; topic'><CODE>&lt;META&gt;</CODE></A>,../images/tick.gif,../images/tick.gif,../images/tick.gif,2.0
&nbsp;&nbsp;CONTENT,../images/tick.gif,../images/tick.gif,../images/tick.gif,2.0
&nbsp;&nbsp;HTTP-EQUIV,../images/tick.gif,../images/tick.gif,../images/tick.gif,2.0
&nbsp;&nbsp;NAME,../images/tick.gif,../images/tick.gif,../images/tick.gif,2.0
<A HREF='../block/multico.htm' TITLE='View the &lt;MULTICOL&gt; topic'><CODE>&lt;MULTICOL&gt;</CODE></A>,../images/notick.gif,../images/tick.gif,../images/notick.gif,NS 3.0
&nbsp;&nbsp;COLS,../images/notick.gif,../images/tick.gif,../images/notick.gif,NS 3.0
&nbsp;&nbsp;GUTTER,../images/notick.gif,../images/tick.gif,../images/notick.gif,NS 3.0
&nbsp;&nbsp;WIDTH,../images/notick.gif,../images/tick.gif,../images/notick.gif,NS 3.0
<A HREF='../img/object.htm' TITLE='View the &lt;OBJECT&gt; topic'><CODE>&lt;OBJECT&gt;</CODE></A>,../images/tick.gif,../images/notick.gif,../images/tick.gif,4.0
&nbsp;&nbsp;ACCESSKEY,../images/tick.gif,../images/notick.gif,../images/notick.gif,4.0
&nbsp;&nbsp;ALIGN,../images/tick.gif,../images/notick.gif,../images/tick.gif,3.2
&nbsp;&nbsp;BORDER,../images/tick.gif,../images/notick.gif,../images/notick.gif,4.0
&nbsp;&nbsp;CLASSID,../images/tick.gif,../images/notick.gif,../images/tick.gif,4.0
&nbsp;&nbsp;CODE,../images/tick.gif,../images/notick.gif,../images/notick.gif,4.0
&nbsp;&nbsp;CODEBASE,../images/tick.gif,../images/notick.gif,../images/tick.gif,4.0
&nbsp;&nbsp;DATA,../images/tick.gif,../images/notick.gif,../images/notick.gif,4.0
&nbsp;&nbsp;DATAFLD,../images/tick.gif,../images/notick.gif,../images/notick.gif,IEx 4.0
&nbsp;&nbsp;DATASRC,../images/tick.gif,../images/notick.gif,../images/notick.gif,IEx 4.0
&nbsp;&nbsp;HEIGHT,../images/tick.gif,../images/notick.gif,../images/notick.gif,4.0
&nbsp;&nbsp;HSPACE,../images/tick.gif,../images/notick.gif,../images/notick.gif,4.0
&nbsp;&nbsp;NAME,../images/tick.gif,../images/notick.gif,../images/notick.gif,4.0
&nbsp;&nbsp;TABINDEX,../images/tick.gif,../images/notick.gif,../images/notick.gif,4.0
&nbsp;&nbsp;TYPE,../images/tick.gif,../images/notick.gif,../images/notick.gif,4.0
&nbsp;&nbsp;VSPACE,../images/tick.gif,../images/notick.gif,../images/notick.gif,4.0
&nbsp;&nbsp;WIDTH,../images/tick.gif,../images/notick.gif,../images/notick.gif,4.0
<A HREF='../list/ol.htm' TITLE='View the &lt;OL&gt; topic'><CODE>&lt;OL&gt;</CODE></A>,../images/tick.gif,../images/tick.gif,../images/tick.gif,2.0
&nbsp;&nbsp;START,../images/tick.gif,../images/tick.gif,../images/notick.gif,3.2
&nbsp;&nbsp;TYPE,../images/tick.gif,../images/tick.gif,../images/notick.gif,3.2
<A HREF='../form/option.htm' TITLE='View the &lt;OPTION&gt; topic'><CODE>&lt;OPTION&gt;</CODE></A>,../images/tick.gif,../images/tick.gif,../images/tick.gif,2.0
&nbsp;&nbsp;NAME,../images/tick.gif,../images/tick.gif,../images/notick.gif,3.2
&nbsp;&nbsp;SELECTED,../images/tick.gif,../images/tick.gif,../images/tick.gif,2.0
&nbsp;&nbsp;TYPE,../images/tick.gif,../images/tick.gif,../images/notick.gif,3.2
&nbsp;&nbsp;VALUE,../images/tick.gif,../images/tick.gif,../images/notick.gif,2.0
<A HREF='../block/para.htm' TITLE='View the &lt;P&gt; topic'><CODE>&lt;P&gt;</CODE></A>,../images/tick.gif,../images/tick.gif,../images/tick.gif,2.0
&nbsp;&nbsp;ALIGN,../images/tick.gif,../images/tick.gif,../images/notick.gif,3.2
<CODE>&lt;PARAM&gt;</CODE>,../images/tick.gif,../images/tick.gif,../images/tick.gif,3.2
&nbsp;&nbsp;DATAFLD,../images/tick.gif,../images/notick.gif,../images/notick.gif,IEx 4.0
&nbsp;&nbsp;DATAFORMATAS,../images/tick.gif,../images/notick.gif,../images/notick.gif,IEx 4.0
&nbsp;&nbsp;DATASRC,../images/tick.gif,../images/notick.gif,../images/notick.gif,IEx 4.0
&nbsp;&nbsp;NAME,../images/tick.gif,../images/tick.gif,../images/tick.gif,3.2
&nbsp;&nbsp;VALUE,../images/tick.gif,../images/tick.gif,../images/tick.gif,3.2
<A HREF='../block/plain.htm' TITLE='View the &lt;PLAINTEXT&gt; topic'><CODE>&lt;PLAINTEXT&gt;</CODE></A>,../images/tick.gif,../images/tick.gif,../images/tick.gif,2.0
<A HREF='../block/pre.htm' TITLE='View the &lt;PRE&gt; topic'><CODE>&lt;PRE&gt;</CODE></A>,../images/tick.gif,../images/tick.gif,../images/tick.gif,2.0
&nbsp;&nbsp;WIDTH,../images/tick.gif,../images/tick.gif,../images/tick.gif,2.0
<A HREF='../infochar/q.htm' TITLE='View the &lt;Q&gt; topic'><CODE>&lt;Q&gt;</CODE></A>,../images/tick.gif,../images/notick.gif,../images/notick.gif,4.0
&nbsp;&nbsp;CITE,../images/tick.gif,../images/notick.gif,../images/notick.gif,4.0
<A HREF='../infochar/strike.htm' TITLE='View the &lt;S&gt; topic'><CODE>&lt;S&gt;</CODE></A>,../images/tick.gif,../images/tick.gif,../images/tick.gif,2.0
<A HREF='../infochar/samp.htm' TITLE='View the &lt;SAMP&gt; topic'><CODE>&lt;SAMP&gt;</CODE></A>,../images/tick.gif,../images/tick.gif,../images/tick.gif,2.0
<A HREF='../form/select.htm' TITLE='View the &lt;SELECT&gt; topic'><CODE>&lt;SELECT&gt;</CODE></A>,../images/tick.gif,../images/tick.gif,../images/tick.gif,2.0
&nbsp;&nbsp;ACCESSKEY,../images/tick.gif,../images/notick.gif,../images/notick.gif,4.0
&nbsp;&nbsp;ALIGN,../images/tick.gif,../images/tick.gif,../images/tick.gif,2.0
&nbsp;&nbsp;DATAFLD,../images/tick.gif,../images/notick.gif,../images/notick.gif,IEx 4.0
&nbsp;&nbsp;DATASRC,../images/tick.gif,../images/notick.gif,../images/notick.gif,IEx 4.0
&nbsp;&nbsp;DISABLED,../images/tick.gif,../images/notick.gif,../images/notick.gif,4.0
&nbsp;&nbsp;MULTIPLE,../images/tick.gif,../images/tick.gif,../images/tick.gif,2.0
&nbsp;&nbsp;NAME,../images/tick.gif,../images/tick.gif,../images/tick.gif,2.0
&nbsp;&nbsp;SIZE,../images/tick.gif,../images/tick.gif,../images/tick.gif,2.0
&nbsp;&nbsp;TABINDEX,../images/tick.gif,../images/notick.gif,../images/notick.gif,4.0
&nbsp;&nbsp;TYPE,../images/tick.gif,../images/tick.gif,../images/notick.gif,4.0


HTMLElementsAttributes,InternetExplorer,Netscape,Mosaic,Specification
<A HREF='../infochar/small.htm' TITLE='View the &lt;SMALL&gt; topic'><CODE>&lt;SMALL&gt;</CODE></A>,../images/tick.gif,../images/tick.gif,../images/tick.gif,3.2
<A HREF='../img/sound.htm' TITLE='View the &lt;SOUND&gt; topic'><CODE>&lt;SOUND&gt;</CODE></A>,../images/notick.gif,../images/notick.gif,../images/tick.gif,Mos 3.0
&nbsp;&nbsp;DELAY,../images/notick.gif,../images/notick.gif,../images/tick.gif,Mos 3.0
&nbsp;&nbsp;LOOP,../images/notick.gif,../images/notick.gif,../images/tick.gif,Mos 3.0
&nbsp;&nbsp;SRC,../images/notick.gif,../images/notick.gif,../images/tick.gif,Mos 3.0
<A HREF='../whitesp/spacer.htm' TITLE='View the &lt;SPACER&gt; topic'><CODE>&lt;SPACER&gt;</CODE></A>,../images/notick.gif,../images/tick.gif,../images/notick.gif,NS 3.0
&nbsp;&nbsp;ALIGN,../images/notick.gif,../images/tick.gif,../images/notick.gif,NS 3.0
&nbsp;&nbsp;HEIGHT,../images/notick.gif,../images/tick.gif,../images/notick.gif,NS 3.0
&nbsp;&nbsp;SIZE,../images/notick.gif,../images/tick.gif,../images/notick.gif,NS 3.0
&nbsp;&nbsp;TYPE,../images/notick.gif,../images/tick.gif,../images/notick.gif,NS 3.0
&nbsp;&nbsp;WIDTH,../images/notick.gif,../images/tick.gif,../images/notick.gif,NS 3.0
<A HREF='../infochar/span.htm' TITLE='View the &lt;SPAN&gt; topic'><CODE>&lt;SPAN&gt;</CODE></A>,../images/tick.gif,../images/tick.gif,../images/notick.gif,3.2
&nbsp;&nbsp;DATAFLD,../images/tick.gif,../images/notick.gif,../images/notick.gif,IEx 4.0
&nbsp;&nbsp;DATAFORMATAS,../images/tick.gif,../images/notick.gif,../images/notick.gif,IEx 4.0
&nbsp;&nbsp;DATASRC,../images/tick.gif,../images/notick.gif,../images/notick.gif,IEx 4.0
&nbsp;&nbsp;DIR,../images/tick.gif,../images/notick.gif,../images/notick.gif,3.2
<A HREF='../infochar/strike.htm' TITLE='View the &lt;STRIKE&gt; topic'><CODE>&lt;STRIKE&gt;</CODE></A>,../images/tick.gif,../images/tick.gif,../images/tick.gif,2.0
<A HREF='../infochar/strong.htm' TITLE='View the &lt;STRONG&gt; topic'><CODE>&lt;STRONG&gt;</CODE></A>,../images/tick.gif,../images/tick.gif,../images/tick.gif,2.0
<A HREF='../docstr/style.htm' TITLE='View the &lt;STYLE&gt; topic'><CODE>&lt;STYLE&gt;</CODE></A>,../images/tick.gif,../images/tick.gif,../images/notick.gif,3.2
&nbsp;&nbsp;DISABLED,../images/tick.gif,../images/tick.gif,../images/notick.gif,4.0
&nbsp;&nbsp;MEDIA,../images/tick.gif,../images/tick.gif,../images/notick.gif,4.0
&nbsp;&nbsp;TYPE,../images/tick.gif,../images/tick.gif,../images/notick.gif,3.2
<A HREF='../infochar/sub.htm' TITLE='View the &lt;SUB&gt; topic'><CODE>&lt;SUB&gt;</CODE></A>,../images/tick.gif,../images/tick.gif,../images/tick.gif,2.0
<A HREF='../infochar/sup.htm' TITLE='View the &lt;SUP&gt; topic'><CODE>&lt;SUP&gt;</CODE></A>,../images/tick.gif,../images/tick.gif,../images/tick.gif,2.0
<A HREF='../tables/table.htm' TITLE='View the &lt;TABLE&gt; topic'><CODE>&lt;TABLE&gt;</CODE></A>,../images/tick.gif,../images/tick.gif,../images/tick.gif,3.2
&nbsp;&nbsp;ALIGN,../images/tick.gif,../images/tick.gif,../images/tick.gif,3.2
&nbsp;&nbsp;BACKGROUND,../images/tick.gif,../images/tick.gif,../images/notick.gif,IEx 3.0
&nbsp;&nbsp;BGCOLOR,../images/tick.gif,../images/tick.gif,../images/notick.gif,IEx 3.0
&nbsp;&nbsp;BORDER,../images/tick.gif,../images/tick.gif,../images/notick.gif,3.2
&nbsp;&nbsp;BORDERCOLOR,../images/tick.gif,../images/tick.gif,../images/notick.gif,IEx 3.0
&nbsp;&nbsp;BORDERCOLORDARK,../images/tick.gif,../images/notick.gif,../images/notick.gif,IEx 3.0
&nbsp;&nbsp;BORDERCOLORLIGHT,../images/tick.gif,../images/notick.gif,../images/notick.gif,IEx 3.0
&nbsp;&nbsp;CELLPADDING,../images/tick.gif,../images/tick.gif,../images/tick.gif,3.2
&nbsp;&nbsp;CELLSPACING,../images/tick.gif,../images/tick.gif,../images/tick.gif,3.2
&nbsp;&nbsp;COLS,../images/tick.gif,../images/notick.gif,../images/notick.gif,4.0
&nbsp;&nbsp;DATAFLD,../images/tick.gif,../images/notick.gif,../images/notick.gif,IEx 4.0
&nbsp;&nbsp;DATAPAGESIZE,../images/tick.gif,../images/notick.gif,../images/notick.gif,IEx 4.0
&nbsp;&nbsp;DATASRC,../images/tick.gif,../images/notick.gif,../images/notick.gif,IEx 4.0
&nbsp;&nbsp;FRAME,../images/tick.gif,../images/tick.gif,../images/notick.gif,3.2
&nbsp;&nbsp;HEIGHT,../images/tick.gif,../images/tick.gif,../images/tick.gif,3.2
&nbsp;&nbsp;RULES,../images/tick.gif,../images/tick.gif,../images/notick.gif,3.2
&nbsp;&nbsp;VALIGN,../images/tick.gif,../images/tick.gif,../images/notick.gif,4.0
&nbsp;&nbsp;WIDTH,../images/tick.gif,../images/tick.gif,../images/tick.gif,3.2
<A HREF='../tables/tbody.htm' TITLE='View the &lt;TBODY&gt; topic'><CODE>&lt;TBODY&gt;</CODE></A>,../images/tick.gif,../images/notick.gif,../images/notick.gif,3.2
&nbsp;&nbsp;ALIGN,../images/tick.gif,../images/notick.gif,../images/notick.gif,4.0
&nbsp;&nbsp;BGCOLOR,../images/tick.gif,../images/notick.gif,../images/notick.gif,IEx 4.0
&nbsp;&nbsp;VALIGN,../images/tick.gif,../images/notick.gif,../images/notick.gif,4.0
<A HREF='../tables/td.htm' TITLE='View the &lt;TD&gt; topic'><CODE>&lt;TD&gt;</CODE></A>,../images/tick.gif,../images/tick.gif,../images/tick.gif,3.2
&nbsp;&nbsp;ALIGN,../images/tick.gif,../images/tick.gif,../images/notick.gif,3.2
&nbsp;&nbsp;BACKGROUND,../images/tick.gif,../images/tick.gif,../images/notick.gif,IEx 3.0
&nbsp;&nbsp;BGCOLOR,../images/tick.gif,../images/tick.gif,../images/notick.gif,IEx 3.0
&nbsp;&nbsp;BORDERCOLOR,../images/tick.gif,../images/tick.gif,../images/notick.gif,IEx 3.0
&nbsp;&nbsp;BORDERCOLORDARK,../images/tick.gif,../images/notick.gif,../images/notick.gif,IEx 3.0
&nbsp;&nbsp;BORDERCOLORLIGHT,../images/tick.gif,../images/notick.gif,../images/notick.gif,IEx 3.0
&nbsp;&nbsp;COLSPAN,../images/tick.gif,../images/tick.gif,../images/tick.gif,3.2
&nbsp;&nbsp;HEIGHT,../images/tick.gif,../images/tick.gif,../images/notick.gif,3.2
&nbsp;&nbsp;NOWRAP,../images/tick.gif,../images/tick.gif,../images/tick.gif,3.2
&nbsp;&nbsp;ROWSPAN,../images/tick.gif,../images/tick.gif,../images/tick.gif,3.2
&nbsp;&nbsp;VALIGN,../images/tick.gif,../images/tick.gif,../images/notick.gif,3.2
&nbsp;&nbsp;WIDTH,../images/tick.gif,../images/tick.gif,../images/notick.gif,3.2
<A HREF='../form/text.htm' TITLE='View the &lt;TEXTAREA&gt; topic'><CODE>&lt;TEXTAREA&gt;</CODE></A>,../images/tick.gif,../images/tick.gif,../images/tick.gif,2.0
&nbsp;&nbsp;ACCESSKEY,../images/tick.gif,../images/notick.gif,../images/notick.gif,4.0
&nbsp;&nbsp;ALIGN,../images/tick.gif,../images/tick.gif,../images/tick.gif,2.0
&nbsp;&nbsp;COLS,../images/tick.gif,../images/tick.gif,../images/tick.gif,2.0
&nbsp;&nbsp;DATAFLD,../images/tick.gif,../images/notick.gif,../images/notick.gif,IEx 4.0
&nbsp;&nbsp;DATASRC,../images/tick.gif,../images/notick.gif,../images/notick.gif,IEx 4.0
&nbsp;&nbsp;DISABLED,../images/tick.gif,../images/notick.gif,../images/notick.gif,IEx 4.0
&nbsp;&nbsp;NAME,../images/tick.gif,../images/tick.gif,../images/tick.gif,2.0
&nbsp;&nbsp;READONLY,../images/tick.gif,../images/notick.gif,../images/notick.gif,4.0
&nbsp;&nbsp;ROWS,../images/tick.gif,../images/tick.gif,../images/tick.gif,2.0
&nbsp;&nbsp;TABINDEX,../images/tick.gif,../images/notick.gif,../images/notick.gif,4.0
&nbsp;&nbsp;WRAP,../images/tick.gif,../images/tick.gif,../images/notick.gif,3.2
<A HREF='../tables/tfoot.htm' TITLE='View the &lt;TFOOT&gt; topic'><CODE>&lt;TFOOT&gt;</CODE></A>,../images/tick.gif,../images/notick.gif,../images/notick.gif,3.2
&nbsp;&nbsp;ALIGN,../images/tick.gif,../images/notick.gif,../images/notick.gif,4.0
&nbsp;&nbsp;BGCOLOR,../images/tick.gif,../images/notick.gif,../images/notick.gif,IEx 4.0
&nbsp;&nbsp;VALIGN,../images/tick.gif,../images/notick.gif,../images/notick.gif,4.0
<A HREF='../atbles/th.htm' TITLE='View the &lt;TH&gt; topic'><CODE>&lt;TH&gt;</CODE></A>,../images/tick.gif,../images/tick.gif,../images/tick.gif,3.2
&nbsp;&nbsp;ALIGN,../images/tick.gif,../images/tick.gif,../images/tick.gif,3.2
&nbsp;&nbsp;BACKGROUND,../images/tick.gif,../images/tick.gif,../images/notick.gif,IEx 3.0
&nbsp;&nbsp;BGCOLOR,../images/tick.gif,../images/tick.gif,../images/notick.gif,IEx 3.0
&nbsp;&nbsp;BORDERCOLOR,../images/tick.gif,../images/tick.gif,../images/notick.gif,IEx 3.0
&nbsp;&nbsp;BORDERCOLORDARK,../images/tick.gif,../images/notick.gif,../images/notick.gif,IEx 3.0
&nbsp;&nbsp;BORDERCOLORLIGHT,../images/tick.gif,../images/notick.gif,../images/notick.gif,IEx 3.0
&nbsp;&nbsp;COLSPAN,../images/tick.gif,../images/tick.gif,../images/tick.gif,3.2
&nbsp;&nbsp;HEIGHT,../images/tick.gif,../images/tick.gif,../images/tick.gif,3.2
&nbsp;&nbsp;NOWRAP,../images/tick.gif,../images/tick.gif,../images/tick.gif,3.2
&nbsp;&nbsp;ROWSPAN,../images/tick.gif,../images/tick.gif,../images/tick.gif,3.2
&nbsp;&nbsp;VALIGN,../images/tick.gif,../images/tick.gif,../images/tick.gif,3.2
&nbsp;&nbsp;WIDTH,../images/tick.gif,../images/tick.gif,../images/tick.gif,3.2
<A HREF='../tables/thead.htm' TITLE='View the &lt;THEAD&gt; topic'><CODE>&lt;THEAD&gt;</CODE></A>,../images/tick.gif,../images/notick.gif,../images/notick.gif,3.2
&nbsp;&nbsp;ALIGN,../images/tick.gif,../images/notick.gif,../images/notick.gif,4.0
&nbsp;&nbsp;BGCOLOR,../images/tick.gif,../images/notick.gif,../images/notick.gif,IEx 4.0
&nbsp;&nbsp;VALIGN,../images/tick.gif,../images/notick.gif,../images/notick.gif,4.0
<A HREF='../tables/tr.htm' TITLE='View the &lt;TR&gt; topic'><CODE>&lt;TR&gt;</CODE></A>,../images/tick.gif,../images/tick.gif,../images/tick.gif,3.2
&nbsp;&nbsp;ALIGN,../images/tick.gif,../images/tick.gif,../images/tick.gif,3.2
&nbsp;&nbsp;BACKGROUND,../images/notick.gif,../images/tick.gif,../images/notick.gif,NS 3.0
&nbsp;&nbsp;BGCOLOR,../images/tick.gif,../images/tick.gif,../images/tick.gif,3.2
&nbsp;&nbsp;BORDERCOLOR,../images/tick.gif,../images/tick.gif,../images/notick.gif,IEx 3.0
&nbsp;&nbsp;BORDERCOLORDARK,../images/tick.gif,../images/notick.gif,../images/notick.gif,IEx 3.0
&nbsp;&nbsp;BORDERCOLORLIGHT,../images/tick.gif,../images/notick.gif,../images/notick.gif,IEx 3.0
&nbsp;&nbsp;VALIGN,../images/tick.gif,../images/tick.gif,../images/tick.gif,3.2
<A HREF='../infochar/tt.htm' TITLE='View the &lt;TT&gt; topic'><CODE>&lt;TT&gt;</CODE></A>,../images/tick.gif,../images/tick.gif,../images/tick.gif,2.0
<A HREF='../infochar/u.htm' TITLE='View the &lt;U&gt; topic'><CODE>&lt;U&gt;</CODE></A>,../images/tick.gif,../images/tick.gif,../images/tick.gif,2.0
<A HREF='../list/ul.htm' TITLE='View the &lt;UL&gt; topic'><CODE>&lt;UL&gt;</CODE></A>,../images/tick.gif,../images/tick.gif,../images/tick.gif,2.0
&nbsp;&nbsp;TYPE,../images/tick.gif,../images/tick.gif,../images/tick.gif,3.2
<A HREF='../infochar/var.htm' TITLE='View the &lt;VAR&gt; topic'><CODE>&lt;VAR&gt;</CODE></A>,../images/tick.gif,../images/tick.gif,../images/tick.gif,2.0
<A HREF='../block/xmp.htm' TITLE='View the &lt;XMP&gt; topic'><CODE>&lt;XMP&gt;</CODE></A>,../images/tick.gif,../images/tick.gif,../images/tick.gif,2.0


HTML Comparison Table

Element / Attribute IEx NS Mos Spec.


Introduction to the HTMLib

Welcome to the HTML Reference Library


Comparison Table Data

 Element,IEx,Netscape,Mosaic,Spec &lt;!-- ...,tick.gif,tick.gif,tick.gif,HTML 2.0 &lt;!DOCTYPE ...&gt;,tick.gif,tick.gif,tick.gif,HTML 2.0 &lt;A ...&gt;,tick.gif,tick.gif,tick.gif,HTML 2.0 &nbsp;&nbsp;...HREF,tick.gif,tick.gif,tick.gif,HTML 2.0 &nbsp;&nbsp;Mailto : ...TITLE,tick.gif,tick.gif,tick.gif,Mos 2.0 &nbsp;&nbsp;...NAME,tick.gif,tick.gif,tick.gif,HTML 2.0 &nbsp;&nbsp;...TITLE,tick.gif,tick.gif,notick.gif,HTML 2.0 &nbsp;&nbsp;...REL,notick.gif,notick.gif,notick.gif,HTML 2.0 &nbsp;&nbsp;...REV,notick.gif,notick.gif,notick.gif,HTML 2.0 &nbsp;&nbsp;...URN,notick.gif,notick.gif,notick.gif,HTML 2.0 &nbsp;&nbsp;...METHODS,notick.gif,notick.gif,notick.gif,HTML 2.0 &nbsp;&nbsp;...TARGET,tick.gif,tick.gif,notick.gif,NS 2.0 &lt;ADDRESS&gt;,tick.gif,tick.gif,tick.gif,HTML 2.0 &lt;APPLET ...&gt;,tick.gif,notick.gif,tick.gif,NS 2.0 / HTML 3.2 &nbsp;&nbsp;...ARCHIVE,notick.gif,tick.gif,notick.gif,NS 3.0 &nbsp;&nbsp;...CODEBASE,tick.gif,tick.gif,notick.gif,NS 2.0 / HTML 3.2 &nbsp;&nbsp;...CODE,tick.gif,tick.gif,notick.gif,NS 2.0 / HTML 3.2 &nbsp;&nbsp;...ALT,tick.gif,tick.gif,notick.gif,NS 2.0 / HTML 3.2 &nbsp;&nbsp;...NAME,tick.gif,tick.gif,notick.gif,NS 2.0 / HTML 3.2 &nbsp;&nbsp;...WIDTH/HEIGHT,tick.gif,tick.gif,notick.gif,NS 2.0 / HTML 3.2 &nbsp;&nbsp;...ALIGN,tick.gif,tick.gif,notick.gif,NS 2.0 / HTML 3.2 &nbsp;&nbsp;...VSPACE/HSPACE,tick.gif,tick.gif,notick.gif,NS 2.0 / HTML 3.2 &nbsp;&nbsp;...MAYSCRIPT,notick.gif,tick.gif,notick.gif,NS 3.0 &nbsp;&nbsp;...PARAM NAME/VALUE,tick.gif,tick.gif,notick.gif,NS 2.0 / HTML 3.2 &lt;AREA ...&gt;,tick.gif,tick.gif,tick.gif,IEx 2.0 / HTML 3.2 &nbsp;&nbsp;...SHAPE,tick.gif,tick.gif,tick.gif,IEx 2.0 / HTML 3.2 &nbsp;&nbsp;...COORDS,tick.gif,tick.gif,tick.gif,IEx 2.0 / HTML 3.2 &nbsp;&nbsp;...HREF,tick.gif,tick.gif,tick.gif,IEx 2.0 / HTML 3.2 &nbsp;&nbsp;...TARGET,tick.gif,tick.gif,notick.gif,NS 2.0 / HTML 3.2 &nbsp;&nbsp;...NAME,notick.gif,tick.gif,notick.gif,NS 3.0 &lt;B&gt;,tick.gif,tick.gif,tick.gif,HTML 2.0 &lt;BASE ...&gt;,tick.gif,tick.gif,tick.gif,HTML 2.0 &nbsp;&nbsp;...HREF,tick.gif,tick.gif,tick.gif,HTML 2.0 &nbsp;&nbsp;...TARGET,tick.gif,tick.gif,notick.gif,NS 2.0 &lt;BASEFONT ...&gt;,tick.gif,tick.gif,notick.gif,NS 2.0 / Cougar &nbsp;&nbsp;...SIZE,tick.gif,tick.gif,notick.gif,NS 2.0 / Cougar &nbsp;&nbsp;...FACE,tick.gif,tick.gif,notick.gif,IEx 2.0 &nbsp;&nbsp;...COLOR,tick.gif,notick.gif,notick.gif,NS 2.0 &lt;BGSOUND ...&gt;,tick.gif,notick.gif,tick.gif,IEx 2.0 &nbsp;&nbsp;...LOOP,tick.gif,notick.gif,tick.gif,IEx 2.0 &nbsp;&nbsp;...DELAY,notick.gif,notick.gif,tick.gif,Mos 2.0 &nbsp;&nbsp;...SRC,tick.gif,notick.gif,tick.gif,IEx 2.0 &lt;BIG&gt;,tick.gif,tick.gif,notick.gif,NS 2.0 / HTML 3.2 &lt;BLINK&gt;,notick.gif,tick.gif,notick.gif,Netscape &lt;BLOCKQUOTE&gt;,tick.gif,tick.gif,tick.gif,HTML 2.0 &lt;BODY ...&gt;,tick.gif,tick.gif,tick.gif,HTML 2.0 &nbsp;&nbsp;...BACKGROUND,tick.gif,tick.gif,tick.gif,NS 1.1 / HTML 3.2 &nbsp;&nbsp;...TEXT,tick.gif,tick.gif,tick.gif,NS 1.1 / HTML 3.2 &nbsp;&nbsp;...LINK,tick.gif,tick.gif,tick.gif,NS 1.1 / HTML 3.2 &nbsp;&nbsp;...VLINK,tick.gif,tick.gif,tick.gif,NS 1.1 / HTML 3.2 &nbsp;&nbsp;...ALINK,tick.gif,tick.gif,notick.gif,NS 1.1 / HTML 3.2 &nbsp;&nbsp;...BGCOLOR,tick.gif,tick.gif,tick.gif,NS 1.1 / HTML 3.2 &nbsp;&nbsp;...BGPROPERTIES,tick.gif,notick.gif,notick.gif,IEx 2.0 &nbsp;&nbsp;...LEFTMARGIN,tick.gif,notick.gif,notick.gif,IEx 2.0 &nbsp;&nbsp;...TOPMARGIN,tick.gif,notick.gif,notick.gif,IEx 2.0 &lt;BR&gt;,tick.gif,tick.gif,tick.gif,HTML 2.0 &nbsp;&nbsp;...CLEAR,tick.gif,tick.gif,notick.gif,NS 1.1 / HTML 3.2 &lt;CAPTION&gt;,tick.gif,tick.gif,tick.gif,NS 1.1 / HTML 3.2 &nbsp;&nbsp;...ALIGN,tick.gif,tick.gif,tick.gif,NS 1.1 / HTML 3.2 &nbsp;&nbsp;...VALIGN,tick.gif,notick.gif,notick.gif,IEx 2.0 &lt;CENTER&gt;,tick.gif,tick.gif,tick.gif,Netscape 1.0 &lt;CITE&gt;,tick.gif,tick.gif,tick.gif,HTML 2.0 &lt;CODE&gt;,tick.gif,tick.gif,tick.gif,HTML 2.0 &lt;COL&gt;,tick.gif,notick.gif,notick.gif,IEx 3.0 / Cougar


Element,IEx,Netscape,Mosaic,Spec
&lt;!-- ...,../images/tick.gif,../images/tick.gif,../images/tick.gif,HTML 2.0
&lt;!DOCTYPE ...&gt;,../images/tick.gif,../images/tick.gif,../images/tick.gif,HTML 2.0
&lt;A ...&gt;,../images/tick.gif,../images/tick.gif,../images/tick.gif,HTML 2.0
&nbsp;&nbsp;...HREF,../images/tick.gif,../images/tick.gif,../images/tick.gif,HTML 2.0
&nbsp;&nbsp;Mailto : ...TITLE,../images/tick.gif,../images/tick.gif,../images/tick.gif,Mos 2.0
&nbsp;&nbsp;...NAME,../images/tick.gif,../images/tick.gif,../images/tick.gif,HTML 2.0
&nbsp;&nbsp;...TITLE,../images/tick.gif,../images/tick.gif,../images/notick.gif,HTML 2.0
&nbsp;&nbsp;...REL,../images/notick.gif,../images/notick.gif,../images/notick.gif,HTML 2.0
&nbsp;&nbsp;...REV,../images/notick.gif,../images/notick.gif,../images/notick.gif,HTML 2.0
&nbsp;&nbsp;...URN,../images/notick.gif,../images/notick.gif,../images/notick.gif,HTML 2.0
&nbsp;&nbsp;...METHODS,../images/notick.gif,../images/notick.gif,../images/notick.gif,HTML 2.0
&nbsp;&nbsp;...TARGET,../images/tick.gif,../images/tick.gif,../images/notick.gif,NS 2.0
&lt;ADDRESS&gt;,../images/tick.gif,../images/tick.gif,../images/tick.gif,HTML 2.0
&lt;APPLET ...&gt;,../images/tick.gif,../images/notick.gif,../images/tick.gif,NS 2.0 / HTML 3.2
&nbsp;&nbsp;...ARCHIVE,../images/notick.gif,../images/tick.gif,../images/notick.gif,NS 3.0
&nbsp;&nbsp;...CODEBASE,../images/tick.gif,../images/tick.gif,../images/notick.gif,NS 2.0 / HTML 3.2
&nbsp;&nbsp;...CODE,../images/tick.gif,../images/tick.gif,../images/notick.gif,NS 2.0 / HTML 3.2
&nbsp;&nbsp;...ALT,../images/tick.gif,../images/tick.gif,../images/notick.gif,NS 2.0 / HTML 3.2
&nbsp;&nbsp;...NAME,../images/tick.gif,../images/tick.gif,../images/notick.gif,NS 2.0 / HTML 3.2
&nbsp;&nbsp;...WIDTH/HEIGHT,../images/tick.gif,../images/tick.gif,../images/notick.gif,NS 2.0 / HTML 3.2
&nbsp;&nbsp;...ALIGN,../images/tick.gif,../images/tick.gif,../images/notick.gif,NS 2.0 / HTML 3.2
&nbsp;&nbsp;...VSPACE/HSPACE,../images/tick.gif,../images/tick.gif,../images/notick.gif,NS 2.0 / HTML 3.2
&nbsp;&nbsp;...MAYSCRIPT,../images/notick.gif,../images/tick.gif,../images/notick.gif,NS 3.0
&nbsp;&nbsp;...PARAM NAME/VALUE,../images/tick.gif,../images/tick.gif,../images/notick.gif,NS 2.0 / HTML 3.2
&lt;AREA ...&gt;,../images/tick.gif,../images/tick.gif,../images/tick.gif,IEx 2.0 / HTML 3.2
&nbsp;&nbsp;...SHAPE,../images/tick.gif,../images/tick.gif,../images/tick.gif,IEx 2.0 / HTML 3.2
&nbsp;&nbsp;...COORDS,../images/tick.gif,../images/tick.gif,../images/tick.gif,IEx 2.0 / HTML 3.2
&nbsp;&nbsp;...HREF,../images/tick.gif,../images/tick.gif,../images/tick.gif,IEx 2.0 / HTML 3.2
&nbsp;&nbsp;...TARGET,../images/tick.gif,../images/tick.gif,../images/notick.gif,NS 2.0 / HTML 3.2
&nbsp;&nbsp;...NAME,../images/notick.gif,../images/tick.gif,../images/notick.gif,NS 3.0
&lt;B&gt;,../images/tick.gif,../images/tick.gif,../images/tick.gif,HTML 2.0
&lt;BASE ...&gt;,../images/tick.gif,../images/tick.gif,../images/tick.gif,HTML 2.0
&nbsp;&nbsp;...HREF,../images/tick.gif,../images/tick.gif,../images/tick.gif,HTML 2.0
&nbsp;&nbsp;...TARGET,../images/tick.gif,../images/tick.gif,../images/notick.gif,NS 2.0
&lt;BASEFONT ...&gt;,../images/tick.gif,../images/tick.gif,../images/notick.gif,NS 2.0 / Cougar
&nbsp;&nbsp;...SIZE,../images/tick.gif,../images/tick.gif,../images/notick.gif,NS 2.0 / Cougar
&nbsp;&nbsp;...FACE,../images/tick.gif,../images/tick.gif,../images/notick.gif,IEx 2.0
&nbsp;&nbsp;...COLOR,../images/tick.gif,../images/notick.gif,../images/notick.gif,NS 2.0
&lt;BGSOUND ...&gt;,../images/tick.gif,../images/notick.gif,../images/tick.gif,IEx 2.0
&nbsp;&nbsp;...LOOP,../images/tick.gif,../images/notick.gif,../images/tick.gif,IEx 2.0
&nbsp;&nbsp;...DELAY,../images/notick.gif,../images/notick.gif,../images/tick.gif,Mos 2.0
&nbsp;&nbsp;...SRC,../images/tick.gif,../images/notick.gif,../images/tick.gif,IEx 2.0
&lt;BIG&gt;,../images/tick.gif,../images/tick.gif,../images/notick.gif,NS 2.0 / HTML 3.2
&lt;BLINK&gt;,../images/notick.gif,../images/tick.gif,../images/notick.gif,Netscape
&lt;BLOCKQUOTE&gt;,../images/tick.gif,../images/tick.gif,../images/tick.gif,HTML 2.0
&lt;BODY ...&gt;,../images/tick.gif,../images/tick.gif,../images/tick.gif,HTML 2.0
&nbsp;&nbsp;...BACKGROUND,../images/tick.gif,../images/tick.gif,../images/tick.gif,NS 1.1 / HTML 3.2
&nbsp;&nbsp;...TEXT,../images/tick.gif,../images/tick.gif,../images/tick.gif,NS 1.1 / HTML 3.2
&nbsp;&nbsp;...LINK,../images/tick.gif,../images/tick.gif,../images/tick.gif,NS 1.1 / HTML 3.2
&nbsp;&nbsp;...VLINK,../images/tick.gif,../images/tick.gif,../images/tick.gif,NS 1.1 / HTML 3.2
&nbsp;&nbsp;...ALINK,../images/tick.gif,../images/tick.gif,../images/notick.gif,NS 1.1 / HTML 3.2
&nbsp;&nbsp;...BGCOLOR,../images/tick.gif,../images/tick.gif,../images/tick.gif,NS 1.1 / HTML 3.2
&nbsp;&nbsp;...BGPROPERTIES,../images/tick.gif,../images/notick.gif,../images/notick.gif,IEx 2.0
&nbsp;&nbsp;...LEFTMARGIN,../images/tick.gif,../images/notick.gif,../images/notick.gif,IEx 2.0
&nbsp;&nbsp;...TOPMARGIN,../images/tick.gif,../images/notick.gif,../images/notick.gif,IEx 2.0
&lt;BR&gt;,../images/tick.gif,../images/tick.gif,../images/tick.gif,HTML 2.0
&nbsp;&nbsp;...CLEAR,../images/tick.gif,../images/tick.gif,../images/notick.gif,NS 1.1 / HTML 3.2
&lt;CAPTION&gt;,../images/tick.gif,../images/tick.gif,../images/tick.gif,NS 1.1 / HTML 3.2
&nbsp;&nbsp;...ALIGN,../images/tick.gif,../images/tick.gif,../images/tick.gif,NS 1.1 / HTML 3.2
&nbsp;&nbsp;...VALIGN,../images/tick.gif,../images/notick.gif,../images/notick.gif,IEx 2.0
&lt;CENTER&gt;,../images/tick.gif,../images/tick.gif,../images/tick.gif,Netscape 1.0
&lt;CITE&gt;,../images/tick.gif,../images/tick.gif,../images/tick.gif,HTML 2.0
&lt;CODE&gt;,../images/tick.gif,../images/tick.gif,../images/tick.gif,HTML 2.0
&lt;COL&gt;,../images/tick.gif,../images/notick.gif,../images/notick.gif,IEx 3.0 / Cougar


Complete Repeating table code

 <OBJECT id=comp CLASSID="clsid:333C7BC4-460F-11D0-BC04-0080C7055A83"> <PARAM NAME="DataURL" VALUE="compdata.txt"> <PARAM NAME="UseHeader" VALUE="True"> </OBJECT> <CENTER> <TABLE datasrc="#null" BORDER DATAPAGESIZE="10" ID="TABLE1" WIDTH="100%" STYLE="display:none;border-width:1px;border-style:ridge" CLASS="comptable"> <COL ALIGN="left"> <COLGROUP SPAN="4" ALIGN="center"> <THEAD> <TR> <TD><STRONG>Element</STRONG> </TD> <TD><STRONG>IEx</STRONG> </TD> <TD><STRONG>NS</STRONG> </TD> <TD><STRONG>Mos</STRONG> </TD> <TD><STRONG>Spec</STRONG> </TD> </TR> </THEAD> <TBODY> <TR> <TD WIDTH="40%" VALIGN="top"> <DIV DATAFLD="Element" DATAFORMATAS="html" CLASS="fixedDIV"></DIV> </TD> <TD WIDTH="10%" VALIGN="top"> <IMG DATAFLD="IEx" WIDTH="11" HEIGHT="11" ALT="Y"> </TD> <TD WIDTH="10%" VALIGN="top"> <IMG DATAFLD="Netscape" WIDTH="11" HEIGHT="11" ALT="Y"> </TD> <TD WIDTH="10%" VALIGN="top"> <IMG DATAFLD="Mosaic" WIDTH="11" HEIGHT="11" ALT="Y"> </TD> <TD WIDTH="30%" VALIGN="top"> <DIV datafld="Spec" DATAFORMATAS="html" CLASS="smallDIV"></DIV> </TD> </TR> </TBODY> <TFOOT> <TR> <TD COLSPAN="5" ALIGN="center"> <STRONG>The Comparison Table</STRONG> </TD> </TR> </TFOOT> </TABLE> </CENTER>


Data Binding Scripting

Data Binding


Data Binding
Related Topics Data Binding


Visual Filters Scripting

Visual Filters

Filters | Properties | Methods
alpha | duration | addAmbient
blur | status | addCone
chroma |  | addPoint
dropShadow |  | changeColor
flipH |  | changeStrength
flipV |  | clear
glow |  | moveLight
gray |  | play
invert |  | stop
light |  |
mask |  |
shadow |  |
wave |  |
xray |  |
revealTrans |  |
blendTrans |  |


Visual Filters
Related Topics Filters


Dynamic HTML Standard Events list

Dynamic HTML Events

Events
onclick | ondblclick
ondragstart | onfilterchange
onhelp | onkeydown
onkeypress | onkeyup
onmousedown | onmousemove
onmouseout | onmouseover
onmouseup | onselectstart


Dynamic HTML Events

Dynamic HTML standard Events
Related Topics Standard Events


Dynamic HTML Standard Methods list

Dynamic HTML Methods
Methods
click
contains
getAttribute
insertAdjacentHTML
insertAdjacentText
removeAttribute
scrollIntoView
setAttribute


Dynamic HTML Methods

Dynamic HTML standard Methods
Related Topics Standard Methods


Dynamic HTML Standard Properties list

Dynamic HTML Properties

Properties
className | dataFld
dataFormatAs | dataSrc
document | filters
id | innerHTML
innerText | isTextEdit
lang | language
offsetHeight | offsetLeft
offsetParent | offsetTop
offsetWidth | outerHTML
outerText | parentElement
parentTextEdit | recordNumber
sourceIndex | style
tagName | title


Dynamic HTML Properties

Dynamic HTML standard Properties
Related Topics Standard Properties


Dynamic HTML Scripting

Dynamic HTML

Properties | Methods | Events
className | removeMember | onclick
docHeight | scrollIntoView | ondblclick
docLeft | contains | onhelp
docTop | getMember | onmousedown
docWidth | setMember | onmousemove
parentElement |  | onmouseout
sourceIndex |  | onmouseover
tagName |  | onmouseup
id |  |
style |  |
title |  |


Dynamic HTML

Dynamic HTML overview
Related Topics


<BASEFONT ...> Syntax

<BASEFONT...
 SIZE="1-7, default 3"
FACE="Font_face"
COLOR="document_colour"
LANG="Country code"
TITLE="ToolTip_text"
CLASS="Style_sheet_class"
STYLE="In-line_style"
ID="Unique_Identifier"
 >


<BASEFONT ...> Scripting

The <BASEFONT> element supports some of the Standard Dynamic HTML properties and methods, but no events.
See the properties and methods sections for details.


<BASEFONT>


<BASE ...> Scripting

The <BASE> element supports some of the standard Dynamic HTML Properties, Methods and Events. See the <BASE> scripting section for details.


<BASE ...> Syntax

<BASE...
CLASS="Style Sheet class"
HREF="base location"
ID="Style Sheet/scripting identifier"
LANG="Language"
TARGET="base window for links"
TITLE="Informational ToolTip"
 >


<BASE>


Possible Document Colour Names

<BODY> colouring options
Related Topics


<BODY ...> Syntax

<BODY...
ALINK="#rrggbb|Colour Name"
BACKGROUND="file_name.gif"
BGCOLOR="#rrggbb|Colour Name"
BGPROPERTIES="fixed"
BOTTOMMARGIN="pixel_value"
CLASS="Style Sheet Class"
ID="Unique Identifier"
LANG="Country code"
LANGUAGE="Scripting language"
LEFTMARGIN="pixel value"
LINK="#rrggbb|Colour Name"
RIGHTMARGIN="pixel value"
SCROLL="yes|no"
STYLE="Stylings"
TEXT="#rrggbb|Colour Name"
TITLE="Information"
TOPMARGIN="pixel value"
VLINK="#rrggbb|Colour Name"
>


<BODY ...> Scripting

Besides the Standard Dynamic HTML properties, methods & events, <BODY...> supports:
Properties | Methods | Events
background | blur | onblur
bgColor | createTextRange | onfocus
bgProperties | focus | onload
bottomMargin |  | onunload
clientHeight |  |
clientWidth |  |
leftMargin |  |
link (vlink & alink) |  |
rightMargin |  |
scroll |  |
scrollHeight |  |
scrollLeft |  |
scrollTop |  |
scrollWidth |  |
text |  |
topMargin |  |


<BODY>
Related Topics <BODY...> Syntax <BODY...> Scripting


<HEAD>


<HTML>


<ISINDEX>


<LINK ...> Syntax

<LINK HREF="resource location"
 TITLE="Title of resource"
REL="Forward relationship"
REV="Reverse relationship"
ID="unique id"
STYLE="style setting"
DISABLED
 >


<LINK ...> Scripting

The <LINK> element supports some of the standard Dynamic HTML Properties (and the href, disabled, rel, readystate property) and Methods.
It supports the following events.
onerror
onload
onreadystatechange
See the <LINK> Scripting section for details.


<LINK>
Related Topics <LINK> Syntax <LINK> Scripting


<META>
Related Topics


<NEXTID>


Document Structure Elements


<!DOCTYPE>

Prologue Identifiers


The 'Safe browser palette'
Related Topics


<STYLE>
Related Topics


<TITLE ...> Scripting

The <TITLE> element supports some of the standard Dynamic HTML Properties and Methods. See the <TITLE> scripting section for details.


<TITLE>
<TITLE> Scripting


ActiveX
Related Topics


ActiveX examples

ActiveX/VBScript examples
Related Topics


Client Pull
Related Topics


The Activated Colour Wizard
Related Topics


The HTMLib Gadgets
Related Topics


Dynamic Documents


Server Push


Expando Syntax

As you've probably gathered, the syntax for expando properties is virtually endless, as anything can be used.


Expando Attributes/Properties


Expando Scripting

Expando attributes used in known elements will all be accessible as properties of the referenced element through scripting. Note that this is case-sensitive for Jscript/Javascript.


<FORM ...> Scripting

Besides the Standard Dynamic HTML properties, methods & events, <FORM...> supports:
Properties | Methods | Events
action | reset | onreset
encoding | submit | onsubmit
method |  |
name |  |
target |  |


<FORM ...> Syntax

<FORM
ACTION="URL"
CLASS="Style Sheet Class"
ENCTYPE="Form encoding"
ID="Unique Identifier"
LANG="Language"
LANGUAGE="Scripting Language"
METHOD="Get|Post"
NAME="Form Name"
STYLE="Styling"
TARGET="Target Window"
TITLE="Informational ToolTip"
 >


<FORM>
Related Topics <FORM> syntax <FORM> Scripting


<INPUT ...> Syntax

<INPUT...
 ACCESSKEY="Shortcut key"
ALIGN="Alignment"
CHECKED="Default check"
CLASS="Style Sheet Class"
DATAFLD="Column Name"
DATAFORMATAS="Text|HTML"
DATASRC="Data Source"
DISABLED
ID="Idenitifier"
LANG="Language"
LANGUAGE="Scripting Language"
MAXLENGTH="Maximum input length"
NAME="Element Name"
READONLY
SIZE="Input size"
SRC="Image URL"
STYLE="Styling"
TABINDEX="Tabbing order"
TITLE="Informational ToolTip"
TYPE="Control Type"
VALUE="Initial value"
 >


<INPUT ...> Scripting

Besides the Standard Dynamic HTML properties, methods & events, <INPUT...> supports:
Properties | Methods | Events
align | blur | onblur
checked | createTextRange | onafterupdate
dataFld | focus | onbeforeupdate
dataFormatAs | select | onblur
dataSrc |  | onchange
defaultChecked |  | onerrorupdate
defaultValue |  | onfocus
disabled |  | onselect
form |  |
indeterminate |  |
maxLength |  |
name |  |
readOnly |  |
recordNumber |  |
status |  |
tabIndex |  |
type |  |
value |  |


<INPUT>
Related Topics <INPUT> syntax <INPUT> Scripting


<KEYGEN>


<LABEL>
Related Topics <LABEL> syntax <LABEL> Scripting


<LABEL ...> Scripting

The <LABEL> element supports all of the standard Dynamic HTML Properties, Methods and Events. It also supports the accessKey, dataFld, dataFormatAs, dataSrc and htmlFor properties. See the <LABEL> properties section for details.


<LABEL ...> Syntax

<LABEL
ACCESSKEY="Shortcut key"
CLASS="Style Sheet Class"
DATAFLD="Column Name"
DATAFORMATAS="Text|HTML"
DATASRC="Data Source"
FOR="Target Control"
ID="Unique Identifier"
LANG="Language"
LANGUAGE="Scripting Language"
STYLE="Styling"
TITLE="Informational ToolTip"
 >


<OPTION>
Related Topics <OPTION> syntax <OPTION> Scripting


<OPTION ...> Scripting

The <OPTION> element supports some of the standard Dynamic HTML Properties and Methods, but no events. Also, the <OPTION> element supports name, selected, text, type and value properties.
See the <OPTION> scripting section for details.


<OPTION ...> Syntax

<OPTION...
 CLASS="Style Sheet Class"
ID="Idenitifier"
LANG="Language"
LANGUAGE="Scripting Language"
NAME="Element Name"
SELECTED="Default selection"
STYLE="Styling"
TITLE="Informational ToolTip"
TYPE="Control Type"
VALUE="Initial value"
 >


Forms overview

Forms


<SELECT>
Related Topics <SELECT> syntax <SELECT> Scripting


<SELECT ...> Scripting

Besides the Standard Dynamic HTML properties, methods & events, <SELECT...> supports:
Properties | Methods | Events
dataFld | add | onafterupdate
dataSrc | blur | onbeforeupdate
disabled | focus | onblur
form | item | onchange
length | remove | onerrorupdate
multiple |  | onfocus
name |  | onrowenter
recordNumber |  | onrowexit
selectedIndex |  |
size |  |
tabIndex |  |
type |  |


<SELECT ...> Syntax

<SELECT...
 ACCESSKEY="Shortcut Key"
ALIGN="Alignment"
CLASS="Style Sheet Class"
DATAFLD="Column Name"
DATASRC="Data Source"
DISABLED
ID="Idenitifier"
LANG="Language"
LANGUAGE="Scripting Language"
MULTIPLE="Multiple select flag"
NAME="Element Name"
SIZE="Input size"
STYLE="Styling"
TITLE="Informational ToolTip"
TABINDEX="Tabbing Order"
TYPE="Control Type"
 >


<TEXTAREA ...> Scripting

Besides the Standard Dynamic HTML properties, methods & events, <TEXTAREA...> supports:
Properties | Methods | Events
clientHeight | blur | onafterupdate
clientWidth | createTextRange | onbeforeupdate
cols | focus | onblur
dataFld |  | onchange
dataSrc |  | onerrorupdate
disabled |  | onfocus
form |  | onrowenter
name |  | onrowexit
readOnly |  | onscroll
rows |  |
scrollHeight |  |
scrollLeft |  |
scrollTop |  |
scrollWidth |  |
tabIndex |  |
type |  |
value |  |
wrap |  |


<TEXTAREA ...> Syntax

<TEXTAREA...
 ACCESSKEY="Shortcut Key"
ALIGN="Alignment"
CLASS="Style Sheet Class"
COLS="Number of columns"
DATAFLD="Column Name"
DATASRC="Data Source"
DISABLED
ID="Idenitifier"
LANG="Language"
LANGUAGE="Scripting Language"
NAME="Element Name"
READONLY
ROWS="Number of rows"
STYLE="Styling"
TABINDEX="Tabbing Order"
TITLE="Informational ToolTip"
WRAP="Word Wrapping"
 >


<TEXTAREA>
Related Topics <TEXTAREA> syntax <TEXTAREA> Scripting


Frames examples
Related Topics


<IFRAME>

<IFRAME> - Floating frames
Related Topics <IFRAME> syntax <IFRAME> Scripting


<IFRAME ...> Scripting

The <IFRAME> element supports all of the standard Dynamic HTML Properties and Methods. It also supports the align, border, borderColor, dataFld, dataSrc, frameBorder, height, hspace, scrolling, src, vspace and width properties. See the <IFRAME> properties section for details.


<IFRAME...> Syntax

<IFRAME...
ALIGN="Alignment"
BORDER="pixel_value"
BORDERCOLOR="#rrggbb or colour name"
CLASS="Style Sheet Class"
DATAFLD="Column Name"
DATASRC="Data Source"
FRAMEBORDER="yes|no|0"
HEIGHT="pixel value"
HSPACE="pixel value"
ID="Unique Identifier"
LANG="Language"
LANGUAGE="Scripting Language"
NAME="value|value%|*"
SCROLLING="Scrollbars"
SRC="URL"
STYLE="Styling"
TITLE="Information"
VSPACE="pixel value"
WIDTH="pixel value"
 >


<FRAME...> Syntax

<FRAME
BORDERCOLOR="#rrggbb or colour name"
CLASS="Style Sheet Class"
DATAFLD="Column Name"
DATASRC="Data Source"
FRAMEBORDER="yes|no|0"
FRAMESPACING="pixel_value"
ID="Unique Identifier"
LANG="Language"
LANGUAGE="Scripting Language"
MARGINHEIGHT="pixel_value"
MARGINWIDTH="pixel_value"
NAME="frame_name"
NORESIZE
SCROLLING="yes|no|auto"
SRC="URL"
TITLE="Information"
 >


<FRAME>
Related Topics <FRAME> Syntax <FRAME> Scripting


<FRAME ...> Scripting

The <FRAME> element supports some of the standard Dynamic HTML Properties and Methods. It also supports the borderColor, dataFld, dataSrc, frameBorder, marginHeight, marginWidth, noResize, scrolling and src properties. See the <FRAME> properties section for details.


<FRAMESET> Syntax

<FRAMESET...
BORDER="pixel_value"
BORDERCOLOR="#rrggbb or colour name"
CLASS="Style Sheet Class"
COLS="value|value%|*"
FRAMEBORDER="yes|no|0"
FRAMESPACING="pixel value"
ID="Unique Identifier"
LANG="Language"
LANGUAGE="Scripting Language"
ROWS="value|value%|*"
TITLE="Information"
 >


<FRAMESET ...> Scripting

The <FRAMESET> element supports some of the standard Dynamic HTML Properties and Methods and a few Events. It also supports the border, borderColor, cols, frameBorder, frameSpacing and rows properties. See the <FRAMESET> properties section for details.


<FRAMESET>
Related Topics <FRAMESET> Syntax <FRAMESET> Scripting


<NOFRAMES>
Related Topics


Frames overview

Frames


History List Error

One of the HTMLib topics that you read has not been recognised. This means that it won't have an entry in the history list. I'd be very grateful if you could isolate the particular topic (it's still navigable to by using the 'Back' button in the HTMLib) and let me know that it isn't showing up in the History List.
It could that you attempted to send internet mail using one of the HTMLib external mail links and the mail could not be sent - this causes an entry in the History list. Navigating back with the 'Back' button should highlight whether this was the case or not.

Details can be mailed to me at htmlib@htmlib.demon.co.uk

Thanks and sorry for the inconvenience.

© 1995-1998, Stephen Le Hunte


Help on using the HTMLib

All information contained in the HTMLib is available directly from the Index/Contents buttons in the toolbar. Below is a description of the buttons. See below for a description of the History List.

Click the button below to get information on its function.

Contents Toolbar button Index Toolbar button Print Toolbar button Back Toolbar button Synchronise contents Toolbar button Help Toolbar button

This is the Contents button. It displays the expanding table of contents for the HTMLib in the left hand frame.

The Index button. It displays the HTMLib index, which has references to all the elements, Style Sheet properties, and Document Objects detailed in the HTMLib.

The Print button. This prints the currently displayed topic (being displayed in this window).

The Back button. This navigates back through the history of the displayed topics.

The Synchronise Contents button. If you get 'lost' navigating through the HTMLib via links in the documents/Related topics links, press the 'Synchronise Contents' button, which will highlight in the Contents pane, exactly where you are in the HTMLib. By default, auto-synching is enabled, hence this button is disabled. To disable auto-synching, enabling this button, uncheck Auto Synching from the Navigate menu.

The Help button. Pressing this button displays this document, but then you already know that one.

The Menu Options
Activate the menu items (in the normal fashion) and click each one for a description of its function.

File View Navigate Help

Reload HTMLib (Ctrl+R)
Print the Current topic (Ctrl+P)
Exit (Ctrl+Q) Contents
Index
Font
...Large
...Normal
History List Go Back (Ctrl+B)
Auto Synching
The HTMLib Web Site Using the HTMLib
About

Description

The History List
The History List maintains a list of the topics viewed during the current HTMLib session. Whenever a new topic is navigated to (from the Table of Contents, Index, a document link, or a Related Topics link), the document title will be appended to the History List. At any time, any document in the History List can be navigated to by selecting the document title and pressing the 'Enter' key.

Note : 'Reloading' the HTMLib empties the History list. Also, note that the topic listed in the History list may not match that displayed after the 'Back' button is used. It doesn't list the current location, rather maintains a list of visited topics, displaying the most recent document that was directly navigated to.

© 1995-1998, Stephen Le Hunte


Help on using the HTMLib

Help - how to use the HTMLib


Important Information


<APPLET ...> Syntax

<APPLET...
ALIGN="Alignment"
ALT="alternateText"
ARCHIVE="compressed_file"
CLASS="Style Sheet class"
CODE="appletFile"
CODEBASE="URL"
DATAFLD="Column Name"
DATASRC="Date Source"
HEIGHT="pixels"
HSPACE="pixels"
ID="Unique Identifier"
MAYSCRIPT
NAME="appletInstanceName"
SRC="URL"
STYLE="Styling"
TITLE="ToolTip"
VSPACE="pixels"
WIDTH="pixels"
>
<PARAM NAME="Attribute2" VALUE="value"...
DATAFLD="Column Name"
DATAFORMATAS="Text|HTML"
DATASRC="Data Source">
. . .
[alternate HTML]
 </APPLET>


<APPLET>

Adding Java Applets
Related Topics <APPLET...> Syntax <APPLET...> Scripting


<APPLET ...> Scripting

Besides the Standard Dynamic HTML properties, methods & events, <APPLET...> supports:
Properties | Methods | Events
align | blur | onafterupdate
code | focus | onbeforeupdate
codebase |  | onblur
dataFld |  | ondataavailable
dataSrc |  | ondatasetchanged
hspace |  | ondatasetcomplete
readystate |  | onerrorupdate
name |  | onfocus
src |  | onload
vspace |  | onreadystatechange
 |  | onresize
 |  | onrowenter
 |  | onrowexit


<BGSOUND...>
Related Topics <BGSOUND> syntax <BGSOUND> Scripting


<BGSOUND ...> Scripting

The <BGSOUND> element supports all of the standard Dynamic HTML Properties and some of the Methods, but no events.
Also, the <BGSOUND> element supports the balance, loop, src and volume properties. See the <BGSOUND> scripting section for details.


<BGSOUND ...> Syntax

<BGSOUND...
BALANCE="Stereo balance"
CLASS="Style Sheet class"
ID="Style Sheet/scripting identifier"
LANG="Language"
LOOP="Number of loops"
SRC="URL"
TITLE="Informational ToolTip"
VOLUME="Volume"
 >


Client Side Image Map Syntax

<IMG SRC="filename.gif" USEMAP="#map">

< MAP NAME="map"
 CLASS="Style Sheet Class"
ID="Identifier"
LANG="Language"
LANGUAGE="Scripting Language"
STYLE="Styling"
TITLE="Informational title">
 < AREA
 ALT="Alternative text"
CLASS="Style Sheet Class"
COORDS="x,y points according to SHAPE
HREF="URL_of_destination"
ID="Identifier"
LANG="Language"
LANGUAGE="Scripting Language"
NAME="hotspot_area_name"
SHAPE="RECT|CIRCLE|POLY"
STYLE="Styling"
TARGET="target_frame_or_window_name"
TITLE="Informational ToolTip">
 </MAP>


Client Side Image Maps Scripting

Client Side Image Map Scripting

Besides the Standard Dynamic HTML properties, methods & events, <AREA> element supports:
Properties | Methods | Events
alt | blur | onblur
coords | focus | onfocus
hash |  |
host |  |
hostname |  |
href |  |
noHref |  |
pathname |  |
port |  |
protocol |  |
search |  |
shape |  |
target |  |


Client Side Image Maps
Related Topics Client Side image map syntax Scripting details


<EMBED ...> Syntax

<EMBED...
ALIGN="Alignment"
ALT="Alternative text"
BORDER="pixel_value"
CLASS="Style Sheet class"
HIDDEN="true|false"
HSPACE="pixel_value"
ID="Unique Identifier"
NAME="unique_ID"
PALETTE="foreground|background"
PLUGINSPACE="URL"
STYLE="Styling"
TITLE="Informational ToolTip"
TYPE="MIME type"
VSPACE="pixel_value"
 >
<NOEMBED>
. . .Alternative content. . .
</NOEMBED>
</EMBED>


<EMBED ...> Scripting

Besides the Standard Dynamic HTML properties, methods & events, <EMBED...> supports:
Properties | Methods | Events
align | blur | onblur
alt | focus | onfocus
border |  |
hidden |  |
height |  |
hspace |  |
vspace |  |
palette |  |
pluginspace |  |
type |  |


<EMBED>
Related Topics <EMBED> Syntax <EMBED> Scripting


<IMG ...> Syntax

<IMG
ALIGN="left|right|top|texttop|middle|
absmiddle|baseline|bottom|absbottom"
ALT="Alternative_Text"
BORDER="pixel_value"
CLASS="Style Sheet class"
DATAFLD="Column Name"
DATASRC="Data Source"
HEIGHT="pixel_value"
HSPACE="pixel_value"
ID="Unique Identifier"
ISMAP
LANG="Language"
LANGUAGE="Scripting Language"
LOWSRC="low resolution image"
NAME="Image Name"
SRC="URL_of_image"
STYLE="Styling"
TITLE="Informational ToolTIp"
VSPACE="pixel_value"
WIDTH="pixel_value"
 >


<IMG ...> Scripting

Besides the Standard Dynamic HTML properties, methods & events, <IMG...> supports:
Properties | Methods | Events
align | blur | onabort
alt | focus | onblur
border |  | onerror
complete |  | onfocus
dataFld |  | onload
dataSrc |  | onresize
fileCreatedDate |  |
fileModifiedDate |  |
fileSize |  |
fileUpdatedDate |  |
height |  |
hspace |  |
isMap |  |
lowsrc |  |
name |  |
readyState |  |
scrollHeight |  |
scrollLeft |  |
scrollTop |  |
scrollWidth |  |
src |  |
vspace |  |
width |  |


<IMG>
Related Topics <IMG> Syntax <IMG> Scripting


<OBJECT>
Related Topics <OBJECT...> Syntax <OBJECT...> Scripting


<OBJECT ...> Scripting

Besides the Standard Dynamic HTML properties, methods & events, <OBJECT...> supports:
Properties | Methods | Events
align | blur | onafterupdate
classId | focus | onbeforeupdate
code |  | onblur
codebase |  | ondataavailable
data |  | ondatasetchanged
dataFld |  | ondatasetcomplete
datsSrc |  | onerror
name |  | onerrorupdate
standby |  | onfocus
tabIndex |  | onload
title |  | onreadystatechange
type |  | onresize
width |  | onrowenter
readyState |  | onrowexit


<OBJECT ...> Syntax

<OBJECT...
ACCESSKEY="Shortcut Key"
ALIGN="alignment"
BORDER="pixels"
CLASS="Style Sheet Class"
CLASSID="CLSID_of_inserted_object"
CODE="Implementation_code"
CODEBASE="URL_for_object_download"
DATA="Initialising_data_stream"
DATAFLD="Column Name"
DATASRC="Data Source"
HEIGHT="pixels"
HSPACE="pixels"
ID="Unique Identifier"
LANG="Language"
LANGUAGE="Scripting Language"
NAME="Object Name"
STANDBY="Standby text"
STYLE="Styling"
TABINDEX="Tabbing Order"
TITLE="Informational ToolTip"
TYPE="MIME Type"
WIDTH="pixels"
VSPACE="pixels"
 >
<PARAM NAME="Attribute" VALUE="value"...
DATAFLD="Column Name"
DATAFORMATAS="Text|HTML"
DATASRC="Data Source">
. . .
[alternate HTML]
 </APPLET>


Media Embedding


<SOUND>
Related Topics


In-line video scripting

<IMG ...> Scripting

When the <IMG> element is used to embed a video clip, the <IMG> element supports the following properties (in addition to those normally supported)
control
dynsrc
loop
loopdelay
start


In-line video
Related Topics In line Video Scripting


In-Line VRML
Related Topics


<ACRONYM ...> Scripting

The <ACRONYM> element supports all of the standard Dynamic HTML Properties, Methods and Events.


<ACRONYM ...> Syntax

<ACRONYM...
CLASS="Style Sheet class"
ID="Style Sheet/scripting identifier"
LANG="Language"
LANGUAGE="Scripting language"
STYLE="In line styling"
TITLE="Informational ToolTip"
 >


<ACRONYM>


<BIG ...> Scripting

The <BIG> element supports all of the standard Dynamic HTML Properties, Methods and Events.


<BIG ...> Syntax

<BIG...
CLASS="Style Sheet class"
ID="Style Sheet/scripting identifier"
LANG="Language"
LANGUAGE="Scripting language"
STYLE="In line styling"
TITLE="Informational ToolTip"
 >


<BIG>


<BLINK>


<B ...> Scripting

The <B> element supports all of the standard Dynamic HTML Properties, Methods and Events.


<B ...> Syntax

<B...
CLASS="Style Sheet class"
ID="Style Sheet/scripting identifier"
LANG="Language"
LANGUAGE="Scripting language"
STYLE="In line styling"
TITLE="Informational ToolTip"
 >


<B>
Related Topics <B> syntax <B> Scripting


<BUTTON ...> Scripting

The <BUTTON> element supports all of the standard Dynamic HTML Properties, Methods and Events. It also supports the accessKey, dataFld, dataFormatAs, dataSrc and disabled properties. See the <BUTTON> properties section for details.


<BUTTON ...> Syntax

<BUTTON
ACCESSKEY="Shortcut key"
CLASS="Style Sheet Class"
DATAFLD="Column Name"
DATAFORMATAS="Text|HTML"
DATASRC="Data Source"
DISABLED
ID="Unique Identifier"
LANG="Language"
LANGUAGE="Scripting Language"
STYLE="Styling"
TITLE="Informational ToolTip"
TYPE="Button|Reset|Submit"
 >


<BUTTON>
Related Topics <BUTTON> syntax <BUTTON> Scripting


<CITE ...> Scripting

The <CITE> element supports all of the standard Dynamic HTML Properties, Methods and Events.


<CITE ...> Syntax

<CITE...
CLASS="Style Sheet class"
ID="Style Sheet/scripting identifier"
LANG="Language"
LANGUAGE="Scripting language"
STYLE="In line styling"
TITLE="Informational ToolTip"
 >


<CITE>


<CODE ...> Scripting

The <CODE> element supports all of the standard Dynamic HTML Properties, Methods and Events.


<CODE ...> Syntax

<CODE...
CLASS="Style Sheet class"
ID="Style Sheet/scripting identifier"
LANG="Language"
LANGUAGE="Scripting language"
STYLE="In line styling"
TITLE="Informational ToolTip"
 >


<CODE>


<!-- -->

<!-- Comments -->


<COMMENT ...> Scripting

The <COMMENT> element supports some of the standard Dynamic HTML Properties and Methods. See the <COMMENT> scripting section for details.


<COMMENT ...> Syntax

<COMMENT...
ID="Style Sheet/scripting identifier"
LANG="Language"
TITLE="Informational ToolTip"
 >


<COMMENT>


<DEL ...> Scripting

The <DEL> element supports all of the standard Dynamic HTML Properties, Methods and Events. <DEL> also supports the cite and datetime properties.


<DEL ...> Syntax

<DEL...
CITE="Citation"
CLASS="Style Sheet class"
DATETIME="Date/Time of insertion"
ID="Style Sheet/scripting identifier"
LANG="Language"
LANGUAGE="Scripting language"
STYLE="In line styling"
TITLE="Informational ToolTip"
 >


<DEL>


<DFN ...> Scripting

The <DFN> element supports all of the standard Dynamic HTML Properties, Methods and Events.


<DFN ...> Syntax

<DFN...
CLASS="Style Sheet class"
ID="Style Sheet/scripting identifier"
LANG="Language"
LANGUAGE="Scripting language"
STYLE="In line styling"
TITLE="Informational ToolTip"
 >


<DFN>


<EM ...> Scripting

The <EM> element supports all of the standard Dynamic HTML Properties, Methods and Events.


<EM ...> Syntax

<EM...
CLASS="Style Sheet class"
ID="Style Sheet/scripting identifier"
LANG="Language"
LANGUAGE="Scripting language"
STYLE="In line styling"
TITLE="Informational ToolTip"
 >


<EM>
Related Topics <EM> syntax <EM> Scripting


<FONT ...> Scripting

The <FONT> element supports all of the standard Dynamic HTML Properties, Methods and Events.
Additionally, the <FONT> element supports the color, face and size properties. See the <FONT> scripting section for details.


<FONT ...> Syntax

<FONT...
CLASS="Style Sheet class"
COLOR="Font colour"
FACE="Font Face"
ID="Style Sheet/scripting identifier"
LANG="Language"
LANGUAGE="Scripting language"
POINT-SIZE="Font pt. size"
SIZE="Font size"
STYLE="In line styling"
TITLE="Informational ToolTip"
WEIGHT="Font weight"
 >


<FONT>


<ILAYER ...> Syntax

<ILAYER
ABOVE="layer_name"
BACKGROUND="file_name.gif"
BELOW="layer_name"
BGCOLOR="#rrggbb|Colour Name"
CLIP="left, top, right, bottom"
LEFT="relative_pixel_value"
NAME="Unique_identifier"
SRC="content_reference"
TOP="relative_pixel_value"
VISIBILITY="show|hide|inherit"
WIDTH="pixel_value"
Z-INDEX="number"
>


<ILAYER>
Related Topics <ILAYER...> Syntax


<INS ...> Scripting

The <INS> element supports all of the standard Dynamic HTML Properties, Methods and Events. <INS> also supports the cite and datetime properties.


<INS ...> Syntax

<INS...
CITE="Citation"
CLASS="Style Sheet class"
DATETIME="Date/Time of insertion"
ID="Style Sheet/scripting identifier"
LANG="Language"
LANGUAGE="Scripting language"
STYLE="In line styling"
TITLE="Informational ToolTip"
 >


<INSgt;

<INS>


<I>
Related Topics <I> syntax <I> Scripting


<I ...> Scripting

The <I> element supports all of the standard Dynamic HTML Properties, Methods and Events.


<I ...> Syntax

<I...
CLASS="Style Sheet class"
ID="Style Sheet/scripting identifier"
LANG="Language"
LANGUAGE="Scripting language"
STYLE="In line styling"
TITLE="Informational ToolTip"
 >


<KBD ...> Scripting

The <KBD> element supports all of the standard Dynamic HTML Properties, Methods and Events.


<KBD ...> Syntax

<KBD...
CLASS="Style Sheet class"
ID="Style Sheet/scripting identifier"
LANG="Language"
LANGUAGE="Scripting language"
STYLE="In line styling"
TITLE="Informational ToolTip"
 >


<KBD>


Text Formatting elements


<Q ...> Scripting

The <Q> element supports all of the standard Dynamic HTML Properties, Methods and Events.


<Q ...> Syntax

<Q...
CITE="Citation"
CLASS="Style Sheet class"
ID="Style Sheet/scripting identifier"
LANG="Language"
LANGUAGE="Scripting language"
STYLE="In line styling"
TITLE="Informational ToolTip"
 >


<Q>
Related Topics <Q> syntax <Q> Scripting


<SAMP ...> Scripting

The <SAMP> element supports all of the standard Dynamic HTML Properties, Methods and Events.


<SAMP ...> Syntax

<SAMP...
CLASS="Style Sheet class"
ID="Style Sheet/scripting identifier"
LANG="Language"
LANGUAGE="Scripting language"
STYLE="In line styling"
TITLE="Informational ToolTip"
 >


<SAMP>


<SMALL>


<SMALL ...> Scripting

The <SMALL> element supports all of the standard Dynamic HTML Properties, Methods and Events.


<SMALL ...> Syntax

<SMALL...
CLASS="Style Sheet class"
ID="Style Sheet/scripting identifier"
LANG="Language"
LANGUAGE="Scripting language"
STYLE="In line styling"
TITLE="Informational ToolTip"
 >


<SPAN ...> Scripting

The <SPAN> element supports all of the standard Dynamic HTML Properties, Methods and Events.
Also, <SPAN> supports the clientHeight, clientWidth, dataFld, dataFormatAs and dataSrc, scrollHeight, scrollLeft, scrollTop and scrollWidth properties. See the <SPAN> scripting section for details.


<SPAN ...> Syntax

<SPAN...
CLASS="Style Sheet class"
DATAFLD="Column Data"
DATAFORMATAS="Text|HTML"
DATASRC="Data Source"
DIR="Text direction"
ID="Style Sheet/scripting identifier"
LANG="Language"
LANGUAGE="Scripting language"
STYLE="In line styling"
TITLE="Informational ToolTip"
 >


<SPAN>
Related Topics <SPAN> syntax <SPAN> Scripting


<S...> and <STRIKE...> Scripting

The <S> and <STRIKE> elements support all of the standard Dynamic HTML Properties, Methods and Events.


<S...> and <STRIKE...> Syntax

<S(TRIKE)...
CLASS="Style Sheet class"
ID="Style Sheet/scripting identifier"
LANG="Language"
LANGUAGE="Scripting language"
STYLE="In line styling"
TITLE="Informational ToolTip"
 >


<STRIKE> or <S>


<STRONG>
Related Topics <STRONG> syntax <STRONG> Scripting


<STRONG ...> Scripting

The <STRONG> element supports all of the standard Dynamic HTML Properties, Methods and Events.


<STRONG ...> Syntax

<STRONG...
CLASS="Style Sheet class"
ID="Style Sheet/scripting identifier"
LANG="Language"
LANGUAGE="Scripting language"
STYLE="In line styling"
TITLE="Informational ToolTip"
 >


<SUB ...> Scripting

The <SUB> element supports all of the standard Dynamic HTML Properties, Methods and Events.


<SUB ...> Syntax

<SUB...
CLASS="Style Sheet class"
ID="Style Sheet/scripting identifier"
LANG="Language"
LANGUAGE="Scripting language"
STYLE="In line styling"
TITLE="Informational ToolTip"
 >


<SUB>


<SUP ...> Scripting

The <SUP> element supports all of the standard Dynamic HTML Properties, Methods and Events.


<SUP ...> Syntax

<SUP...
CLASS="Style Sheet class"
ID="Style Sheet/scripting identifier"
LANG="Language"
LANGUAGE="Scripting language"
STYLE="In line styling"
TITLE="Informational ToolTip"
 >


<SUP>


<TT ...> Scripting

The <TT> element supports all of the standard Dynamic HTML Properties, Methods and Events.


<TT ...> Syntax

<TT...
CLASS="Style Sheet class"
ID="Style Sheet/scripting identifier"
LANG="Language"
LANGUAGE="Scripting language"
STYLE="In line styling"
TITLE="Informational ToolTip"
 >


<TT>


<U ...> Scripting

The <U> element supports all of the standard Dynamic HTML Properties, Methods and Events.


<U ...> Syntax

<U...
CLASS="Style Sheet class"
ID="Style Sheet/scripting identifier"
LANG="Language"
LANGUAGE="Scripting language"
STYLE="In line styling"
TITLE="Informational ToolTip"
 >


<U>


<VAR ...> Scripting

The <VAR> element supports all of the standard Dynamic HTML Properties, Methods and Events.


<VAR ...> Syntax

<VAR...
CLASS="Style Sheet class"
ID="Style Sheet/scripting identifier"
LANG="Language"
LANGUAGE="Scripting language"
STYLE="In line styling"
TITLE="Informational ToolTip"
 >


<VAR>


<DIR ...> Scripting

The <DIR> and <LI> elements support all of the standard Dynamic HTML Properties, Methods and Events.


<DIR ...> Syntax

<DIR...
CLASS="Style Sheet class"
ID="Style Sheet/scripting identifier"
LANG="Language"
LANGUAGE="Scripting language"
STYLE="In line styling"
TITLE="Informational ToolTip"
 >


<DIR>
Related Topics <DIR> syntax <DIR> Scripting


<DL ...> Scripting

The <DL> (and <DT> and <DD>) elements support all of the standard Dynamic HTML Properties, Methods and Events.
The <DL> element also supports the compact property. See <DL> scripting for details.


<DL ...> Syntax

<DL...
CLASS="Style Sheet class"
COMPACT="Compacting flag"
ID="Style Sheet/scripting identifier"
LANG="Language"
LANGUAGE="Scripting language"
STYLE="In line styling"
TITLE="Informational ToolTip"
 >


<DL>
Related Topics <DL> syntax <DL> Scripting


<MENU ...> Scripting

The <MENU> (and <LI>) elements support all of the standard Dynamic HTML Properties, Methods and Events.


<MENU ...> Syntax

<MENU...
CLASS="Style Sheet class"
ID="Style Sheet/scripting identifier"
LANG="Language"
LANGUAGE="Scripting language"
STYLE="In line styling"
TITLE="Informational ToolTip"
 >


<MENU>
Related Topics <MENU> syntax <MENU> Scripting


<OL ...> Scripting

The <OL> (and <LI>) elements support all of the standard Dynamic HTML Properties, Methods and Events.
The <OL> element also supports the start and type properties and the <LI> element supports the type and value properties. See <OL> scripting for details.


<OL ...> Syntax

<OL...
CLASS="Style Sheet class"
ID="Style Sheet/scripting identifier"
LANG="Language"
LANGUAGE="Scripting language"
START="Start Value"
STYLE="In line styling"
TITLE="Informational ToolTip"
TYPE="Numbering type"
 >


<OL>
Related Topics <OL> syntax <OL> Scripting


List elements overview

List Elements


<UL ...> Scripting

The <UL> (and <LI>) elements support all of the standard Dynamic HTML Properties, Methods and Events.
The <UL> element also supports the type property. See <UL> scripting for details.


<UL ...> Syntax

<UL...
CLASS="Style Sheet class"
ID="Style Sheet/scripting identifier"
LANG="Language"
LANGUAGE="Scripting language"
STYLE="In line styling"
TITLE="Informational ToolTip"
TYPE="Bullet type"
 >


<UL>
Related Topics <UL> syntax <UL> Scripting


Document Localisation


The All Collection


The Anchors Collection
Related Topics


The Applets Collection
Related Topics


The Areas Collection
Related Topics


Attaching scripts to documents

Attaching Scripts


The Cells Collection
Related Topics


The Children Collection


The StyleSheets Collection
Related Topics


The Document object scripting

The Document Object

Properties | Methods | Events
activeElement | close | standard
alinkColor | createElement | onerror
all | createStyleSheet | onload
anchors | elementFromPoint |
applets | execCommand |
areas | getSelection |
bgColor | open |
body | queryCommandEnabled |
cookie | queryCommandIndeterm |
domain | queryCommandState |
embeds | queryCommandSupported |
expando | queryCommandText |
fgColor | queryCommandValue |
forms | write |
frames |  |
images |  |
lastModified |  |
layers |  |
linkColor |  |
links |  |
location |  |
parentWindow |  |
plugins |  |
readyState |  |
referrer |  |
scripts |  |
selection |  |
StyleSheets |  |
title |  |
url |  |
vlinkColor |  |


The Document Object
Related Topics Document Scripting


The Elements Collection
Related Topics


The Embeds Collection
Related Topics


The Event object scripting

The Event Object

Internet Explorer | Netscape
altKey | data
button | layerX
cancelBubble | layerY
clientX | modifiers
clientY | pageX
ctrlKey | pageY
fromElement | screenX
keyCode | screenY
offsetX | target
offsetY | type
reason | which
returnValue |
screenX |
screenY |
shiftKey |
srcElement |
srcFilter |
toElement |
x |
y |


The Event Object
Event Scripting


The Filters Collection
Related Topics


The Forms Collection
Related Topics


The Frames Collection
Related Topics


The History object scripting

The History Object

Properties | Methods | Events
length | back | none
 | forward |
 | go |


The History Object
History Scripting


The Images Collection
Related Topics


The Imports Collection
Related Topics


JavaScript
Related Topics


The Layer object scripting

The Layer Object

Properties | Methods | Events
above | moveAbove | onblur
background | moveBelow | onfocus
below | moveBy | onload
bgColor | moveTo | onmouseout
clip | moveToAbsolute | onmouseover
left | resizeBy |
name | resizeTo |
pageX |  |
pageY |  |
parentLayer |  |
siblingAbove |  |
siblingBelow |  |
src |  |
top |  |
visibility |  |
zindex |  |


The Layer Object
Related Topics Layer Scripting


The Links Collection
Related Topics


The Location object scripting

The Location Object

Properties | Methods | Events
hash | assign | none
host | reload |
hostname | replace |
href |  |
pathname |  |
port |  |
protocol |  |
search |  |


The Location Object
Location Scripting


The Navigator object scripting

The Navigator Object

Properties | Methods | Events
appCodeName | javaEnabled | none
appMinorVersion | preference |
appName | taintEnabled |
appVersion |  |
browserLanguage |  |
connectionSpeed |  |
cookieEnabled |  |
cpuClass |  |
onLine |  |
language |  |
platform |  |
plugins |  |
systemLanguage |  |
userAgent |  |
userLanguage |  |
userProfile |  |


The Navigator Object
Navigator Scripting


<NOSCRIPT>
Related Topics


Scripting Object Models


The Options Collection
Related Topics


Scripting overview

The HTMLib Scripting Reference


The PlugIns Collection
Related Topics


The Rows Collection
Related Topics


The Rules Collection


The Scripts Collection
Related Topics


The Screen object scripting

The Screen Object

Properties | Methods | Events
availHeight | none | none
availWidth |  |
bufferDepth |  |
colorDepth |  |
fontSmoothingEnabled |  |
height |  |
updateInterval |  |
width |  |


The Screen Object
Screen Scripting


showHelp example

showHelp

This is an instance of the HtmlHelp window, owned by the HTMLib. It'll shut down when you shut down the HTMLib, or when it's manually closed.

Note : Currently, there is no way in HTML scripting to close a HtmlHelp window.


The Selecion object scripting

The Selection Object

Properties | Methods | Events
type | clear | none
 | createRange |
 | empty |


The Selection Object
Selection Scripting


<SERVER>


showModalDialog example

showModalDialog

This is a modal dialog window. Pretty cool eh. You can't get back to your document without closing this window.


The StyleSheet object scripting

The StyleSheet Object

Properties | Methods
disabled | addImport
href | addRule
id |
owningElement |
parentStyleSheet |
readOnly |
type |


The StyleSheet Object
Related Topics StyleSheet Scripting


The Style Object


The Tbodies Collection


The TextRange object scripting

The TextRange Object

Properties | Methods
htmlText | collapse
text | compareEndPoints
 | duplicate
 | execCommand
 | expand
 | findText
 | getBookmark
 | inRange
 | isEqual
 | move
 | moveEnd
 | moveToBookmark
 | moveToElementText
 | moveToPoint
 | parentElement
 | pasteHTML
 | queryCommandEnabled
 | queryCommandIndeterm
 | queryCommandState
 | queryCommandSupported
 | queryCommandText
 | queryCommandValue
 | scrollIntoView
 | select
 | setEndPoint


The TextRange Object
Related Topics TextRange Scripting


Visual Basic Script
Related Topics


window.open example

Hi there!

This is the window you created. Make a mental note of the differences between various options and give it another try.

Why?


The Window Object
Related Topics Window Scripting


The Window object scripting

The Window Object

Properties | Methods | Events
client | alert | onbeforeunload
closed | back | onblur
defaultStatus | blur | ondragdrop
dialogArguments | captureEvents | onerror
dialogHeight | clearTimeout | onfocus
dialogLeft | close | onload
dialogTop | confirm | onhelp
dialogWidth | disableExternalCapture | onmove
document | enableExternalCapture | onresize
event | execScript | onscroll
frames | find | onunload
history | focus |
innerHeight | forward |
innerWidth | handleEvent |
length | home |
location | moveBy |
locationbar | moveTo |
menubar | navigate |
name | open |
navigator | print |
offscreenBuffering | prompt |
opener | releaseEvents |
outerHeight | resizeBy |
outerWidth | resizeTo |
pageXOffset | routeEvent |
pageYOffset | scrollBy |
parent | scrollTo |
personalbar | setInterval |
returnValue | setTimeout |
screen | showHelp |
scrollbars | showModalDialog |
self | stop |
status |  |
statusbar |  |
toolbar |  |
top |  |
window |  |


Server Side Includes


Box Properties
Related Topics Box Properties


Box Properties

The following constitute the Box properties
margin-top | border-right-width | border-bottom-style
margin-right | border-bottom-width | border-left-style
margin-bottom | border-left-width | border-style
margin-left | border-width | border-top
margin | border-top-color | border-right
padding-top | border-right-color | border-bottom
padding-right | border-bottom-color | border-left
padding-bottom | border-left-color | border
padding-left | border-color | width
padding | border-top-style | height
border-top-width | border-right-style | float
 |  | clear


Classification Properties
Related Topics Classification Properties


Classification Properties

The following constitute the Classification Properties
display
white-space
list-style-type
list-style-image
list-style-position
list-style


Colour Properties
Related Topics Colour Properties


Colour Properties

The following constitute the Colour Properties
color
background-color
background-image
background-repeat
background-attachment
background-position
background


Colour Units


Style Sheet exampels

Style Sheet examples


Filter Properties
Related Topics Filter Properties


Filter Properties

The following constitute the Filter Properties
filter
blendTrans
revealTrans


Font Properties
Related Topics Font Properties


Font Properties

The following constitute the Font Properties
font-size
font-family
font-weight
font-style
font-variant
font
@font-face


JavaScript Style Sheets
Related Topics


Length Units


Miscellaneous Properties
Related Topics Miscellaneous Properties


Miscellaneous Properties

The following constitute the Miscellaneous Properties
@import
cursor


Style sheets - overview

Style Sheets


Percentage Units


Positioning Properties
Related Topics Positioning Properties


Positioning Properties

The following constitute the Positioning Properties
clip
height
left
overflow
position
top
visibility
width
z-Index


Printing Properties
Related Topics Printing Properties


Printing Properties

The following constitute the Font Properties
page-break-after
page-break-before


Style Sheet Properties and Values

Properties and Values


Pseudo Classes & Elements

The following constitute the Miscellaneous Properties
A:active
A:hover
A:link
A:visited
:first-letter
:first-line


Pseudo Classes & Elements
Pseudo Classes & Elements


Text Properties
Related Topics Text Properties


Text Properties

The following constitute the Font Properties
word-spacing
letter-spacing
text-decoration
vertical-align
text-transform
text-align
text-indent
line-height


URL Units


<CAPTION ...> Scripting

Besides some of the Standard Dynamic HTML properties, methods & events, <CAPTION...> supports:
Properties | Methods | Events
align | blur | onblur
clientHeight | focus | onfocus
clientWidth |  | onresize
vAlign |  |


<CAPTION ...> Syntax

<CAPTION...
 ALIGN="Alignment"
CLASS="Style Sheet Class"
ID="Idenitifier"
LANG="Language"
LANGUAGE="Scripting Language"
STYLE="Styling"
TITLE="Informational ToolTip"
VALIGN="Vertical alignment"
 >


<CAPTION>
Related Topics <CAPTION> syntax <CAPTION> Scripting


<COLGROUP ...> Scripting

The <COLGROUP> element supports some of the standard Dynamic HTML Properties and Methods. It also supports the align, span, vAlign and width properties. See the <COLGROUP> properties section for details.


<COLGROUP ...> Syntax

<COLGROUP...
 ALIGN="Alignment"
CLASS="Style Sheet Class"
ID="Idenitifier"
SPAN="Number of columns"
STYLE="Styling"
TITLE="Informational ToolTip"
VALIGN="Vertical alignment"
WIDTH="Initial width"
 >


<COLGROUP>
Related Topics <COLGROUP> syntax <COLGROUP> Scripting


<COL ...> Scripting

The <COL> element supports some of the standard Dynamic HTML Properties and Methods. It also supports the align, span, vAlign and width properties. See the <COL> properties section for details.


<COL ...> Syntax

<COL...
 ALIGN="Alignment"
CLASS="Style Sheet Class"
ID="Idenitifier"
STYLE="Styling"
TITLE="Informational ToolTip"
VALIGN="Vertical alignment"
 >


<COL>
Related Topics <COL> syntax <COL> Scripting


Table Examples
Related Topics


Tables


<TABLE ...> Syntax

<TABLE
ALIGN="left|right"
BACKGROUND="URL_of_image"
BGCOLOR="#rrggbb|colour name"
BORDER="value"
BORDERCOLOR="#rrggbb|colour name"
BORDERCOLORLIGHT="#rrggbb|colour name"
BORDERCOLORDARK="#rrggbb|colour name"
CELLPADDING="value"
CELLSPACING="value"
CLASS="Style Sheet Class"
COLS="n"
DATAPAGESIZE="No. of records to show"
DATAFLD="Column Name"
DATASRC="Data Source"
FRAME="void|above|below|hsides|lhs|rhs|vsides|box"
HEIGHT="value|value%"
ID="Unique Identifier"
LANG="Language"
LANGUAGE="Scripting Language"
RULES="none|basic|rows|cols|all"
STYLE="Styling"
TITLE="Informational ToolTip"
VALIGN="top|bottom"
WIDTH="value|value%"
 >


<TABLE ...> Scripting

Besides some of the Standard Dynamic HTML properties, methods & events, <TABLE...> supports:
Properties | Methods | Events
align | blur | onafterupdate
background | createCaption | onbeforeupdate
bgColor | createTFoot | onblur
border | createTHead | onfocus
borderColor | deleteCaption | onresize
borderColorDark | deleteRow | onrowenter
borderColorLight | deleteTFoot | onrowexit
cellPadding | deleteTHead |
cellSpacing | focus |
cols | insertRow |
dataFld | nextPage |
dataPageSize | previousPage |
dataSrc | refresh |
borderColorLight |  |
height |  |
rules |  |
width |  |


<TABLE>
Related Topics <TABLE...> Syntax <TABLE...> Scripting


<TBODY ...> Scripting

The <TBODY> element supports some of the standard Dynamic HTML Properties and Methods and all of the Events. It also supports the align, bgColor and vAlign properties and deleteRow and insertRow methods.


<TBODY ...> Syntax

<TBODY...
 ALIGN="Alignment"
BGCOLOR="#rrggbb|Colour Name"
CLASS="Style Sheet Class"
ID="Idenitifier"
LANG="Styling"
LANGUAGE="Styling"
STYLE="Styling"
TITLE="Informational ToolTip"
VALIGN="Vertical alignment"
 >


<TBODY>
Related Topics <TBODY> syntax <TBODY> Scripting


<TD ...> Syntax

<TD
ALIGN="left|center|right"
BACKGROUND="URL_of_image"
BGCOLOR="#rrggbb|colour name"
BORDERCOLOR="#rrggbb|colour name"
BORDERCOLORLIGHT="#rrggbb|colour name"
BORDERCOLORDARK="#rrggbb|colour name"
CLASS="Style Sheet class"
COLSPAN="value"
HEIGHT="value|value%"
ID="Unique Identifier"
LANG="Language"
LANGUAGE="Scripting Language"
NOWRAP
ROWSPAN="value"
STYLE="Style"
TITLE="Informational ToolTip"
VALIGN="top|middle|bottom"
WIDTH="value|value%"
 >


<TD ...> Scripting

Besides some of the Standard Dynamic HTML properties, methods & events, <TD...> supports:
Properties | Methods | Events
align | blur | onafterupdate
background | focus | onbeforeupdate
bgColor |  | onblur
borderColor |  | onfocus
borderColorDark |  | onresize
borderColorLight |  | onrowenter
cellIndex |  | onrowexit
clientHeight |  |
clientWidth |  |
colSpan |  |
height |  |
noWrap |  |
rowSpan |  |
vAlign |  |


<TD>
Related Topics <TD...> Syntax <TD...> Scripting


<TFOOT>
Related Topics <TFOOT> syntax <TFOOT> Scripting


<TFOOT ...> Scripting

The <TFOOT> element supports some of the standard Dynamic HTML Properties and Methods and all of the Events. It also supports the align, bgColor and vAlign properties and deleteRow and insertRow methods.


<TFOOT ...> Syntax

<TFOOT...
 ALIGN="Alignment"
BGCOLOR="#rrggbb|Colour Name"
CLASS="Style Sheet Class"
ID="Idenitifier"
LANG="Styling"
LANGUAGE="Styling"
STYLE="Styling"
TITLE="Informational ToolTip"
VALIGN="Vertical alignment"
 >


<THEAD>
Related Topics <THEAD> syntax <THEAD> Scripting


<THEAD ...> Scripting

The <THEAD> element supports some of the standard Dynamic HTML Properties and Methods and all of the Events. It also supports the align, bgColor and vAlign properties and deleteRow and insertRow methods.


<THEAD ...> Syntax

<THEAD...
 ALIGN="Alignment"
BGCOLOR="#rrggbb|Colour Name"
CLASS="Style Sheet Class"
ID="Idenitifier"
LANG="Styling"
LANGUAGE="Styling"
STYLE="Styling"
TITLE="Informational ToolTip"
VALIGN="Vertical alignment"
 >


<TH ...> Syntax

<TH
ALIGN="left|center|right"
BACKGROUND="URL_of_image"
BGCOLOR="#rrggbb|colour name"
BORDERCOLOR="#rrggbb|colour name"
BORDERCOLORLIGHT="#rrggbb|colour name"
BORDERCOLORDARK="#rrggbb|colour name"
CLASS="Style Sheet Class"
COLSPAN="Columns to span"
HEIGHT="value|value%"
ID="Unique Identifier"
LANG="Language"
LANGUAGE="Scripting Language"
NOWRAP
ROWSPAN="value"
STYLE="Styling"
TITLE="Informational ToolTip"
VALIGN="top|middle|bottom"
WIDTH="value|value%"
 >


<TH ...> Scripting

The <TH> element supports some of the standard Dynamic HTML Properties and Methods and all of the Events. It also supports the align, background, bgColor, borderColor, borderColorDark, borderColorLight, colSpan, noWrap, rowSpan and vAlign properties. See the <TH> properties section for details.


<TH>
Related Topics <TH...> Syntax <TH...> Scripting


<TR ...> Syntax

<TR
ALIGN="left|center|right"
BACKGROUND="URL_of_image"
BGCOLOR="#rrggbb|colour name"
BORDERCOLOR="#rrggbb|colour name"
BORDERCOLORLIGHT="#rrggbb|colour name"
BORDERCOLORDARK="#rrggbb|colour name"
CLASS="Style Sheet Class"
ID="Unique Identifier"
LANG="Language"
LANGUAGE="Scripting Language"
STYLE="Styling"
TITLE="Informational ToolTip"
VALIGN="top|middle|bottom"
 >


<TR ...> Scripting

Besides some of the Standard Dynamic HTML properties, methods & events, <TR...> supports:
Properties | Methods | Events
align | blur | onafterupdate
background | deleteCell | onbeforeupdate
bgColor | focus | onblur
borderColor | insertCell | onfocus
borderColorDark |  | onresize
borderColorLight |  | onrowenter
rowIndex |  | onrowexit
sectionRowIndex |  |
vAlign |  |


<TR>
Related Topics <TR...> Syntax <TR...> Scripting


Tables and Style Sheets
Related Topics


<BR ...> Scripting

The <BR> element supports most of the standard Dynamic HTML Properties and Methods. It also supports the clear property.


<BR ...> Syntax

<BR...
CLEAR="left|right|all"
CLASS="Style Sheet class"
ID="Style Sheet/scripting identifier"
STYLE="In line styling"
 >


<BR>


<HR ...> Scripting

The <HR> element supports most of the standard Dynamic HTML Properties and all of the standard Methods and Events. It also supports the align, color, noShade, size and width properties.


<HR ...> Syntax

<HR...
ALIGN="Alignment"
CLASS="Style Sheet class"
COLOR="#rrggbb or Colour Name"
ID="Style Sheet/scripting identifier"
LANG="Language"
LANGUAGE="Scripting Language"
NOSHADE
SIZE="pixel value"
STYLE="In line styling"
TITLE="Informational ToolTip"
WIDTH="pixel value|% value"
 >


<HR>


<NOBR>


White Space elements

Adding White Space


<SPACER>


<WBR>