Chapter 8
Chapter 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.
- Place <A NAME> tags in front of each
major topic on your home page, or any long page you make.
- Copy each of the major topic headings to a list at
the top of the page, and enclose each heading in an <A HREF> linking to the
corresponding <A NAME> tag.
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.asp#two">II. The President</A>
Clicking on "II. The President" (in Figure
8.5) will bring up the page named articles.asp, 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.asp.
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.
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 guide 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:
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.asp):
<A HREF="directory.asp#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
- When you link back to your home page from other
pages, you might want to skip some of the introductory information at the top of the home
page. Using a link to a named anchor just below that introductory information will avoid
presenting it to people who have already read it, making your pages seem less repetitive.
Also, if any pages on your site are longer than two screens of information when displayed
in a Web browser, consider putting a link at the bottom of the page back up to the top.
- Look through your Web pages and consider whether
there are any places in the text where you'd like to make it easy for people to respond to
what you're saying. Include a link right there to your e-mail address. Especially if
you're running a business, you can never provide too many opportunities for people to
contact you and tell you what they need or think about your products.
|