Think of a page which has three seperated elements: a logo with a title, a navigation bar and a flowing textual content. Of course you could now make a table and tell the browser: put this title to the upper left, put this navigation bar to the left below the title, put the content to the right. But since you can't explain the browser what logo, navigation bar or content are (in HTML3.2/ HTML4.0 transitional as it is implemented by popular browsers), you're actually saying: put this there, put that here, move this to the left. And what happened: you may get the right effect on one system, but did you actually describe the content? No, all information about the content is lost for any other media, or for robots looking through your page. Maybe you know the eye would move from this part of the screen to another, but what if the text is read to a blind user? How is a text-to speech browser to know how to go through the table to follow the line you think the eye would move?
Seperating form and content
Let's see what you really wanted to say about the content, and let's not care about the design in this first step: The logo is most important. The navigation bar isn't more important but it should be instantly accessible. After that, the content comes along. So, you structure the content linear:
<div id=navigation> <a href="...">Topic 1</a><br><a href="...">Topic 2</a> </div>
<div id=content>
<div class=topic id=topic1>
<h2>Topic 1</h2>
<p>Text about topic 1...</p>
</div>
<div class=topic id=topic2>
<h2>Topic 2</h2>
<p>Text about topic 2...</p>
</div>
</div>
Now, in the second step, you link to a stylesheet. With stylesheets, you have ways to position elements freely on the page. And if the browser doesn't have stylesheets, it will still have the basic HTML constructs to create a meaningful layout, because you used headers (h1 for most important, h2 for less important) and paragraphs.
{ position: absolute; left: 20px; top: 20px; height: 100px; width: 100px;
font-size: 120%
}
#navigation
{ position: absolute; left: 20px; top: 140px; width: 100px;
font-size: 110%
}
#content
{ position: relative;
margin-left: 130px
}
The "#" symbol refers to an ID. A "." would refer to a class. You can use the classes and ID's, depending on what you want, or you can use them together, but each id must be unique in a page. The position: absolute means, put this part out of the context flow and move it to a fixed pixel (px) position on the page. The #content here is within the page flow(position: relative or static). We just gave it a margin-left (the distance to the next object/ border at the left) so it won't overlay with the header/ navigation.
For the topics, we used the same class "topic", but a different id. We could now layout their design:
{ margin-top: 30px;
background-color: black; color: white
}
Now, since additonal ID's were added, if we wanted to we could script it so that the topic text parts would pop up if you click on a topic from the navigation. Or you could put the topics beneath each other on the page. If we don't need ID's, we'd still use the headers, so for example a bot would now where it's at.
Continue with the tutorial: Properties.
