Assumptions

In the writing of this document, I have made certain assumptions which I should state clearly. The first is that you are using a graphical web browser such as Netscape, Mosaic, etc., and not a text-based browser such as Lynx (not to say you should ignore these people). I have tried to keep my explanations and examples as "universal" as possible, but I make no guarantees as to this.

The second is that you are somewhat familiar with the operation of a Web browser and have already visited several Web sites. If this is not the case, you should do so before starting this tutorial. If you're looking for something which will explain various terms you've seen or heard, try the Beginner's Web Glossary.

The third thing is that when I talk about text, or content, or things of that nature, I am generally not referring to what appears in the Web browser. I'm talking about what is in the actual HTML file. There can be a big difference; make sure you know what I'm talking about. If you can't make heads or tails of it, email me and let me know there's a problem. Thanks!

Terms

There are a few common terms which I will use again and again. I'll just quickly define them here. Again, if you're looking for a comprehensive list of terms, try the Beginner's Web Glossary.

Content

The actual 'meat' of a document -- all of the words, images, and links which a user can read and interact with. I use this term a lot to mean "whatever you put in the document."

Hyperlink

A link from one document to another, or to any resource, or within a document. For example, just above where its says "Beginner's Web Glossary" and that text is highlighted in some fashion. The default is usually blue, underlined text, but your display may vary.

In-line

Almost always used in the context "in-line image," this refers to a resource of some type which is placed directly into a document. As I say, this is nearly always an image, but the future could see things like in-line animations.

URL

The Uniform Resource Locator is a "standard" way of easily expressing the location and data type of a resource. URLs in general take the form "protocol://address" where protocol is something like gopher, FTP, telnet, and so on, and the address is merely the server and pathname (if any) of a given resource or page. For more information, take a look at the Beginner's Guide to URLs at the National Center for Supercomputing Applications (NCSA).

Your Web Browser

The part of your Web browser I'll mention most often is the browser display window (also the display window or browser window). This is the part of the Web browser where the actual contents of an HTML document are displayed.

Yes, that's right, the text you're reading at this very moment is in the browser display window.

The other thing I'll mention is the history list (sometimes called the go list). That's the list of pages you've visited during the current session. In most browsers, it is available as either a menu or a pop-up dialog box.

Writing to the Norm

No, not the fat guy on "Cheers." Actually, it's a fundamental issue every Web author needs to know about and appreciate.

Web browsers are written by different people. Each person has their own idea about how Web documents should look. Therefore, any given Web document will be displayed differently by different browsers. In fact, it will be displayed differently by different copies of the same browser, if the two copies have different preferences set.

Therefore, you need to keep this principle foremost in your mind at all times: you cannot guarantee that your document will appear to other people exactly as it does to you. In other words, don't fall into the trap of obsessively re-writing a document just to get it to "fit on one screen," or so a line of text is exactly "one screen wide." This is as pointless as trying to take a picture that will always be one foot wide, no matter how big the projection screen. Changes in font, font size, window size, and so on will all invalidate your attempts.

On the other hand, you want to write documents which look acceptable to most people. How? Well, it's almost an art form in itself, but my recommendation is that you assume that most people will set their browser to display text in a common font such as Times at a point size of somewhere between 10 and 15 points. While you shouldn't spend your time trying to precisely engineer page arrangement, you also shouldn't waste time worrying about how pages will look for someone whose display is set to 27-point Garamond.

HTML: Behind the Scenes

HTML is composed of tags. HTML tags are always enclosed in angle-brackets ( < > ) and are case-insensitive; that is, it doesn't matter whether you type them in upper or lower case. I almost always use upper case, because it makes the tags easier to pick out in a document, but that's just me. You can do whatever you like.

Tags typically occur in begin-end pairs. These pairs are in the form

   <tag>  ...  </tag>

where the <tag> indicates the beginning of a tag-pair, and the </tag> indicates the end. (The three dots indicate an arbitrary amount of content between the tags.) The usual way to refer to each tag is "tag" for the first and "slash-tag" for the second, where tag is the actual name of the tag being discussed.

These pairs define containers. Any content within a container has the rules of that container applied to it. For example, the text within a "boldface container" would be boldfaced. Similarly, paragraphs are defined using a "paragraph container."

Thinking of tag-sets as containers will help in another way: it will help you remember that tags should always be balanced. In other words, you should keep containers nested within each other, just as you would have to do in the real world. Let's try some visual examples where we actually draw the containers:

Why should you worry about this? Well, if you start overlapping containers as shown on the right, about the best you can expect is that the document will be formatted in unexpected ways.

One more thing to keep in mind with regards to containers. Since HTML is based on these structures, it is often the case that the arrangement of text within a container is irrelevant. For example, within a paragraph container, all of the text can be in one long line, or in a series of separate lines, or with every word on its own line, or with every word separated from every other by nineteen spaces. These would all be displayed exactly the same.

Therefore, try to keep in mind this thought: whitespace doesn't matter. (Whitespace is all of the blank areas in a text file--empty lines, extra spaces, and so on.) I'll mention this again when discussing the paragraph tag, and it will crop up in other places. Again: whitespace doesn't matter.

Having said all that, I will now attempt to muddy the waters a bit by mentioning that not every tag in HTML is paired. Some tags, such as the line-break tag, stand on their own (that is, they have no closing tag). These are known as empty tags. As we encounter them, I'll point them out.

All Right Already!

Okay, okay, no more conceptual overviews -- for now. At certain points, I'll go off on a tangent related to whatever tag is being discussed. They'll be relevant tangents, but tangents nonetheless. I'll mark these with the following symbol:

When you see one of those, you'll know that I'm taking time out to discuss something other than the actual mechanics of HTML. These could be design tips, browser issues, or anything else. Here's an example:

Many readers have written to say that they found it quite helpful to take notes as they read through the tutorial, thus giving them something to refer back to later on. It's something to think about doing, anyway.