Uncle Jim's Web Designs and Tutorials

This is part one of a series on Dynamic HTML


Introduction to DHTML

Static vs. Dynamic HTML

Until the Version 4 browsers were released, we only knew static HTML. That means: we put HTML elements (paragraphs, images, etc.) in a specific order in the source code. The browser always showed all elements in this order. Positioning and styling was done by tables, div's and such aids. If we wanted to change the order or the positioning of the elements, we had to rewrite the HTML.

DHTML, however, gives us the chance to re-organize our pages on the fly. In fact, we can take some elements out of the natural flow of the page, put them somewhere else and change its position again if the user clicks a link. The natural flow of the page is the page as the browser first shows it. It calculates the tables and paragraphs and other things we put in the page, then displays them in the best possible way, one by one, from the beginning to the end of the HTML document.

But in the Version 4 and better browsers, we can take, say, an image, and put it somewhere on the page without regard to this natural flow. We can force the image to be in the extreme upper left corner of the page, while the rest of the content is still distributed by the natural flow. In addition, we can add a link to the page, saying "Move image to the right". As soon as the user clicks this link, a little JavaScript is executed which moves the image, say, 200 pixels to the right. We can do this at once or make the image slowly creep to its new position. In either case, the other elements on the page stay where they are, only the image moves.

Since HTML elements could move across the page, this technique was called Dynamic HTML by marketing people of both major browser vendors.

How does DHTML work?

Dynamic HTML gives authors creative control so they can manipulate any page element and change styles, positioning, and content at any time. It provides a richer, more dynamic experience on web pages, making them more like dynamic applications and less like static content. Dynamic HTML presents richly formatted pages and lets you interact with the content on those pages without having to download additional content from the server. This means that a page can respond immediately to user actions, such as a mouse click, without having to retrieve an entire new page from the server.

We begin by discussing the three main components of Dynamic HTML authoring:
Positioning - precisely placing blocks of content on the page and, if desired, moving these blocks around (strictly speaking, a subset of style modifications).

Style modifications - altering the look and display of content on the page.

Event handling - how to relate user events to changes in positioning or other style modifications.


Scripting Languages

Scripts that are executed when a document is loaded may be able to modify the document's contents dynamically. The ability to do so depends on the scripting language itself (e.g., the "document.write" statement in the HTML object model supported by some vendors). JavaScript is often used to create dynamic HTML documents. One of the more practical things JavaScript does is allow you to add user events to static pages. For example, JavaScript allows you to embed statements into a page which allow user response to certain common events such as when you hover over a link.

The following example illustrates how scripts may modify a document dynamically. The following script:

<SCRIPT type="text/javascript">
	     document.write("<b>Date:<\/b> ")
	     document.write(Date())
</SCRIPT>

The above script will display the following:

Additional examples can be found, along with the code, in our DHTML and Javascript Examples site. There, you can find out how to create drag and drop effects, work with CSS, use layers, hide and show content, alter page contents, capture events, and provide animation effects that work with both of these popular browsers.

Next, we will go over the three major technologies that DHTML relies on