Teach Yourself HTML 3.2 in 24 Hours

Hour 22

Hour 22

HTML Tags for Site Management

This is one of the shortest chapters in the book, but it may be the most important one for many Web page creators. The HTML tags and techniques you'll discover in this chapter won't make any visible difference in your Web pages today, but they can save you many hours (and dollars) when you revise your pages later.

Because Web sites can be (and usually should be) updated frequently, creating pages that can be easily maintained is essential. This chapter shows you how to add comments and other documentation to your pages so that you--or anyone else on your staff--can understand and modify your pages.

This chapter also shows you how to make one page automatically load another, and how to forward visitors to pages that have moved.

Including Comments in a Page

Whenever you type an HTML page, keep in mind that you or someone else will almost certainly need to make changes to it someday. Simple text pages are easy to read and revise, but complex Web pages with graphics, tables, and other layout tricks can be quite difficult to decipher.

For example, it isn't at all obvious from looking at the HTML in Figure 22.1 what the resulting page would actually look like. Even if you looked at the graphics files, it would take some serious brain work to figure out how they are being arranged on the page.

Figure 22.1. This will produce a nice-looking page, but the HTML itself is a mess.

The HTML in Figure 22.2 will make exactly the same Web page as that in Figure 22.1--but it sure is easier to tell how in Figure 22.2! Actually formatting the text of your HTML is one way to make your pages easier to read and revise, and Figure 22.2 is much better than Figure 22.1 in this regard.

Even more importantly, Figure 22.2 uses the <COMMENT> tag to add plain-English explanations of the unusual tricks and potentially confusing tags. These are likely to be very helpful to anyone who might need to make changes to this page in the future, even if that person is the page's original author.

Anything you type in an HTML file between the <COMMENT> and </COMMENT> tags will not appear on the actual Web page. Only when someone selects View | Source or edits the HTML file with a text editor will he see your comments. Both Figures 22.1 and 22.2 will look like Figure 22.3 when viewed in a Web browser.

Just A Minute: Notice that in Figure 22.2, every <COMMENT> tag is followed by <!-, and every closing </COMMENT> tag is preceded by ->. This is because previous versions of HTML used <!- and -> as comment tags, and older browsers won't recognize <COMMENT>. If you follow my example, starting all your comments with <COMMENT><!- and ending them with -></COMMENT>, you can be sure that your comments will be hidden by both past and future Web browsers.

To Do: It will be well worth your time now to go through all the Web pages you've created so far and add any comments that you or others might find helpful when revising them in the future.

Put a comment explaining any fancy formatting or layout techniques before the tags that make it happen.
Use a comment just before an <IMG> tag to briefly describe any important graphic whose function isn't obvious from the ALT message.
Always use a comment (or several comments) to summarize how the cells of a <TABLE> are supposed to fit together visually.
If you use hexadecimal color codes (such as <FONT COLOR="#8040B0"), insert a comment indicating what the color actually is ("blueish-purple").
Indenting your comments (as I did in Figure 22.2) helps them to stand out and makes both the comments and the HTML easier to read. Don't forget to use indentation in the HTML itself to make it more readable, too.

Figure 22.2. Both this HTML and the HTML in Figure 22.1 produce the same results.

But this page is much easier to maintain.

Figure 22.3. The comments in Figure 22.2 don't show up on the actual Web page.

The page in Figure 22.1 also looks just like this.

Documenting the Full Address of a Page

Suppose you create a Web page advertising your business, and a customer likes your page so much that she saves it on her hard drive. A couple of days later, she wants to show a friend your cool site, but... guess what? She forgot to bookmark it, and of course the page doesn't contain a link to itself. She clicks on the links to your order form, but they are only filename links (like <A HREF="orderform.htm">) so they don't work from her hard drive unless the order form is on her hard drive, too. So you lose two eager customers.

One way to avoid this heartbreaking scenario is to always use complete addresses starting with http:// in all links. However, this makes your pages difficult to test and maintain.

You could also include a link to the full address of your home page on every page, including the home page itself. Yet there's a more elegant way to make a page remember where it came from.

The <BASE> tag lets you include the address of a page within the <HEAD> section of that page, like this:

<HTML> <HEAD>  <BASE HREF="http://www.myplace.com/mypage.htm">  

<TITLE>My Page</TITLE> </HEAD> <BODY> ...the actual page goes here... 

</BODY> </HTML>

For the HTML authors whose job is to maintain this page, the <BASE> tag provides convenient documentation of where this page should be put.

Even more importantly, all links within the page behave as if the page was at the <BASE> address, even if it isn't. For example, if you had the page in Figure 22.4 on your hard drive and you opened it with a Web browser, all images on the page would be loaded from the online site at http://netletter.com/look/ rather than from the hard drive. The links would also lead to pages in the look directory at http://netletter.com, instead of pages on the hard drive.

(By the way, pay no attention to the <META> tag in Figure 22.4 right now. The next section in this chapter will explain what this tag does.)

Figure 22.4. No matter where this page is located, all images and links to act as if the page were at the address in the <BASE> tag.

