Writing HTML | About | Index | previous | next |

Linking to Local Files

Now, you will take your first step of "anchoring" by creating a hypertext link to a second web page. These links are called "local" because they reside in the same directory as the working document.


After this lesson, you will be able to:


Note: If you do not have the working document from the previous lesson, download a copy now.

Link to Local FIles

The simplest anchor link is one that opens another HTML file in the same directory as the presently displayed WWW page. The HTML format for doing this is:
     <a href="filename.html">text that responds to link</a>
The filename must be another HTML file. Whatever text occurs after the first > and before the closing </a> symbols will be the "hypertext" that appears underlined and "hyper."

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

  1. Open your HTML document in the text editor.
  2. First, under the Volcanic Places in the USA heading, enter the following text which introduces the two volcanoes discussed in later sections.
         Listed below are two places in the United States that are 
         considered "active" volcanic areas.
  3. Below the Mount St. Helens heading, enter:
         On May 18, 1980, after a long period of rest, this quiet
         mountain in Washington provided <a href="msh.html">
         detailed observations</a> on the mechanics
         of highly explosive eruptions.
    The text "detailed observations" will link the viewer to a second HTML document called msh.html. This second HTML file does not yet exist; we will construct it in steps (5) and (6).
  4. Save and close your HTML document
  5. Now, with your text editor, open a window for a New document.
  6. Enter the following text in the new window:
         <title>Mount St Helens</title>
         <h1>Mount St Helens</h1>
         The towering pine trees of this once-quiet mountain 
         were toppled over like toys.
  7. Save this file as msh.html in the same directory/folder as your working HTML file (Volc.html).
  8. Reload Volc.html in your WWW browser.
  9. Test the hypertext link for the words "detailed observations". When selected, it should connect you to the new page about Mount St. Helens.

Anchor Link to a Graphic

In a lesson 7a, we learned how to display an "inline" graphic that would appear in your WWW page. With the anchor tag, you can also create a link to a graphic file that will appear in an external window. When the anchor link is selected, it will download the image file and your WWW browser may launch an external application that can display it in an external window or display the image by itself in an empty page.

The simplest anchor link is to a file in the same directory/folder as the document that calls it. The format for creating a hypertext link to a graphic is the same as above for linking to another HTML document:

  <a href="filename.gif">text that responds to link</a>
where filename.gif is the name of a GIF image file.

Now follow these steps to add a link to a graphic file in your HTML document:

  1. First, you will need to download a copy of a GIF image. Be sure that you are familiar with the process for downloading graphics files. If not, refer to this reference sheet.
  2. Next, view and save the image
  3. Open the msh.html file in the text editor.
  4. Modify the text to include a link to the graphic above.
         The towering pine trees of this once-quiet mountain 
         were <a href="msh.gif">toppled over like toys</a>.
  5. Save the msh.html file and Reload in your WWW browser
  6. Now click on the link you just created in the step (3).
  7. A picture of blown down trees should be displayed.

Links to sub-directories

The anchor tags can also link to an HTML document or graphic file in a sub-directory/folder in relation to the document that contains the anchor. For example, in our lesson, we may wish to keep all of the graphics in a special directory/folder called pictures:

  1. From your computer system, create a sub-directory/folder called pictures in the same location where your Volc.html file is stored.
  2. Move the msh.gif file to this new sub-directory/folder.
  3. Open the msh.html file in your text editor.
  4. Edit the anchor tag for the graphic to read:
         The towering pine trees of this once-quiet mountain 
         were <a href="pictures/msh.gif">toppled over 
         like toys</a>.
    NOTE: With HTML you can direct your WWW browser to open any document/graphic at a directory level lower then the present document by using the "/" character to indicate the change in directories. However, you cannot tell a WWW browser to jump to a higher level directory.
  5. Save the HTML document and Reload in your WWW browser.

If all went well, the link in the sentence describing the blown-down trees should now call up the graphic stored in the pictures sub-directory/folder.

Check Your Work

Compare your WWW document with a sample of how this document should appear. You will first see your Volcanoes! page. When you click on the hypertext for detailed observations, your WWW browser will display a new page. Finally, when you click on toppled over like toys, your WWW browser will display in an external window a picture file that is stored in a sub folder/directory.

Use the WWW browser's back button twice to return to this page. If your WWW document was different than the sample, review the text you entered in the text editor.

Review Topics

  1. What were the steps you used in creating a link within your document to a local file?
  2. What steps did you use to create a link which displayed a graphic in an external window?
  3. How did you create a link to a file in a different directory/folder than your main document?

Independent Practice

Create a second HTML document that uses the HTML formatting that you are familiar with at this point. Return to the first one you created and make an anchor that links to this new one.

Coming Next....

In the next lesson you will learn how use the HTML for linking to resources on the Internet - the "URL" or "Uniform Resource Locator".

GO TO.... | Lesson Index | previous lesson "Anchors" | next lesson "URLs" |

Writing HTML Lesson 8b: Linking to Local Files
©1995 Maricopa Center for Learning & Instruction (MCLI)
Maricopa County Community College District, Arizona

The Internet Connection at MCLI is Alan Levine --}
Comments to levine@maricopa.edu