HTML Cookbook

Let's say I'm making a sig for my email. I want to have a picture of a '34 Ford hot rod (a deuce coupe) from my images directory & I want to use "Little Deuce Coupe" by the Beach Boys from my midi directory for my music. My filename will be "duece_coupe.html".

The URL for my sig would be
http://www.gnu-bee.com/duece_coupe.html. I could use absolute (complete) URL's for my files like so:
<img src="http://www.gnu-bee.com/images/34ford.jpg">
<bgsound src="http://www.gnu-bee.com/midi/duece_coupe.mid">

But I could also use a shorter version of each URL that is "relative" to the directory I'm working in.

If I'm writing my page in my root directory, the files would be: images/34ford.jpg & midi/duece_coupe.mid & my code would simply be:
<img src="images/34ford.jpg"> &
<bgsound src="midi/duece_coupe.mid">

A browser would already be at my Root directory reading my code.

When it sees a relative URL, it knows to simply go straight to the the directories & grab those files. If I use absolute URL's, the browser goes back to the internet first & looks for my site, then the directories for each file. So using relative URL's saves on load time for individual files. It also saves time when you write your code & since there is less code, your page or sig will load faster.

Now let's say I keep all my sigs in their own "sig" directory (BTW, I do).
Now the URL for the page will be
http://www.gnu-bee.com/sig/duece_coupe.html

My directory tree would look like this:

Root 
    images
      34ford.jpg 
    midi
      duece_coupe.mid 
    sig
      deuce_coupe.html

This will change the relative URL's in my code since I am workig in a different directory.

Before I simply went "down" to my "image" & "midi" directories. But since my page is now in my "sig" directory. I have to tell the browser to go "up" 1 directory level then "down" into the other directories.

How do I do that?
Using ../ tells the browser to go up one level (Root directory). Then I just go down from there to my files. (That's 2 periods and a slash.)

Here is my new code:
<img src="../images/34ford.jpg">
<bgsound src="../midi/duece_coupe.mid">

This tells the browser:
"Go up from here 1 level & get 34ford.jpg from the images directory." and
"Go up from here 1 level & get duece_coupe.mid from the midi directory."