Hour 8

Intra-Page and E-mail 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.

Using Named Anchors

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.

New Term: An anchor is a named point on a Web page. The same tag is used to create hypertext links and anchors (which explains why the tag is named <A>).

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.

Linking to a Specific Part of Another Page

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.

Linking Your E-mail Address to a Web Page

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.

Summary

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.

Q&A

Q Can I put both HREF and NAME in the same <A> tag? Would I want to for any reason?

A You can, and it might save you some typing if you have a named anchor point and a link right next to each other. But it's generally better to use <A HREF> and <A NAME> separately to avoid confusion, because they play very different roles in an HTML document.

Q What happens if I accidentally spell the name of an anchor wrong, or forget to put the # in front of it?

A If you link to an anchor name that doesn't exist within a page (or you misspell the anchor name), the link just goes to the top of that page.

Q What if I use a different company to handle my e-mail than my Web pages? Will my e-mail links still work?

A Yes. You can put any e-mail address on the Internet into a link, and it will work fine. The only situation where e-mail links won't work is when the person who clicks on the link hasn't set up the e-mail part of their Web browser properly, or is using an older version that isn't capable of sending e-mail.

Quiz Questions

1. Write the HTML to make it possible for someone clicking on the words "About the authors" at the top of the page to skip down to a list of credits at the bottom of the page.

2. Suppose your company has three employees, and you want to create a company directory page listing some information about each of them. Write the HTML for that page, and the HTML to link to one of the employees from another page.

3. If your e-mail address is bon@soir.com, how would you make the text "goodnight greeting" into a link that people can click on to compose and send you an e-mail message?

Answers

1. At the top of the page, put:

<A HREF="#credits">About the authors</A>

And at the beginning of the credits section, put:

<A NAME="credits"></A>

2. The company directory page would look like this:

<HTML><HEAD><TITLE>Company Directory</TITLE></HEAD> <BODY><H1>Company Directory</H1> <A NAME="jones"><H2>Jane Jones</H2> Ms. Jones is our accountant... etc. <A NAME="smith"><H2>Sam Smith</H2> Mr. Smith is our salesman.. etc. <A NAME="bharwahniji"><H2>R.K. Satjiv Bharwahniji</H2> Mr. Bharwahniji is our president... etc. </BODY></HTML>

A link to one employee's information from another page would look like this (if the above file was named directory.htm):

<A HREF="directory.htm#bharwahniji">About our president</A>

3. Type the following on your Web page:
Send me a <A HREF="mailto:bon@soir.com">goodnight greeting</A>!

Activities