home > dynamic html (dhtml)

dynamic html (dhtml)

Dynamic html (or dhtml) is not a separate language, but a combination of static html, css (cascading style sheets) and JavaScript. Html tells the browser what to display, css tells the browser how to display these elements and JavaScript tells the browser when (such as user events or after a set amount of time etc) to display elements.

This dhtml combination provides a useful way to make your web pages interactive. Dhtml provides a means to make web sites dynamic without having to use Java, Flash or databases to create content. Dhtml is a low bandwidth means of providing dynamic, interactive content to web sites because all the interaction happens client-side (on the user's computer).

A dynamic web page is simply one whereby the appearance or content can change after the whole page has been downloaded by the user's browser. Dhtml is supported by any browser that supports JavaScript and css - usually of Netscape 4+ and Microsoft Internet Explorer 4+. As with many aspects of web design, support for dhtml elements in browsers is temperamental.

separate your dhtml files

Although it is possible to create dhtml effects using software, such as Dreamweaver this can make the total file size of the page excessive, as it will contain the html, css and JavaScript. It is usually easier to maintain and quicker for the user to download if you try and keep the html, css and JavaScript as separate files. However, you could create the dhtml behavior in Dreamweaver, then separate the html, css and JavaScript content afterwards. Try visiting the Macromedia (http://www.macromedia.com/exchange/dreamweaver/) web site for downloadable dhtml extensions to add to Dreamweaver.

html

Web pages created using dhtml elements are saved as .html and have the same structural mark up as normal html pages.

The most common form of dhtml is the use of layers in the html. The cross-browser friendly version of this is to use the <div> (as opposed to browser specific <layer> or <ilayer>) tag to deliver dynamic content. These layers can be "hidden" and then "shown" on JavaScript events, such as "MouseOver". Layers can also be used to create overlapping effects and layouts or move along a time line to create animations.

css

The css (style sheet) will tell the browser how to display the dhtml.

javascript

How to create a dhtml navigation menu using html, css and Javascript.