As you have probably realized by now, Web pages are much more useful when they are dynamic. In Internet terminology, the word dynamic means several things. Primarily, it refers to Web pages that respond to user requests through buttons or other kinds of controls. Among other things, a dynamic Web page can allow a user to change the document background color, submit a form and process a query, and participate in an online game or quiz. The term "dynamic" also refers to various kinds of effects, such as animation, that appear automatically in a Web browser. You can simulate limited dynamism and interactivity with simple hypertext links. Consider the Web page shown in Figure 10-1, which displays a photo of a pig weathervane that is sold by a compaany named Weathervane Warehouse. This single Web page has links to six other Web pages that are identical to the one shown further, except that each displays a different weathervane picture.
You can find files for the Weathervane Warehouse Web site in the Chapter folder on your Data Disk.
Hyperlinks such as those found in the weathervane document do not change the currently displayed document, but load new ones from the server instead, so they cannot produce true dynamic effects. When a user clicks a link on the weathervane page, it appears as if only the graphic changes. In reality, the entire page is replaced. This means the Web browser has to find the correct Web page on the server, transfer that file to your computer, and then render the new document. Although you might not notice the time it takes for these steps to occur in this simple example, the transfer and rendering time for a large, complex Web page could be significant. If the Weathervane Warehouse Web page were dynamic, only the image displayed by the ![]()
element would change, and the work would be performed locally by a Web browser rather than by a server. Changing only the image would be much more effective and efficient.
To make Web pages truly dynamic, you need more than just XHTML. Dynamic HTML (DHTML) refers to a combination of technologies that make Web pages dynamic. The term DHTML is actually a combination of JavaScript, XHTML, CSS, and the Document Object Model. You should already be familiar with JavaScript, XHTML, and CSS. In order to be successful with JavaScript, you also need to learn about the Document Object Model.