Absolute vs. Relative URLs

       The term URL stands for Universal Resource Locator, and is pronounced like the man's name, Earl.  Essentially, it means the Internet address of a web page.

What's an Absolute Path?

      There are two ways to put links to Internet addresses on your webpages.  One way is to use absolute URLs in the HREF="..." attribute (i.e., a site's entire Internet address, all the way from the http:// on down to the pagename.html).  These URLs show an "absolute" path through a folder structure to a Web page, from the server down to the specific file.   For example, the absolute path for this web page is:


       Absolute paths are essential when linking outside of your site because your browser can't locate a file on the Web unless it knows the site's exact location.  When you click on an absolute path to a web page on the Internet, you have to have a live Internet connection to reach that site.  This can be a problem if you want to test your pages on your computer before making them live.   For this reason, when you're linking to another page within your own site, it can be helpful to set up your links using relative paths instead of absolute paths.

What's a Relative Path?

       Relative paths tell your browser the location of other Web pages within your site's folder structure "relative" to the page you happen to be viewing, using a shorthand of "../" to indicate movement one level up in the folder hierarchy.  To move two levels up, just double the shorthand by using "../../"  (Old-school DOS and UNIX users will recognize this shorthand immediately.)  This page is in a folder called "day04".  The thumbnail photographs we saw in an earlier lesson are located in another folder called the "pictures" folder.  If we wanted to link to a picture in the "pictures" folder from this page, we could either write out the absolute path, like this:


       Or we could write a link indicating the picture's location relative to this page's location, i.e., the "thmb_day01_01.jpg" page one level up from where we are in the "day04" folder, like this:



directories.jpg (12043 bytes)      Look at it this way.  To the left is the directory structure of the folders for this class.  All of these files are inside a folder called "Mac", because we're in the Mac Lab.  There are only three files in the "Mac" folder, but eleven folders (and many other files inside the eleven folders, of course).  If we made a link on this web page (which is in the folder named "day04") like this  
<a href="../index.html">../index.html</a>
   it should produce this link


it should take us out of this "day04 folder", up one level (which is the Mac folder).  Since there's an "index.html" file in the "Mac" folder, we should find ourselves back on the main page when we click on the link.  Try it.

       If we made a link on this page like this    <a href="../../">../../</a>   it should produce a link like this next one


It should take us out of this folder, up one level (the Mac folder), and up one more level (the GT2000 folder).  There is no "index.html" file in that folder, so we should just see a directory structure when we click on that link.  Go ahead.

       If we wanted to leave the "day04" folder and see a file inside the "day02" folder, a relative url would look something like this.  <a href="../day02/thumb_rac.jpg">../day02/thumb_rac.jpg</a>    It would produce a link like this


That link should move us out of the "day04" folder, into the "day02" folder, and display the picture "thumb_rac.jpg".  See if it does.

Here are some more examples:

<A HREF="../index.html">
       This link would take you to the index page one folder level above the page where the link appears.

<A HREF="../../index.html">
       This link would take you to the index page two levels above the page where the link appears.  Note, when you end your URL in a "/" the browser will look for and load the index.html file in that folder, meaning that you could leave it out of either of the two preceding examples, and write them like this:

<A HREF="../">

<A HREF="../../">

       If you want to climb up three directory levels and then down into another branch of the filesystem tree, just append the new path like this:

<A HREF="../../../content/basics">

would take you to a folder two levels up and then down into a folder named "content", into a folder named basics, to the index page there.


You may also find the following links useful as you continue to work with web pages.

IWA - URLs Relative vs. Absolute

Absolute vs Relative Links

Day 2 - Absolute vs. Relative Links

NCSA -- A Beginner's Guide to HTML, Part 2

Naming and Addressing: URIs, URLs, ...

Click here to go Back to Thursday's Table of Contents.

This page was last edited on June 21, 2000.

URL = http://teachertech.rice.edu/Materials/GT2000/Mac/day04/urls.html

These pages were developed through GirlTECH, a teacher-training program sponsored by the Center for Excellence in Education (CEEE) and made possible by support from the National Science Foundation through EOT-PACI.
Copyright   Michael Sirois, GirlTECH, June 2000.


last edited, ms 6-21-2k, 23:54.