Time Saver: Don't put <BASE> tags in your pages until you're ready to upload them to the Web server. That way you can test them with all the images and link pages on your hard drive, then add the <BASE> tag at the last minute, to enjoy the benefits it offers once your pages are online.

Loading Another Page Automatically

When you are managing a Web site, it may become necessary to move some pages from one address to another. You might decide, for example, to change the service provider or domain name of your whole site. Or you might just reorganize things and switch some pages to a different directory.

What happens, then, when someone comes to the address of their favorite Web page on your site after you've moved it? If you don't want them to be stranded with a Not Found error message, you should put a page at the old address which says "This page has moved to..." with the new address (and a link to it).

Chances are, you've encountered similar messages on the Internet from time to time yourself. Some of them probably employed the neat trick you're about to learn; they automatically transferred you to the new address after a few seconds, even if you didn't click on a link.

In fact, you can make any page automatically load any other page after an amount of time you choose. The secret to this trick is the <META> tag, which goes in the <HEAD> section of a page and looks like this:

<META HTTP-EQUIV="Refresh"   CONTENT="5; nextpage.htm">

Put the number of seconds to wait before loading the next page where I put 5 in the line above, and put the address of the next page to load instead of nextpage.htm.

For example, the page in Figure 22.4 looks like Figure 22.5. After three seconds, the <META> tag causes the page at http://netletter.com/look/look.htm to appear, as shown in Figure 22.6. In this case, I used the <META> tag for a special effect, making the background eye seem to open wide after three seconds. (For the impatient, I also included a link to the look.htm page, which someone could click on before the three seconds are up.)

Just A Minute: Note that some very old Web browsers don't recognize <META>, so you should always put a normal link on the page leading to the same address as the <META> tag.

Figure 22.5. The <BASE> and <A> tags in Figure 22.4 link the image on this page to the address shown at the bottom of the window.

Figure 22.6. The <META> tag in Figure 22.4 causes the page in Figure 22.5 to automatically load this page after three seconds.

Coffee Break: For a look at the Look pages in Figures 22.5 and 22.6, as well as a couple of other intriguing uses of automatic page loading, stop by the 24-Hour HTML Café at http://www.mcp.com/sams/books/235-8/cafe22.htm

You may also notice that I added a <BASE> address to the cafe22.htm document. Try saving it to your hard drive, and then open the copy you saved. You'll notice that it still loads all images correctly from the Web site (as long as you're connected to the Internet when you open it).

Advanced Header Tags

The <META> tag can actually be used for a wide variety of purposes besides automatically loading a new page. You can use it to specify any information you like about the document, such as the author or a page ID number. How and why you do this is beyond the scope of this introductory book, and very few Web page authors ever use the <META> tag for anything other than automatically loading a new page.

There are also a few other advanced tags that you may occasionally see in the <HEAD> section of Web pages. They are listed in Table 22.1 so that you'll have some general idea what they're for, just in case you ever encounter them. However, most of them are never used by most Web page authors today, so you don't need to worry about learning them now.

Table 22.1. Advanced HTML tags.

Tag Function

<ISINDEX> Indicates that this document is a gateway script that allows searches.

<LINK> Indicates a link from this entire document to another (as opposed to <A>, which can create multiple links in the document.)

<NEXTID> Indicates the "next" document to this one (as might be defined by a tool to manage HTML documents in series). <NEXTID> is considered obsolete.

<STYLE> A very new tag used to define "style sheet" specifications for a document. Refer to Chapter 6, "Font Control and Special Characters," for more information on style sheets.

<SCRIPT> A relatively new tag used to insert programming scripts directly into a Web page. Refer to Chapter 20, "Scripting, Applets, and ActiveX," for more information.

Summary

This chapter discussed the importance of making your HTML easy to maintain, and introduced the <COMMENT> tag to help you toward that end. It also showed you how to make a page remember its own address, and how to make a page load another page automatically. Finally, a few tags that you don't need to know were mentioned just in case you see them in someone else's documents and wonder what they are.

Table 22.2 lists the tags and attributes covered in this chapter (except for those listed earlier in Table 22.1).

Table 22.2. HTML tags and attributes covered in Chapter 22.

Tag Attribute Function



