Linking to Other Web Pages
- Linking to Another Web Page
- Linking Between Your Own Pages
- Addressing Web Pages
- Opening a Link in a New Browser Window
- Summary
- Q&A
- Workshop
This chapter is from the book
This chapter is from the book
This chapter is from the book
In the previous two hours you learned how to use HTML tags to create a Web page with some text on it. However, at this point the Web page is an island unto itself, with no connection to anything else. 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 hour shows you how to create hypertext links—those words that take you from one Web page to another when you click them with your mouse. You learn how to create links that go to another part of the same page in Hour 7, "Creating Text Links."
Although the same HTML tag you study in this hour is also used to make graphical images into clickable links, graphical links aren't explicitly discussed here. You'll find out about those in Hour 9, "Putting Graphics on a Web Page." For now you'll focus your energy on linking to other pages via words, not graphics.
Linking to Another Web Page
The tag to create a link is called <a>, which stands for anchor. While the word "anchor" might seem a little obscure when describing links, it has to do with the fact that you can use the <a> tag to identify a particular spot within a Web page—an anchor point. Granted, there are certainly better words out there that would make more sense, but we're stuck with anchor so just go with it! Within the <a> tag, you put the address of the page to link to in quotes after href=, like the following:
<a href="http://www.stalefishlabs.com/products.html">click here!</a>
This link displays the words click here! in blue with an underline. When a user clicks those, she would see the Web page named products.htm, which is located on the Web server computer whose address is http://www.stalefishlabs.com—just as if she had typed the address into the Web browser by hand. (By the way, Internet addresses are also called Uniform Resource Locators, or URLs, by techie types.)
Getting back to the <a> tag, href stands for hypertext reference and is an attribute of the <a> tag. An attribute is an additional piece of information associated with a tag that provides further details about the tag. You'll learn more about attributes in Hour 5, "Basic Text Alignment and Formatting."
An attribute is an additional piece of information associated with a tag that provides further details about the tag. For example, the href attribute of the <a> tag identifies the address of the page to which you are linking.
NOTE
As you may know, you can leave out the http:// at the front of any address when typing it into most Web browsers. However, you cannot leave that part out when you type an Internet address into an <a href> link on a Web page.
TIP
One thing you can often leave out of an address is the actual name of the HTML page. Most computers on the Internet automatically pull up the home page for a particular address or directory folder. For example, you can use http://www.stalefishlabs.com to refer to the page located at http://www.stalefishlabs.com/index.html because my server computer knows index.html is the page you should see first (see Hour 4, "Publishing Your HTML Pages").
Listing 3.1 includes a number of <a> tags, which show up as underlined links in Figure 3.1. The addresses for the links are given in the href attributes. For example, clicking the words Eiffel Tower in Figure 3.1 will take you to the page located at http://www.abcparislive.com/eiffel_tower_webcams.htm as shown in Figure 3.2.
Listing 3.1 <a> Tags
<html><head><title>You Aren't There</title></head><body><h1>Wonders of the World</h1>Vacations
aren't cheap. But who needs them anymore, with somany live cameras connected to the World Wide
Web? Pack apicnic, and you can visit just about any international attraction you want. Stop off at
the <a href="http://www.earthcam.com/usa/nevada/lasvegas/mgmgrand/"> MGM Grand in Las Vegas</a>
on your way to <a href="http://www.fallsview.com/Stream/PanLive.shtml">
Niagra Falls</a>. Then hop on a virtual Concorde jet and zip across the ocean to Paris where you
can take in the <a href="http://www.abcparislive.com/eiffel_tower_webcams.htm"> Eiffel Tower</a>.</p> </body> </html>
){kind=small}
Figure
3.1 The HTML in Listing 3.1 produces this page, with links appearing as
blue or purple underlined text.
TIP
You can easily transfer the address of a page from your Web browser to your own HTML page by using the Windows or Macintosh 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 or Command+C on the Mac). Then type <a href=" and select Edit, Paste (Ctrl+V or Command+V) in your HTML (text) editor.
)
Figure
3.2 Clicking the Eiffel Tower link in Figure 3.1 retrieves the Paris Live
Eiffel Tower Cams page from the Internet.