Chapter 22HTML Tags for Site ManagementThis is one of the shortest chapters in the guide, 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 PageWhenever 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. 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.
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.
Figure 22.2. Both this HTML and the HTML in Figure
22.1 produce the same results. Figure 22.3. The comments in Figure 22.2 don't show
up on the actual Web page. Documenting the Full Address of a PageSuppose 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 guidemark 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.asp">) 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:
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.)
Loading Another Page AutomaticallyWhen 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:
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.asp. 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.asp 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.asp page, which someone could click on before the three seconds are up.)
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. You may also notice that I added a <BASE> address to the cafe22.asp 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 TagsThe <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 guide, 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.
SummaryThis 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).
Q&A
Quiz Questions
Answers
Activities
|