Writing HTML | About | FAQ | Alumni | Tags | Index | back | next |

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

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 image.
Create a link to file in a different directory/folder than your main document.
Reorganize the structure of your web.

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 web page. The HTML format for doing this is:

     <a href="filename.htm">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:

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 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.htm">
     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.htm. This second HTML file does not yet exist; we will construct it in steps (5) and (6).
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.htm in the same directory/folder as your working HTML file (Volc.htm).
Reload Volc.htm in your web browser.
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 web page. With the anchor tag, you can also create a link to display a graphic file. When the anchor link is selected, it will download the image file and your web 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:

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.
Next, view and save the image
Open the msh.htm 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.htm file and Reload in your web browser
Now click on the link you just created in the step (3).
A picture of blown down trees should be displayed.

Links to other directories

The anchor tags can also link to an HTML document or graphic file in another 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:

From your computer system, create a sub-directory/folder called pictures in the same location where your Volc.htm file is stored.
Move the msh.gif file to this new sub-directory/folder.
Open the msh.htm 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 web browser to open any document/graphic at a directory level lower then the present document by using the "/" character to indicate the change to a lower directory called "pictures."
Save the HTML document and Reload in your web browser.

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

Anchor Links to a Higher Level Directory

The types of links we have constructed here are known as "relative" links, meaning a web browser can construct the full URL based upon the current location of the HTML page and the link information in the <a href=...> tags. This is very powerful because you can build all your web pages on one computer, test them, and move them to another computer- all the relative links will stay intact.

In this lesson we saw how to construct a hyperlink to a document that is stored in a directory lower than the working HTML page. Note that you can also construct a link that connects to a higher level directory as well by using this HTML:

  <a href="../../home.htm">return to home</a>

Each instance of "../" the URL of an anchor link tells the web browser to go to a higher level directory relative to the current page; in this case to go up two directory levels and look for a file called home.htm.

In our example, let's say that our pictures sub directory was not in the same directory/folder as the volc.htm file but was actually one level higher.

directory diagram In the previous section we constructed a link from the volc.htm file to the msh.gif file in a subdirectory:

  <img src="pictures/msh.gif">

Now, we want to reorganize our web structure so that the pictures folder/directory is at a higher level. The link is now written:

  <img src="../pictures/msh.gif">

so the web browser looks for a folder called "pictures" that is stored one level up from our volc.htm file.

An advantage of this structure is that it would be easier to store a large number of graphics in this upper folder/directory that can be shared in other web pages. We may do another lesson on landforms that makes use of the pictures stored in this folder/directory.

So now it is time to do a little re-organizing our our HTML files. This requires that you are familiar with moving files and directories around on your computer.

First, create a new folder/directory and name it volcano (it is recommended to keep the file names in all lower case).
Now, move the two HTML files volc.htm and msh.htm into this new folder/directory.
Move the pictures folder/directory (along with the msh.gif file inside) so that it is in the same level as the new volcano folder/directory. Also, move the lava.gif file that we added in lesson 7a into the pictures folder.
So your entire workarea directory should now contain two subdirectories- one that holds your HTML files (volcano) and one that holds the graphics (pictures)
We've moved some things around so now we will have to go the link information inside our HTML files. First, look at the first local link we built in the volc.htm file:
```
  <h3>Mount St Helens</h3>
  On May 18, 1980, after a long period of rest, this quiet
  mountain in Washington provided <a href="msh.htm">detailed
  observations</a> on the mechanics of highly explosive
  eruptions.
```
NOTE: Since the msh.htm file is still in the same relative directory as volc.htm, we do not have to change any of this HTML! Can you see how relative file linking is one of the powerful features of HTML?
But now let's look at the link to the picture of Mt. St Helens that we created in the volc.htm file:
```
  The towering pine trees of this once-quiet mountain 
  were <a href="pictures/msh.gif">toppled over 
  like toys</a>.
```
Open this file in your text editor and edit the link to read:
```
  The towering pine trees of this once-quiet mountain 
  were <a href="../pictures/msh.gif">toppled over 
  like toys</a>.
```
This relative link tells the web browser to go up one level from the current folder/directory (volcano) and look there for another folder/directory called pictures that contains a GIF image called msh.gif
Lastly, you will have to update the <img...> tag that displays the title graphic. Open the volc.htm file in your text editor and modify the line just below the <body> tag to read:
```
  <img alt="A Lesson on:" src="../pictures/lava.gif">
```
Save your file. You should then Open the volc.htm file in your web browser and verify the link to msh.htm and then the link to the picture of Mount St Helens.

One More Small Change

This last small step may not be obvious, but we will explain it shortly. The last thing you should do in this lesson is to change the name of your working file from volc.htm to index.htm

Why? Let's say you have finished this lesson and are ready to store it on a World Wide Web server for the world to see. And let's assume that the Internet address for this server at Big University is:

    http://www.bigu.edu/

And your file will be stored in a series of directories:

--= top level of server: www.bigu.edu
   /courses
        /science
            /geology

so that the URL for the Volcano Web might be:

    http://www.bigu.edu/courses/science/geology/volcano/volc.htm

Pretty long, eh? Now here is the promised explanation- on most WWW servers you can designate one standard name that is the "default" web page for that directory and on most systems that name is.... index.htm. What this means is that the Internet address:

    http://www.bigu.edu/courses/science/geology/volcano/

is equivalent to

    http://www.bigu.edu/courses/science/geology/volcano/index.htm

This might make you think that it is a lot of energy to cut 20 letters out of a URL! But it does tend to make your URL look a bit more professional- If you were creating the Longhorn Cheese Home page,

    http://www.cheese.com/longhorn/

looks less redundant in print than

    http://www.cheese.com/longhorn/longhorn.htm

which comes into play when people read about your URL and are trying to connect by typing it into their web browser.

Check Your Work

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

Use the web browser's back button twice to return to this page. If your web page 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 a file in a lower directory/folder than your main document? a higher directory?
What is the significance of a file called index.htm on a WWW server?

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 | back: "Anchors" | next: "URLs" |

Writing HTML Lesson 8b: Linking to Local Files

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

URL: http://www.mcli.dist.maricopa.edu/tut/tut8a.htm