HTML Tags for Site Management
This 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
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.
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
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
- 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
- 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.
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 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:
|<HTML> <HEAD> <BASE
<TITLE>My Page</TITLE> </HEAD> <BODY> ...the actual page goes
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
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.
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:
HTTP-EQUIV="Refresh" CONTENT="5; nextpage.asp">
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.)
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
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).
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 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.
Table 22.1. Advanced HTML tags.
||Indicates that this
document is a gateway script that allows searches.
||Indicates a link from
this entire document to another (as opposed to <A>, which can create
multiple links in the document.)
"next" document to this one (as might be defined by a tool to manage HTML
documents in series). <NEXTID> is considered obsolete.
||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.
||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.
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
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.
|<!-- ... -->
||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.)
||The new official way of
||Indicates the full URL of
the current document. This optional tag is used within <HEAD>.
||The full URL of this
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>.
||Gives a command to the
Web browser or server. For example, HTTP-EQUIV="Refresh" will cause a
new page to load automatically.
||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.
||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 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.
- 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
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
guidemarks or Favorites lists.
3. Suppose you recently moved a page from http://mysite.com/oldplace/thepage.asp
to http://mysite.com/newplace/thepage.asp, 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?
|1. Put the following just before the
<COMMENT><!- Don't change this image of me. It's my only chance at immortality.
2. (a) Include a link to the site, using the full Internet address, on every page.
The address of this page is: <A HREF="http://mysite.com/home.asp">
(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.asp"> find out about my exciting personal
life</A>, or <A HREF="http://mysite.com/work.asp"> find out about my
boring work life</A>.
Use the <BASE> tag to specify the full Internet address of a page. Example:
<HEAD><BASE HREF="http://mysite.com/home.asp"> <TITLE>My Home
3. Put the following page at http://mysite.com/oldplace/thepage.asp:
<HTML><HEAD><META HTTP-EQUIV="Refresh" CONTENT="0;
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.asp">Click here to
get the page you're after.</A></BODY>
- 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.