Troubleshooting Relative and Absolute Links
If a link doesn't work, even though the file is correctly named and located, check the address which appears when you try to follow the broken link. If the address contains a drive letter (usually C://), you've accidentally linked to a file on your computer, not on the server (that is, you've linked to a local file rather than to the one on the server).
On a deeper level, this is an issue of relative versus absolute links.
Relative links refer to files in the same relative location. These links are often simply the file name (if the file is is the same directory) or a directory name/filename combination:
If you have a separate folder for your 377 class inside your public_html folder, a link from your index.html file your 377.html file would look like this (if you use Code View in Composer) :
<a href="377/377.html">
and a link back from your 377.html file to your index.html file would look like this:
<a href="../index.html">
The "../" simply means "go up one directory".
If all your files are in one folder, the link would like this:
<a href="377.html">
and the link back would be
<a href="index.html">
These are all considered relative links.
For small sites, keeping the files in a single folder is fine, but as your site grows, you'll probably want separate folder/directories for each class or each year. Using a graphical editor relative links are usually assumed if you use the Insert Link button and select Choose File, but sometimes the file's URL will start with a drive letter:
<a href="A://My%20Home%20Page/index.html">
This is an absolute URL and will not work. Either check the URL is relative to file location box, or edit the URL to remove the drive letter.
Absolute links refer to files by their full URLs, including the <http:// > prefix. These are used when you link to a page outside of your site. A link to the GMU homepage, for example, would look like this:
<a href="http://www.gmu.edu/">
An absolute link to a file on your hard drive would look like this
<a href="C://My%20Documents/myfile.html">
Such a link will work only on your computer. If you upload a file containing such a drive-letter linked file, the link will not work, since the C:// drive (or A:// drive) you've linked to isn't on the server.
The advantage of the relative link is transportability: as long as the files are in the same relative locations, the links will work. You can move entire websites by simply moving the public_html directory to another server, and the relative links will remain intact. But if you move a file to a new relative location these links will break. For example, if you had your images in your public_html directory, but then decided to move all of your images into a new images directory, the links to those images will break. You'll need to update each one.
The same problem is responsible for many of the broken images on web pages. Take a look at the source code (View-->Page Source) or right click on the broken image and check its properties. If the image path or <img src= > contains a drive letter (example: <img src=C://mypic.jpg>), the image will appear only when you access the page on your computer, since you've accidentally linked to the local copy, rather than to the remote file on the server.
Keeping files in the same relative locations is an issue of site maintenance.
Dean Taciuch
GMU English Department
This work is licensed under a Creative
Commons License.