WEBalley - layout

Layout - basics

< basics >
columns
alignment
title bars
faster pages
my layout
epilogue

Looking at this page you may wonder how it is setup. There are some things you cannot do with basic HTML. There are columns on this page. A navigation bar to the left, a text column to the right. The width is fixed, resizing the browser window does not influence the layout. There are colored areas not created with images. If you read the tables tutorial, you have probably figured out all this is done with tables. This tutorial will show you how to do this yourself.

<HTML>
<HEAD><TITLE>title</TITLE></HEAD>
<BODY>
<TABLE BORDER="0">
<TR>
<TD>
page contents
</TD>
</TR>
</TABLE>
</BODY>
</HTML>

A simple web page, nothing new so far. In basic HTML you would put your web page between the BODY tags. Here the page contents will be entirely inside the table. A single cell will do for now, later on more table code will be added. To see how the table is setup, you can turn it on and off with the BORDER attribute. Zero is off, one is on.
Web pages should always be created with the visitor in mind. While most users use higher resolutions, standard VGA screens are still used a lot. According to my page statistics about 25% of my visitors. Making wider pages will make them unpractical to use in a 640x480 pixel VGA screen. Leaving some room for scroll bars and window borders, web pages should preferably be some 550 to 600 pixels wide. So the table needs to be adapted to that figure.

Now the page width is fixed. Copy the code you see above to a text editor and view te page in your browser. Put a few lines of text in the table cell to examine the effect of setting the width. Play around a little with resizing the browser window and see the difference between fixed an non-fixed width. you'll see the window size has no influence on the fixed table.