So. What is DHTML. Its stands for Dynamic HTML but what does that mean? Is it a technology, a language, a markup language.

DHTML is none of the above. Its more of a methodology. It is the combination of a number of techniques and languages which used together allow you to produce dynamic effects in your HTML pages. An example of this dynamic behaviour is the following:

If you are using Internet Explorer 4 or higher, move your mouse over this text..

This is an example of pop-up hyper text that has been coded for Internet Explorer only. It is a good example of a dynamic effect.

If you are using Netscape 4 or higher, move your mouse over this text..

This is an example of pop-up hyper text that has been coded for Netscape only. It is a good example of a dynamic effect.

Now that you know what a dynamic effect is, lets look at the technologies that when used together comprise these dynamic effects.

• HTML. This is the markup language that is the main language browsers interpret. Consists of a number of tags to 'Markup' text and data.
• Cascading Style sheets. Allow you to define cllasses of behaviour that can be used in conjunction with HTML. If there is a need to change how a particular style of text or data is to be presented, it need be changed in only one lace, the CSS. Anywhere this class is used, the change will be affected. SCSS also allows us to very finely control positioning of text and images in a page. This is very hard to do with just HTML.
• Document Object Model (DOM)The 4.0 browsers and upwards gave us a way to name and reference HTML elements on screen. They also allowed the recognition of events that happen to these elements. This is done through the Document Object Model, a hierarchy of elements in your page. Unfortunatley, Netscape and Internet Explorer have slightly different structures to their DOM's.
• Javascript Javascript is a full featured programming language that recognizes things that happen to elements on screen and respond to them. In the example above, Javascript was written to respond to the onMouseOver event when the mouse moved over the text. The response was to change the size and font of the text.

In this tutorial, we will first learn about Cascading Style Sheets concentrating on Style and Positioning. Later we will discuss the DOM in detail and discuss more dynamic effects.

One thing to explain right up front in this discussion are the current problems with DHTML. We have already seen above an example where I had to give one piece of code for IE and another for Netscape. This is because of the different structures of DOM that the two major browsers have enacted. This is expected to get better in the future and it is expected that the DOMs wil be standardized. in addition, some of the features of the DOM and CSS are buggy in different implementatios of browsers. I have included a chart that documents some of this behaviour. You need to accept and work around the fact that for now we do have some issues with supporting the different browsers with our dynamic effects.