Experiment with Dynamic HTML

Experiment with Dynamic HTML

If you'd like to experiment with Dynamic HTML for yourself, here's a simple black box with white and red text layered over the top (see Figure 3). There's one version for Netscape Navigator 4.0 using the <LAYER> tag and another for Internet Explorer 4.0 using Cascading Style Sheets. Choose the correct one for your browser -- the source will only work in the specified browser. We've included these for example purposes only. In future columns we'll explore Dynamic HTML in more detail.

Layers in Netscape
Navigator 4.0 offers designers the <LAYER> tag for absolute positioning of text and graphics on a Web page. Unfortunately this tag is not supported by IE 4 and has been rejected by the W3C as a standard. You'll only see how this tag functions if you're using Navigator 4.0.

A layer is created between a pair of <LAYER> ... </LAYER> tags. Everything to appear on a layer is contained within these tags and the layer can be treated as a single element to be moved, hidden or clipped etc.

As layers are stacked on top of each other, you can specify pixels in a layer to be solid or transparent. If a pixel is solid, nothing will show through it, if a pixel is transparent, then the content of layers underneath will show through.

This source will create three layers; the middle and top layers are (by default) transparent so the colour from the bottom layer will show through.

<HTML>
<HEAD>
<TITLE>Netscape Navigator Layer tag sample</TITLE>
</HEAD>
<BODY bgcolor="white">
<LAYER Name="Bottom_Layer"
TOP=100
LEFT=50
BGCOLOR="black"
WIDTH = 150
HEIGHT = 40
Z-INDEX = 0>
</LAYER>

<LAYER Name="Middle_Layer"
TOP=100
LEFT=50
Z-INDEX = 1>
<FONT COLOR = "white"><H1>LAYER</H1></FONT>
</LAYER>

<LAYER Name="Top_layer"
TOP=120
LEFT=70
Z-INDEX = 2>
<FONT COLOR = "red"><H3>ontop of a layer</H3></P>
</LAYER>
</BODY>
</HTML>

The attributes of the layer tag used here are:

NAME="Bottom_Layer" provides identification for the layer.

LEFT=50 and TOP=100 give absolute pixel positions for the layer measured from the upper left corner of the document. This layer is 50 pixels in from the left and 100 pixels down from the top of the document.

WIDTH=150 gives a layer with a width of 150 pixels. If the contents of the layer have a width wider than this, then the layer will be wider.

HEIGHT=40 sets the height of the layer at 40 pixels.

Z-INDEX=0 sets the order of the layer on the page. Zero is the bottom most layer and layers with larger values are stacked over layers with smaller values.

BGCOLOR="black" sets the background of the layer to black. If BGCOLOR or the BACKGROUND attribute is not set, the layer is transparent.

Cascading Style Sheets
Because both IE4 and Navigator 4.0 support absolute positioning using Cascading Style Sheets (CSS) this is the preferred method of positioning text and graphics in both browsers. However, you won't always find that your source will appear the same in both browsers (try some of the Dynamic HTML sample pages with both browsers and see the difference!).

Here's the same text layered example that we created with the Netscape ^LAYER> tag, created with a Cascading Style Sheet. This will appear correctly rendered in IE4 but doesn't display properly in Netscape Navigator 4.0.

<HTML>
<HEAD>
<TITLE>IE4: CSS 'layered' sample</TITLE>
<DIV STYLE="
position:absolute;
background-color: black;
color: white;
top:100px;
left:50px;
width:150px;
height:40px;">
<P><H1>LAYER</H1></P>

<DIV STYLE="
position:absolute;
top:20px;
left:20px;
color:red;">
<P><H3>ontop of a layer</H3></P>
</DIV>
</DIV>
</HEAD>
</BODY>
</HTML>

To replicate the layered text on a black box effect in Internet Explorer 4.0, we used the <DIV>...</DIV> tag which is new in HTML. This tag creates a division in a document and allows you to apply a default style to all the elements which appear inside the tag.

The syntax for CSS is different to that of HTML. Each property in a style sheet, such as position, colour etc, is separated from its value by a colon and each value is completed with a semicolon. The properties we've used in this example are:

position:absolute; allows us to position an element independent of any other element.

background-color: black; sets the background colour for the element affected by the style.

color: white; is used to assign a colour to the text, in this case the text will be white.

top:100px; and left:50px; sets the top edge of the element 100 pixels down and 50 pixels in from the top of the upper-left corner of the document.

width:150px; and height:40px; sets the width of the element at 150 pixels and the height at 40 pixels.

The <DIV>...</DIV> tags used here are nested inside each other. This means that the second division is contained within the first division and takes its positioning from it. Thus the top:20px and left:20px set the second piece of text in and down 20 pixels from the top-left edge of the first element and not the document itself. This places the text in the correct position 'inside' the black box.