DHTML Dissected

The first thing needed to use DHTML is a supporting browser. The browsers I've used are Netscape, Lynx, SUN HotJava, Internet Explorer and Opera (in order of discovery, since sophomore year in college). Two popular browsers that support DHTML are (surprise, surprise!) Internet Explorer and Netscape. Unfortunately, they support DHTML is different ways, i.e., they represent HTML differently.

DHTML is actually a combination of HTML, scripting, stylesheets and a "Document Object Model" (DOM). For DHTML to be compatible between two browsers, it must be written to be compatible in all four areas! However, of the four, the only big problem spot is the DOM. HTML, scripting and stylesheets are generally compatible browser to browser.

Plain HTML is interpreted very closely by Internet Explorer and Netscape. Often the best advice to maintain highest compatibility is to write pages in plain HTML. Note that HTML itself has some version differences: browsers made for older versions (older than HTML 3.2) may not support newer features. The HTML version needed to support DHTML is 4.0 and is supported well on IE 4+ and Netscape 4.7+.

Scripting for DHTML refers to program scripts embedded in the webpage using the <SCRIPT> tag. Examples of scripts are Javascript and VBScript. The Javascript is preferable for compatibility, and a new standard called ECMA-262 is an official scripting standard for web pages that looks pretty much like Javascript.

A particular stylesheet standard called Cascading Style Sheets (CSS) is needed for DHTML. CSS comes in two levels (as of Sept 2000). Level 1, called CSS-1, mainly specifies fonts, colors, borders and margins. CSS-2 includes styles for positioning.

Now for the Big Hurdle: the Document Object Model, or DOM. The DOM is the that DHTML uses to change HTML contents on the fly. On the whole, HTML serves as the structure and contents, CSS takes care of the appearance, and scripting uses the DOM to change the first two. For example, to change the text of HTML element
<div id="MyDiv"> Hello!!!</div>
to Bye!!!! under Internet Explorer, the script needed is
document.all['MyDiv'].innerHTML = "Bye!!!";
while the code for Netscape is
document.MyDiv.document.write("Bye!!!");
document.MyDiv.document.close();
To get the same page to work under both browsers, it is necessary to use some
if (document.layers) { /*do netscape stuff */ }
else if (document.all) { /*do ie stuff */ };
conditions.