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.
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.
The following example illustrates how scripts may modify a document dynamically. The following script:
Next, we will go over the three major technologies that DHTML relies on