Index | Definitions| Previous | Next |

Making Links to Other Pages

Objectives:

LINKS
Links take you from one page to another, either on your server or on someone else's.

Now, you iwll take your first step of "anchoring to links" by creating a hypertext link to a second web page. These links are called "local" because they reside on the same computer as the working document (they do not have to venture out on the Internet). You will also be shuffling around the parts of your growing web site. (Do you see how this becomes more than just a "home page"?)

Link to Local Files
The simplest anchor link is one that opens another HTML file in the same directory as the presently displayed web page. The HTML format for doing this is:

<a href="filename.html"> text that responds to link </a>
Think of A HREF as "a" for anchor link and "href" for "hypertext reference".

The filename must be another HTML file. Whatever text occurs after the first > and before the closing symbols will be the "hypertext" that appears underlined and "hyper."

Now follow these steps to build a link in your HTML document to a local file:

  1. Open your HTML document in the text editor.
  2. First, under the name of the school write
    <a href="emerymap.html"> Directions to Emery H.S.</a>

    The text "emerymap.html" will link the viewer to a second HTML document called emerymap.html. This second HTML file does not yet exist; we will construct it in steps (3-6).

  3. Save and close your HTML document
  4. Now, with your text editor, open a window for a New document.
  5. Enter the following text in the new window: <html>
    <head>
    <title> Directions to Emery H.S </title>
    </head>
    <body>
    <center>
    <h1> Directions to Emery H.S </h1>
    <img src="emerymap.gif">
    <p>
    1100 47th Street <br>
    Emeryville, CA 94608
    </body>
    </html>

  6. Save this file as emerymap.html in the same folder as your working HTML file (practice.html).
  7. Reload practice.html in your web browser.
  8. Test the hypertext link for the words "Directions to Emery H.S". When selected, it should connect you to the new page with a map of Emeryville.

  9. With the anchor tag, you can also create a link to display a graphic file that is not on the web page. When the anchor link is selected, it will download the image file and display the image by itself in your web browser.

    NOTE: Most web browsers will display such a link to an image file directly in your web browser. Depending on the web browser, and the preferences/settings on your computer, you may be prompted to either save the file or to select an application to display the file. Regardless of the action, if you get that far, the link to the image file has succeeded.

    Try it with the map that is in your folder. Add a link:

    Large map of Emeryville

    Save the page and look at the link.

LINKS TO OTHER WEB SITES
To link to sites not on your server, you need to give a longer address.
For instance to link to my home page write:

http://pdg.lbl.gov/~aerzber/.

Try it.

Be careful - not all URLs have www as part of them any more. Usually if you type the URL without it, the browser will put it in. But if the URL doesn't work without www, then try putting it in.

And, of course, if you put an image within the <a href="---"> and </a>, it becomes a link!

What is a URL?

To go to a certain section of a page, label that part

<A NAME="this_section">, and make the link to it,
<A HREF="#this_section">.

See http://pdg.lbl.gov/~aerzber/aps_motion.html for an example.

NEXT

Project Contact: Andria Erzberger
Last Update: January 21, 2003