The Internet Explorer (IE) Way
Internet Explorer uses the <div> tag to group
DHTML elements together into workable units. The <div> tag
is simply an HTML tag that is used in grouping similar content together.
Then (CSS) style attributes are assigned to
each <div> tag which can be manipulated by script such as JavaScript or
VBScript.
The HTML
The HTML needed to make DHTML work includes the use
of the <div> tag to group together DHTML elements such as
text, images and other <div> groups. So in a way, DHTML has a modular design
as compared the to procedural design of regular HTML. By modular design I mean
content is nicely contained in easily manageable units. Regular HTML is rather chaotic
and not very structured making it harder to control. Below is an example of a how
a DHTML page is structured into groups.
Each block represents an opening and closing <div> tag with various web
page elements within them such as text, images and sub blocks.
As you can see from the example above, DHTML has a
very structured form. A modular way of thinking must be used in designing a
DHTML page. Above, each DHTML block is really a <div> and
</div> tag with a style attribute describing it
and the desired content between them. Below is an example of what the
text block code looks like.
<!-- ---------------TEXT BLOCK --------------- -->
<div id="story"
style="position: absolute;
top: 250;
left: 200;
width: 400;
z-index: 1;
font-family: 'tahoma';
color: #333333">
A pleasing land of drowsy head it was,<br>
...
</div>
The style attribute and its value will be explained
later. For now just look at how the code is structured. The whole block of text is encased
within the <div> tags for use in the web page. In DHTML, this makes the text
a controllable element of the web page. Now let's see what the navigation block's code looks
like.
- <!-- -------------CONTROL BLOCK------------- -->
-
- <div id="controls"
- style="position: absolute;
- top: 100;
- left: 700;
- width: 50;
- height: 300;
- Z-Index: 1;
- Visible: true">
-
- <div id="scrollup"
- style="position: relative;
- top: 0;
- left: 0;">
- <img src="up.gif" alt="Scroll Up">
- </div>
-
- <div id="scrolldown"
- style="position: relative;
- top: 200;
- left: 0;">
- <img src="down.gif" alt="Scroll Down">
- </div>
-
- </div>
Notice how we encased an image within a <div>
tag within another <div> tag. With DHTML you can create this kind of
modular hierarchy to simplify page elements. How would you benefit from this kind of
sub grouping? First, all the attributes of a <div> tag are
automatically inherited by what it encases. Thus, by adding more <div> tags
encased within the one, we can further define the attributes of an element. For example,
above we encased an image within a specially positioned block which is further defined by
the <div> tag encasing it. So you see, traits are handed down from
<div> tag to <div> tag in a kind of HTML tag evolution.
In the next section, we'll go over the style
attribute and use of Cascading Style Sheets (CSS) which give the <div> tags
their personality.
Upload
