Page structure


Introduction Tag syntax Page structure Validation Useful tags Style sheets Tables Useful links
This tag signifies the start of the HTML document<html>
The head section contains information which is not part of the displayed web page, such as the title which appears in the window title bar and information about where to find the stylesheet. <head>
</head>
This is the main body of the web page. Anything you put inside the body tag appears in the main browser window. <body>
</body>
This is the closing tag for the tag at the top of the page, and represents the end of the document</html>

To make a page, type or cut and paste the text below, into a simple text editor (such as kwrite or notepad), then save it out as index.htm. Alternatively, you can save the file directly to disc by right-clicking here and saving the link target from the popup menu.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />
<title>Change this to the title you want</title>
</head>
<body>
<h1>This is the heading</h1>
This is some text on the page - add as much as you like.
</body>
</html>

You might have noticed some of scary lines at the top of the page. The DOCTYPE line is not strictly part of the html document. It tells the browser (and anything else which wants to read the page) the particular version of HTML you are using. Don't worry for now about what the line says, and don't bother trying to remember it. Just cut and paste it into the top of any html files you create.

Similarly, the meta http-equiv line need not be remembered - just stick it in the head section of all your documents. This tells the browser which character set to use. Because the web is international, browsers have to work just as well with a Japanese character set as an English one. As you might expect, the character codes for different languages are not the same, and a web page displayed in the incorrect character set will be hard or impossible to read.

In both these cases, most web browsers will do a good job of showing the page if this information is not present. They do this by guessing! Browsers on some small devices such as mobile phones, may not be able to guess so well, and a browser in another country might guess the native character set for that country, rather than English. As a consequence it might mess up the page display. However, the most immediate benefit to us, is that it allows us to validate our pages. We can run them through an online validation tool provided by W3C, and it will check the html and list any errors.


Valid XHTML 1.0! Valid CSS!

Note that this course was written in 2003, and things have moved on since then! You might like to check out this site for a more up to date html overview.


© Dial Solutions 2003
Permission is granted to copy, distribute and/or modify this document under the terms of the GNU Free Documentation License, Version 1.2 or any later version published by the Free Software Foundation; A copy of the license can be found at www.gnu.org/copyleft/fdl.html