Приглашаем посетить
Хомяков (homyakov.lit-info.ru)

Linking to Another Web Page

Previous Page
Table of Contents
Next Page

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 pagean 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 www.stalefishlabs.comjust 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.

By the Way

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.


Did you Know?

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 the server computer knows that index.html is the page you should see first (see Hour 4, "Publishing Your HTML Pages"). Of course, this works only if a main index page existsotherwise, you should spell out the full web page name.


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.

Linking to Another Web Page


Figure 3.2. Clicking the Times Square link in Figure 3.1 retrieves the live Times Square Earth Cams page from the Internet.

Linking to Another Web Page


Did you Know?

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.



Previous Page
Table of Contents
Next Page