Linking to Local Files

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

Objectives

After this lesson, you will be able to:

Create a link to an HTML document in the same directory/folder as your main document.
Create a link to display a graphic in an external window.
Create a link to file in a different directory/folder than your main document.

Lesson

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 syntax for doing this is:


  <a href="filename.html">text that responds to link</a>

The filename must be an HTML text file. Whatever text occurs after the first > and before the closing </a> symbols will be the "hypertext" that appears underlined and in blue.

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

Open your HTML document in the text editor.
First, under the Volcanic Places in the USA heading, enter the following text which introduces the two volcanoes discussed in later sub-sections.
```
     Listed below are two places in the United States that are 
     considered "active" volcanic areas.
```
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 reader to a second HTML document called "msh.html". This second HTML file does not yet exist; we will construct it in steps (4) and (5).
Save and close your HTML document
Now, with your text editor, open a window for a New document.

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.

Save this file as msh.html in the same directory/folder as your working HTML file (Volc.html).
Reload Volc.html in your WWW browser.
Test the hypertext link for the words "detailed observations". It should connect you to the new page about Mount St. Helens

Anchor Link to a Graphic

In a lesson 7b, 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 graphics file that will appear in an external window. The graphics can be in GIF, TIFF, JPEG, RGFB, or HDF file formats. When the anchor link is selected, it will download the image file and your WWW browser will launch an application that can display it in an external window.

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 graphics file in your HTML document:

You first will need to first 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.
Next, view and save the image
Open the msh.html file in the text editor.

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>.

Save the msh.html file and Reload in your WWW browser
Now click on the link you just created in the step (3).
The picture of blown down trees should be displayed in an external window.

Links to sub-directories

The anchor tags can also link to an HTML document or graphic file in a sub-directory or folder related 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:

From your computer system, create a sub-directory/folder called Pictures in the same location where your Volc.html file is stored.
Move the msh.gif file to this new sub-directory/folder.
Open the msh.html file in your text editor.
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.
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

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

Independent Practice

Create a second HTML document that uses the HTML codes 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 WWW scheme for linking to resources on the Internet - the "URL" or "Uniform Resource Locator".

| Lesson Index | previous lesson "Anchors" | next lesson "URLs" |

Writing HTML Lesson 8b: Linking to Local Files

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