Subdirectory Tutorial

How to make links work in a site with subdirectories


With a link like <a href=filename.html> you can only reference files in the same directory as the page they're linked from, be they of html, jpg, mid or any other format. If you reference files in any other directory on the same server, you have to include the path - think of moving in a DOS file system at the command prompt, only with slashes instead of backslashes. If you edit your pages offline, it's a good idea to re-create the directory structure on your harddisk: It's easier to test whether internal links work - just open one page and navigate through your site from it -, and an HTML editor can be made to create relative links that actually work.

Absolute links reference a file so that it can be found from any point in the web by using the complete URL. In case of this page here, an absolute links to it would be
<a href=http://www.oocities.org/Paris/2472/subdir.html>

Relative links can only be used to reference files that reside on the same server as the page they are linked from. You can leave out the http://www.oocities.org part and only use the path plus filename.

And here are a few examples of how relative links work. It's the same for <a href>, <img src>, <embed>, <background> or <bgsound>. Let's say you edit http://www.oocities.org/Paris/2472/index.html. For easier understanding, imagine the directory structure of geocities as if you could see it in the explorer.

directory structure

I forgot to include the file index.html right under www.oocities.org, which is the main geo page (http://www.oocities.org/index.html). As you can see in this file tree, the neighbourhood "Paris" is a parent directory of the suburbs "Arc", "Bistro" etc. This homestead here, Paris/2472, is also a subdirectory of Paris, on the same level as the suburbs. Paris/Arc/1000 is a subdirectory of a subdirectory... etc.

Let's imagine that Paris/2472 has subdirectories named "cl", "image", and "style". "style" again has a subdirectory named "files". I always recommend that you build a directory structure that mirrors that of your Geo directory on your harddisk. E.g. I as the keeper of the Community Pages have a directory D:\www\Paris\2472\ that contains the Community main main page, and a subdirectory C:\Paris\2472\cl, plus many others. Mind that the explorer wants backslashes, while browsers want slashes.

The simplest link of all would be to reference sound1.mid from files.html, both located in the same directory: <embed src=sound1.mid>

Now you insert pic1.jpg, located in the subdirectory images, into index.html: <img src=images/pic1.jpg>

If you want to link the MIDI file located in the sub-subdirectory "style/files" from index.html: <a href=style/files/sound1.mid>

This was easy, wasn't it? Now the other way round. Imagine you want to reference index.html from a page in the directory "style": <a href=../index.html> A double dot is the "wildcard" for the parent directory - it means "one up".

To link index.html from files.html in directory style/files, you'll have to go "two up" : <a href=../../index.html>

Still not confused? OK, now for some relative link gymnastics. From your Paris/2472/style/style.html page, you want to link your friend's Vienna index page. A relative link would look like
<a href=../../../Vienna/4440/index.html>. that's one level up to 2472, one up to "Paris", then one up to above all hoods (the so-called root directory), then down into Vienna etc. But if you link your friend's MIDI file in the subdirectory "MIDI" of Vienna/4440 from your own file.html (look at the picture again), the whole thing becomes too confusing:
<bgsound=../../../../Vienna/4440/MIDI/midi.mid>

So this would be easier, shorter and works just as well: <bgsound=/Vienna/4440/MIDI/midi.mid>.
A slash at the beginnig is a "wildcard" for the topmost directory (AKA root) of your server, a bit like "C:\" on your average home computer. So if you want to link to the GeoCities main page, you simply type: <a href=/index.html> or, if you're lazy, <a href=/>.

Of course you'll have to take care not to inadvertently put the slash in front of a path to your own subdirectory. If your tag says <a href=/style/files/files.html>, the browser will look for http://www.oocities.org/style/files/files.html, which of course doesn't exist.

Um, you know, after reading this again, I'm surprised that I still get it. ;) I'f you're still confused, you can always ask me. My email addy is on every page here.
And now.... good luck!


MAIN PAGE | FAQ | HELP LINKS | HOMEPAGE RESOURCES | CL-LIST


This page was prepared by Yoshiwara
This page hosted by GeoCities Get your own Free Home Page