Back to index
Fun With The DIV Tag
You can use the DIV tag to position blocks of text anywhere on the page you wish. You specify the location by setting values for top, width, and left. You can also specify a background color and a text color. You must also specify a position value. On this page the position is always set to absolute, but the position can also be set to relative.
You should be careful about how you use the DIV tag since it is possible to inadvertently place one block of text above another as is done in this example. Fortunately, both blocks of text contain the same words and so there is no harm done, but otherwise the person viewing the page would not be able to find out what is said in the block that was written over without viewing the source. So, make sure that you don't place blocks of text on top of each other unless that is your intention.
You should be careful about how you use the DIV tag since it is possible to inadvertently place one block of text above another as is done in this example. Fortunately, both blocks of text contain the same words and so there is no harm done, but otherwise the person viewing the page would not be able to find out what is said in the block that was written over without viewing the source. So, make sure that you don't place blocks of text on top of each other unless that is your intention.
Graphics can also be positioned using the DIV tag. The example to the right was placed using the DIV tag. Inspect the code for more information. Be warned that when using the DIV tag the HTML code does not have to be placed into the HTML file in the same order in which it finally appears on the web page. Also notice that the SPAN and DIV tag can be used interchangeably.
ASSIGNMENT:
You get to create a page a bit like this one only it will contain more images. You will need to find four images for this assignment which all pertain to the theme of SPORTS. You will then create a total of nine blocks using DIV. Four of these blocks will contain your images, one will be the title you use for your page, and the other four will be text blocks. Each of these text blocks should contain at least sixty words each. Each text block will be paired with an image block using the following layout: 
                                         .
                 TITLE                   .
                 text                    .
                 image                   .
         text image image text           .
                 image                   .
                 text                    .
                                         .
Make sure all your images get sized the same.