Learning to write a web page

  \\\|///      __||__ 
  / o o \     O__  __O
 (   <   )      /  \  
  \__~__/      /_/\_\

Head and body

  \\\|///      __||__ 
  / o o \     O__  __O
 (   <   )      /  \  
  \__~__/      /_/\_\

A properly set up .html file has two main parts: a head and a body. In a way, the head is for the browser (it may contain lots of things which will not be displayed in your page), and the body is for you.

The head

In the head of the .html file, you put things which the browser needs to know before it starts working on displaying your text (which has to be in the body). The information for the head is put between the <head> and </head> tags. These tags come between the <html> and </html> tags (see later).

The <title> tag

In the head you can put the overall title of your document, which will then end up in the grey (or blue) bar right at the top of the browser window. It is always nice to see this, rather than the 'Untitled document' or whatever the browser puts there if it can't find a title. The title of the document you are reading now, was formed as follows:

<title>Learning to write a web page - Web design for children</title>

So the smallest possible 'properly formed' head would look something like:

<head>
<title>Learning to write a web page - Web design for children</title>
</head>

Please note that in a frames setup, the title at the top of the browser window does not change as the documents change.

Even before the head

There is a line you should ideally include right at the top of your .html file, even before the <html> tag, which contains a description of the type of Markup Language you have used (there are several) and the version of this language. An example of this line is:

<!doctype html public "-//w3c//dtd html 4.0 transitional//en">

The body

The information for the body is put between the <body> and </body> tags. The body comes after the head, so the order of tags in a proper .html is:

<!doctype html public "-//w3c//dtd html 4.0 transitional//en">
<html>
<head>
   this is where the head information goes
</head>
<body>
   this is where the body information goes
</body>
</html>

The body is where you perform your actions. You write your text, and you format it the way you want it. You include pictures and you play with the colours and sizes of things until you are happy.

The <body> tag itself

The body tag itself may contain extra information for properties which have an effect on the complete document, e.g. the background colour of the document, the presence of pictures as a background, or even a piece of music which plays when the page is in the browser. For example:

<body bgcolor="yellow">: The page will have a yellow background

Click

here

to see the background change to yellow in the box below.

Back to contents

What do we need? HTML and the .html file Tags Formatting Head and body
Size and shape Colour Colour table Colour wheels Pictures
Special characters Special characters table Hyperlinks Combining and nesting tags Lists
Tables Frames Style sheets Maps Forms Scripts Publicising (meta tags) Bits and pieces

Course created by Maria Turkenburg