The old way to create a comment to be seen only by Web page authors. (The text in the comment won't be displayed by Web browsers.)

<COMMENT>...</COMMENT>

The new official way of specifying comments.

<BASE>

Indicates the full URL of the current document. This optional tag is used within <HEAD>.

HREF="..." The full URL of this document.

<META>

Indicates meta-information about this document (information about the document itself). Most commonly used to make a page automatically load another page, or reload itself. Used in the document <HEAD>.

HTTP-EQUIV="..." Gives a command to the Web browser or server. For example, HTTP-EQUIV="Refresh" will cause a new page to load automatically.

NAME="..." Can be used to specify which type of information about the document is in the CONTENT attribute. For example, NAME="Author" means the author's name or ID is in CONTENT.

CONTENT="..." The actual message or value for the information specified in HTTP-EQUIV or NAME. For example, if HTTP-EQUIV="Refresh" then CONTENT should be the number of seconds to wait, followed by a semi-colon and the address of the page to load.

Q&A

Q Won't lots of comments and spaces make my pages load slower when someone views them?

A All modems compress text when transmitting it, so adding spaces to format your HTML doesn't usually change the transfer time at all. You'd have to type hundreds of words of comments to cause even one extra second of delay when loading a page. It's the graphics that slow pages down, so squeeze your images as tightly as you can (refer to Chapter 11, "Making Pages Display Quickly"), but use text comments freely.

Q If the <BASE> tag is so great, why don't most pages on the Web use it?

A Many Web page authors don't even know about the <BASE> tag. Many who do know about it don't like the hassle of changing it when they want to test a page (including images and links) on their hard drive. I've tried to give you enough information in this chapter to choose for yourself whether the <BASE> tag is worthwhile for you.

Q Can I use the <META> tag to make a page automatically update itself every few seconds or minutes?

A Yes, but there's no point in doing that unless you have some sort of program or script set up to provide new information on the page. Some ways to do that are discussed in Chapter 20.

Quiz Questions

1. If you wanted to say, "Don't change this image of me. It's my only chance at immortality," to future editors of a Web page, but you didn't want people who view the page to see that message, how would you do it?

2. What are three ways to make sure that people who save one of your pages on their hard drives can find your site online from it, even if they forget to add it to their Bookmarks or Favorites lists.

3. Suppose you recently moved a page from http://mysite.com/oldplace/thepage.htm to http://mysite.com/newplace/thepage.htm, but you're not quite sure if you're going to keep it there yet. How would you automatically send people who try the old address to the new address, without any message telling them there was a change?

Answers

1. Put the following just before the <IMG> tag:
<COMMENT><!- Don't change this image of me. It's my only chance at immortality. -></COMMENT>

2. (a) Include a link to the site, using the full Internet address, on every page. Example:
The address of this page is: <A HREF="http://mysite.com/home.htm"> http://mysite.com/home.htm</A>

(b) Use full Internet addresses in all links between your pages. Example:
This is my home page. From here you can <A HREF="http://mysite.com/personal.htm"> find out about my exciting personal life</A>, or <A HREF="http://mysite.com/work.htm"> find out about my boring work life</A>.

(c) Use the <BASE> tag to specify the full Internet address of a page. Example:
<HEAD><BASE HREF="http://mysite.com/home.htm"> <TITLE>My Home Page</TITLE></HEAD>

3. Put the following page at http://mysite.com/oldplace/thepage.htm:
<HTML><HEAD><META HTTP-EQUIV="Refresh" CONTENT="0; http://mysite.com/newplace/thepage.htm></HEAD> </HTML>
To accommodate people using older browsers that don't support <META>, it would be a good idea to also include the following just before the </HTML> tag:
<BODY><A HREF="http://mysite.com/newplace/thepage.htm">Click here to get the page you're after.</A></BODY>

Activities

Can you think of some fun and/or useful ways to employ automatically changing pages (with the <META HTTP-EQUIV="Refresh"> tag)? I bet you can.

*Tag*	*Function*
`<ISINDEX>`	Indicates that this document is a gateway script that allows searches.
`<LINK>`	Indicates a link from this entire document to another (as opposed to `<A>`, which can create multiple links in the document.)
`<NEXTID>`	Indicates the "next" document to this one (as might be defined by a tool to manage HTML documents in series). `<NEXTID>` is considered obsolete.
`<STYLE>`	A very new tag used to define "style sheet" specifications for a document. Refer to Chapter 6, "Font Control and Special Characters," for more information on style sheets.
`<SCRIPT>`	A relatively new tag used to insert programming scripts directly into a Web page. Refer to Chapter 20, "Scripting, Applets, and ActiveX," for more information.

*Tag*	*Attribute*	*Function*
`<!-- ... -->`		The old way to create a comment to be seen only by Web page authors. (The text in the comment won't be displayed by Web browsers.)
`<COMMENT>...</COMMENT>`		The new official way of specifying comments.
`<BASE>`		Indicates the full URL of the current document. This optional tag is used within `<HEAD>`.
	`HREF="..."`	The full URL of this document.
`<META>`		Indicates meta-information about this document (information about the document itself). Most commonly used to make a page automatically load another page, or reload itself. Used in the document `<HEAD>`.
	`HTTP-EQUIV="..."`	Gives a command to the Web browser or server. For example, `HTTP-EQUIV="Refresh"` will cause a new page to load automatically.
	`NAME="..."`	Can be used to specify which type of information about the document is in the `CONTENT` attribute. For example, `NAME="Author"` means the author's name or ID is in `CONTENT`.
	`CONTENT="..."`	The actual message or value for the information specified in `HTTP-EQUIV` or `NAME`. For example, if `HTTP-EQUIV="Refresh"` then `CONTENT` should be the number of seconds to wait, followed by a semi-colon and the address of the page to load.