In this chapter, I shall show you how to turn a piece of ordinary text into a web page. We will be using Act I, Scene I of Shakespeare's "Macbeth" as our example. Here is what we begin with...
Macbeth
=======
ACT I
SCENE I.
A deserted place.
Thunder and lightning. Enter three Witches.
First Witch: When shall we three meet again
In thunder, lightning, or in rain?
Second Witch: When the hurlyburly's done,
When the battle's lost and won.
Third Witch: That will be ere the set of sun...The Basic Structure of a Web Page
Now, remember: HTML is for describing the structure of the document - not how you want it to look. We'll start by adding in a few basic HTML "tags" that should be used in every HTML page:
Macbeth
=======
ACT I
SCENE I.
A deserted place.
Thunder and lightning. Enter three Witches.
First Witch: When shall we three meet again
In thunder, lightning, or in rain?
Second Witch: When the hurlyburly's done,
When the battle's lost and won.
Third Witch: That will be ere the set of sun...
I'll describe what those tags mean.
This defines what version of HTML we're using. In this case, we're using HTML 4.01 which is the latest version of HTML. This first line tells browsers how to interpret the rest of the document. Notice that this tag is in UPPERCASE letters, but the others are in lowercase letters.
....
These tags mean that everything between them is the HTML document. Apart from the doctype tag (described above) you shouldn't have anything outside them. (Although you are allowed to put comments outside them. This is described later.)
....
These two tags mean that everything between them is the "head" of the document. The head doesn't contain the document — it just contains information about the document — like keywords and a short description for search engines to use when indexing your document.
....
Between these two tags is where you put your actual content. Yay!
What we've done so far will probably be shown in a browser a bit like this:
The first thing you'll notice is that all the formatting has gone — for example, there's no line break between "ACT I" and "SCENE I". This is an important feature of HTML — it ignores line breaks and extended "white space" unless you tell it not to. We'll get some useful formatting back soon.
Some Very Simple Formatting
Now we're going to add in some more tags to tell HTML what the format is for the body of text:
Macbeth
Act I
Scene I
A deserted place.
Thunder and lightning. Enter three Witches.
First Witch: When shall we three meet again
In thunder, lightning, or in rain?
Second Witch: When the hurlyburly's done,
When the battle's lost and won.
Third Witch: That will be ere the set of sun...
So what do these new tags mean?
....
These tags are used to enclose the page's main heading. You should only use them once on the page.
....
and ....
H2 tags are used to enclose sub-headings. H3 tags are used to enclose sub-sub-headings. And so on — it goes all the way up to H6, although you'll rarely need to go any further than H4.
....
P tags are used to enclose paragraphs.
Let's see what our Shakespeare extract looks like now...
A Picture, a Link and Some More
We're now going to add a picture of Shakespeare, a link and a little bit more formatting.
Macbeth
A play by
William Shakespeare
Act I
Scene I
A deserted place.
Thunder and lightning. Enter three Witches.
First Witch: When shall we three meet again
In thunder, lightning, or in rain?
Second Witch: When the hurlyburly's done,
When the battle's lost and won.
Third Witch: That will be ere the set of sun...
So what do these new tags do?
This tag inserts an image. You specify which image using the src "attribute" and tell it the width and height similarly.
Notice that there's also an alt attribute. You should always use this. Never miss it out. The alt attribute is some alternative text that can be displayed by the browser if the browser can't display the image. For example, maybe the user is blind and the HTML page is being read to them by their computer — the speech software would read the alt attribute instead of displaying the image.
....
The A tag (A is short for "anchor" — an old-fashioned word for a link) is used to create a link to another page. Using the href attribute, you tell it which page to link to. The text between the and the is displayed as the place where the user can click.
....
These tags are used to mark the major divisions in the page. Our page is divided into two major parts — an introduction and the play itself. You can use the class attribute to say what "type" of information is inside each division.
When you look at the screenshot below, it seems like DIV hasn't had any effect on how the page looks. You're right, but later we will see how you can control what DIV does to the page.
....
SPAN tags are a bit like DIV tags, but they're used to mark much smaller areas of the page. Here I've used SPAN tags to pick out the characters' names.
Filling In The Head Area
Until now, we've pretty much ignored the area between the HEAD tags, but now we're going to put some information there too.
Macbeth by William Shakespeare
Macbeth
A play by
William Shakespeare
Act I
Scene I
A deserted place.
Thunder and lightning. Enter three Witches.
First Witch: When shall we three meet again
In thunder, lightning, or in rain?
Second Witch: When the hurlyburly's done,
When the battle's lost and won.
Third Witch: That will be ere the set of sun...
...
The TITLE tag is for the page's title. This is often the same as the heading in the H1 tags, but you might want to provide a longer description. Browsers usually display this in the title bar of their window. Search engines use it too.
The META tag is used for other bits of information. Here I've added a description and some keywords, but you're not limited to just those. You can also add copyright statements and anything ele you like in META tags.
META tags can also be used for some special purposes. When used for these special purposes, they say "http-equiv" instead of "name". The META tag in the example says that the document has a content type of "text/html" (this is used to tell the browser again that this is an HTML page) and also that the character set is "iso-8859-1" (Western European characters).
That is a very important tag. Use it in all your pages (although you may need to change the character set). Also, never leave out the TITLE tags either.
This links your document to another file, but not in the same way as the A tag described above. The link isn't an area of the page that the user can click on, but it tells the browser and search engines to associate another file with this one.
Each link has a "rel" attribute that tells the browser how the other page is related to this one. In our example, we've said that the page "index.html" is the home page. We've also said that "style.css" is our style sheet.
None of these tags effects how the page looks, so I won't show a picture this time.
Now we shall go on to the next chapter to learn about style sheets.