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."
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."
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.
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.
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.
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.
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>
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.
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.