Dynamic HTML
| "Dynamic HTML" is typically used to describe the combination of HTML, style sheets and scripts that allows documents to be animated. Dynamic HTML allows a web page to change after it's loaded into the browser --there doesn't have to be any communication with the web server for an update. You can think of it as 'animated' HTML. For example, a piece of text can change from one size or color to another, or a graphic can move from one location to another, in response to some kind of user action, such as clicking a button. |
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.
In an Intoduction to Dynamic HTML, we explore 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; on-the-fly altering the aesthetics of content on the page.
- Event handling; how to relate user events to changes in positioning or other style modifications.
The Big Two Browsers
Microsoft and Netscape use two different techniques for Dynamic HTML.- Netscape bases much of its approach on the new LAYER tag.
- Microsoft bases its approach on exposing CSS (Cascading Style Sheets) element attributes to scripts, with a little help from some interesting new built-in, lightweight, and windowless ActiveX controls. Microsoft's DOM implementation is consistent with the direction of the W3C, in that all page elements and attributes are made programmable.
The DOM Dissected
by Aaron Weiss. Web pages today grow out of a coalition of technologies, including Cascading Style Sheets and JavaScript (both loosely referred to as "Dynamic HTML"). Coping with all this requires a thorough insight into the anatomy of the Document Object Model (DOM); this article explains what it is, how you use it, and where it might be leading us.
Layers
In general, "layer" refers to elements that can be positioned at exact coordinates on the page. These elements can be defined with the DIV, SPAN, LAYER, or ILAYER tags. Layers created with DIV and SPAN are referred to as CSS layers because their properties are defined by the Cascading Style Sheets specification by the World Wide web Consortium. This specification defines style properties (e.g. font, color, padding, margin, word-spacing) in addition to the positioning properties associated with layers (top, left, z-index, visibility).Microsoft Internet Explorer 4.0, allows you to change style properties on the fly with a scripting language such as JavaScript or VB Script. Netscape Navigator 4.0 cannot change style properties after the page has loaded, but you can change positioning properties with JavaScript.
Both Microsoft and Netscape support CSS layers in their 4.0 browsers. Only Netscape Navigator 4.0 and later, supports layers created with the LAYER and ILAYER tags.
Technology Components
The major components of Dynamic HTML technology are:-- Style Sheets
(NS)
(MS)
let you specify the stylistic attributes of the typographic
elements of your web page.
They let you
change the color, size, or style of the text on a page without
waiting for the screen to refresh.
- Content Positioning
(NS)
(MS)
lets a web developer animate any element on a web page, moving pictures,
text, and objects at will.
It lets you ensure that pieces of content are
displayed on the page exactly where you want them to appear, and you can
modify their appearance and location after the page has been displayed.
- Dynamic Content
(MS)
actually changes the words, pictures, or multimedia on a page
without another trip to the web Server.
- Data Binding
(MS)
lets you get all the information you need to ask questions,
change elements, and get results without going back to the web
server.
- Downloadable Fonts (NS) let you use the fonts of your choice to enhance the appearance of your text. Then you can package the fonts with the page so that the text is always displayed with your chosen fonts.
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 that JavaScript does at this time is increase the aesthetics and friendliness of websites by adding author-specificed user events to static pages. For example, JavaScript allows the page author to embed into a page statements which allow user response to certain common events such as when you move the mouse cursor 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>
Has this effect:
The author of "Dynamic HTML" has several articles on Dynamic HTML here at "The Web Developer's Virtual Library".
Tools and Resources
Cross Browser DHTML
An Introduction to Dynamic HTML
DHTML Pop-Up Menus: A Parable of Triumph and Loss (Based on a True Story)
by Aaron Weiss. Never underestimate the power of underestimation -- the easy things in life are clearly the most challenging. For the same reasons that replacing the front door lock takes the entire weekend and Pete Sampras can overcome bitter rivals in five set matches but lose in straight sets to guys who've just learned to shave, web development in the real world is often a far cry from the 1-2-3 sing song of tutorials. Outside the ivory tower of the tutorial, reality becomes quite a bit more slippery, especially when confounded by client wishes and development environment constraints (a.k.a. "browser bugs"). It might be useful, then, and perhaps somewhat fun, to look at the development of a Dynamic HTML technique -- namely, pop-up menus -- as a microcosm of the pain, woe, and triumph of birthing an idea from "sure that sounds easy" to actual implementation.
