Sams Teach Yourself Web Publishing with HTML and CSS in One Hour a Day (5th Edition)

Simply put, Dynamic HTML uses normal HTML elements to create a web page that relies on style sheets for element formatting, and scripting to dynamically change HTML content, style, or positioning, without having to re-download the page from the server. Dynamic HTML isn't a thing by itself, but a collection of technologies working together to produce an interactive interface. So, what can you do with DHTML? The possibilities are endless! Just to whet your appetite, here are a few of them:

• Move objects around the web page

• Show or hide elements

• Dynamically alter the color and size of web content

• Provide drag-and-drop functionality similar to that used by modern graphical operating systems (such as Windows and the Mac OS)

Dynamic HTML was born with the advent of the "fours." The World Wide Web Consortium developed HTML 4.01 and released the official recommendation at about the same time Microsoft and Netscape released their competing web browsers, Internet Explorer 4 and Netscape 4. There was a flurry of activity surrounding all this. HTML 4.01 promoted several new features to better integrate itself with cascading style sheets and respond to user events. Microsoft and Netscape were competing hard for market share in the browser war, and the result of it all was a drive for something different: a level of user interactivity and "dynamism" in web pages that previously was impossible without resorting to external programming. DHTML was born.

For DHTML to work, it requires the following three key technologies supported by the web browser:

• HTML

• Cascading style sheets

• Scripting

Style sheets are wonderful after you know how to use them, and are a critical component of DHTML. Although DHTML technically isn't dependent on any one type of style sheet, the official W3C style sheet technology, cascading style sheets (CSS), is the standard. CSS enables you to format elements on your web pages using properties, such as font, color, and spacing, as well as positioning items on the web page.

DHTML takes style to a new level. Rather than creating a style rule or positioning an element on the page and then forgetting about it, you can use DHTML to dynamically alter the visual style or position of your elements. As with HTML, there are inconsistencies in how various browsers implement CSS. None have fully implemented all of the specifications, but also browsers have implemented portions differently. Things are a lot better now than they were a few years ago. The latest versions of Internet Explorer, Netscape, and Opera offer much closer adherence to the HTML and CSS standards than they once did. That said, complex dynamic HTML applications require lots of testing and many workarounds to work on all the browsers that are still in common use.

Finally, scripting is a sort of glue that holds together everything in DHTML. Scripting is the engine that makes DHTML go. Using scripting, you can alter the content on your page when the page loads in response to any of the events discussed in Lesson 12, "Introducing JavaScript," or even when the user leaves the page.

Caution

If you've caught on to the "inconsistent implementation across web browsers" pattern here, you should know that official specifications may bear little resemblance to reality. You should always read any browser-specific documentation you can find to ensure that the web browsers you're targeting support what you're attempting to accomplish. Even then, some experimentation will usually be required.

The scripting lingua franca of today is JavaScript. JavaScript was the first scripting language to be implemented in a web browser, and currently enjoys the most widespread support across different web browsers. Although you can create DHTML using other scripting languages such as VBScript, I recommend always using JavaScript unless you are in a Microsoft-only environment (such as an intranet).

As you'll see when we get to the DHTML examples, a large part of DHTML involves creating scripts that manipulate elements on a page. You'll probably need to fall back on the discussion of JavaScript back in Lessons 12, "Introducing JavaScript," and 13, "Using JavaScript in Your Pages," to refresh your memory of JavaScript at times. Because DHTML is really just an application of JavaScript, it might even be helpful to think about this lesson as a follow-up to those.

Two final notes about what DHTML actually is: DHTML (the scripting part of it) relies on something called a Document Object Model (DOM) to identify, create, and manipulate elements on a web page. For example, you have to be able to identify an element, such as an image, in order to manipulate it with a script. Likewise, you must be able to identify an element's style in order to change it. This is what the DOM does. It provides a bridge between the content of the web page and scripts.

Finally, DHTML relies on event handling to track the actions of the web browser and user. When the page loads, the onload event is triggered. Likewise, when a visitor clicks a button in a form, several events might be triggered that you, the DHTML author, can use to run scripts. Event handling is covered in more depth later on.