Web Page Construction
The Relative URL

Relative URLs "make sense" in the context of the source code for an HTML file.

The default directory assumed, in this case, is the directory the HTML file is in.

The simplest relative URL references a file in the same directory as the HTML file. For example, to include an image in the same directory, the name of the image file is the relative URL required.

For the purposes of this skills module, we will only discuss the relative URL as it applies to calling up image files on a web page. But it works the same when an URL is for a second HTML file instead of an image file.

The following examples assume that an .htm file needs to display an image. The examples show how to type the relative URL for the image, given the relative positons in the file system of 1) the HTML file and 2) the image file it is "looking" for.


IMAGE FILE IN SAME DIRECTORY (simplest case)

HTML code to include image file Storm2A.jpg in HTML file index.htm

<IMG SRC="Storm2A.jpg">


IMAGE FILE IN CHILD DIRECTORY

HTML code to include image file Storm2A.jpg in HTML file index.htm

<IMG SRC="images/Storm2A.jpg">

IMAGE FILE IN PARENT DIRECTORY

It is less common to reach "up" for an image file in a parent directory (or one above that) but it can be done. For example, if the desired picture was in the parent directory of the default directory, then the URL would be

<IMG SRC="../Storm2A.jpg">

In all cases, note that relative URLs do not begin either with http:// or with root. In all cases, the notion of relative begs the question: "to what?"

If you have no answer to the question, you are lost!

The "what" concerned for HTML files, is the directory that the HTML file itself is in.

BROKEN IMAGE BLUES! Ask yourself what would happen if people built a web page that referenced an image as a relative URL, and then forgot to upload the image file or else uploaded it to the wrong directory. If it obvious to you that this would result in a broken image, then you are getting it! What would happen if the HTML file was saved on a new PC without the image files? Or the HTML file was moved on the web server's file system? Can you see how this would once again result in "broken" images?