tag, or division tag, has no real
properties of its own, but it can be almost infinitely useful as a
holding tag. The DIV tag can make naming and placing HTML, CSS, and
DHTML elements a snap.

First off, imagine you want to create a Web page with some text and
graphics, and you'd like to put it all together in a way that's not too
offensive to the eye. A very understandable, and hopefully achievable
goal! And as we've discussed in earlier newsletters, there are a few
ways to do this.

Setting up your page in a table
Within a table, you can place the text on the left and graphics on the
right, or vice versa. Or you could mix it up a little by placing images
throughout the page and interspersing text as you go. You could
actually end up with something that looked quite nice.

Framing your elements
By dividing the page into two halves, with one frame for each half, you
can then use an HTML document with your text for the left half and an
HTML document with your images for the right half. You could also make
this more complicated as well by adding additional frames, mixing up
text and graphics in your HTML docs, etc.... Frames are a good way to
make an interesting looking page, and many designers have done great
work using frames for page layout.

But let's say you want something different. You want your text to
overlap your images in some places, and you even want your images to
overlap your images. You want to be able to make visual changes to the
layout of your page by simply changing a number, not reworking large
blocks of code. This is, of course, possible. And if you've been
reading along for a while, you may remember my series on Cascading
Style Sheets (http://www.itworld.com/nl/html_tutor/06262001), and how
they can be used to do exactly this.

The trick, if you remember, was to add the STYLE attribute to your
image and anchor tags. Setting the parameters of this attribute allowed
us to place images and text anywhere on a page. The only problem is,
when you're constructing a page with plenty of elements -- many
different images and even animations -- plus diverse blocks of text and
links, you can end up with some pretty messy code.

Enter the DIV tag
As stated above, DIV stands for division. Technically, the DIV tag
merely sets an HTML element apart from other HTML elements. It's sort
of like having separate cubby-holes for each of your Web page's pieces
with a separate DIV tag naming each individual part. The neat thing is,
you can then add the STYLE attribute right into the DIV tag,
eliminating the need to add it to the image or anchor tag. Also, the
division tag will save you from having to use other tags for strictly
naming purposes -- such as anchor tags when you don't really want to
link to anything.

DIV tags are a great way to organize and standardize your page. You can
put just about anything in a DIV tag: images, text, formatting elements
such as tables (and then you can fill the table cells with anything
else), animated GIFs, you name it. When you combine them with CSS
functionality, including the ability to place the DIVs and their
contents anywhere around your page and then layer them on top of one
another, you'll start to understand the power available to you.

Now, let's put together a very simple page using DIV tags and some CSS
features. First of all, the standard HTML tags start us off:

And now time for the DIV elements:

You may be unfamiliar with two of the elements I've used here. The
first, the "id" attribute for the DIV tag, names the DIV and everything
in it. This can be useful as a notation to yourself (notice I've named
mine after what they contain) and also can be used to refer to the
DIV's contents in a style that can be put in the HEAD of your HTML
document, as well as naming the DIV so it can be referred to in certain
JavaScripts that could also be placed in the HEAD. Though you don't
technically need to use an "id" in this example, getting into the habit
of doing so is probably a good thing.

Also, I've used a "z-index" element here in the "style" attribute. This
is to set the prominence of the HTML element on the page. You can get a
more detailed description of the z-index in the Cascading Style Sheets
tutorial on our archives page but simply put, this tells the browser
what to put on top of what. A higher "z-index" means the item is closer
to the top. So, since the "text2" DIV has the highest index, it sits on
top of everything else. Since "image1" is the image with the highest
index, it sits on top of the other two, etc.

Go ahead and put this code into a blank document, name it something
like "div_test.html". You'll need to create images
named "my_first_image.jpg", "my_second_image.jpg",
and "my_third_image.jpg" to get the full effect. Make sure you place
them in the same folder as the HTML document with your code. Or, you
can just switch the code to reflect the names of other images. Now open
the page up in a browser. This will work on all browsers that are
version 4 or above (Netscape and Internet Explorer) so you shouldn't
have much of a problem there. Take a look at what you get! You may also
want to remember that the "style" attribute can also be used to define
text color, boldness, etc... for those blocks of text. For a more
complete description of how the style attribute works, go back and read
the CSS tutorial in our newsletter archives.

Well, that's it for this week. Thanks for reading and see you - or
write to you -- next time!

ITworld