Building a webpage

Initially, we can think of creating a webpage like publishing a newspaper. A newspaper editor giving instructions to a printer will want to specify what text is in the body of an article, what text is the headline, and maybe some text as the caption to a photo. Furthermore, because the printer may print several different newspapers, the editor will want to specify how headlines are displayed in this newspaper. Perhaps the editor may also want to use a different size font on each page (headlines on the front page may be a different size than those on page 2, for instance). All of this information is separate from the content of the newspaper (the printer doesn't need to know, for example, what the article on page 2 is about, just how to format it).

Similarly, a webpage contains both content and directions to the web browser explaining what sort of content it is and how to format content of that sort. This non-content information is called a tag. Tags surround content like this:

<body>
This is the main body of the webpage
</body>

In the above example, "This is the main body of the webpage" is the content and <body> and </body> are the tags. Note that tags come in pairs, an open and a close tag. The close tag (e.g. </body>) always has the same name as the open tag, but begins with a forward slash "/." A more or less complete list of tags is available here.

Let's construct a simple webpage. First, type this William Carlos Williams poem into your text editor:

So much depends upon a red wheelbarrow glazed with rainwater beside the white chickens.

I know, I know, the formatting is wrong. We'll fix that in a minute.

First, though, we need to give our web browser a little more information. Every webpage is surrounded with the html tag which tells the browser to interpret this text as a webpage rather than a video or some other sort of program. So type <HTML> around the poem.

<HTML>
So much depends upon a red wheelbarrow glazed with rainwater beside the white chickens.
</HTML>

Web pages also need a header which is defined by the <HEAD> tag, which has information about the page as a whole. Headers also should contain titles which is defined by the <TITLE> tag. The main body of your webpage should also be enclosed in a <BODY> tag. So, add these to your document like this:

<HTML>
<HEAD>
<TITLE>
The Red Wheelbarrow
</TITLE>
</HEAD>
<BODY>
So much depends upon a red wheelbarrow glazed with rainwater beside the white chickens.
</BODY>
</HTML>

You have now created your first webpage. You can save it and open it up again in a web browser if you like. Congratulations.

Ok, now about that formatting. You might remember that William Carlos Williams used spacing and formatting as a poetic technique. We will want to represent this in our webpage. First, let's define the divisions of the webpage using the <DIV> tag. The <DIV> tag is used to define elements in a page that are followed by a return. The tag also has attributes (further information included in the open tag). The most common attributes are id and class. An id uniquely defines a element in HTML, class defines an element as part of a set, or class of elements. Neither of class nor id is necessary for a DIV element; you can define none, one, or both. You get to make up the id and class names, but they must begin with a letter and only contain letters or numbers. For example, let's surround the poem with a DIV element defining it with the id "RedWheelbarrow" and as part of class "poem.":

<HTML>
<HEAD>
<TITLE>
The Red Wheelbarrow
</TITLE>
</HEAD>
<BODY>
<DIV id="RedWheelbarrow" class="poem">
So much depends upon a red wheelbarrow glazed with rainwater beside the white chickens.
</DIV>
</BODY>
</HTML>

We will also want to define the lines in the poem. Let's use line numbers for the ids and "line" for the class.

<HTML>
<HEAD>
<TITLE>
The Red Wheelbarrow
</TITLE>
</HEAD>
<BODY>
<DIV id="RedWheelbarrow" class="poem">
<DIV id="rw1" class="line">
So much depends
</DIV>
<DIV id="rw2" class="line">
upon a red wheel
</DIV>
<DIV id="rw3" class="line">
barrow glazed with rain
</DIV>
<DIV id="rw4" class="line">
water
</DIV>
<DIV id="rw5" class="line">
beside the white
</DIV>
<DIV id="rw6" class="line">
chickens.
</DIV>
</DIV>
</BODY>
</HTML>

Check it out in your web browser. You should see that we now have line breaks.

There may be times when you want to define a segment of text that is not followed by a new line. This is usually done with the <SPAN> tag which, except for the lack of a final line break, is exactly the same as <DIV>. For example, let's mark the color words in the poem. We will use the <SPAN> tag with and define the class as the appropriate color. We will not define ids.

<HTML>
<HEAD>
<TITLE>
The Red Wheelbarrow
</TITLE>
</HEAD>
<BODY>
<DIV id="RedWheelbarrow" class="poem">
<DIV id="rw1" class="line">
So much depends
</DIV>
<DIV id="rw2" class="line">
upon a
<SPAN class="red">
red
</SPAN>
wheel
</DIV>
<DIV id="rw3" class="line">
barrow glazed with rain
</DIV>
<DIV id="rw4" class="line">
water
</DIV>
<DIV id="rw5" class="line">
beside the
<SPAN class="white">
white
</SPAN>
</DIV>
<DIV id="rw6" class="line">
chickens.
</DIV>
</DIV>
</BODY>
</HTML>

Now, let's define what these divs and spans mean. We will want to define the color of the background and the text. We might also remember that Williams did not actually use any uppercase letters in this poem. We could go through and change the text, but it's also possible to use Cascading Style Sheets (CSS) to do this.

In the HEAD section of your webpage, define an element called STYLE with an attribute of type with the value "text/css".

<HEAD>
<TITLE>
The Red Wheelbarrow
</TITLE>
<STYLE type="text/css">

</STYLE>
</HEAD>

Note that I closed the tag before I added any content. This is the safest way of creating a webpage; it's far too easy to forget to close your tags if you are not careful.

Now let's add a style definition to the style content.

<HEAD>
<TITLE>
The Red Wheelbarrow
</TITLE>
<STYLE type="text/css">
body{ background-color: black; color: cyan; }
div.line{ text-transform: lowercase; font-size: 12pt; }
span.red{ color: red; }
span.white{ color: white; }
#rw1{ font-size: 14pt; }
</STYLE>
</HEAD>

The content of the STYLE element defines the way in which the elements in the page should be displayed. These rules are written in CSS, which is a very rich language for writing style definitions. A CSS description usually begins with the tag name, for example, "body", followed by curly brackets {} which enclose the rules for that tag. A class is defined by adding a period followed by the name of the class after the tag name at the beginning of the definition (e.g. div.line {...}). The definition for an element with an id begins with a # followed by the id name (e.g. #rw1{...}). The vocabulary for defining things like color and size is predefined and not necessarily intuitive (for example, one might expect text color should be defined by something like "text-color" rather than "color"). The best way to learn this vocabulary is to either google what you want (e.g. "CSS text color") and to study the w3schools reference guide to CSS here.

Also note that the values black and cyan are predefined colors in CSS. If you don't want to use a predefined (pre-named) color, you can select one of the nearly 17 million colors available in HTML. The easiest way to do this is to go here and run your mouse over the color wheel until you find a color you like. The number labeled "web-safe" is your best bet. Instead of the color word (like "red"), type a # followed by this number in the color value.

For example:

span.red{ color: #FF0000; }

You may also want to add links or images to your text. A link is created with the a tag with an href attribute that points to the web address. For example:

<a href="http://www.williamcarloswilliams.net/">
The William Carlos Williams Homepage
</a>

An image is added with an IMG tag that has a SRC attribute that points to the location of the image file. The image tag does not take any content, and therefore does not have a close tag. To signify this, place a / at the end of the tag like this:

<IMG SRC="http://www.myimages.com/coolpic.jpg" />

Creating a webpage