Since most of the people are familiar with HTML, they are naturally curious to know as to what is DHTML- whether it is just a modification of HTML, or is it some new version of HTML or a new application altogether. This article is a sincere attempt to satisfy all such doubts. Actually DHTML is just an approach to make the existing static contents of HTML "Dynamic" . For this we will have to integrate HTML with some scripting language such as Vbscript or Javascript. So it would be wrong to say that DHTML is using HTML alone. In fact it is making use of many technologies such as Style sheets, Active Scripts, Document Object Model.

Need of DHTML :- HTML is the simplest component of the web used for formatting the web documents. No doubt with HTML we can achieve very good formatting effects, but it lacks dynamic features. For e.g., we are displaying the features of a particular product. We want each feature to be shown with a different color when the user brings the mouse over it. With HTML we could have just decided the initial color by specifying the required tags but after that the contents are static. Dynamic HTML is an effort to remove these shortcomings of HTML and thereby make the contents dynamic.

The Power of DHTML :- With this new approach, we can make web pages that are highly animated, interactive and with very good visual effects. We can achieve transition as well as rich multimedia effects with DHTML.

Actually DHTML dosen’t introduce any new tags but we can make the existing tags programmable. It means that we should identify each tag with some "id" so that we can use the same id while writing the program to modify the contents dynamically. To understand this , we will have to first understand the document object model popularly known as the DOM. This model has been created by the World Wide Web Consortium (W3C) with the purpose of organizing the web pages. With this model we will be able to identify each and every part of the web page. DOM considers each element such as a paragraph or an image as an object. The other objects we can use are the explorer objects, i.e., the browser’s objects such as the window, the toolbar buttons etc.

Let us see an example of this. Suppose we want to name a paragraph so that we would define the tag as follows.

<p id ="fands"> Just a trial of DHTML </p>

The purpose of this is to allow writing active script to change the properties of the paragraph. For e.g. , we can keep the paragraph hidden initially and then write a script to make it visible in the mouseover event of any other element say an image. Following this approach we can achieve almost anything – Change the background image of a document when the mouse is over a particular topic , change the dimensions of an image, change font colors and size dynamically etc.

The effects of DHTML can be developed using the so-called styles. These styles allow you to modify certain properties of the various elements. We can even define our own classes. For e.g., You might want three types of<H2> tags, one red, other blue & last one silver then you will define a Class for these tags.

To work with DHTML, we should use Navigator 4 or IE 4. Actually the DOM model is also being updated and so are the browsers. After that DHTML will be simply great to work with.

As we have mentioned above that we can use styles for dynamic effects. Let us see how to do it actually. To understand this, we will have to understand the concept of styles and the different ways of applying styles.

To decide the appearance of text or any control we can apply styles to these elements. The style generally consists of a set of declarations wherein declaration is a property-value pair. For e.g., Background-color:red is a declaration. To apply the style to any element, we can just use the syntax,

An example of a tag using style is as follows :-

where each property value pair is separated by semicolons.

Inline style : The type of style used above is called as an Inline style. Inline style declaration is not an efficient way of applying style because if we want to apply the same style for some other text we will have to repeat the declarations again and again. That is why it became necessary to define a style such that it can be applied to the whole document (document-wide style).

Document-wide style : To apply the style to the whole document we can put the style declaration at the start of the document in the head section. For e.g.,

<head>

<style>

H1 { color : red }

H2 { color : blue }

</style>

</head>

With this method, we can control the style of the entire document at one place. According to the above declaration, all <H1> tags will appear in color red, all <H2> tags with color blue and so on. Since the style is stored in the same document, there is no extra download information required for the style information.

With document-wide style the same style cannot be applied to other documents. That is the reason why we should separate the content of a document from its presentation. In this way we can control the appearance of our document externally without changing the substance. HTML 4.0 therefore supports stylesheet as a better option to control the appearance of the pages. The style sheet system that is supported by recent versions of our browser is cascading style sheets level 1 ( CSS1) .

External Style Sheets :- A stylesheet is nothing but a collection of rules that control the appearance of the document. With CSS1 technology we can control up to 50 properties like background color, border color etc. To attach an external style sheet use the following code.

<Link Href="nstyle.css" rel="stylesheet" type="text/css">

With this technology the same style can be applied to all the pages. The only disadvantage is the extra time needed to download the style information. The link tag also supports a media attribute with the help of which we can apply one style for screen and one style for print. However this attribute is currently understood by all browsers.

Classes : In the previous examples we saw that the style – H1 { color:blue } shows all heading level 1 elements with blue color. However if we want to apply a different color for a particular set of <H1> elements we can define a class as follows.

H1.title { color : black }

Now if we want to apply the same style simply say

<H1 class="title"> text </H1>

Having mastered the styles, we can easily apply dynamic effects. If we want to change the style of any element we have to assign some id for it.

For e.g. <div id="a" style="color : red">fands </div>

With this we are defining a programmable element a. Now we can change the color of this division by writing the following code in the mouseover event.

sub a_onmouseover

a.style.color = "#00FF00"

end sub

In this way we can change any attribute of the text. You must have realized that we can achieve almost any desired effect with this technology.