HTML Tutorial

 


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 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 "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.

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 beer guzzling 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.


Why should you worry about this? Well, if you start overlapping containers, 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: white space doesn't matter. (White space 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: white space 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.

This is a basic HTML guide that will help beginners get started and will help the advanced refresh their memories. The codes here are shown in capital letters though this does not matter in writing HTML. Most tags come in an opening and closing tag. The closing tag is identified with a /.

HTML Tags Guide

HTML

The first and last tags in a document should always be the HTML tags. These are the tags that tell a Web browser where the HTML in your document begins and ends. The absolute most basic of all possible Web documents is:

<HTML>

</HTML>

That's it. If you were to load such a page into a Web browser, it wouldn't do anything except give you a blank screen, but it is technically a valid Web page. Obviously, you'll want more than that.

HEAD

The HEAD tags contain all of the document's header information. When I say "header," I don't mean what appears at the top of the browser window, but things like the document title and so on. Speaking of which...

<head>

</head>

TITLE

This container is placed within the HEAD structure. Between the TITLE tags, you should have the title of your document. This will appear at the top of the browser's title bar, and also appears in the history list. Finally, the contents of the TITLE container go into your bookmark file, if you create a bookmark to a page.

What you type should probably be something which indicates the document's contents, but it doesn't have to be. The length of the title is pretty much unlimited, but don't go overboard. Users will either sneer at or be confused by exceedingly long titles.

If you don't type anything between the TITLE tags, or don't include the TITLE tags at all -- remember the blank document in the HTML section earlier? -- then the browser will typically use the actual file name for the title. Therefore, a document titled "TCh4ex4.html" will have that name appear in the history list. Again, you can choose to do this, but it will likely generate either confusion or contempt.

** You should only have one TITLE container per document. At one point, it was possible to create "dancing titles" by including multiple TITLE tags. Not only is this a savage abuse of HTML, but the effect can only be seen in certain versions of certain browsers. Therefore, it should be avoided at all costs.

BODY

BODY comes after the HEAD structure. Between the BODY tags, you find all of the stuff that gets displayed in the browser window. All of the text, the graphics, and links, and so on -- these things occur between the BODY tags. We'll get to what happens there starting with the next chapter.


So, putting everything we've covered thus far into one file, we have:

<HTML>
<HEAD>
  <TITLE>Document Title</TITLE>
</HEAD>

<BODY>

</BODY>
</HTML>

This time, the result would be a document with a completely blank browser window, but at least the words "Document Title" would appear in the browser's history list. 

Comment Tags

If you want to leave yourself notes in an HTML document, but don't want those notes to show up in the browser window, you need to use the comment tag. To do that, you would do the following:

<!-- Hi, I'm a comment. -->

Your note would go where the text Hi, I'm a comment. appears. Yes, you do need an exclamation point after the opening bracket, but not before the closing bracket. That's the way the standard is written. I have no idea why. Also, there is no end tag; that is, a tag like </!-- text --> does not exist. The comment tag is not a container. This is our first example of an empty tag.

You can put comments pretty much anywhere, but you have to be aware of one important thing: you shouldn't put any HTML markup within a comment tag. Theoretically, you should be able to, but most browsers handle this less than gracefully (i.e., they either mess up or crash).

What if you get the tag wrong, like forgetting to include the exclamation point? In that case, the text you did type in would be displayed. Hooray, another totally blank page!

Yawn...

Okay, so you're tired of doing things which end up as blank browser windows. Same here. That means it's time to move on to the next chapter, where we'll start building up your knowledge of HTML. By the time we're done, that knowledge will include everything you'll need to create your very own Web documents!


Page 2 Page 3 Page 4 Page 5 Index


Some Great HTML Links

An Interactive Tutorial

HTML Primer with Tests

Kryss' Index

Kryss' Kreations™ c3.gif (1840 bytes)1998 - 2002 by Kryss aka Shay- Webmistress
Site Created with a touch of magic and a lot of heart on April 1997.
Last Updated Sunday, December 25, 2005
No unauthorized duplication of my graphics. Images are digitally watermarked
Kryss' Kreations™ has been optimized for 800 x 600