Dynamic HTML

On this page:

• Definition
• Using
• Examples
• Finding more information

Definition

Dynamic HTML is a collective technology for producing Web pages which are responsive to user actions. With Dynamic HTML, the appearance or content of the page can change in response to such actions as mouse clicks or movements, keying in text, or other keyboard actions. In the search for a truly interactive, personalised Web environment, both client and server have a role to play. Dynamic HTML represents a leap forward in the potential for interactive functionality at the client end.

What constitutes Dynamic HTML?

1. Cascading Style Sheets (CSS)
2. scripting languages
3. HTML

Style Sheets give authors greatly enhanced control over the presentation of the Web page, enabling them to specify stylistic attributes such as text colour, margins, alignment, font size, etc.

Scripts in Scripting languages such as Javascript are embedded in the HTML page and interpreted by the browser as it downloads the page. They are used to generate responses to user events such as mouse-clicks, form input, and page navigation.

HTML 4.0 provides a standard way to embed objects and scripts, and to support style sheets

Associated aspects of Dynamic HTML are:

• content positioning
• downloadable fonts

Content positioning allows for precise positioning and layering of blocks of HTML content such that they can be exposed, hidden, moved, expanded or contracted in response to user actions.

With Downloadable fonts, any font required to enhance a Web page can be incorporated into the page.

DOM

The base foundation for Dynamic HTML is the Document Object Model (DOM). The DOM defines the anatomy of the page. Within a hierarchical framework, there is for example the document itself, the head, the body, links, images, and specific elements within the document. Elements and styles come with properties, for instance a table has height and width, a heading has a font-style and font-size. The DOM provides the framework for the way in which the elements and their style properties can be accessed and manipulated by scripts. The World Wide Web Consortium has issued the DOM Level 1 Specification as a W3C Recommendation, thus defining a standard API (Application Programming Interface) that allows authors to write programs that work without changes across tools and browsers from different vendors.

Using

Because scripts have access to the properties of a style through the DOM, this makes possible the alteration of the appearance of objects in the Web page in response to user actions (events). For instance the style of a link could change when the mouse is moved over it.

CSS enables absolute positioning of HTML elements, using exact x, y, and z coordinates. With the control this gives over the layout of the page, this makes it possible to animate absolutely positioned content, for instance to move an object to a different position on the page when clicked.

Unfortunately Dynamic HTML is inconsistently rendered by the fourth generation Netscape and Microsoft browsers. This is chiefly because they employ different Document Object Models, Navigator 4.0's giving less access to scripting than Internet Explorer's. Netscape Navigator 4.0 cannot change style properties after the page has loaded.

Another point of difference is in the implementation of content positioning. Netscape uses the LAYER tag while Microsoft bases its approach on Cascading Style Sheets (DIV and SPAN tags), Active X, its own Document Object Model. Other features which are not consistently implemented are Navigator can use Javascript generated Style Sheets as well as CSS.

Example

Rollover

<STYLE>

 .on    { 
       font-size: 18; 
        text-decoration: italic;
        color: red;      
        }

 .off   { 
        font-size: 16; 
        text-decoration: none;
        color: blue;        
        }

</STYLE>

In the document, scripts are used to apply these class styles to objects in a dynamic way, that is, in response to user actions. Employing the Javascript functions onMouseOver and onMouseOut the object changes style when the mouse is moved over it (in this case, the object is an empty link):

	<A HREF = "#"
 	CLASS = "off"
 	onMouseOver = "this.className ='on';"
 	onMouseOut = "this.className = 'off';">
 	Example of a rollover
	</A>

The result:

Finding more information

Dynamic HTML Lab http://www.webreference.com/dhtml/
Web Review - Dynamic HTML http://webreview.com/wr/pub/Dynamic_HTML
Inside Dynamic HTML http://www.insidedhtml.com/
Netscape DevEdge Online http://developer.netscape.com/tech/dynhtml/index.html
Project Cool Dynamic HTML Developer Zone http://www.projectcool.com/developer/dynamic/

| Interactive Web | Dynamic HTML | Java | Javascript | CGI | ASP | Cookies |