Links, Anchors, and URL's

You've seen how HTML documents contain links, also called "hyperlinks" or URL's.

URL stands for Uniform Resource Locator, and are links to other HTML documents on the WWW, be they local (i.e, one folder away) or distant. URL's are almost always underlined in blue (but not this one!), as most people do not change the default color in their browser or define a specific color for links in their html.

Linking to a Document in the Same Folder/Directory

Let's create a new file in Simple Text, called "links.html". In this file, we will place a link to our previous file, first.html.

<html><head><title>Links Page</title></head>

<body bgcolor=#FFFFFF>

Linking to a local file: 

<a href="first.html">A Really Bad Poem</a>

</body></html>

After you create the file, save it, and open it in your browser. It should look like this sample page.

Linking to a Document On the WWW

External links are included in many websites as a resource for the user. The link tag is similar, but different.

Open your "links.html", and add the following text:

Linking to a Document on the WWW: 

<a href="http://www.yahoo.com">Yahoo</a> 

After you create the file, save it, and open it in your browser. It should look like this sample page. Notice how the address in bottom left of the browser window is the specific address of the page/site, but the link is the text you choose.

Linking to a Document in a Different Folder/Directory

When creating a web site, you may want to place files in sub-directories to keep things organized. While this makes finding the files easier, navigating is a bit trickier.

Let's create a new file in Simple Text, called "subfile.html", and save this file in a new folder files within the folder you created for yourself. In this file, place the following code which contains a link back to links.html.

<html><head><title>Link Down Page</title></head>

<body bgcolor=#FFFFFF>

Linking up One Directory: 

<a href="../links.html">Back up to my Links Page</a>

</body></html>

After you create the file, save it, and open links.html in your editor, and add the following lines:

Linking Down one Directory: 

<a href="files/subfile.html">Lower File</a>

The results should look like these sample pages. Feel free to bounce around for a few minutes. If you want to go up or down from a higher directory/folder to a file which is 2 levels lower, simply add /files/foldername/lowerfile.html; to get back up, add ../../highestfile.html

Links are not limited to simply linking from blue underlined text to a file or site. Within the <a href=and </a> tags, you can place an image, which then acts as a "clickable link".

Try placing the following line in a new file, called imagelink.html:

<a href="first.html"><img src="images/brain.jpg"></a>

Now, if you click on the brain image, you should be linked with the poem in your first.html file.

Opening a New Browser Window when Linking to a Document

Some "webmasters" prefer to always create a new browser window when linking to an "outside" file. Usually, when navigating within one's web site, this is unusual. However, it is common to include outside web references in one's site, and having these sites appear in a new web browser window makes it easier to return to the original "launch site".

To do this, create a new file in Simple Text, called "launch.html". In this file, we will again place a link to first.html, but include the term target="main" after the <a.

Linking in a New Browser Window: 

<a target="main" href="first.html">A Really Bad Poem</a>

</body></html>

After you create the file, save it, and open it in your browser. It should look like this sample page and launch your file in a new window.

Linking to a Particular Place in a Document

Sometimes, you may want to link to a specific place in a document, such as a glossary. This is an easy two-step process:
First, you need to place a "name" tag at the destination point. Create a new file called point.html:
<html><head><title>Jump To Page</title></head>

<body bgcolor=#FFFFFF>

<a href=#point>Jump from here</a>
           
           
           
           

<a name="point">...To Here</a>

</body></html>
The results should look like this.
Mail Links:
Many web browsers have built-in e-mail capabilities, and you can place links which automatically call up the e-mail function of the browser (as long as the owner actually uses the browser for e-mail and has it properly configured).
Simply change the lnk to <a href="mailto:name@blah.blah.blah">, like this:
name@blah.blah.blah.
Index of topics next topic: Lists