What Is Dynamic HTML?

Contrary to how it is typically portrayed by the press, Dynamic HTML (DHTML) is not just one particular technology, language, or set of features. Instead, DHTML comprises a number of different technologies and describes how these technologies interact. In simple terms, DHTML allows you to use conventional HTML, script, a Document Object Model, absolute positioning, dynamic styles, multimedia filters, and a variety of other technologies to dynamically change how HTML displays text and graphics on a screen.

Making HTML Dynamic

There is no debating that Hypertext Markup Language (HTML) remains the most important display technology on the Web. Since its use became widespread during the mid-1990s, HTML has evolved and added many new features. (Part 1 of this book will cover HTML in detail.)

However, with a few minor exceptions (such as when special ActiveX controls are used or form fields are changed), HTML pages are static; generally, the only way to change a screen display with HTML alone is to load another page. Internet Explorer versions 4 and 5, however, support an extensive Document Object Model that exposes all the elements of a page, including the HTML elements. This allows any HTML element in Internet Explorer to be manipulated at any time, even if the page has already been loaded, turning plain, old HTML into Dynamic HTML. The Netscape Navigator Object Model is not as complete as that of Internet Explorer, though it does allow some degree of manipulation. In both browsers, this manipulation is accomplished through scripts.

Tying Things Together with Scripts

You can accomplish a great deal on a Web page without ever having to write a line of script code. But to really take advantage of the power and features available in a Web browser, you'll probably want to learn a bit of scripting. We have to warn you, however, that scripting can be habit-forming. Once you see how effective scripts are and what they can add to your Web pages, you'll have a difficult time going back to unscripted pages! Many nonprogrammers think that scripting is too difficult to learn and use. While we agree that scripting can seem complex, we will show you how even simple scripts let you take advantage of powerful features of a Web browser.

For example, let's say that you have a Web page containing the image shown on this screen.

If you want to change the image using just HTML, your only real option is to go to another page that displays a new image. With Dynamic HTML, you can change the image simply by changing the attributes of the HTML image tag. This would allow us to create a page in which the light bulb could be turned on by just clicking it. (To see this example in action, go to chap01\bulbtest.htm on the companion CD.)

Notice that the image changes without refreshing the page. We constructed this example using only Dynamic HTML and a simple script. It contains no new tags, no Java code, and no ActiveX controls, just HTML and a small amount of script.

Scripting is especially important in version 4 browsers. In earlier versions, you could use scripting for certain objects and elements, but the list was relatively small. In versions 4 and later, many more elements are exposed as objects and, therefore, are available to scripts. JavaScript-compatible languages (such as Microsoft's JScript and Netscape's JavaScript) and Microsoft's Visual Basic Scripting Edition (VBScript) are two types of scripting languages commonly found on Web pages and supported in some Web servers. Scripts are usually embedded in the HTML on a Web page and are downloaded with the page. You can also detach scripts to a separate file and link them to pages when and where they are needed, allowing those scripts to be used and reused. (The chapters in Part 2 provide a more in-depth look at scripting, focusing on Microsoft's standards-based scripting language, JScript.)

Controlling Page Layout with Cascading Style Sheets

Putting pages up on the Web has long been referred to as Web "publishing." But you'll find quite a difference between Web publishing and its paper-based cousin, especially when it comes to page layout. Page layout on the Web, or in Web terminology the page's "look and feel," traditionally has been limited at best. Now modern browsers give authors and designers a much finer degree of control over how various elements—especially text—appear on the screen. This is accomplished through the use of Cascading Style Sheets (CSS) technology, which was introduced in Internet Explorer 3 and Netscape Navigator 4. Microsoft's implementation of CSS is known as dynamic styles. Style sheets give the content developer much greater control over almost every aspect of layout and formatting, including:

• Fonts
• Color
• Borders
• Backgrounds
• Alignment
• Absolute position
• Leading (line spacing)
• Effects (such as drop shadow and glow, Internet Explorer only)

