Introduction to HTML: Linking to Other Web Pages
- Jan 20, 2006
- Sample Chapter is provided courtesy of Sams
This chapter is from the book
Sams Teach Yourself HTML and CSS in 24 Hours, 7th Edition
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. You'll learn how to create links that go to another part of the same page in Hour 6, "Creating Text Links."
Hypertext links are those words that take you from one web page to another when you click them with your mouse.
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 8, "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 words, she sees the web page named products.html, 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. You’ll learn more about attributes in Hour 5, "Basic Text Alignment and Formatting."
An attribute is an extra 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.
Listing 3.1 includes a few <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 Times Square in Figure 3.1 will take you to the page located at http://www.earthcam.com/usa/newyork/timessquare/ as shown in Figure 3.2.
Listing 3.1 -<a> Tags Can Connect Your Pages to Interesting Locations
<?xml version="1.0" encoding="UTF-8"?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en"> <head> <title>You Aren’t There</title> </head> <body> <h1>Wonders of the World</h1> <p> Vacations aren’t cheap. But who needs them anymore, with so many live cameras connected to the World Wide Web? Pack a picnic, and you can visit just about any attraction you want without ever spending any gas money or boarding a plane. Stop off at <a href="http://www.earthcam.com/usa/newyork/timessquare/">Times Square</a> in New York City to see a live view of the busy spot. Then head south to Atlanta, Georgia and watch the <a href="http://www.atlantafalcons.com/fans/article.jsp?id=6947">Atlanta Falcons training camp</a> live online. When you’re finished watching Michael Vick, head out west to one of my favorite destinations and take in the incredible red rocks of <a href="http://www.earthcam.com/cams/arizona/sedona/">Sedona, Arizona</a>. </p> </body> </html>
)
Figure 3.1 The HTML in Listing 3.1 produces this page, with links appearing as blue or purple underlined text.
)
Figure 3.2 Clicking the Times Square link in Figure 3.1 retrieves the live Times Square Earth Cams page from the Internet.
Account Sign In
View your cart