Eazy HTML - So eazy it's Child's Play

Quick Menu

About HTML
Lesson 1
Lesson 2
Lesson 3
Lesson 4
Lesson 5
Lesson 6
Lesson 7
Lesson 8
  -Lesson 8a
  -Lesson 8b
  -Lesson 8c
  -Lesson 8d
  -Lesson 8e
Lesson 9
Lesson 10
Lesson 11
Lesson 12
Lesson 13

Advanced

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 your working document (they do not have to venture out on the Internet). You will also be moving around the new parts of your growing web site (do you see how this is becoming more than just a "home page"?).

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

Think of it as "a" for anchor link and "href" for "hypertext reference".

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

Site Stats

There are 4 users online

click to see where

74,778 total unique visitors

258,315 total pageviews

72 visitors in the last 24 hours

48 total visitors today

144 pageviews today

This page has been visited 2,088 times

get this script

Most users online at once:
41 on 04/10/2005

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

Open your HTML document, space.htm, in the text editor.
First, under the Volcanic Tours heading, enter the following text which introduces the two volcanoes on Venus discussed in later sections.
```

 Listed below is the most active place on the planet Venus
 that is the most "active" volcanic area for tours.

```

Below the "Volcanic Tours" and below what you just entered, enter this:

<p>
 On June 19, 2001, after a long period of rest, 
 this quiet mountain known as Mt. Issapissin on 
 the Northern Hemisphere of Venus provided 
 <a href="issapissin.htm">detailed observations</a> 
 on the mechanics of highly explosive eruptions on the
 planet Venus's Surface.
</p>

The text "detailed observations" will link the viewer to a second HTML document called issapissin.htm This second HTML file does not yet exist; we will construct it in the next few steps.

Save and close your HTML document
Now, with your text editor program, open a NEW window for a New document.

Enter the following text in the new window: (HINT: Copy and paste directly From this web page)


<html>
  <head>
    <title>Mt. Issapissin</title>
  </head>
  <body>
    <h1>Mt. Issapissin</h1>
   <p>
    The towering Gnisleh trees of this once-quiet mountain 
    were toppled over like toothpicks.
   </p>
  </body>
</html>

Save this file as issapissin.htm in the same directory/folder as your working HTML file (space.htm).
Reload space.htm in your web browser.
Test the hypertext link for the words "detailed observations". When clicked, it should connect you to your new page about Mt. Issapissin (issapissin.htm).

ANCHOR LINK TO A GRAPHIC

In lesson number 7a, we learned to display an "inline" graphic that would appear in your web page. With the use of the anchor tag, you can also create a link that will display a graphic file. When the anchor link is clicked, it will download the image file and display the image by itself in an empty web page.

The simplest anchor link is to a file located in the same directory/folder as the document that calls it when the link is clicked. 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, or filename.jpg if you're using a JPG file. Insert the name and extension of your image.

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

Download a copy of a JPG image from the Image Studio and save into your working directory/folder.
Open the issapissin.htm file in the text editor.

Modify the text in your document to include a link to the image of Mt. Issapissin like this:

<p>
 The towering Gnisleh trees of this once-quiet mountain 
 were <a href="trees.jpg">toppled over like
 toothpicks</a>leaving the Venus country 
 side barren and bare.
</p>

Save the issapissin.htm file and Reload it in your web browser.
Now click on the link you just created.
A picture of blown down trees should be displayed in an empty browser window.

LINKS TO OTHER DIRECTORIES

The anchor tags can also link to other HTML documents or graphic files in other directory/folders in relation to the documents current location that contains the anchor. For example, you saw earlier how to connect an image file to your document from inside another folder. In building our site, we may wish to keep all of our graphics in a separate directory/folder called images. As you create more and more HTML files, keeping the image files in its own folder/directory will make things a bit more organized for you. So if you didn't do that before let's do that now:

From your computer system, create a sub-directory/folder called images in the same location where your space.htm file is stored.
Move the trees.jpg file into this new sub-directory/folder.
Open the issapissin.htm file in your text editor.
Edit the anchor tag for the graphic to read:
```

 The towering Gnisleh trees of this once-quiet mountain 
 were <a href="images/trees.jpg">toppled over like
 toothpicks</a>leaving the Venus country 
 side barren and bare.

```
NOTE: With HTML you can direct your web browser to open any document/graphic/file you want 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 NEVER the "\" to indicate the change to a sub-directory called "images" or folder name.

