Basic HTML

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 Picture 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; this 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" 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 "Address:" 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://c:/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 this is c:\myfolder\next.gif, which is the sort of address you might see on a PC. On a Unix or Macintosh computer, where the disks are generally designated by names rather than letters, you might have a URL such as file:///maindisk/myfolder/next.gif, where the file has an absolute address of /maindisk/myfolder/next.gif. (The relation between URLs and file addresses is discussed further here.)

Now display your homepage with the browser (reload if necessary). Your browser display should show something similar to the following:

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.gif example). As we have noted above, it is generally advisable to use relative addressing in your Web pages to increase portability.