How to complete your web page

So far, you have learned to write the texts of your web page, to make links and to add images. Now you need to complete the document, in order to have any interpreter (or browser) render it correctly.

How to write the Head of a web page

A web page document was created to resemble a letter. You need a head and, next, the body. This tutorial is to help you write a web page under the HXTML 1.0 strict standard, so the first thing we need to do is to indicate the computer we will be using this standard.

Include these lines to do it:

<?xml version="1.0" encoding="utf-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

Next, add a "head" tag:

With that, you have indicated the computer you are using a web document written under the XHTML 1.0 standard using the UTF-8 encoding system, which is the most comfortable for texts written in any language. To make it perfect, we need to include the same encoding indication in the head of document, too. Do this as follows:

<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />

Include the Title of the document

To finish with the Head section of your web page, include the title, the description and the keyword tags. Search engines usually use this information to register the content of your web page and include it in their database of possible results of a search. For the Aesop fable we used, we would need:

<title>The Fox and the Crow, by Aesop</title>
<meta name="description" content="This page includes the fable The Fox and the Crow, by Aesop." />
<meta name="keywords" content="fables aesop fox and crow" />

If you wish, you can also include your name, as author of the page:

<meta name="author" content="Heptagrama.com"/>

Your head section should look like this, when finished:

<?xml version="1.0" encoding="utf-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>The Fox and the Crow, by Aesop</title>
<meta name="description" content="This page includes the fable The Fox and the Crow, by Aesop." />
<meta name="keywords" content="fable aesop fox crow" />
</head>

To complete your web page, include the rest of your code in a body tag, like this:

<body>
<h1>Fables</h1>
<h2>The Fox and the Crow, by Aesop</h2>
<p>A Fox once saw a Crow fly off with a piece of cheese in its beak and settle on a branch of a tree. "That's for me, as I am a Fox," said Master Reynard, and he walked up to the foot of the tree. "Good-day, Mistress Crow," he cried. "How well you are looking to-day: how glossy your feathers; how bright your eye. I feel sure your voice must surpass that of other birds, just as your figure does; let me hear but one song from you that I may greet you as the Queen of Birds." The Crow lifted up her head and began to caw her best, but the moment she opened her mouth the piece of cheese fell to the ground, only to be snapped up by Master Fox.</p>
<p>"That will do," said he. "That was all I wanted. In exchange for your cheese I will give you a piece of advice for the future. "Do not trust flatterers.</p>
</body>

Last, close your HTML tag:

</html>

Your web page is done. Save the file either with the extension .htm or .html and open it with an Internet browser to see the result.

Not bad for your first try, don't you think? It obviously doesn't look very professional so far, but we will deal with that quickly, don't worry. In the meantime, why don't you practise making other web pages, before you forget how you made this one?

Click here to continue.