URL Construction

You don't need to view the Source Code for this example. Reading the Web page is sufficient.

From the perspective of a human, a Relative URL is a path to locate a file, relative to another file.

But a Web Browser can't surf to a Relative URL because it's not the actual location of the page -- just some relative information where it should find another page. The Web Browser uses the Relative URL to transform one Absoulte URL (where it is currently) into another Absoulte URL (where it needs to go).

Suppose you have surfed to the following page in a browser. (Note: not a real page.)

   http://csci.lakeforest.edu/coolanimals/domesticated/small/tabbycat.html

Then the above Absolute URL will be in the browser's address field - the absolute location of the page to which the browser has surfed.

Now suppose you click a link in that page that has the following Relative URL.

  <a href="../../wild/large/white-bearded-wildebeest.html">See Cool Beest</a>

The browser first does the up two directories, chopping off two directories as shown below.

   http://csci.lakeforest.edu/coolanimals/domesticated/small/tabbycat.html

Thereby leaving the following location.

   http://csci.lakeforest.edu/coolanimals/

The browser then resolves the rest of the Relative URL by descending into the two folders to find the desired page.

   http://csci.lakeforest.edu/coolanimals/wild/large/white-bearded-wildebeest.html

Thus, the Relative URL has transformed one Abololute URL into another, using the relative path to deduce where it needs to go from where it currently is!