An Introduction to Dynamic HTML (DHTML)

The Old Standard about Standards

Dynamic HTML was and still is logical and wonderful idea whose time has come. Netscape thought so. Microsoft thought so. Yet, they didn't think alike. Netscape introduced a very modest vision of DHTML, debuted in Navigator 4.0. By and large, Netscape's DHTML was limited to the concept of "layers," also known as Cascading Style Sheet Positioning, a crucial concept which we will look at more closely in a short while. Microsoft, on the other hand, chose to shoot for the moon, providing developers with surprisingly complex DHTML support in Internet Explorer 4.0, wherein many objects on the page were manipulable, including support for CSS Positioning.

In the past few years, quite a lot of Web development time has been spent haranguing over the challenge of coding pages which function under both versions of DHTML. Known as "cross browser DHTML," a cottage industry has sprung up to span the ravine between browsers. Visual editors such as Macromedia's Dreamweaver have matured to include pre-built DHTML objects which are already coded to work in both browsers. Still, the development community has its collected fingers crossed, however, that soon a common standard will emerge, allowing developers to focus on the true subject at hand, rather than compatibility issues. For the intranet developer, you may find it easier to focus on a single DHTML implementation, such as MSIE 5 or Netscape 4, in cases where your intranet requires the use of a particular browser platform.

Much of what we term "Dynamic HTML" -- the set of page elements which are manipulable -- is defined by a construct called the Document Object Model (or "DOM"). This model describes each page element and which of its characteristics may be modified, and how so. As you can imagine, Netscape and Microsoft do not share a common DOM. The hopes of DHTML standardization rest strongly on the success of a standardized DOM, currently in development by the World Wide Web Consortium (W3C) -- http://www.w3c.org/DOM/.

Curriculum

DHTML, to stress the point, is not a language itself. In practice, one programs Dynamic HTML using a combination of HTML, Cascading Style Sheets, and JavaScript. The Document Object Model, described earlier, provides a programming interface between HTML/CSS and JavaScript. In theory, other client-side scripting languages such as VBScript can be used with the Document Object Model, and therefore DHTML; but JavaScript remains the de facto standard scripting language for DHTML.

In this introductory article we will explore three main components of Dynamic HTML authoring:

1. Positioning; precisely placing blocks of content on the page and, if desired, moving these blocks around.

2. Style modifications; on-the-fly altering the aesthetics of content on the page.

3. Event handling; how to relate user events to changes in positioning or other style modifications.

Technically speaking, DHTML positioning is actually a type of style modification; however, this introduction will be all the clearer if we address positioning as its own topic.

Dynamic Positioning

A Web developer may wear many hats -- writer, editor, programmer, and artist. As artists, we care how content is positioned on the page, whether for navigational or aesthetic purposes. Using DHTML, you can define a block of HTML content and precisely position it on the page.

There are two ways to position a block of content: Netscape's <LAYER> tag or Cascading Style Sheet Positioning (CSSP). Although Netscape's proprietary tag is simple to use, it is only supported within Netscape. Alternatively, CSSP is supported by both Netscape and Microsoft, so we will look at positioning using the style sheet syntax. There is no real loss of functionality, as layers and CSSP blocks behave nearly identically.

  Hitting the Spot & Properties of STYLE >

  < Introduction and Index to Tutorial