Web authors today face significant challenges when making their Web pages interactive. The static nature of HTML pages limits their creative choices, and interactive components can be difficult to build and reuse. In addition, using proprietary extensions means authoring browser-specify Web pages.

 

Microsoft Dynamic HTML technology helps to remove these barriers for content providers and offers users more engaging and interactive Web pages. Dynamic HTML provides authors with enhanced creative control so they can manipulate any page element at any time. Dynamic HTML is also the easiest way to make Web pages interactive, using open, standards- based technologies. Microsoft is working with the World Wide Web Consortium (W3C) to help ensure interoperability and support for users on multiple systems with different browsers.

 

According to Microsoft DHTML (first implemented in IE 4.0) is a set of innovative features which allows web developers to change the rendering and content of a document on the fly without relying on server-side program (such as Active Server Pages or ColdFusion) or complicated sets of HTML pages to achieve special effects.

 

DHTML can be described as an interface which makes it possible to access the browser object model though JavaScript or VBScript scripting language.

 

This way you can control your page more efficiently. And yes, you can actually make a page without HTML tags at all!

 

DHTML is the art of making HTML pages dynamic!

 

DHTML is a combination of technologies used to create dynamic and interactive Web sites.

 

To most people DHTML means a combination of HTML, Style Sheets and JavaScript.

 

What is DHTML?

 

“DHTML is the combination of several built-in browser features in fourth generation browsers that enable a web page to be more dynamic”

 

DHTML is NOT a scripting language (like JavaScript), but merely a browser feature-or enhancement-that gives your browser the ability to be dynamic. What you really want to learn is not DHTML itself, but rather, the syntax needed to use DHTML.

 

DHTML is a collection features that together, enable your web page be dynamic. I think its important now to define just what is meant by Dynamic?

 

“Dynamic” is defined as the ability of the browser to alter a web page’s look and style after the document has loaded. I remember when I was learning JavaScript, I was taught that you could use document. Writer () method of JavaScript to create webpages on the fly. For example:

 

<script>

document.write (“This is text created on the fly!”)

</script>

 

But what if we wanted to create content not only on the fly, but on demand? We can do that, by nesting the above code in a function, and calling it via a form button:

 

<input type=”button” onClick=”writeconent()” value=”text”>

 

Pressing the button will erase the entire web page and we were left with only the text the function produced.

 

That was back then. Now, with the introduction of DHTML, we can alter content on a web page on demand, whenever we feel like it, without having the browser erase everything else. That’s what DHTML is all about. The ability of the browser to change look and style even after the document has loaded.

 

The technology of DHTML is currently at its development stage, with NE, IE 5 differing quite greatly in their implementation of this great technology. Its currently not possible to write one DHTML code and expect it to function in both browsers properly. Furthermore, the two browsers are at different stages in their development of DHTML; form my own knowledge and what I’ve heard, DHTML in IE is far more powerful and versatile then NS’s.

 

Dynamic HTML Features

 

Dynamic HTML gives authors enhanced control of the elements on their pages. When you have applied one of the FrontPage Dynamic HTML commands to text or graphics, Microsoft Internet Explorer 4.0 and other Web browsers that support Dynamic HTML will animate the text or graphics or apply other effects that you select. Because it does not require fetching information from the web server, Dynamic HTML is very efficient, and presents the user with a lively, compelling page without requiring time- consuming network activity.

 

 

The FrontPage Editor includes the following Dynamic HTML features:

 

• Animation
• Page transitions
• Outlining
• Form enhancements

 

Key features of Dynamic HTML include these:

 

• Document Object Model (DOM). Dynamic HTML provides a comprehensive object model for HTML. This model exposes all page elements as objects. These objects can easily be manipulated, by changing their attributes or applying methods to them at any time. Dynamic HTML also provides full support for keyboard and mouse events on all page elements. Support for the Document Object Model enables the following:

 

• Dynamic content. Text or graphics can be added, deleted, or modified on the flu. For example, a Web page can display an updated headline, without refreshing the page. The text surrounding the headline will reflow automatically.

 

