A look at How web pages are structured

Web Page Structure

We have already seen that the HTML code is not shown to the page viewer as the Browser uses this code to display the content. There are also HTML commands that aren't used by the browser but by search engines.

This is called the meta data. If we look at the HTML code for a web page we see it split into two:

Meta data

Content

Here is the overall page structure.

The entire page is contained with the html tags. The meta data within the head tags and the content within the body tags.

So with that in mind let's construct a simple page containing content and meta data. Here it is with the sections highlighted.

<html>
<head>
<title>Simple web page</title>
<meta name="description" content="A look at the structure a simple web page
<meta name="keywords" content="web page"></meta>
</head>
<body>
<h1>An Introduction to HTML</h1>
<p>This is a <font color="#003366">simple</font> bit of html code
with <b>2 errors</b> can you find them.</p>
</body>
</html>

and this is how the page appears when viewed in a web browser.

Structuring Web Page Content

In order that the viewer sees the web page as you intended you will need to structure your content. This is very important as unlike newspapers which are of a fixed size web pages can be different sizes depending on the size of the monitor the visitor is using ad the screen resolution.

The page content is split into two distinct components- The repeated/common content e.g. logo and navigation and the actual content.

Although there are many different ways of laying out the content and navigation on a web page there are two of three preferred ways that are used by the majority of websites.

A typical web page is show below:

The two main variations are to move the navigation to the right and/or to the top (under the logo) . Which you use is basically a design choice based on your preferences.

Achieving the Desired Layout

There are three methods which are currently in use:

Tables
CSS (cascading style sheets)
Frames- Not recommended and only seen on old sites- Not discussed further.

Using Tables

Tables are the old way of laying out a web page and the method I prefer especially for beginners.

The reason are:

They are supported by all web page editors (even the free ones like Trellian) and
The Major browsers display them consistently- this means that Internet explorer and Firefox will display the page the same.

They are however being replaced by CSS and all professional web designers use CSS for the layout, but all professional designers use professional design tools like Dreamweaver which display CSS correctly.

Having said that probably 80-90% of the sites on the web use tables and I would recommend that you start by using table while you learn about building sites. You may at some time wish to move on to CSS layout I still haven't done so yet and my existing sites will continue to use tables for layout.

-See Using Tables to layout your web page..

Main menu