How Dynamic HTML (DHTML) Is Used to Create Interactive Pages

Dynamic HTML is not really a new specification of HTML, but rather a different way of looking at and controlling the standard HTML codes and commands.

When thinking of dynamic HTML, you need to remember the qualities of standard HTML, especially that once a page is loaded from the server, it will not change until another request comes to the server. Dynamic HTML gives you more control over the HTML elements and allows them to change at any time, without returning to the Web server.

There are four parts to DHTML:

• Document Object Model (DOM) (definition)
• Scripts
• Cascading Style Sheets (CSS)
• XHTML

DOM

The DOM is what allows you to access any part of your Web page to change it with DHTML. Every part of a Web page is specified by the DOM and using its consistent naming conventions you can access them and change their properties.

Scripts

Scripts written in either JavaScript or ActiveX are the two most common scripting languages used to activate DHTML. You use a scripting language to control the objects specified in the DOM.

Cascading Style Sheets

CSS is used in DHTML to control the look and feel of the Web page. Style sheets define the colors and fonts of text, the background colors and images, and the placement of objects on the page. Using scripting and the DOM, you can change the style of various elements.

XHTML

XHTML or HTML 4.x is used to create the page itself and build the elements for the CSS and the DOM to work on. There is nothing special about XHTML for DHTML - but having valid XHTML is even more important, as there are more things working from it than just the browser.

Features of DHTML

There are four primary features of DHTML:

1. Changing the tags and properties
2. Real-time positioning
3. Dynamic fonts (Netscape Communicator)
4. Data binding (Internet Explorer)

Changing the Tags and Properties

This is one of the most common uses of DHTML. It allows you to change the qualities of an HTML tag depending on an event outside of the browser (such as a mouse click, time, or date, and so on). You can use this to preload information onto a page, and not display it unless the reader clicks on a specific link.

Real-time Positioning

When most people think of DHTML this is what they expect. Objects, images, and text moving around the Web page. This can allow you to play interactive games with your readers or animate portions of your screen.

Dynamic Fonts

This is a Netscape-only feature. Netscape developed this to get around the problem designers had with not knowing what fonts would be on a reader's system. With dynamic fonts, the fonts are encoded and downloaded with the page, so that the page always looks the way the designer intended. You can also use web-safe fonts.

Data Binding

This is an IE-only feature. Microsoft developed this to allow easier access to databases from Web sites. It is very similar to using CGI to access a database but uses an ActiveX control to function. This feature is very advanced and difficult to use for the beginning DHTML writer.