Browse DevX
Sign up for e-mail newsletters from DevX


Twelve Dynamic HTML Lessons : Page 4

From Cascading Style Sheets to higlighted text to toggling images on and off the page, here are twelve fancy things that you can learn to do today in DHMTL.

Division of Labor
You're familiar with the <div> tag, right? You remember the one, it lets you set features such as centering and right alignment for a section of your pages? Well, with Dynamic HTML that tag suddenly has a lot more power than page alignment. In fact, it's going to be the key to a lot of our work in Dynamic HTML.

In the last lesson you learned about classes. In this lesson, you'll get a refresher on the <div> tag and learn about a feature called IDs. An ID is an attribute that associates a name with an object on our pages. Everything can have an ID and if we know that ID we can reference the object. We can even set up specific style attributes for any ID'ed object.

First though, a refresher on the <div> tag.

<div> is interpreted as a division, hence the name. It is a container that marks sections within pages. A division is a section of your page that needs display characteristics other than page defaults. You might have a section of your page that you are centering. It would be contained in a <div align=center></div> container. Incidentally, this is the proper way of centering images and text on your pages. You should be using this container instead of the <center> tag.

In many ways a division can be treated as a mini Web page that is nested within your page. In your style declarations you can declare such attributes as width and positioning thus creating small positionable sections of your document without the use of tables. And, because you're using CSS you can also specify things like background-color, font, and many other style attributes for each division.

If you'll look to the left you'll see an example of <div> in action. Everything in our navigation/reference bar is divisioned. This makes the positioning of the text in the title and the hiding/showing of the reference possible. Everything is in its own division, then manipulated via style declarations and simple scripting. (We'll be covering some of the scripting soon.)

Let's create two divisions now. Here's the code:

<div id="quote1" class="quotation">You cannot not communicate.</div>
<div id="quote2" class="quotation">A worm, with very few exceptions, 
is not a human being.</div>
Notice the ID names we added to the division tag. We also need style declarations:

<style type="text/css">

DIV.quotation {font-family: courier;
		font-size: 10pt;
		text-align: center}

#quote1 {background-color: ffff00}
#quote2 {background-color: 00ff00}

Notice we set up a class as we learned in the previous lesson. The class is named "quotation" and it is a type of division. This lets us have a class that we can reuse as needed.

The new feature here is the # declarations. The # means to associate that declaration with the ID name that immediately follows. If there is an object in the document with that ID then it will use those additional style attributes. An ID cannot be reused on multiple objects and should only be associated with a single object within your document.

Here's what the result looks like:

You cannot not communicate.
A worm, with very few exceptions, is not a human being.

Pretty straightforward so far. Practice divisions now and get ready for our next lessons and a bit of scripting.

Thanks for your registration, follow us on our social networks to keep up-to-date