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

• Email
• Print
• Share
  • Slashdot
  • Digg
  • Stumble
  • Reddit
  • Newsvine