home Java Script MS Access Perl HTML Delphi C ++ Visual Basic Java CGIPerl MS Excel Front Page 98 Windows 98 Ms Word Builder PHP Assembler Link to us Links |
In Chapter 3, "Linking to Other Web Pages," you learned to use the <A> tag to create links between HTML pages. This chapter shows you how to use the same tag to allow readers to jump between different parts of a single page. This gives you a convenient way to put a table of contents at the top of a long document, or at the bottom of a page you can put a link that returns you to the top. You'll see how to link to a specific point within a separate page, too.
This chapter also tells you how to embed a live link to your e-mail address in a Web page, so readers can instantly compose and send a message to you from within most Web browsers.
Figure 8.1 demonstrates the use of intra-page links. To see how such links are made, take a look the first <A> tag in Figure 8.1:
<A NAME="top"></A>
This is a different use of the <A> anchor tag; all it does is give a name to the specific point on the page where the tag occurs. The </A> tag must be included, but no text is necessary between <A> and </A>.
Now look at the last <A> tag in Figure 8.1:
<A HREF="#top">Return to top of document.</A>
The # symbol means that the word "top" refers to a named anchor point within the current document, rather than a separate page. So when a reader clicks on Return to top of document., the Web browser will display the part of the page starting with the <A NAME="top"> tag.
Figure 8.1. An <A> tag with a NAME attribute acts as a marker, so <A> tags with HREF attributes can link to that specific point on a page.
Here's an easy way to remember the difference between these two different types of <A> tags: <A HREF> is what you click on, and <A NAME> is where you go when you click there.
Similarly, each of the <A HREF> links in Figure 8.1 makes an underlined link leading to a corresponding <A NAME> anchor. Clicking on "II. Right to bear arms" in Figure 8.2, for instance, takes you to the part of the page shown in Figure 8.3.
Figure 8.2. The <A NAME> tags in Figure 8.1 don't appear at all on the Web page. The <A HREF> tags appear as underlined links.
Figure
8.3. Clicking on "II. Right to bear
arms" in Figure 8.2 takes you down to "Amendment II" on the same page.
To Do: Now that you have several pages of your own linked together, you might want
to add an index at the top of your home page so people can easily get an overview
of what your pages have to offer.
You can even link to a named anchor on another page by including the address or name of that page followed by # and the anchor name.
Figure 8.4 shows several examples, such as this one:
<A HREF="articles.htm#two">II. The President</A>
Clicking on "II. The President" (in Figure 8.5) will bring up the page named articles.htm, and go directly to the point where <A NAME="two"> occurs on that page.
Figure 8.4. To link to a specific part of another page, put both the page address and anchor name in the <A HREF> tag.
Figure 8.5. The page listed in Figure 8.4. The first seven links all go to different parts of a page named articles.htm.
Caution: Be sure to only include the # symbol in <A HREF> link tags. Don't put a # symbol in the <A NAME> tag, or links to that name won't work.
Coffee Break: One of the most common uses for the <A NAME> tag is creating an alphabetical index. The bad news for anyone with an alphabetical list that they want to index is that typing out 26 links to 26 anchors is a rather tedious endeavor. The good news is that I've already done it for you and dropped off the indexed page at the 24-Hour HTML Café:
http://www.mcp.com/sams/books/235-8/alpha.htm
You can just save this document to your hard drive, and then cut-and-paste your own alphabetical information after each letter. While you're at the Café, stop by
http://www.mcp.com/sams/books/235-8/cafe8.htm
to see how the progress on the "construction site" is going. This page uses <A HREF> tags to link all the sample pages discussed so far in the book and <A NAME> tags to provide an index at the top.
In addition to linking between pages and between parts of a single page, the <A> tag allows you to link to your e-mail address. This is the simplest way to enable readers of your Web pages to "talk back" to you. Of course, you could just tell them your e-mail address and trust them to type it into whatever e-mail program they use if they want to say something to you. But you can make it almost completely effortless for them to send you a message by providing a clickable link to your e-mail address instead.
An HTML link to my e-mail address would look like this:
<A HREF="mailto:dicko@netletter.com">Send me an e-mail message.</A>
The words Send me an e-mail message. will appear just like any other <A> link (as underlined text in the color you set for links in the LINK or VLINK attributes of the <BODY> tag). In most Web browsers, when someone clicks on the link they get a window where they can type in a message, which will be immediately sent to you.
If you want people to see your actual e-mail address (so they can make note of it or send a message using a different e-mail program), type it both in the HREF attribute and as part of the message between the <A> and </A> tags.
For example, the HTML in Figure 8.6 is an e-mail directory page for my little "Mom and Pop software shop," Cedar Software. The resulting page in Figure 8.7 shows the principal officers with a clickable e-mail link for each.
When someone clicks on the top link in Figure 8.7 in Netscape Navigator 3.0, a separate window (see Figure 8.8) will open with spaces for him to enter a subject line and e-mail message. The e-mail address from the link will be automatically entered for him, and he can simply click on the mail button to send the message.
Time Saver: It is customary to put an e-mail link to the Web page author at the bottom of every Web page. Not only does this make it easy for customers or others to contact you, it also gives them a way to tell you about any problems with the page that your testing may have missed.
Figure 8.6. Links to e-mail addresses use the same <A> tag as links to Web pages.
Figure 8.7. The "mailto:" links in Figure 8.6 look just like http:// links on the page.
Figure 8.8. Clicking on the top link in Figure 8.7 brings up this e-mail window with-in Netscape Navigator.
This chapter has shown you two uses for the <A> tag not covered in Chapter 3. You saw how to create named anchor points within a page and how to create links to a specific anchor. You also saw how to link to your e-mail address so readers can easily send you messages.
Table 8.1 summarizes the two attributes of the <A> tag discussed
in this chapter.
Table 8.1. HTML tags and attributes covered in Chapter 8.
Tag | Attribute | Function |
<A>...</A> | With the HREF attribute, creates a link to another document or anchor; with the NAME attribute, creates an anchor that can be linked to. | |
HREF="..." | The address of the document and/or anchor point to link to. | |
NAME="..." | The name for this anchor point in the document. |