A crash course in HTML, part 1

If you've been putting off learning HTML, now's your chance to catch up with the rest of the cyberworld. Here's a quick lesson in HTML 101.

In my article on writing cleaner HTML, I referred to coding hypertext markup language (HTML) as programming. Several people have pointed out to me that HTML isn’t a programming language, per se. Strictly speaking, they’re right—as its name implies, HTML is a markup language.

I also heard from many people in IT support who wanted to know how to learn to use HTML. Of course, you can find hundreds of books and Web sites dedicated to HTML. But to help you get started, I decided to put together this crash course on how HTML works. So pull up a seat, because class is about to begin.

The basics
HTML is nothing but text and tags. The text is simple—to create it, just type or paste it in. Tags, on the other hand, are a different story. Unless you work with HTML code every day, you can’t possibly have all the tags memorized.

There are two main parts to an HTML document: the head and the body. In that sentence, I mentioned three HTML tags: HTML, HEAD, and BODY. You must begin every HTML document with the tag <html> (normally read “open HTML”) and end every document with </html> (read “end HTML”).

The process of creating an end tag is also known as closing the tag. In your HTML document, you must also open and close head and body tags. The basic skeleton for an HTML file is as follows:

<html> Open HTML
<head> Open HEAD
</head> End HEAD
<body> Open BODY
</body> End BODY
</html> End HTML

The HEAD section of an HTML document allows you to title your document and include other pieces of data, such as META tags and scripts (I’ll save those for another lesson).

The title of your document will appear in the Title Bar of the browser window. To title your document, simply place the title between the opening and closing TITLE tags, like this:
<title>This is the title of my HTML document</title>

Another good idea is to put comments in the HEAD section. You begin a comment by using <! —, and end it by using — >. Here’s a sample comment:
<!— Comments in the HEAD section can include information about the author and the design tactics of the HTML document —>

Nothing between the comment tags will show up in the browser window, and you can place them anywhere within the HTML document. Confused yet? I hope not. We’re just getting warmed up.

The BODY section
The BODY section of an HTML document is where all the action occurs. Here is where you get to put your HTML writing skills to the test. (Don’t worry; the test won’t be given until the end of the lesson.)

The BODY tag can consist of other keywords placed in the same tag. Such words, called parameters, include BACKGROUND, BGCOLOR, TEXT, LINK, ALINK, and VLINK. These parameter names don’t leave much to the imagination when trying to figure out what they mean, which is one of the reasons why HTML is so easy to understand.

The following sample should help you understand a basic open BODY tag.
<body bgcolor="#0099FF" text="#FFFF00" link="#FF0000" alink="#0000FF" vlink="#008000">

Here’s what each of the components mean:
  • bgcolor="#0099FF" tells you that the background of the Web page will be blue
  • text="#FFFF00" lets you know the text of the Web page will be yellow
  • link="#FF0000" means that the links will be red before clicked on
  • alink="0000FF" indicates that the links will be blue when clicked on (the active link)
  • vlink="008000" means the links will be green after the HTML document that is referred to has been visited (visited link)

I know, what a hideous color scheme. By altering these parameters, you can control the appearance of specific elements of the Web page.

If you would like to leave these options to the defaults of the browser (in most cases gray for the background, black for the text, and blue for the links), then all you need to do is open the BODY tag with no parameters.

Adding a picture
If you would like a picture file as the background of your Web page, the BACKGROUND parameter should be used. Here’s an example:
<body background=”background.gif”>

This instruction will display the file background.gif as wallpaper for the Web page.

The HTML skeleton
Now let’s take a new look at what our HTML skeleton looks like.
<title>Title goes here</title>
<body background="back.jpg" link="#FF0000" alink="#0000FF" vlink="#008000">

You’ll notice that adding parameters to the open BODY tag does not dictate closing them. You do not have to close parameters, only the first tag keyword, in this case </body>.

Tune in for more lessons
At this point, you know how to deal with preliminary duties of outlining your Web page. I’m going to close this lesson here, but in the next segment, we’ll take a look at formatting text inside the BODY of the HTML document.

Editor's Picks

Free Newsletters, In your Inbox