DHTML | DHTML Classes | DHTML FAQ

DHTML (Dynamic HTML)

Dynamic HTML is simply HTML that can change even after a page has been loaded into a browser. A paragraph could turn blue when the mouse moves over it, or a header could slide across the screen. Anything that can be done in HTML can be redone after the page loads.

How can HTML be changed after it's been downloaded? There needs to be some way to tell the browser to change it, which brings us to the technologies that make up DHTML.

Dynamic HTML is client-side scripting

People have been using client-side scripting languages (JavaScript and VBScript in particular) to change HTML for a long time. If an image changes when you roll your mouse over it, you're looking at an example of dynamic HTML. The 4.0 browsers from both Microsoft and Netscape allow more of a page's HTML elements to be accessible from within scripting languages. The mechanism whereby page elements (or document objects) are opened to scripting languages is called the Document Object Model (DOM).

Dynamic HTML is the DOM

In a sense, the Document Object Model is the real core of DHTML. It makes HTML changeable. The DOM is the hierarchy of elements that are present in the browser at any given time. This includes environmental information such as the current date and time, browser properties such as the browser's version number, window properties such as window.location (the page's URL), and HTML elements such as <p> tags, divs, or tables. By exposing the DOM to scripting languages, browsers enable you to access these elements. While some elements such as the time of day can't be changed themselves, they can be used by scripts to modify other elements.

The part of the DOM that specifies which elements can trigger changes is the event model. Events are things like moving the mouse over an element (onmouseover), loading a page (onload), submitting a form (onsubmit), clicking on a form input field (onfocus), etc.

Dynamic HTML is CSS

Because they are part of the DOM, CSS properties are accessible to scripting languages, and it is therefore possible to change almost anything about the way a page looks. By changing the CSS properties of a page element (such as its color, position, or size), you can do almost anything bandwidth and processor speed permit.

CSS brings powerful layout and design capabilities to DHTML. With CSS, you can specify font sizes and faces, margin heights and widths, borders and padding, even text decoration. In addition, using CSS you can create absolutely positioned content. No longer do you have to toil with complex and limited tables; now content can be contained within movable, malleable blocks. This visual control and accuracy, when combined with scripting languages and powerful object models, gives web authors the power to make any document more engaging.

CSS is a language in itself, one of the many languages that you'll need to know to master DHTML. The purpose of CSS is to define styles for a document's content. A style can instruct a word to be blue or specify that the text on the first line of a paragraph be capitalized. CSS allows its styles to be grouped, associated, and applied to specific elements.

It's actually a little tough to get a handle on DHTML because it seems to mean different things to different people. The actual term stands for Dynamic Hypertext Mark-Up Language. The essence of the term stands for almost any coding that creates movement or interactivity by employing the standards of the 4.0 and later level Netscape and MSIE browsers.

The best description I can offer is that DHTML is any combination of Style Sheets, JavaScript, Layering, Positioning, and Page Division, at the 4.0 or later browser level, intended to create movement or user interactivity.

Home | Technical Schedule | Application Classes | Class Outlines | MCSE, MCDBA, MCSD Training | Microsoft .NET Programming | Cisco Classes | Linux, Unix, AIX | CompTIA Certification | Webmaster Training | Pricing | Locations | Financing | E-mail Us