Under conventional methods of Web page development, text and graphic elements are coded on the page and surrounded by XHTML tags to control their layout and styling. Normally, these page elements remain static, that is, they never change unless the Web page itself is changed, recoded by the developer with different text or graphic images.
This manner of Web development may be appropriate for pages where the content and styling seldom change and where the visitor is merely a passive reader of page content. But this need not be the case. Web page visitors can, instead, become active participants in the browsing experience, and the Web page itself can change, becoming dynamic in layout, styling, and content in response to visitor actions and desires. The following examples show a few of the ways in which dynamic Web pages can enhance the browsing experience.
Dynamic Text Styles
One of the most common ways to introduce visual variety to a Web page is to change the styling of page elements in response to user actions. This technique is often used to provide visual feedback to confirm an action. For instance, in the following example, a hyperlink changes its visual appearance to indicate three user actions surrounding the link—when the mouse is moved on top of the link, when the link text is clicked, and when the mouse is moved off the link. (The link itself is not active; it only illustrates visual styles associated with mouse actions.)
The above example simply changes font sizes and colors of an <a> (anchor) tag in response to user actions. However, more elaborate styling changes can produce more dramatic visual effects. In the following example, the list of standard, static links on the left is reproduced on the right as a drop-down menu with visual clues to user actions.
In this case, links are positioned, styled, and have their visibilities turned on and off in response to mouse events. Clearly, the revised menu makes for a more attractive presentation, and it gives the user better visual clues to mouse actions surrounding the links.
Of course, it is not only links that can be styled dynamically. Any grouping of text on the page can have any of its text styles changed interactively by a user action. In the following demonstration, a text paragraph has its style charactertistics altered by user choices expressed through radio buttons.
Here is a paragraph of text that has various font settings that can be changed dynamically. Click the radio buttons below to view combinations of font style settings applied to this text.
|
Font Arial Arial Narrow Comic Sans MS Courier New Georgia Impact Tahoma Times New Roman Verdana WebDings |
Size 7pt 8pt 9pt 10pt 11pt 12pt 13pt 14pt 15pt 16pt |
Style normal italic |
Align left center right justify |
Transform none capitalize uppercase lowercase |
Decoration none line-through overline underline |
|
Weight normal bold |
The point of the previous examples is that text styling originally applied to a Web page is not necessarily set in stone. It can be changed in response to user events, often as a way to solicit or confirm user actions, and to give the user a visual sense of participation in the browsing experience.
Dynamic Graphic Styles
In addition to text, graphic images can be styled in response to user actions. In the following example, a picture can have its size and its lightness or darkness changed, or it can be hidden or revealed, by clicks on accompanying buttons.
It is also possible to permit more "free-form" user interaction with page elements, allowing the user to interact directly with an element to change its display characteristics. The following example shows an animated GIF image coded at a fixed location on the page. By dragging the image, however, you can position it anywhere on the page.
Optionally, page elements can be animated. When the previous image is double-clicked, it moves automatically through a series of predefined pixel positions on the page. Although image animations are often overdone on Web pages, their selective use can enhance presentation and add to the information content of the page.
Dynamic Content
It is normally thought that coding text or graphic content on a Web page "fixes" that content on the page, where it remains unchanged unless recoded with different content. Yet, even "hard-coded" content can be changed. The following example shows a block of text coded as a standard paragraph. However, moving the mouse on top of the underlined terms reveals additional content, in this case, definitions of the indicated terms.
Not only can you bring visual variety to a Web page through styling variety, you can even change static content to dynamic content by changing the text display in response to user actions.
The following boxed paragraph combines two kinds of dynamism that can be produced by the browser to entirely change both styling and content. By clicking the "Change" button you change the style and position of the paragraph; at the same time, its data content changes.
Dynamic Text
Here is a paragraph of text as it is originally coded
on this page. When you click the button you change the content, style, and
location of this paragraph.
What is notable in this example is that only a single <p> tag appears on the page to enclose the text. The tag is hard-coded and styled to display the original paragraph and button. When the button is clicked, a different set of style characteristics are applied to the tag, and its text and button content are changed. This is not a case of hiding and revealing two different paragraphs; the identical page element itself changes in response to user actions.
Of course, being able to change page content means being able to change graphic content as well as text content. As demonstrated below, clicking on the image changes the picture that is displayed. Optionally, the pictures can be changed automatically to produce a slide-show effect. Click the "Start Show" button, which changes to a "Stop Show" button to halt the display.
Click the image to change the picture.Interactive Applications
Dynamic content and styling is not limited to providing visual alternatives to static pages. It is also possible to create interactive "software applications." That is, a Web page can be "programmed" to carry out processing tasks through interaction with the user. In the following example, icons are dragged into boxes labeled with software names in order to match the icons with the names. Clicking the "Check" button verifies the matchings by displaying correct matches in green and incorrect matches in red.
In this case, programming logic is added to the page to test the pixel locations of the dragged icons to see if they fall within a range defined by the locations of the target boxes. Although the programming features built into modern browsers are not as extensive as those found in full-featured programming languages, they do provide the standard arithmetic and logical constructs common to all languages. In the following example, these arithmetic capabilities are demonstrated in an application simulating a hand-held calculator.
Here, XHTML tags are arranged and styled to resemble the buttons and display window of a calculator, and the tags are programmed to perform addition, subtraction, multiplication, and division when they are clicked.
On a more mundane level, the practicalities of business processing can be undertaken with browser programming. The following table is an internal database of records. By entering timesheet information in the data entry boxes you can calculate weekly payroll for the employees.
| ID | Hours |
|---|---|
The previous examples are a few of the ways in which you can bring dynamic content and styling to a Web page, the final purpose being
Thus, you no longer need to think that text and graphics appearing on a Web page are fixed in content and style. Everything on a Web page can become dynamic, changed in response to changing user events.
Dynamic HTML
The examples shown above are applications of what is termed Dynamic HTML (DHTML). DHTML is a collection of techniques to change static Web pages into dynamic Web pages that react to events that take place surrounding the page. These events can be initiated by the user through mouse and/or keyboard actions, or they can be triggered by the Web page itself. The end result is that the layout, design, and/or contents of the Web page can be changed on-the-fly to respond to user and page events.
Producing Dynamic HTML pages requires familiarity with four main topics. First, you need a good understanding of the XHTML markup language. It is by manipulating XHTML tags that dynamic changes take place in the browser. (More accurately, the designation should be DXHTML rather than DHTML in recognizing recent standards for this markup language).
Second, you need a good understanding of Cascading Style Sheets (CSS). Dynamic changes to style properties account for a large portion of the dynamism on a Web page, whether in styling changes or in content changes.
Third, you need familiarity with the browser's Document Object Model (DOM). The DOM is the collection of XHTML elements appearing on a Web page. It also includes the browser itself along with the browser window, frames, and their occupying documents. The DOM supplies the programming interface to these elements enclosing and composing a Web page, and it is by manipulating the built-in properties and methods of these elements that changes are made and dynamism results.
Finally, you need good skills with the JavaScript language, the default programming language built into modern browsers. It is through programming techniques applied with this browser scripting language that page elements are programmed for change. Note that JavaScript is referred to as a "scripting," rather than "programming," language since it does not have the functionality of a full-featured programming language. However, it is sufficient for writing processing scripts to manipulate page elements through the DOM interface.
These tutorials assume that you have good understanding of the first two topics—XHTML and Cascading Style Sheets. The focus here is on the the browser's Document Object Model and the JavaScript language that puts it into action.
Dynamic HTML is applied primarily through the Document Object Model supported by particular browsers. There are DOM standards published by the World Wide Web Consortium (W3C) to provide common approaches to using DHTML. Unfortunately, not all browsers follow these standards, and some augment the standards with additional capabilities. The browser that best represents international standards is Microsoft Internet Explorer, especially the latest versions. Firefox and Netscape Navigator have pecularities that require work-arounds to produce similar results. In this tutorial, all instruction and examples are based on Internet Explorer 6.0. You are encouraged to ungrade your browser before beginning these tutorials.