|
Chapter 3
Chapter
3
Linking to Other Web Pages
In the previous two chapters, you learned how to
create an HTML page with some text on it. However, to make it a "real" Web page
you need to connect it to the rest of the World Wide Web--or at least to your own personal
or corporate "web" of pages.
This chapter will show you how to create hypertext
links--those underlined words that take you from one Web page to another when you click on
them with your mouse. You'll also learn to create links that go to another part of the
same page.
Though the same HTML tag you'll learn in this
chapter is also used to make graphics images into clickable links, graphical links aren't
explicitly discussed here. You'll learn to create those in Chapter 9, "Putting Images
on a Web Page." The more advanced technique of setting up several links from
different regions of the same image is explained in Chapter 15, "Image Maps."
Linking
to Another Web Page
The tag to create a link is called <A>,
which stands for "anchor." (Don't even try to imagine the thought process of the
person who came up with this strange name for a link between pages. As Thomas Carlyle once
said, "The coldest word was once a glowing new metaphor.") You put the address
of the page to link to in quotes after HREF=, like this:
<A HREF="http://netletter.com/dicko/welcome.asp">Click here!</A>
The link above would display the words Click
here! in blue with an underline. When someone clicks on it, they would see the Web
page named welcome.asp, which is located in the dicko folder on the Web
server computer whose address is netletter.com--just as if they had typed the
address into the Web browser by hand. (Internet addresses are also called Uniform Resource
Locators, or URLs by techie types, by the way.)
HREF stands for Hypertext Reference and is called an
attribute of the <A> tag. You'll learn more about attributes in Chapter 5,
"Text Formatting and Alignment."
Just A Minute: As you may know, you can leave
out the http:// or http://www. at the front of any address when typing
it into most Web browsers. You cannot leave that part out when you type an address
into an <A HREF> link on a Web page, however.
Time Saver: One thing you can often
leave out of an address is the actual name of the HTML page, because most computers on the
Internet will automatically pull up the home page for a particular address or directory
folder. For example, you can use http://netletter.com
to refer to the page located at http://netletter.com/welcome.asp
because my server computer knows welcome.asp is the page you should see first.
(See Chapter 4, "Publishing Your HTML Pages.")
Figure 3.1 includes a number of <A>
tags, which show up as underlined links in Figure 3.2. For example, clicking on the words
"What happens to a Coke can if you freeze it?" in Figure 3.2 will take you to
the page located at http://www.wp.com/marius/coke.asp,
as shown in Figure 3.3.
Figure 3.1. Words between <A> and </A>
tags will become links to the addresses given in the HREF attributes.
Figure 3.2. Underlined links
Figure 3.3. Clicking on "What happens to a Coke
can if you freeze it?" in Figure 3.2 retrieves this page from the Internet.
Time Saver: You can easily transfer the
address of a page from your Web browser to your own HTML page using the Windows or Mac
Clipboard. Just highlight the address in the Location, Address, guidemark Properties, or
Edit Favorites box in your Web browser, and select Edit | Copy (or press Ctrl+C). Then
type <A HREF=" and select Edit | Paste (Ctrl+V) in your HTML editor.
Before you follow the links on that page, view the
document's HTML source to see a simple example of how to put hypertext links to work.
Linking
Between Your Own Pages
When you create a link from one page to another page
on the same computer, it isn't necessary to specify a complete Internet address. If the
two pages are in the same directory folder, you can simply use the name of the HTML file,
like this:
<A HREF="pagetwo.asp">Click here to go to page 2.</A>
As an example, Figures 3.4 and 3.5 show a quiz page
with a link to the answer page in Figure 3.6. The answers page contains a link back to the
quiz page.
Figure 3.4. Because this page links to another page
in the same directory, the filename can be used in place of a complete address.
Figure 3.5. This is the answer.asp
file, and Figure 3.4 is question.asp, which this page links back to.
Figure 3.6This is the question.asp file
listed in figure 3.4 and referred to by the link in Figure 3.5
Using just filenames instead of complete Internet
addresses saves you a lot of typing. And more importantly, the links between your pages
will work properly no matter where the pages are located. You can test the links while the
files are still right on your computer's hard drive. Then you can move them to a computer
on the Internet, or to a CD-ROM or DVD disk, and all the links will still work correctly.
Just A Minute: There is one good reason to
sometimes use the complete address of your own pages in links. If someone saves one of
your pages on his own hard drive, any links to your other pages from that page won't work
unless he includes full Internet addresses. I like to include a link with the full address
of my main "home" page at the bottom of every page, and use simple filenames or
relative addresses in all the rest of the links.
Relative
Addresses
If you have many pages, you'll want to put them in
more than one directory folder. In that case, you still shouldn't use the full Internet
address to link between them. You can use relative addresses, which include only enough
information to find one page from another.
A relative address describes the path from one Web
page to another, instead of a full (or "absolute") Internet address.
For instance, suppose you are creating a page named zoo.asp
in a directory folder named webpages on your hard drive. You want to include a
link to a page named african.asp, which is in a sub-folder named elephants
within webpages. The link would look like this:
<A HREF="elephants/african.asp">Learn about African elephants.</A>
Just A MInute: Notice that the /
(forward-slash) is always used to separate directory folders in HTML. Don't use the \
(backslash) normally used in Windows and DOS!
The african.asp page might contain a link
back to the main zoo.asp page:
<A HREF="../zoo.asp">Return to the zoo.</A>
The double-dot ( .. ) is a special code
which means "the folder containing the current folder." (The .. means
the same thing in DOS, Windows, MacOS, and UNIX.)
You can then move these pages to another directory
folder, disk drive, or Web server without changing the links, as long as you always put african.asp
inside a sub-folder named elephants.
Relative addresses can span quite complex directory
structures if necessary; Chapter 21, "Organizing Multiple Pages," offers more
detailed advice for organizing and linking among large numbers of Web pages. To Do: You
probably created a page or two of your own while working through Chapter 2, "Creating
a Web Page." Now is a great time to add a few more pages and link them together.
- Use a home page as a main entrance and central
"hub" to which all your other pages are connected. If you created a page about
yourself or your business in Chapter 2, use that as your home page. You also might like to
make a new page now for this purpose.
- On the home page, put a list of <A HREF>
links to the other HTML files you've created (or plan to create soon). Be sure that the
exact spelling of the filename, including any capitalization, is correct in every link.
- On every other page, include a link at the bottom (or
top) leading back to your home page. That makes it simple and easy to navigate around your
"site."
- You may also want to include a list of links to sites
on the Internet, either on your home page or a separate "hotlist" page. People
often include a list of their friends' personal pages on their own home page. (Businesses,
however, should be careful not to lead potential customers away to other sites too
quickly--there's no guarantee they'll come back!)
- Remember to use only filenames (or relative
addressing) for links between your own pages, but full Internet addresses for links to
other sites.
Summary
The <A> tag is what makes hypertext
"hyper." With it, you can create clickable links between pages, as well as links
to specific anchor points on any page.
When creating links to other people's pages, include
the full Internet address of each page in an <A HREF> tag. For links
between your own pages, include just the filenames and enough directory information to get
from one page to another.
Table 3.1 summarizes the two attributes of the <A>
tag discussed in this chapter. Table 3.1. HTML tags and attributes covered in Chapter 3.
| 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 When I make links, some of them are blue and
some of them are purple. Why? And how come most of the links I see on the Internet aren't
blue and purple?
A A link will appear blue to anyone who hasn't recently visited the page it points to.
Once you visit a page, any links to it will turn purple. These colors can be (and often
are) changed to match any color scheme a Web page author wants, so many links you see on
the Web won't be blue and purple. (Chapter 13, "Backgrounds and Color Control,"
tells how to change the colors of text and links on your Web pages.)
Q What happens if I link to a page on the Internet and then the person who owns that page
deletes or moves it?
A That depends on how that person has set up his server computer. Usually, people will
see a message when they click on the link saying "Page not found" or something
to that effect. They can still click the back button to go back to your page.
Quiz
Questions
- 1. Your best friend from elementary school
finds you on the Internet and says he wants to trade home page links. How do you put a
link to his page at www.cheapsuits.com/~billybob/ on your page?
2. Your home page will be at http://www.mysite.com/home.asp when you put it
on the Internet. Write the HTML code to go on that page so that when someone clicks on the
words "All about me," they see the page located at http://www.mysite.com/mylife.asp.
3. You plan to publish a CD-ROM disc containing HTML pages. How do you create a link
from a page in the \guide directory folder to the \guide\maine\katahdin.asp
page?
4. How about a link from \guide\maine\katahdin.asp to the \guide\arizona
\superstitions.asp page?
Answers
- 1. On your page, put:
<A HREF="http://www.cheapsuits.com/~billybob/">
My Buddy Billy Bob's Page of Inexpensive Businesswear</A>
2. <A HREF="mylife.asp">All about me</A>
3. <A HREF="maine/katahdin.asp">Mount Katahdin</A>
4. <A HREF="../arizona/superstitions.asp">
The Superstition Range</A>
|
Learn HTML
