8. Linking with Local Files

Activity

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

1.    Open your HTML document, volc.html, 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: 

<html>
     <head>
     <title>Mount St Helens</title>
     </head>
     <body>
     <h1>Mount St Helens</h1>
     The towering pine trees of this once-quiet mountain 
     were toppled over like toothpicks.
     </body>
     </html>
     
    

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

 

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

1.    Download a copy of a GIF image from the Lesson 8a Image Studio.

2.    Open the msh.html file in the text editor.

3.    Modify the text to include a link to the image of Mount St. Helens. 

 

     The towering pine trees of this once-quiet mountain 
     were <a href="msh.gif">toppled over like toothpicks</a>.

4.    Save the msh.html file and Reload in your web browser

5.    Now click on the link you just created in step (3).

6.    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 separate directory/folder called pictures. As you create more and more HTML files, keeping the image files in its own area will make things a bit more organized for you. Let's do that now:

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 toothpicks</a>.

NOTE: With HTML you can direct your web browser to open any document/graphic at a directory level lower (i.e. a sub-directory or folder within the directory/folder that contains the working HTML file) by using the "/" character to indicate the change to a sub-directory called "pictures."

directory iconwork area

text iconvolc.html
directory iconpictures

image iconmsh.gif

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

 

So now it is time to do a little re-organizing of our HTML files. This requires that you are familiar with moving files and directories around on your computer. Read this carefully! It may be feeling like it's getting complicated, but it will all be clear soon!

1.        First, create a new folder/directory and name it volcano (it is recommended to keep the file names in all lower case).

2.        Now, move the two HTML files volc.html and msh.html into this new folder/directory.

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

4.        So your entire workarea directory should now contain two subdirectories -- one that holds your HTML files (volcano) and another one that holds the graphics (pictures):

directory iconwork area

directory iconpictures

image iconlava.gif
image iconmsh.gif

directory iconvolcano

text iconvolc.html
text iconmsh.html

5.        We've moved some things around so now we will have to update the anchor links in our HTML files. First, look at the first local link we built in the volc.html 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.html">detailed
  observations</a> on the mechanics of highly explosive
  eruptions.

NOTE: Since the msh.html file is still in the same relative directory as volc.html, 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?

6.        But now let's look at the link to the picture of Mt. St Helens that we created in the msh.html file: 

  The towering pine trees of this once-quiet mountain 
  were <a href="pictures/msh.gif">toppled over 
  like toothpicks</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 toothpicks</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

7.        You will have to update the <img...> tag that displays the title graphic. Open the volc.html file in your text editor and modify the line just below the tag to read: 

  <img alt="A Lesson on:" src="../pictures/lava.gif" width=300 height=259>

8.        Save your file. You should then Open the volc.html file in your web browser and test the link to msh.html and then try the link to the picture of Mount St Helens.

 

Performance

Surf the web and browse for pictures. Try to download three images that might be useful for your page. Just a few places you might try:

In the previous lesson, you have downloaded pictures, which you feel useful in making your wed site.  Create a Html Document with your downloaded picture together with your description of that picture.

 Create your second Html Document, which contains another picture and its description.

 After you have created 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.

 

     Criteria:

                Completed exercises ……………………………………………………………………. 30%

                Ability to create an anchor to a local file………… ……… …………………………… 30%

                Ability to link picture to the document………....……………………………………….. 20%

                Accuracy of HTML Code used..... …………………….… …………………………….. 20%

                TOTAL                                                                                                              100% 

 

ASSIGNMENT

Study in advance how to link to world : Internet sites?