Figure 1-1 shows an example of text formatting that you can set up with plain HTML. Although some text control is possible, it is very limited compared to what you can do with dynamic styles, as shown in Figure 1-2 on the following page. With dynamic styles, you can apply absolute positioning to elements on a page, add filters, and change character spacing. (You can find the HTML code for this demonstration of styles in chap01\styles.htm on the companion CD.) Dynamic styles also allows the content developer to change style attributes for elements after the page has been loaded. This lets you create such effects as collapsible menus and moving objects on the page.

Fortunately, CSS is not only for text. You can apply style attributes to other objects as well, from the type of border on a table to the visibility of an image. Part 3 of this book offers a detailed discussion of text and page layout using CSS.

Figure 1-1. Text formatting in HTML.

Figure 1-2. Dynamic styles using Cascading Style Sheets.

Using Internet Multimedia

Displaying multimedia elements on a Web page isn't new to the latest browser versions; you could do it in previous versions by using ActiveX controls, Java applets, basic built-in tools, or special plug-ins. However, Microsoft has added features to Internet Explorer 4 and 5 that have changed multimedia on the Web because the browser software itself includes or will automatically download a wide variety of controls necessary for using high-quality multimedia. Part 4 of this book will cover both cross browser and Internet Explorer_specific multimedia techniques. Here is a list of the multimedia components found in the latest versions of Internet Explorer and what they do:

• Media Player This media control lets you add audio, video, ASF (Advanced Streaming Format) streaming video and audio, and other media to your page. It provides a full range of VCR-type controls, including Play, Stop, and Pause. It can be used with or without its built-in control bar.
• Cascading Style Sheets Filters and Transitions Although you will use CSS most often for text, multimedia filters and transitions are part of dynamic styles and can be applied to many types of objects, including graphics, videos, and even the page itself. See Part 3 for details on how to use CSS.
• Structured Graphics control With this control, you can create complex, lightweight, and scalable vector graphics. These graphics add little to file size and can be rotated in 3-D space, providing cool effects on a page while using very little bandwidth.
• Sequencer control You can incorporate precise timing and lightweight animation with the Sequencer control. It lets you determine the timing of various events on a page with very fine control through scripts.
• Path control This control allows you to move elements around on a page over time. A path can be as simple as a straight line or as complex as an intricate pattern. Combine the Path control with other multimedia controls for some impressive effects that won't take forever to download.
• Sprite control This control allows you to build animation into your page by manipulating images with frame-level control. The frames can be individual images or a section of an image source that allows multiple images to be part of one file.

You can find a detailed discussion of these technologies in Part 4 of this book.

A key feature of all the multimedia components is that they are scriptable. All the multimedia that you put on a page can be authored and played back by using HTML code and script code. This capability is the key to true Internet multimedia. Because all the information needed to render the multimedia elements is coming from HTML or from script, pages that contain these elements can be very small and will download quickly.

Additional Technologies

Many other cool technologies are now available on the Web, ranging from scriptlets and behaviors to data binding and XML (Extensible Markup Language). Part 5 of this book explores in depth these technologies and other useful topics, such as techniques for enabling your pages to work on different versions of different browsers that do not support the same features. Let's take a quick look at one of these technologies: data binding. Before DHTML, just about any data that appeared on a Web page was pulled from the server and remained static. For example, suppose you looked at a Web site that displayed information about trees based on each tree's type and average height, as shown here.

If you wanted to view only a list of trees that are of medium height, you would select the criterion Medium from the Sort By list and send the request. A server would receive the request, do some data processing, and then send back a page with a list of trees that are of medium height. If you then wanted to see only trees that are of the deciduous type, you would have to send a new query back to the server. The server would then process the query and send a new set of results. A server needed to be involved every time you wanted a new view of the information.

Internet Explorer 4 and later, however, can reduce a significant amount of this traffic by supporting what is known as data binding. The data binding function lets Web authors and developers attach, or bind, data directly to a page. Users can then modify views of the data without having to go back to the server with a request. As a user, you can get all your tree information with one request to the server and then sort or filter it in as many ways as you like. For instance, the illustration below shows the tree data filtered for medium height.

To see this demo, open chap01\treedemo.htm on the companion CD. Notice that the page is loaded only once, although the data can be viewed in many different ways. We will look at data binding in more depth in Part 5.