T3L9

DHTML

Introduction

This lesson is designed for you to gain some basic information about Dynamic HTML, or DHTML. When you finish this lesson, you should be able to:

  • Describe what DHTML is.
  • Describe what technologies DHTML is composed of.
  • Explain the advantages and disadvantages of using DHTML
  • List some basic DHTML editors

Dynamic HTML is an extension of (or addition to) HTML.

HTML severely limits your ability to control the placement of objects on a Web page, and to change those objects once the page is loaded. This makes most web pages static. Adding interactivity via multimedia can increase download times and technical requirements to the point where a site is unusable to many people.

Dynamic HTML promises to solve these problems. Dynamic HTML can change a page even after a page has been loaded into a browser. A paragraph could turn blue when the mouse moves over it, or a header could slide across the screen. Anything that can be done in HTML can be redone after the page loads.

DHTML is actually a combination of several technologies:

  • HTML 3.2
  • JavaScript
  • Cascading Style Sheets (CSS)
  • Document Object Model (DOM)

JavaScript is the web's scripting language. You can learn more about it by viewing these pages .

CSS allows you to dictate the styles for a page or set of pages in one place. Thus, you can set the font type, background color, etc. for an entire site in one place, and if you ever need to change anything, you change it in one place only, and all the pages that use that style sheet will change accordingly. With CSS, you can also exactly place an object on a page via x, y, and z coordinates, something impossible to do in HTML. You can learn more about it by viewing these pages [[link to CSS lesson]].

DOM is a means of accessing a document's individual elements - like forms, frames, etc. - via JavaScript. Currently, the two major browsers, Netscape Navigator and Internet Explorer, implement their DOM differently. This means you usually have to script two sets of code when using DHTML to ensure your commands are interpreted correctly by both browsers.

If you decide to use DHTML in your web pages, there are some basic issues you should know.

  • Advantages and Disadvantages of Using DHTML
  • An Example of DHTML
  • DHTML Tools
  • DHTML Summary

Additional Resources

Webmonkey - DHTML

[[

<devhead> - DHTML

[[

webreview.com - DHTML

[[

Advantages and Disadvantages of Using DHTML

Advantages

Dynamic HTML enhances standard Web-page multimedia capabilities by providing more precise layout tools, absolute positioning, movable text and graphics, and overlapping images.

Dynamic HTML allows the use of document object models, which let Web pages carry a variety of objects that can be manipulated by either a Webmaster or a user--independently of one another.

Dynamic HTML enables Web pages to carry event models, meaning that events will occur automatically on a Web page in response to a user action and without further interference by the Web server. You can cut down on server use and traffic with DHTML.

Disadvantages

DHTML is not a standard. While DHTML is not a standard yet, standards are now being set by the World Wide Web Consortium (W3C) [[ for DHTML, including specifications for CSS and DOM.

Because of lack of standards, browsers are free to interpret DTML differently. Thus, you must script routines that account for each browser, effectively doubling your work.

Many people are still using older browsers (version 3 or less) that do not support DHTML at all.

Alternatives that provide some similar features, such as Flash, are quite popular.

An Example of DHTML

Hidden Text

Suppose you wanted to have a piece of text appear near a picture of a product when the user clicked on a "more info" link?

First, you need a chunk of JavaScript to identify the browser:

<script language="Javascript">

// Is it IE or Nav and at least version 4.0?

var isIE4 = navigator.appVersion.indexOf("MSIE")>0 & version>=4

var isNav4 = navigator.appVersion.indexOf("Nav")>0 & version>=4

//You will use the variables isIE4 and isNav4 later on.

//Next, you need to create a function named show.

//It will be used to toggle the visibility of the hidden text.

function show() {

if (isNet4) {

document.hidden.visibility = "visible"; //Notice the difference between IE and Nav.

}

if (isIE4) {

document.all.hidden.style.visibility = "visible";

}

}

</script>

The HTML code looks like this:

<BODY>

<SPAN ID="hidden">Place your hidden text here.</SPAN>

<A HREF=javascript:show()>Click here for more information.</A>

</BODY>

When the user clicks on the link, the hidden text will appear.

DHTML Tools

As you can see, scripting DHTML can be very time consuming and tricky. Fortunately, several tools and editors exist to help you develop DHTML.

  • DreamWeaver
  • Drumbeat
  • Homesite
  • Scriptbuilder

This list is by no means exhaustive, and is growing all the time. Most of these software products build your DHTML code behind the scenes, allowing you to concentrate on what you want, not how to achieve it.

DHTML Summary

This lesson is designed for you to gain some basic information about Dynamic HTML, or DHTML. When you are finished with the lesson, you should be able to do the following:

  • Describe what DHTML is.
  • Describe what technologies DHTML is composed of.
  • Explain the advantages and disadvantages of using DHTML
  • List some basic DHTML editors

A short summary of these topics are listed below. If you do not understand these things, you should review the lesson at least once. If you are still having difficulty, you should consider other sources of information that compliment this lesson, such as textbooks, tutors, and instructors.

DHTML

Dynamic HTML is an extension of (or addition to) HTML. DHTML is actually a combination of several technologies:

  • HTML 3.2
  • JavaScript
  • Cascading Style Sheets (CSS)
  • Document Object Model (DOM)

Advantages and Disadvantages of Using DHTML

Advantages

  • DHTML enhances standard Web-page multimedia capabilities.
  • DHTML allows the use of document object models.
  • DHTML enables Web pages to carry event models

Disadvantages

  • DHTML is not a standard.
  • Different browsers interpret DTML differently.
  • Older browsers do not support DHTML.

DHTML Tools

This is NOT an exhaustive list.

  • DreamWeaver
  • Drumbeat
  • Homesite
  • Scriptbuilder

1