What Is Dynamic HTML?

When JavaScript, the Document Object Model, and Cascading Style Sheets are brought together on a single page, the result is often called Dynamic HTML. Ideally, using Dynamic HTML helps you create a page that responds to user input with special effects that can make your information engaging and entertaining, as well as informative.

Dynamic HTML varies somewhat from Web browser to Web browser, with Netscape and Microsoft in particular offering slightly different features. In this chapter we'll spend most of our time looking at the Dynamic HTML elements that the two browsers have in common, focusing on using JavaScript and style sheets together to create pages that can change automatically.

Let's begin the definition of Dynamic HTML by discussing what it isn't—it isn't an official standard. HTML has become XHTML, and CSS is a standard, as is the Document Object Model. But Dynamic HTML is really something more of a marketing term, or an unofficial name, meant to suggest using scripting and the DOM together to do things on the page—usually visual tricks. Dynamic HTML sometimes means that you're using scripts to alter your style sheet properties. It can also sometimes mean you're incorporating technology called layers, which enable different parts of a document to overlap and even hide one another.

In fact, you have already seen some minor examples of Dynamic HTML in "JavaScript and User Input," when you saw the images array being accessed and the document object being opened and rewritten. We'll take those examples further in this chapter, and we'll cover some new technologies. First, let's complete the definition of Dynamic HTML by taking another look at the DOM, as well as some other important technologies.

NOTE

In the past, Dynamic HTML has been used to mean some other things as well. Netscape used the term to cover downloadable font technology, which both Microsoft and Netscape offer in incompatible ways. DHTML has also been used to refer to some special filter effects that Microsoft had offered in its browser. In this chapter, I'll stick to the CSS and CSSP (CSS Positioning) aspects of DHTML. For more on all other aspects, see Sams Teach Yourself DHTML in 24 Hours or a comprehensive text such as Que's Platinum Edition Using XHTML, XML, and Java 2.

The Document Object Model Revisited

Perhaps the most important thing to recognize about the DOM is that it's only recently become a standard. The W3C has standardized the DOM, with the latest version being a working draft of DOM level 3. The latest Web browsers (Internet Explorer 6.x and Netscape 6.x) incorporate aspects of DOM level 2, which is a great start. It means that those browsers are much more compatible with one another than IE and Netscape have been in the past.

At about the 4.0 level of both browsers, the DOM was introduced for public consumption. It varied quite a bit between the two browsers, because there were no guiding standards and each company wanted to make a variety of object properties and methods available to the user. The result was a bit chaotic, as it was difficult to really decide whose DOM implementation to use.

Although the basic document objects discussed in "JavaScript and User Input" are safe, the 4.0 level of Internet Explorer and Netscape offered many other objects that could be altered. IE made nearly every element on the page an object, and hence scriptable. IE has also had support for reformatting pages without reloading them, so that you could change an element's content (even a paragraph or a bullet point) using a script, and the page would reconstitute itself on the fly. Netscape 4.x doesn't support that, although Netscape 6 does, and arguably offers a more complete implementation of the W3C's DOM.

Browser Compatibility

These different approaches have also slowed the adoption of some of the DHTML techniques, as has the unbalanced adoption of CSS and JavaScript implementations by Netscape's and Microsoft's browsers. For the sake of practicality, that means you probably should only use DHTML when you also offer the same information in other formats. Otherwise, your users may not see everything you're trying to communicate. You should also encourage your users to download and install the latest versions of their Web browsers. IE 5.5 and 6 and Netscape 6 are much more standards-based, and cross-platform DHTML tricks are easier when you can assume that your users are surfing with one of those two browsers (or a third-party browser that's compatible).

In this chapter, we won't cover too much of the Netscape 4- or IE-specific technology—we'll stick closer to the W3C standards. But, if you do opt to use browser-specific approaches, you'll want to either automatically redirect incompatible browsers (as discussed in "JavaScript and User Input" or later in the section "Cross-Browser DHTML Example") or provide links to non-DHTML pages that users can choose. In the past, many pages were developed with small badges or lines of text saying "Best Viewed in Netscape" or "Best Viewed in Internet Explorer." You can take that route too, although in today's Web development world, cross-browser compatibility is encouraged.

NOTE

I'm editorializing here, but Microsoft's approach to URLs on its Web site (like the one above) is a wonderful example of how not to arrange your pages if you want them to be convenient for your users. Whenever possible, you should try to have direct paths to documents that can be jotted down, or some other way to make the reference easy, such as simple article numbers.

CSS and CSS Positioning

Both Netscape and Microsoft have supported a great deal of the CSS standard since their 4.0 browsers, and both support a lot of scripting of those elements. You'll find that CSS is the overlapping Dynamic HTML principle we can focus on.

Beyond the type of style sheet information discussed in Chapter 10, "Get Splashy: Style Sheets, Fonts, and Special Characters," of Absolute Beginner's Guide to Creating Web Pages, Second Edition, there's another level of CSS, called CSS Positioning or CSSP. CSSP takes the style sheet approach and enables you to choose the exact position of elements on the page, including ways that enable them to overlap or hide one another. In addition, both browsers (particularly IE 6 and Netscape 6) offer support for scripting those positioned elements, even to the point that you can move them around in the browser window. We'll discuss some of that in this chapter, as well.