You’ve seen how to use VBScript to program the intrinsic and custom ActiveX controis on a Web page. Another use of VBScript on the Web (an« probably more popular) is to create DHTML pages. As I mentioned DH1ML documents are static HTML pages with programmable elements. For example you can program a header to
change color when the pointer is over it hide and display text depending on viewer actions and so on. To make the elements of HTML programmable though a few new features had to be introduced. I’ll discuss these elements in the next section and then we’ll take a look at how they can be programmed with VBScript.
Extending HTML with Styles and Classes
The origins of DHTML are the so-called styles. As I’ve discussed, many HTML tags recognize attributes which allow the Web author to modify certain properties of the various elements. The actual look produced by HTML tags however can’t be modified. The <HI> tag for instance, displays a level one heading, but you can’t change the appearance of the heading.
With DHTML it is possible to redefine just about every HTML tag. For example the following code is a style definition that will make all level one headers in the page blue and all level two headers red
<STYLE>
Hl (color:red)
H2 {color:b-lue}
</STYLE}
If this statement is inserted at the beginning of an HTML document, usually in the HEAD section, ~tapplies to all the <H1> and <H2> tags that follow.
In addition to the modified <H1> and<H2> headers you might also want to use the original.plain <HI> and <H2> tags. Or you might want two types of <H1> headers a red one and a black one. It is possible to define classes to differentiate custom tags. A class is a new category of tag defined by the author. Let’s say you want to define two <HI> tags one for titles and another for summaries. Here are two definitions of custom <Hi> tag:
Hl. title (font-weight:·bold; background: while color: black)
Hl summary {font-weight: bold; color: blue}
To use the,second <HI> header in a title, you insert the following tag:
<Hl CLASS-summary>This is a summary section</Hl>
A class is practically a new tag; but because it is derived from an existing class instead of defining an entirely new tag we define attributes of existing tags. The tag <Hl class=title> has all the attributes of the <HI> tag except for those specified in the definition of the.class: the font’s weight” the background color and the foreground color.
You use classes to customize existing HTML tags as needed in a document. Nonetheless when you insert a tag in a document it can’t be changed later. The page is still static. As you will see DHTML lets you redefine the styles after the page has been rendered in the browser’s window. For example, you can specify that the color property of an <HI> tag changes when the pointer is hovering over it or when the user takes another action. As you can guess the browser detects various user actions and generates events for each one of them. If you supply the appropriate event handler the document will react to these events
The <DIV> Tag
Internet Explorer renders HTML documents in one pass working from the beginning of the document to the end. As a result there is no way for the browser to move _back and place one element on top of another. For example, with plain HTML you can’t place a caption over an image. Once the image is rendered on the rowser’s
window you can’t step back and place some text over it.
This limitation can be overcome with the help of the <DIY> tag which lets you break a document into separate entities that can be placed on the page with respect to one another. The <DIY> tag is the heart of DHTML; it let’s you break the document into elements (or objects) and manipulate each one independently. Let’s look at a deceptively simple example. The STYLES.HTML page shown in Figure 19.10 looks as if the text appears on fop of the background image.
If you open this document with a text editor you’ll see that it contains two sections each delimited with the <DIY> tag. The first <DIY> tag contains a string that is tiled repeatedly in the document’s background. The second <DIY> tag contains the text that’s displayed on top of the background. The two sections of the document overlap because the <DIY> tag allows us to specify its absolute position.
The document contains the following SlYLE definition:
<STYLE>
Hl.LargeText {color: ‘#000000’ font-family: ‘Verdana’; font-size:
SOO%}
</STYLE>
This Style is a variation of the <HI> header, It uses a very large font and a light gray color (slightly lighter than the silver color of the background). The background pattern may not be noticeable on the printed page; open the SlYLES.HTML page to view it. In general the background shouldn’t be busy; if it is the text on top of it will be hard to read.
The definition of the first <DIY> tag, which creates the background is:
<OIV STYLE-‘position:absolute; left: 20’>
<Hl CLASS-LargeText>VB6 VB6 VB6 VB6 VB6 VB6
.<DIV>
The position of this section of the document is defined as absolute and is displaced 20 pixels from the left edge of Internet Explorer’s window. To place the text on top of the first section another
<DIY> tag is used with the same origin. Here’s the definition of the section with the text:
<DIV STYLE-‘position:absolute; left=20’>
<DIV>
Here I’ve omitted the actual contents of the section. What ever appears between . the <DIY> tags will be rendered on top of the current contents of Internet Explorer’s window. You can open the STYLES.HTML document and examine its code.
The <STYLE> and <CLASS>·tags are extensions to HTML, and they allow a Web author to control the properties of the HTML elements and to position them on the page. These two tags were the first significant departure from the straight (and static) HTML model. DHTML gives you the option to manipulate the styles programmatically. Whereas the <CLASS> tag lets you redefine an existing tag, the <DIY> tag lets you apply attribute to an entire section. DHTML takes this capability one step further. It lets you manipulate the background color from within a script even after the document has been rendered on the browser.
