In Part 1, we looked at some URL's that are used in a page. Here they
are again:
http://www.gnu-bee.com/midi/standards/ourloveishere.mid
http://www.gnu-bee.com/musicimages/chopin.gif
I'm using these files in a page called "ourlove.html". This page is in my root directory, so the URL is http://www.gnu-bee.com/ourlove.html
This page has a link. Here's the working part of the code using absolute URL's. I'm leaving the image attributes out for brevity.
<a href="http://www.gnu-bee.com/midi/standards/ourloveishere.mid"> <img src="http://www.gnu-bee.com/musicimages/chopin.gif"> </a>
This is what it looks like on the page:
This code means
So far, so good, this code works just fine. But browsers always know "where they are". They know what page they are on, and more importantly, they know which directory that the page is in.
When a browser displays http://www.gnu-bee.com/ourlove.html, it knows that it's in my root directory.
Since it knows that it is in my root directory, I don't have to give the complete addresses of the files that I am using from my own site.
If you visited my house and asked me where I keep the glasses so you could get yourself a drink of water, I wouldn't give you directions to my house first (absolute URL), I'd just tell you that the glasses are in the left cupboard over the coffee pot (relative URL). You already know you're at my house and you can see my kitchen.
Likewise, I don't have to give the complete address (absolute URL) of each file I use. I only have to tell browsers how to find my files from my root directory (relative URL).
This means I can skip the part of the URL that leads to my root directory.
Here's the code with relative (to the root directory) URL's:
<a href="midi/standards/ourloveishere.mid">
<img src="/musicimages/chopin.gif">
</a>
A browser reads:
(From http://www.gnu-bee.com/)
- Go to the 'midi' directory. Go to the 'standards' directory. Get "ourloveishere.mid".
- Go to the 'musicimages' directory. Get "chopin.gif".
- Show "chopin.gif" as an image.
- When someone clicks on this image, play "ourloveishere.mid".
Now isn't that easier for both you and the browser?
Your pages will load faster when you use relative URL's, because:
In Part 3, we'll discuss how to use relative URL's in a page that is not in your root directory.
Magic Man asks, "WHAT IF YOU NEED TO GO DOWN MORE THAN ONE LEVEL....THEN CAN YOU?
Yes, just follow the entire path down _from_ your "working directory".
Example: Your root directory is at:
http://www.myhost.com/myaccount/
Your page is in your root directory:
http://www.myhost.com/myaccount/page.html
So your "working directory" is your root:
http://www.myhost.com/myaccount/
You have an "images" subdirectory in your root:
http://www.myhost.com/myaccount/images/
Your "images" directory has a "pets" subdirectory:
http://www.myhost.com/myaccount/images/pets/
You want to show a picture of your dog. It is 2 directories down from
your working directory:
http://www.myhost.com/myaccount/images/pets/dog.jpg
Just omit the working directory part.
Your relative URL is:
images/pets/dog.jpg
Your image code (minus attributes) is:
<img src="images/pets/dog.jpg" />
Happy coding!
Gnubee
