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.htm">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.htm, 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.
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.html, 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, Bookmark 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.
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.htm">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.htm file,
and Figure 3.4 is question.htm, which this page links back to.
Figure
3.6This is the question.htm 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.
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.htm in a directory folder named webpages on your hard drive. You want to include a link to a page named african.htm, which is in a sub-folder named elephants within webpages. The link would look like this:
<A HREF="elephants/african.htm">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.htm page might contain a link back to the main zoo.htm page:
<A HREF="../zoo.htm">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.htm 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.
| 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. |
