Dynamic HTML (DHTML) is not a distinct language; instead it is a nonstandard combination of HTML, CSS, ECMAScript (JavaScript), and DOM (document object model) that can be used to create animated, interactive, dynamically updating Web pages. that respond to the user without having to communicate with the server.   DHTML is a technology of the (hopefully near) future, when the W3C standard will display uniformly on all browsers; therefore, it is worth knowing about so that you can prepare for its powerful authoring features.  However, I wouldn't recommend utilizing it now because of the complications involved in customizing Web pages so they display properly in both the Netscape and Microsoft browser environments. (You can see these complications in Niederst, pp. 432-441.)  For this reason this LM covers only the basic concepts of DHTML and the standardization efforts of the W3C.See the Study Guide for this learning module.Another distinct probability is that DHTML will be superceded by XHTML or absorbed by XHTML.

The Objectives of this learning module are to:

1. understand the promise DHTML offers in the future,
2. understand the synergy of  combination of HTML, CSS, ECMAScript, and DOM in DHTML,
3. be aware of the difficulties in adapting DHTML Web pages to both the Netscape and Microsoft environment, and
4. prepare for the future adaptations of HTML incorporating DHTML.

This LM covers the same content as Chapter 24 in Niederst, Web Design in a Nutshell, but modifies this in order to better associate related techniques. The sequence of presentations in this learning module is as follows.   You can click on any link to jump directly to that section.

1. DHTML IS NOT A CLEARLY DEFINED CONCEPT!
2. DOM, THE OBJECT-ORIENTED VIEW OF WEB PAGE ELEMENTS
3. PROGRAMMING WEB OBJECTS
4. CASCADING STYLE SHEETS
5. FURTHER READING

1. DHTML IS NOT A CLEARLY DEFINED CONCEPT!

