Complete your web page

Now that you have the texts ready, the links placed and the picture you want to include on your web page, it is time to complete the web page so that any web browser may display it.

Writing the document type, or doctype

We start by placing the doctype of the document. We have three options:

If you are using HTML, you need to copy either of these codes:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

or

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

The difference is that the strict type will not allow obsolete (or deprecated) tags like <font> to be displayed without showing error messages, while the transitional type yes. If you are not sure, then go for the transitional tag.

Likewise, if you are using XHTML, your codes are:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

or

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

With the same difference between strict and transitional types.

I am intentionally leaving out a third doctype, "frameset". I am leaving it out because it is used for web pages with frames, something it is not recommended to do any more these days.

Those who are using HTML 5 users will find their doctype has been simplified:

<!DOCTYPE html>

Inserting the HTML tag

Right after the document type declaration, every web page should start with a <html> tag. This tag officially declares the document is an HTML, a web page.

HTML users will just include:

<html></html>

XHTML users will include:

<html xmlns="http://www.w3.org/1999/xhtml"></html>

While HTML 5 users will also use the <head> tag to specify in which language the document is written.

<html lang="en"></html>

Mind all the rest of the web page should be included within these starting and closing <html> tags; or else, the webpage may not be displayed properly.

The head and the meta tags

Right after the opening <html> tag, you start the web document with a <head></head> section. Here we will include some basic information about the web page we are composing, and the meta tags. The content in the <head> section is used to give instructions to the computer, not to the user.

First, let's include the title of the web page. It is important not to forget it.

<title>A fable by Aesop</title>

Next, we will add a description tag, including a one-line summary of the content of the web page. It is recommended to keep the description content under 150 characters, but in theory it may be as long as you wish.

<meta name="description" content="This web page contains a fable by the famous Greek storyteller Aesop.">

Next, let's specify the language of the document, if we didn't use HTML 5 for the document.

<meta http-equiv="content-language" content="en-GB" />

After these, the next tag in order of importance is the "charset" tag. It specifies in which coding the web page is written. If you don't mind a suggestion, use the UTF-8 character set. It will allow you to write the web page in any language with less complications than if you try with the other character sets.

Thus, HTML and XHTML users will use...

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

...while HTML 5 users will use...

<meta charset="utf-8">

With that, you have indicated the computer you are using a web document written under a given standard and using the UTF-8 encoding system, which is the most comfortable for texts written in any language. Just don't forget to close every tag if you are using the XHTML standard.

Your pages also have a title and a description! You're incredible. Now let's go for something slightly more difficult.

Adding link tags

The <link> tag allows you to include instructions in the head of your document which imply other files. It is equivalent to an <a> anchor tag in the body or a web page.

Web masters usually use the <link> tag to indicate the following:

The web page will use a styles sheet named...

If using HTML or XHTML:

<link rel="stylesheet" type="text/css" href="pics/styles.css">

If using HTML 5:

<link href="pics/styles.css" rel="stylesheet">

The web page should use the shortcut icon...

If using HTML or XHTML:

<link rel="shortcut icon" href="youricon.ico" type="image/x-icon">

If using HTML 5:

<link rel="icon" href="youricon.png" type="image/png" />

The website publishes a RSS updates feed...

<link rel="alternate" type="application/rss+xml" href="newsfeed.xml">

There are many other tags you can use, but, as I see it, they are not that important. I think that you can safely close your <head></head> tag here.

After the head tag, you open a <body> tag, and include the rest of the web page. For finished examples, please continue to the next page. I will post full examples there.

Reminder: Don't forget to close all your tags properly if you are using XHTML, OK?

Final note: This is your first try, so don't expect the web page to look too professional up to here. Don't worry, we will deal with that quite soon. Save your file with either an .htm or .html extension. That way every computer will know it is a web page file.


Learn + Computers and the Internet + Web development