Work Area

html Documents

Images Directory

Image Files
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 images sub-directory/folder. And if all did go well you may want to now put all your images into the images sub-directory and re code your web pages so all the <img.../> tags have the subdirectory folder name then the / and then the filename.gif.

ANCHOR LINKS TO A HIGHER LEVEL DIRECTORY

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

Previously we learnt how to construct a hyperlink to a document that is stored in a directory lower than the working HTML page. Note that you can 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/folder relative to the current page location; in this case the browser would go up two directory/folder levels and look for a file called home.htm.

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

In the previous section we constructed a hypertext link from the issapissin.htm file to the trees.jpg file in a subdirectory:

<img src="images/
trees.jpg" />

Now, if we want to reorganize our web site structure so that the images folder/directory is at a higher level. The link is would be written as:

   <img src="../images/trees.jpg" />

An advantage of this structure is that it is 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.

But we aren't going to set up our web site like this. This was just to demonstrate that you can locate and open files in upper directories/folders as well as lower from where the current HTML document is located.

OK, LETS ORGINISE

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!

First, inside out work area create a new folder/directory and name it content or pages (it is recommended to keep the file names in all lower case).
Now, move one of your HTML files, the issapissin.htm into this new folder/directory. And your space.htm, Re-name it index.html but leave it where it's located. Inside your work area and not inside any of your sub directories.
Now, move your images folder/directory (along with all the files inside) so that it is now inside the new folder/directory as well.

So your entire work area directory should now contain one subdirectory named pages or content, which holds you HTML documents -- And inside that folder/directory, another one called images which hold all you graphics and images.

index.html (renamed from space.htm)
	content
	issapissin.htm	images beach.jpg trees.jpg spaceship.jpg

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 index.htm (formerly our space.htm) file:

<p>
 On June 19, 2001, after a long period of rest, 
 this quiet mountain known as Mt. Issapissin on 
 the Northern Hemisphere of Venus provided 
 <a href="issapissin.htm">detailed observations</a> 
 on the mechanics of highly explosive eruptions on the
 planet Venus's Surface.
</p>

If we click on the link it no longer work, this is because the path in the tag is no longer valid and needs to be updated like this:

<p>
 On June 19, 2001, after a long period of rest, 
 this quiet mountain known as Mt. Issapissin on 
 the Northern Hemisphere of Venus provided 
 <a href="content/issapissin.htm">detailed observations</a> 
 on the mechanics of highly explosive eruptions on the
 planet Venus's Surface.
</p>

Now if we click on the URL it will open our page. :-)

But now let's look at the link to the picture of Mt. Issapissin that we created in the issapissin.htm file.
```

 The towering Gnisleh trees of this once-quiet mountain 
 were <a href="images/trees.jpg">toppled over
 like toothpicks </a> leaving the Venus country 
 side barren and bare.

```
It's working. Why? Well if you remember earlier we had already altered this file. So when we moved the HTML file into the new directory the path still remained the same when we moved in the images folder as well. Even though the file is now in a different location.

INFORMATION

You may be wondering why we renamed our space.htm HTML file to index.htm??

Now here is the 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.html What this means is that the Internet address:

   http://www.yourdomainname.com/
				
   is the same as

   http://www.yourdomainname.com/index.html

Note also that this special file name index.html is used on a most web servers but it might be default.htm or default.html -- make sure you check with the your web server administrators to see which is the right one name for your server. But for now we will leave it as index.htm.

CHECK YOUR WORK
Compare your document with a SAMPLE of how this document should look. If your page looks different than the example, review the text you entered in the text editor. Make sure it matches the text instructions in the 8a. Linking to Local Files section of this lesson. After viewing the sample, you can close the window that opened.

Practice
Create a second HTML document inside your content folder/directory that uses the HTML formatting that you are familiar with at this point. Return to your index.html you created and make an anchor that links to this new one.

Wowzers! That was a lot of work! In the next lesson we will learn how use the HTML for linking to resources "out there" on the Internet.

Top of page | Previous Lesson| Lessons Index | Next Lesson