Relative Addresses

---

Let's use your homepage folder and files to illustrate the difference between absolute and relative URL addresses. Open your homepage folder and do the following:

1. Create a new folder inside your homepage folder; call it "gifs".

2. Use the Browser to go to the address

   http://csep10.phys.utk.edu/next.gif.

   Save the image that is displayed into your homepage folder with the default name "next.gif" by holding the right mouse button down over the image, choosing "Save this Image As", and selecting your homepage folder in the resulting dialog box.

3. Use the Browser to go to the address

   http://csep10.phys.utk.edu/previous.gif.

   Save the image that is displayed in the folder "gifs" that you created inside your homepage folder with the default name "previous.gif" (NOTE: read the instructions carefully; his file goes to a different folder than the one in the previous step!).

4. Open your homepage file index.html with the editor and insert the following HTML code at a convenient place:

      <h2> Examples of Absolute and Relative URL's </h2>
      
      This image has an absolute address of "?":
      <p>
      <img src="?">
      <p>
      This is the same image displayed with a relative address
      "next.gif":
      <p>
      <img src="next.gif">
      <p>
      Here is another image in a subdirectory "gifs" 
      of the present directory; it is displayed using the
      relative address "gifs/previous.gif"
      <p>
      <img src="gifs/previous.gif">
      <p>
   

   Save the homepage file, but leave the file open in the editor.

5. Use "Open File" from under the "File" menu of your Web Browser to open the image "next.gif" saved in your homepage folder. Copy the address displayed in the "Location:" window of the browser with the mouse. This is the (absolute) URL address of the file on your machine. It will typically look something like:

      file:///maindisk/myfolder/next.gif
   

   (but the exact directory path will depend on your machine). Go to the homepage file still open in the editor and REPLACE THE TWO OCCURRENCES OF THE QUESTION MARK (?) WITH THE URL ADDRESS YOU HAVE JUST COPIED WITH YOUR MOUSE. Save the homepage file, and close the editor.

   Supplementary Note: The preceding URL is the form for a URL address of a file on the same machine as the browser. The "file://" part tells us that. There then follows the absolute address of the file on the machine. In the example given above the absolute address is /maindisk/myfolder/internet_resources.gif. (Notice that this explains why there are 3 slashes after a "file:" in URL addresses, but only two slashes after "http://"; the first two slashes are part of the specification for the method of transferring the file, but the third slash actually stands for the root directory on your machine in "file:///".)

6. Now display your homepage with the browser (reload if necessary).

Examples of Absolute and Relative URL's

This is the same image displayed with a relative address "next.gif":

Here is another image in a subdirectory "gifs" of the present directory; it is displayed using the relative address "gifs/previous.gif"

These elementary examples illustrate the difference between absolute and relative addressing, and how to implement relative addressing for the two simple (but common) cases where the file being addressed is either in the same directory as the HTML file (the next.gif example), or in an immediate subdirectory of the HTML file (the gifs/previous.gifs example). As we have noted above, it is generally advisable to use relative addressing in your Web pages to increase portability.

---

Next   Back   Top   Home   Help

---