HTML DOCUMENT STRUCTURE



Starting Out

The first tag that you need to know for HTML is:

<html> and </html>

These two tags tell a web broswer that everything it reads after the HTML tag is to be read as an HTML document, and not as a plain text document. So when you write any HTML file, you must always begin it with <html> and end it with </html>. Everything else on the page goes in between.

All HTML documents follow a certain form. They all have a header and a body. In this section of the tutorial, we will look at how these both work, and the parameters that you can define for each one.



Header of a document

This part of the page is defined first, and is enclosed by the following tags:

<head> and </head>

Although the head is not actually an essential item in a page, it is good to have it, as here you can define the name that goes in the title bar at the top of the browser, and JavaScript functions.

Using the tags:

<title> and </title>

You can define what the browser displays in the title bar at the top of the window. For example, if you were to put:

<head>
<title>HTML Tutorial</title>
</head>

Then in the case of Netscape, the title bar would something like the following:

Netscape: HTML Tutorial

or:

HTML Tutorial - Netscape

This is a good way to let search engines know what your page is called.

There are other things that can go into the header tags, but for the purposes of this tutorial, I shall leave them out, as they are not so fundamental.


Body of the Document

Again, the body of a document in not an essential item, but if it is not defined, the the page will revert to default settings, which are not that pretty to look at.

The beginning and end of the body of the document is given respectively by:

<body> and </body>

and all other page contents go inbetween.

The body tag is the first tag that we have encountered so far, that can have parameters set, to define how it is going to act, and that's what I'd like to look at next. Here, we can learn how to define a background colour or a background pattern, as well as text and link colours.

So, our body tag would look something like this:

<body background="back.png" bgcolor="white" text="black" link="red" vlink="blue" alink="green">

Note, that you can define a background image, and a background colour. The reason for this is so that people who are browsing without downloading images will still get a coloured background, as opposed to the default. Also note that if you do not define any one of the above parameters, then they will simply take their default values. Text becomes black, and the links become various shades of blue. Sometimes that is what you want, so in those cases, it is easy just not to define them in the body tag.

There is one more thing that you will need to know for opperating the body tag succesfully, and this will also have relevance in other parts of this tutorial, and that is the use of colours. Above, I've defined the colours by using words. This is OK, as long as you don't want to do anything fancy.

Defining Colours

If you want to use any colour that the computer can produce, then you need to be able to define any one of the 16.7 million available with ease. To do this, we have to use a hexadecimal code to represent the quantities of red, green, and blue in the colour. For each primary colour, we assign a two digit hexidecimal number. A hexidecimal number can be any of the following: 0123456789abcdef, so a two digit hexidecimal number can represent as much as 255 in decimal terms.

We lay out the colour declaration as follows:

	RR	GG	BB
#	**	**	**

where the *'s represent a digit from 0 - f.

Here are some examples of hexidecimal colours:

Red: #ff0000
Green: #00ff00
Blue: #0000ff
Yellow: #ffff00
Cyan: #00ffff

In total, there are 16.7 million combinations of the above 6 digit code, for you to use on your website. So, the body tag that we built earlier could also be written:

<body background="back.gif" bgcolor="#ffffff" text="#000000" link="#ff0000" vlink="#0000ff" alink="#00ff00">



Now have a go at the exercise for this section.

Once you have done that, move on to the next tutorial page.


[Index] [Introduction to HTML] [Building an HTML Document Template] [Basic Text Formatting] [Image Includes] [Anchor Tags] [Tables] [Advanced Text Formatting, plus Other Tags] [Lists] [Client-Side Image Maps] [Very Basic JavaScript] [Frames] [Forms] [Conclusion] [Reference List] [Glossary of Terms]

Return to Front Page