Exerts from Joe Bartas' Tutorial

Using Relative URLs to insert an image on a page:

Let's get into putting images into a web page. We're going to use this one. Once again, right click to save it off this page or copy it from the pics folder.

copper.gif (1121 bytes)

You specify an image with the <IMG> (image) tag.

<BODY BGCOLOR="#FFFFFF">
<IMG>
</BODY>

We must also specify the source and the size.

<BODY BGCOLOR="#FFFFFF">
<IMG SRC="copper.gif" WIDTH=82 HEIGHT=68>
</BODY>

netbar.gif (2501 bytes) copper.gif (1121 bytes)

Let me make the point that not only does the source specify what image, it also specifies where is the image.

The above source, "copper.gif", means that the browser will look for the image named copper.gif in the same folder (or directory) as the html document itself. Below are a few diagrams.

 SRC="copper.gif"
means that the image is in the same folder as the html document calling for it.

SRC="images/copper.gif"
means that the image is one folder down from the html document that called for it. This can go on down as many layers as necessary.

SRC="../copper.gif"
means that the image is in one folder up from the html document that called for it.

SRC="../../copper.gif"
means that the image is two folders up from the html document that called for it.

SRC="../images/copper.gif"
means that the image is one folder up and then another folder down in the images directory.

SRC="../../../other/images/copper.gif"

I'm not even going to try and put this into words. I hope you get the drift.

There is another way that this can be done. All references to images can have as their source the complete URL.

For example: http://www.hair.net/~squiggie/LottzaStuff/other/images/copper.gif

Why, you ask, does it make so much more sense to use relative (partial) URLs as opposed to absolute (complete) URLs??
Because you can build your site locally and all the links will work. When your pages are done, you just upload the whole pile to your server and everything will work just fine. In addition, it is easier for the browser to get the images and your page will load faster.

Is there ever a reason to us an absolute URL? Sure, if the image resides on a completely different server.

 

       

Last updated on 01/01/2004 by L.M. Hicks