Dynamic HTML

Dynamic HTML is the newest wave of innovation to the Web. Unfortunately Netscape and Microsoft are battling it out over which way to do dynamic HTML. Netscape has introduced a new <LAYER> tag while Microsoft has added to the functionality of the <DIV> tag. Netscape's <LAYER> tag is only supported by Netscape Navigator and Communicator 4.0 and higher while Microsoft's <DIV> tag is only supported by Internet Explorer 4.0 and higher. In order to see the effects of dynamic HTML in the examples below, you must be using the appropriate browser. To overcome these deficiencies, you need to either write separate documents for each browser or test for the browser within the script and handle each separately. (Determining Browser Vendor, Version, and Operating System With JavaScript)

DHTML Standards

HTML Standards (currently 4.0)
ECMAScript - standardization of Netscape's implementation of the client-side JavaScript 1.1 language. Includes the new layer object
CSS1 - provides a way todefine style sheets that control the look of the content. (supported by both browsers)
CSS-P defines positioning of blocks of HTML. Supported by Netscape (which added LAYER and ILAYER tags)
CSS2 - combines CSS1 and CSS-P standards
DOM (document object model) - defines what consititutes a document. IE supports a richer feature set.
XML -subset of SGML

Examples of Dynamic HTML

Changing the visibility of Layers example [only works in Netscape]

Changing the visibility of Layers example [works with both browsers]

<LAYER> version of the flower example [only works with Netscape]
style sheet version of the flower example [only works with Netscape]
Flowering Layers Example [works with both browsers]

Dynamic HTML Lab
Popup Demo
Examples of Student Work

Simple Example [only works in IE]
Koi Racing
Amy's Flying Cow
Bill's moon and skeletons
DHTML Fish with an attitude
Gordon's Lumber - lots of action!!!

Resources

Taylor's Dynamic HTML Tutorial
Cross-Browser DHTML
Inside Dynamic HTML: source of Dynamic HTML and JavaScript information.
Index Dynamic HTML - links, examples, and documentation.

Click here to return to Wayne's World's homepage:

written by Wayne Summers summers_wayne@ColumbusState.edu