Maddog's HTML Primer for Real People

Chapter 3, Lesson 3

Ch 3, L 3 - Links to Local Files

If you already know how to build text-based HTML hyperlinks to local files, you can skip this lesson.

Let's quit yappin' and do something real with hyperlinks...

In this lesson, we will build a link to a "local" file. In this case, "local" means that the HTML file we "link" to resides in the same directory and web space as the HTML file which contains the link. For example purposes, our link will point to a file called "demopag1.htm" that resides in the same directory as this page. Since it does, we won't have to use the full URL of the file, because the browser will build it if it needs to, from what it knows about this page's URL. Therefore, we can just use the simple filename. The HTML "anchor" tag pair will implement a link for us. Since it is a tag pair, it has an opening and a closing tag, as follows:

We place the description between the opening and closing tags, as follows:

<A>link-description </A>

The browser looks between the opening and closing anchor tags, and displays whatever text is there, highlighted and underlined (usually), as the link description.

But what about the reference?. We place the reference inside the opening anchor tag, using the following syntax:

Several things are important here. First, there must be a "space" between '<A' and 'HREF='. Also, the reference filename must be placed inside quotation marks. Some servers (and firewalls) have a problem if there are spaces on either side of the '=', or if there is a space after the first quotation mark, so try to assure there are none. Finally the filename should end in ".htm" or ".html", for a web page HTTP access.

In summary, the syntax for building a link using the anchor tag pair looks like this:

<A HREF="reference-filename"> link-description </A>

The link may be placed anywhere in the body (between the <BODY> and </BODY> tags) of your HTML file. When the browser reads and parses the HTML file, it remembers the reference, and treats the description just like any other text, except that it highlights it and watches for any "clicks" that may occur on it.

How about an example? Lets's build (and demonstrate) several versions of the same link. The link is (obviously) embedded into the HTML code for this web page. The browser already knows the URL of this web page to be "http://www.io.com/~maddog/html-for-real-people/c3_3.htm". Since the page we want to link to is in the same directory as this page, we can use the simple filename "demopag1.htm" as our link's reference. Let's look at some HTML source code:


<A HREF="demopag1.htm">Click here</A> to view our demo page.
<P>
To view our demo page, click >A HREF="demopag1.htm">...here...>/A>
<P>
<A HREF="demopag1.htm">Click here to view the demo page</A>
<P>
To view our demo page, click ...here... <A HREF="demopag1.htm"></A>
<P>
To view our demo page, click <A>...here...</A>

Click here to view our demo page.

To view our demo page, click ...here...

Click here to view the demo page

To view our demo page, click ...here...

Click on all 5 versions to see if they work. Whoops--there's no place to click on the fourth or fifth links, because we neglected to properly place the description between the opening and closing anchor tags in the fourth, and we neglected to insert the reference altogether in the fifth. (Shame on me, I'll try to do better next time...)

Overseer: Monty Northrup ...

... leave e-mail ...