• Dynamic styles. Internet Explorer 4.0 fully supports cascading Style Sheets (CSS). As such, any CSS attribute, including color and font, can be updated without a server round-trip. For instance, text can change color or size when a mouse pointer passes over it. Multimedia filters and transition effects can be applied to HTML elements simply by adding the filter CSS attribute.

 

• Absolute positioning. CSS positioning coordinates for existing page content can be updated at any tine to create animated effects, without reloading the page.

 

• Data Binding. Data-driven application front ends can be built that present, manipulate (e.g., sort, filter), and update data on the client without numerous round-trips to the server.

 

• Scriptlets. A  Scriptlets is a Web page, authored with Dynamic HTML, which content providers can use as a component in their Web applications. With Scriptlets, content providers can author content once, then easily reuse the content in other Web pages or applications.

 

Understanding Interactivity

 

It is important to define interactivity for the purposes of this guide. The following criteria are suggested for defining a truly interactive Web page:

 

“The page author must be able to update any element of the page at any time—during and after the loading of the page.

 

• The page should capture all user actions and enable authors to respond to these events using simple scripts.

 

• The page should reflect the relationship among page elements. A change to one element in the page may require readjusting other elements. An interactive page should do this automatically.

 

• If authors so choose, users should be able to freely change any element in the page at any time.

 

What you should already know

 

Before you continue you should have a basic understanding of the following:

 

• HTML
• CSS
• JavaScript

 

Cascading Style Sheets are design templates that provide augmented control over presentation and layout of HTML elements. They allow you to separate the way you design information from the HTML content.

 

JavaScript is used to create interactive web application supported by the Netscape browser. JavaScript offers many of the same advantages as VBScript. JavaScript is simple to use, lightweight, and dynamic. Developers can easily code functionality for interactive applications inside a web page.

 

DHTML is NOT a W3C Standard

 

DHTML stands for Dynamic HTML.

DHTML is not a standard defined by the World Wide Web Consortium (W3C). DHTML is a “marketing term” – used by Netscape and Microsoft to describe the new technologies the 4.x generation browsers would support.

 

DHTML is a combination of technologies used to create dynamic Web sites.

 

To most people DHTML means a combination of HTML 4.0, Style Sheets and JavaScript.

 

W3C once said: “Dynamic HTML is a term used by some vendors to describe the combination of HTML, style sheets and scripts that allows documents to be animated.”

 

DHTML Technologies

 

With DHTML a Web developer can control how to display and position HTML elements in a browser window.

 

HTML 4.0

 

With HTML 4.0 all formatting can be moved out of the HTML document and into a separate style sheet. Because HTML 4.0 separates the presentation of the document from its structure, we have total control of presentation layout without messing up the document control.

 

Cascading Style Sheets (CSS)

 

CSS was a breakthrough in Web design because it allowed developers to control the style and layout of multiple Web pages all at once. As a Web developer you can define a style for each HTML element and apply it to as many Web pages as you want. To make a global change, simply change the style, and all elements in the web are update automatically. With CSS we have a style and layout model for HTML documents.

 

The Document Object Model (DOM)

 

DOM stands for the Document Object Model. The HTML DOM is the Document Object Model for HTML. The HTML DOM defines a standard set of objects for HTML, and a standard way to access and manipulate HTML objects.

 

“The W3C Document Object Model (DOM) is a platform and language neutral interface that allows programs and scripts to dynamically access and updates the control, structure, and style of a document”.

 

JavaScript

 

Allows you to write code to control all HTML elements.

 

DHTML Technologies in Netscape 4.x and Internet Explorer 4.x

 

Netscape 4.x

 

• JSS (JavaScript Style Sheets) (allows you to control how different HTML elements will be displayed)
• Layers (allows you to control element positioning visibility)

 

Cross-Browser DHTML

 

• CSS 1
• CSS 2 (allows you to control how different HTML elements  will be displayed)
• CSS Positioning (allows you to control element positioning and visibility)
• JavaScript

 

Internet Explorer 4.x

 

• Visual Filters (allow you to apply visual effects to text and graphics)
• Dynamic CSS (allows you to control element positioning and visibility)

 

Note: Problems with coding DHTML technologies WILL occur as long as each browser creates its own proprietary features and technology that is not supported by other browser. A Web page may look great in one browser and horrible in another