1. DHTML is an extension of HTML which binds CSS and scripting to DOM to give authors a way to develop self-contained dynamic Web pages minimize the need to communicate with the server. The structure, style, or content of such pages can be changed after the page is downloaded in the browser without having to request a new page from a Web server. In other words, by using DHTML, you can create a page that can interact with the user without using additional controls and without requiring multiple trips to a server to update the page.
2. "Dynamic HTML" actually doesn't exist as a distinct language because it is a combination of three related technologies. In fact there is no link on the W3C home page that contains the "DHTML"; everything is focused on XHTML.  The W3C simply says that "Dynamic HTML is a term used by some vendors to describe the combination of HTML, style sheets and scripts that allows documents to be animated."  Unfortunately, as we have noted,  Netscape and Microsoft each have their own definitions and explanations of it on their respective Web sites.
1. Netscape's Dynamic HTML Developer Central page says "Dynamic HTML is an abstract term that refers to animating, hiding, showing, stacking, and formatting HTML content on the screen using JavaScript. Dynamic HTML first became possible within Navigator 4 and Internet Explorer 4 through proprietary features and DOM extensions of each browser."  "Netscape includes dynamic fonts as part of dynamic HTML. This feature of Netscape's Navigator browser in its Communicator suite lets Web page designers include font files containing specific font styles, sizes, and colors as part of a Web page and to have the fonts downloaded with the page. That is, the font choice no longer is dependent on what the browser provides."  Netscape 6 is the first browser to enable standards-based Dynamic HTML through its full support for the W3C DOM, level 1 and its industry-leading support for the W3C DOM, level 2....{finish this}
2. Microsoft's MSDN's DHTML Web site (not to be confused with Microsoft's Office 2000 object model) {finish this}
Some say that DHTML is simply a marketing term; see the W3C mailing list posting. ...
3. DHTML consists of the following complementary features:
1. An HTML based markup language.  HTML 3.2 was the first to be used as DHTML, but XHTML will probably absorbe DHTML itself.
2. An object-oriented approach to developing Web components (pages and their elements).  This is implemented in the various Web document models that hopefully will be unified in the W3C DOM.  (See section 2, below.)
3. Programming (primarily Scripting) is used to make Web elements dynamic and provide interactivity. (See section 3, below.)
4. Cascading style sheets.
4. DHTML will probably be superseded by or unified within XHTML.

2. DOM, THE OBJECT-ORIENTED VIEW OF WEB PAGE ELEMENTS:

1. From an object-oriented viewpoint, each HTML element (heading, paragraph, table, image, list, etc.) is viewed as an "object" with a distinct definable state (specified by attributes) and behavior.  Netscape calls this view the "HTML Object Model."; Microsoft calls it the "DHTML Object Model." (not to be confused with Microsoft's Office 2000 object model); and  W3C uses the term "Document Object Model"(DOM).   Since both Microsoft and Netscape have pledged to follow the W3C recommendations, we will focus on DOM in this LM.
2. The W3C Document Object Model (W3C DOM) is a "platform- and language-neutral interface that will allow programs and scripts to dynamically access and update the content, structure and style of documents. The document can be further processed and the results of that processing can be incorporated back into the presented page."  The W3C recommendations are:
1. The Document Object Model Level 1 Recommendation (issued October 1, 1998)
2. The Document Object Model Level 2 Candidate Recommendation (updated March 7, 2000)
3. The requirements document (updated April 12, 2000)
4. Frequently Asked Questions (updated March 14, 2000)
3. An object can be named, given attributes, and accessed by name in "script" embedded within the HTML.
4. As far as DHTML is concerned, the key feature of the DOM is its dynamic capabilities.   These allow any HTML object  (page element) to be changed as the result of a specified event such moving or clicking a mouse.
1. Any event driven change to a Web page takes place immediately because these behaviors have been programmed into the specific element. Therefore, element variations are built-in behaviors of the element (object) itself, and are independent of the server.
2. Not only can element variations change text wording or color, but everything contained within a heading object can be replaced with new content that includes different or additional HTML as well as different text.
3. Examples of dynamic

3. PROGRAMMING WEB OBJECTS IN DHTML (See LM VII, Introduction to JavaScript.):

1. The "Dynamic" in "Dynamic HTML" comes from the client-side programming of the behavior of Web objects, i.e. animations and interactivity of HTML elements.  Although JavaScript, Java applets, and ActiveX controls have always been associated with HTML, "Dynamic HTML" implies an increased integration of these client-side programming languages with CSS, all within DOM.
2. Although Java applets and ActiveX controls are being increasingly used for client-side programming, Scripting  is still the primary means of making Web elements dynamic and interactive.  (At least it is the easiest way, particularly for nonprogrammers.)  Currently the majority of scripting is done using javaScript (which is being generalized, by the W3C, into ECMAScript) but can also be done by Jscript and windows-specific VBScript.
3. Examples of dynamic behavior from client-side programming include:
1. responses to a mouse passing the cursor over an element or clicking on it.
2. the real-time reprositioning of an image by "dragging and dropping" it.

4. CASCADING STYLE SHEETS IN DHTML (See LM VIII, Controlling Style.):

1. As with all other constituents of DHTML, it is the dynamic features of style sheets that are important.
2. Dynamic HTML includes the capability to specify style sheets in a "cascading" fashion (that is, linking to or specifying different style sheets or style statements with predefined levels of precedence within the same or a set of related pages). As the result of user interaction, a new style sheet can be made applicable and result in a change of appearance of the Web page. You can have multiple layers of style sheet within a page, a style sheet within a style sheet within a style sheet. A new style sheet may only vary one element from the style sheet above it.
3. Layering is the use of alternate style sheets or other approaches to vary the content of a page by providing content layers that can overlay (and replace or superimpose on) existing content sections. Layers can be programmed to appear as part of a timed presentation or as the result of user interaction. In Internet Explorer 4.0, Microsoft implements layers through style sheets. Netscape supports the style sheet approach but also offers a new HTML <LAYER>...</LAYER> tag set (that Microsoft does not support).  Both Microsoft and Netscape have promised to support the W3C recommendations for layering.

1. The HTML 4.0 Specification on the Web site of the World Wide Web Consortium includes the current standard for cascading style sheets or CSS1) and for scripting services. See in particular Style Sheets and the Document Object Model. They include links to other valuable sources.
2. Project Cool is a center of information exchange and offers a daily newsletter in which people trying to use dynamic HTML share experiences.
3. Dynamic HTML: A Web Revolution is from the CNET Web site.

SAQ:

6. SUMMARY: