RELS 602 Technological Approaches to the Humanities

RELS 602

Syllabus

Schedule

Resources

Perl

Religious Studies

Arts and Sciences

   HTML Assignment 2: Simple Table Layout
Your HTML assignment is: use Netscape to construct a simple web page that uses a table for page layout.
You can use this page as an example. I've made the table visible so that you can see it easily. (Normally, I make the table invisible.) You will notice that this page uses a table for layout. The table has three columns and two rows. The table fills 80% of the page and is centered on the page. So 10% of the page will appear as blank space in the left margin and 10% will appear as blank space in the right margin.
The idea is to create a page that has an attractive layout, with plenty of blank space.

Assignment Directions
Here's one way to complete the assignment. You can do it other ways.
  1. Using Netscape 3 Gold or Netscape 4, create a blank page.
  2. Go to the Insert menu and choose the Table submenu and then the Table item.
    1. Set the Number of Rows to 2 and the Number of Columns to 3.
    2. For Alignment, choose Center.
    3. Set the Border Line Width to 1.
    4. Uncheck Equal Column Widths.
  3. Fill in the table.
    1. In the upper right cell, put a title.
    2. The upper left cell is a good place for a logo. It also looks good left blank.
    3. The lower left cell is a good place for navigation links -- links to parts of your page or links to related pages. It could also hold credits or fine print or a sidebar.
    4. The lower right cell is where you put the main contents of the page.
    5. The cells in the second column are used just for spacing.
  4. For each row of your table, go to the Format menu and choose Table (Info). Change the alignment for the row to Top.
  5. When you're done editing, go to the Format Table (Info) item again and set the Border Line Width to 0, in order to make the table lines disappear, leaving only the layout.
  6. Check your work in the browser before you publish it to the rest of the world.
The Invisible One-Dot Gif
This page also uses another trick: the Invisible, Extensible One-Dot Gif. If you examine the source HTML for this page you will see several references to the file "/gifs/cleardot.gif". This file contains a transparent gif image that is one pixel high and one pixel wide. The file is 807 bytes long -- that's less than 1 K! It only needs to load once, and then we use it over and over.
We use "width" and "height" parameters to stretch this little image into various other sizes. In its first use on this page, for example, we stretch its height to 36 pixels in order to get a half-inch margin at the top of the page. In its second use, we stretch its width to 36 pixels and put it in the second column of the table, in order to force the second column of the table to put a half-inch of space between the material in the first column and the material in the second column. Then we use it at the beginning of every paragraph to get an 18-pixel indentation.

For More Information
For more information about tables, visit Netscape's documentation on tables, a part of their HTML Tag Reference

Jay C. Treat, Ph.D.