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 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 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.html. 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.html in the same
directory/folder as your working HTML file (Volc.html).
- Reload Volc.html 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 a graphic file
that will appear in an external window.
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.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 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 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:
- 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 web 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 web browser to jump to a higher level
directory.
- 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 stored in the
pictures sub-directory/folder.
Check Your Work
Compare your web page 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 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 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".
Writing HTML Lesson 8b: Linking to Local Files
©1995
Maricopa Center for Learning and Instruction (MCLI)
Maricopa County Community College District, Arizona
The Internet Connection at MCLI is
Alan Levine--}
Comments to levine@maricopa.edu
URL: http://www.mcli.dist.maricopa.edu/tut/tut8a.html