HTML Cookbook Basic HTML Course

Directories and URL's, Part 3

This lesson is dedicated to Donald.

In Parts 1 and 2, 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 sig directory, so the URL is http://www.gnu-bee.com/sig/ourlove.html

Here is a directory tree showing where the files are:
Root

• midi
  • standards
    ourloveishere.mid
• musicimages
  chopin.gif
• sig
  ourlove.html

To use the files in the first 2 directories, I have to first go "up" from my sig directory to my Root, then "down" into the other directories.

To go up one directory in a relative URL, use 2 dots and a slash
( ../ )

Here is the code for my link using URL's relative to my sig directory.

<a href="../midi/standards/ourloveishere.mid">
<img src="../musicimages/chopin.gif">
</a>

Browsers will read:

(From http://www.gnu-bee.com/sig/)

• Go up one directory level. Go to the 'midi' directory. Go to the 'standards' directory. Get "ourloveishere.mid".
• Go up one directory level. Go to the 'musicimages' directory. Get "chopin.gif".
• Show "chopin.gif" as an image.
• When someone clicks on this image, play "ourloveishere.mid".

How to use Relative URL's

• Remember that you are starting from the directory that your page is in.
• If a file is in the same directory, just enter the file name.
  (Ex: "My_Cat.jpg")
• If a file is down from the directory you are working in, enter the directory name followed by a slash, then enter the file name.
  (Ex: "images/My_Cat.jpg")
• If a file is on a different directory branch, enter ../ for each level you need to go up, then go from there.
  (Ex: "../images/My_Cat.jpg")

---

Scarlet asks, IF YOU NEED TO GO UP MORE THAN ONE LEVEL THEN CAN YOU?????

Yes, you can

AND IF SO,
ADD ../
FOR EVERY ADDITIONAL LEVEL????

That's exactly right.

One "../" means "go up one directory level".

Use one ../ set for each level you want to go up.

Example: Your root directory is at:
http://www.myhost.com/myaccount/

You have a "sigs" subdirectory in your root:
http://www.myhost.com/myaccount/sigs/

Your "sigs" directory has subdirectories for different seasons, including a "summer" directory:
http://www.myhost.com/myaccount/sigs/summer/

All your _images_ are in your "images" subdirectory:
http://www.myhost.com/myaccount/images/

You want to show a picture of your cat:
http://www.myhost.com/myaccount/images/my_cat.jpg

Your _page_ is 2 directories down from your root:
http://www.myhost.com/myaccount/sigs/summer/page.htm

Your "working" directory is
http://www.myhost.com/myaccount/sigs/summer/

Go up 2 levels to your root ( ../../ ), then down to your image ( images/my_cat.jpg ).

Your relative URL is:
./../images/my_cat.jpg

Your image code (minus attributes) is:
<img src="../../images/my_cat.jpg" />

---

In Part 4, we'll discuss the base tag.

Happy coding!
Gnubee

Links

Tips
Tools
References
Rules
HTML Help Gnubee - Newsgroup