Introduction to DHTML!

Dynamic HTML is an extension of HTML that expands the possibilities of web page design in presentation and user interaction. It is an umbrella term that refers to a combination of technologies such as HTML, CSS and Scripting languages suchas JavaScript and VBScript.

HTML is for static content, where as DHTML is for dynamic content. With the help of DHTML, we can create a web page with the following features:

1. Animated content
2. Dynamic effects and
3. User interaction

Using DHTML we can create web pages that posses the power of both word processsing application and an Internet application. It gives authors creative control so that they can manipulate any element of the web page and change its style, positioning, and content at any time. It helps a web designer to present richly formatted web pages and allows the user interact with those pages dispayed on the browser.

Advantages of using DHTML:

• Supported by most web browsers
• Requires small file sizes (faster than Flash)
• No plug-ins required for its execution
• Easy to learn
• Faster web experience (i.e., change the page content without loading new pages)

Three major functions of DHTML

1. Positioning
2. Style modificaiton and
3. Event handling

Positioning precisely places blocks of content on the page, and if desired, moving those blocks around (strickly speaking, a subset of style modificaitons)

Style modification refers to on-the-fly altering the asthetics of content on the page

Event handling deals with the user interaction (called events) at the client side.

THE DOCUMENT OBJECT MODEL (DOM)

DHTML is a term used for referring to a set of technologies that include HTML, CSS, DOM and Scripting languages (VBScript/JavaScript). On one hand, DHTML uses HTML and CSS for structuring and formatting the content of a web page. On the other hand, it uses Scripting languages for controlling, accessing and manipulating the various elements of the web page.

HTML is a markup language with which we can present the content on a web page, where as CSS is for formatting the various elements on a web page. Scripting languages provide the power of a higher level language to a web page for perfroming some background operation. All these various technologies are united together in DHTML with the help of a standard Object Model called Document Object Model (DOM).

The DOM:

DOM is a standard that defines a programming interface between HTML and other technologies - CSS, Scripting languages like JavaScript. It is defined by World Wide Web Consortium (W3C) as follows:

“It is a platform independent and language neutral interface that lets programs and scripts dynamically access and update the doucment's structure, style and content.”

DOM defines a web page as a document object that consists of a hierarchy of other objects in it.  It considers each and every element of a web page as object, taking HTML into more object-oriented realm.

Through DOM, every element that a web page contains is regarded as object, including elements such as section, heading, image, list and paragraph. Using DOM, it is possible to add, delete or change an element of a web page after its display on the screen.

DOM functions by creating objects and managing the objects in a hierarchy. A parent object in DOM may have child objects and each child objects in turn can have other child objects under it. The following objects are considered as top level DOM objects: All, Anchors, Applets, Body, Documents, Embeds, Event, Filters, Forms, Frames, History, Images, Links, Location, Navigator, Plug-ins, Screen, Selection, Stylesheets, and Window.