DHTML : Dynamic Web Coding

DHTML is not a standard defined by the W3 Consortium. Rather, it is a "marketing term that was used by Netscape and Microsoft to describe the new technologies the 4.x generation browsers would support" (W3 Consortium)."

Introduction

DHTML stands for Dynamic HyperText Markup Language and can be defined as the art of making HTML webpages dynamic by combining HTML with Javascript and Cascading Style Sheets (CSS). Unlike the other four HTML variations studied in the previous four articles in this series, DHTML is not a standard defined by the W3 Consortium. Rather, it is a "marketing term that was used by Netscape and Microsoft to describe the new technologies the 4.x generation browsers would support" (W3 Consortium). HTML 4.0 first introduced two important components that are inherent to the structure of DHTML:

Cascading Style Sheets (CSS)
Document Object Models (DOM)

Making Your Code Dynamic

CSS provide style and layout models while DOM provide document content models for HTML documents. JavaScript and VBScript add the ability to write scripting code to control HTML elements. Put together, these three components add up to dynamic HTML pages. One major deterrent is browser incompatibility - Netscape and Microsoft still have not agreed on what to implement within their browsers: thus, writing DHTML pages that work well in both browsers can be tricky. To see for yourself, you can access Microsoft and Netscape standards online:

MSDN Library at Microsoft
Dynamic Drive

"DHTML excels in creating low-bandwidth effects that enhance a web page's functionality. It can be used to create animations, games, applications, provide new ways of navigating through web sites, and create out-of-this world page layouts that simply aren't possible with just HTML. Although many of the features of DHTML can be duplicated with either Flash or Java, DHTML provides an alternative that does not require plugins and embeds seamlessly into a web page."( Dan Steinman, 1998).

In order to understand the complexities of DHTML, it is useful to examine its components in more detail.

Cascading Style Sheets

CSS are sophisticated codes that separate web content from the web desplay - the style, positioning, colors, fonts, and so on. CSSP or CSS Positioning allows pixel-level control over HTML element positioning. The separation of the presentation style of web documents from the content with CSS2 (CSS level 2) simplifies Web authoring and site maintenance. "CSS2 supports media-specific style sheets so that authors may tailor the presentation of their documents to visual browsers, aural devices, printers, braille devices, handheld devices, etc. This specification also supports content positioning, downloadable fonts, table layout, features for internationalization, automatic counters and numbering, and some properties related to user interface" (W3 Consortium). The W3C offer an excellent tutorial to learn CSS2 called, CSS2 Specification.

JavaScript

JavaScript is a special scripting browser-based language used to control HTML elements and add functionality to forms, frames, windows, image rollovers, audio-video controls and manipulate DHTML. Netscape first called this scripting JavaScript, so Microsoft came up with the term, JScript, for its particular brand of scripting. The result? Two versions of JavaScript that can be annoyingly incompatible. To explore this issue more, visit JavaScript and Microsoft's JScript resource page. The secret to the dynamic effects of JavaScripted content is the use of layer objects. Layer objects make text change when the mouse scrolls over it; it makes images or text move around the web page; it also makes drop-down menus drop down. Layer objects are arranged in div tags, with defining characteristics such as color, position, and visibility.

Putting them Together

DHTML is usually applied to achieve three tasks:

Position or placing blocks of content on the page and moving them around
Style Modifications which change the look and feel of the page
Event handling or relating user events to changes in positioning or other style modifications

In newer versions of Internet Explorer and Netscape (versions 5, 6 and up) the DOM is becoming the code of choice for most DHTML coding. Once mastered, the DOM can help web designers to manipulate, add, delete, and edit document coding related to all of the styles, attributes (such as a href) and elements (such as html tags) on the page. That means every tag and attribute common to a html document is accessible via the DOM. Currently, the Document Object Model Levels 0 & 1 are recommended by W3C. Level 2 is also in the works, but has not yet been promoted as the standard for DHTML coding.

A helpful group of tutorials are available through HTML Goodies, called DHTML and Layer Tutorial.

The links included in this article offer introductions and how-tos to begin your journey in mastering this newest development in html coding. Any quick search on Google will bring many more resources to your attention, readily available at your fingertips. As browser manufacturers work on their incompatibility and the use of higher version browsers become more commonplace, DHTML will become a mandatory part of any professional designer's itinerary.