Writing HTML |
About |
Index |
previous |
next |
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
©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