Chapter 3

• Linking to Another Web Page
  • Figure 3.1.
  • Figure 3.3.
  • Figure 3.3.
• Linking Between Your Own Pages
  • Figure 3.4.
  • Figure 3.5.
  • Figure 3.7.
  • Figure 3.7.
• Relative Addresses
• Summary
• Q&A
• Quiz
  • Questions
  • Answers
• Activities

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.

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>