Links: HTML
Create Relative Links

A hyperlink is a direct connection from the current location of the cursor to another location.
Often you will want to provide a hyperlink from one page on your own web site to another page on the same site.

A link to another page (i.e., file)  in your own folder is called a relative hyperlink.

The format is the same as the format for an absolute link:

<A HREF="[address]">[Clickable text]</A>

However, for the address you need only use the directory path (if the file is in a different folder) and the filename of the file you want to link to.

Example For example, all of the files in the Web Design Center are in a folder called wdc.  This folder is inside my homepage folder which is called ataormina.

All of  the HTML tutorial files in the Web Design Center are in a folder called html. The html folder is inside the wdc folder. 

Thus this page, the page you are reading now, is actually a file called links3.htm.   This file is in the folder called html which is in the folder called wdc which is in the folder called ataormina.

So if I want to remind you how to add a title to your web page, I will refer you to another file in the html folder,  HTML: Basics: Add a Title and an Address Footer

The code to create the above link looks like this:

. . . refer you to another file in the html folder, <A HREF="basics4.htm">HTML: Basics: Add a Title and an Address Footer</A>.

However, all of the files for my Writing for the Web class are in a different folder. This folder is called writeweb; it is also in the ataormina folder.

Inside the writeweb folder are several more folders; one of them, called lectures, holds all the lecture files for my Writing for the Web class.

So if I want you to read my lecture, The History of the Internet, I have to set the hyperlink on the proper directory path.

The code to create the above link is:

. . . read my lecture, <A HREF="../../writeweb/lectures/keyconcepts.htm">"The History of the Internet</A>

NOTE: The symbol ../ indicates the level above the current level of the directory tree.

Links: HTML
Overview
Create Absolute Links
Create Relative Links
Create Mailto Links
Create Internal Links

Open a Link in a New Window

 

Personal Home PageWeb Design CenterTutorial MenuTop of Page

Web Design Center
Last Revised: October 19, 2006
© Agatha Taormina