Adding Links to a Practical Example

Before we leave this lesson, it's worth revisiting the hockey player sample page and incorporating links into it. In fact, I'm expanding the example to use multiple pages for different players. This provides a great way to show in practical terms how pages on the same site link together, along with how to inject useful links to other sites, including Google Maps.

Listing 3.4 contains the HTML code for the web page of another hockey player on my recreational hockey team, and in this case the player's interests are linked to other relevant pages.

Listing 3.4. Linking to Other Pages That Provide Additional Information

<?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>Music City Mafia - Donny Sowers</title>
    <script type="text/javascript" src="external.js"></script>
  </head>

  <body>
    <h1>21 - Donny Sowers</h1>
    <p>
      <img src="dsowers.jpg" alt="Donny &quot;The Donger&quot; Sowers" /><br />
      Nickname: The Donger<br />
      Position: LW<br />
      Height: 5'9"<br />
      Weight: 175<br />
      Shoots: Rarely<br />
      Age: 42<br />
      Birthplace: God's Country (Texas)
    </p>
    <hr />
    <p>
      Favorite NHL Player: <a
      href="http://www.nhl.com/lineups/player/8458520.html">
      Peter Forsberg</a><br />
      Favorite NHL Team: <a href="http://www.nashvillepredators.com/">Nashville
      Predators </a><br />
      Favorite Southern Fixin: <a href="http://www.jackdaniels.com/">Jack
      Daniels</a><br />
      Favorite Meat and Three: <a href="http://www.judgebeans.com/">Judge Beans
      Bar-B-Q & Steakhouse</a> (<a
      href="http://maps.google.com/maps?q=123+12th+ave+n,+nashville,+tn"
      rel="external">map</a>)
      <br />
      Favorite Country Star: None<br />
      Favorite Mafia Moment: "Any time <a href="mcmplayer_dfirlus.html">Duke</a>
      scores a game-winning goal but we still somehow lose the game."
    </p>
  </body>
</html>

Most of the interesting link code takes place in the latter part of the document. Before attempting to decipher the code, take a look at the end result in Figure 3.6.

Figure 3.6. Several links are used to provide additional information about the hockey player's interests.

By the Way

In the figure I deliberately scrolled down so that all the links are revealed.

The page doesn't look a whole lot different than the hockey player page you saw in the preceding hour, except in this page there are highlighted links to many of the player's interests. Clicking any of these links takes you to another page. However, the links aren't all created equal. If you take a closer look at the code in Listing 3.4, you'll notice that the last link to the word "Duke" is a link to another player page on the same web site. Contrast this with the link to the word "map," which is an external link (pop-up window) to a Google map. In this case the "map" link provides a map to the player's favorite restaurant, Judge Beans Bar-B-Q & Steakhouse. All the remaining links are normal links to other web sites. Figure 3.7 shows the page that opens if you follow the link to "Duke" on the page.

Figure 3.7. Linking player pages to each other is done by simply specifying the name of the page by itself in the anchor tag.

The page in the figure is referenced in the HTML code by an anchor tag (<a>) that specifies only the name of the HTML file (mcmplayer_dfirlus.html) in the href attribute. If you recall from earlier in the hour, when you specify only the name or partial path of a web page (relative address), it is assumed to be on the same computer as the page from which it is being linked.

Table of Contents