FutureQuest, Inc. FutureQuest, Inc. FutureQuest, Inc.
Understanding File and Directory Paths
Posted on 13 September 2009 06:15 PM
Although this is not meant to be an exhaustive guide on paths and file system structures, it may be helpful if you're just starting out in web development and you're wondering why, after uploading your files to the server:
  • clicking on a link to another page or file on your site results in a 404 File Not Found error message instead of the expected file, or

  • an image that should be showing up on the page is missing or a red x is showing in its place.

Documents and files are linked via paths. The path tells the server where to find the particular file you're wanting to show (the "destination file") in the file system. Paths can be relative paths or absolute paths.

A relative path is based on the location of the source file to the destination file. Most of the time, when linking to files within your own account, you should use relative paths. An absolute path, on the other hand, can be thought of as a direct address to the destination file and is the same regardless of where the source file is located.

Instead of absolute paths though, the examples we provide in this tutorial will be absolute URLs (which are web addresses that start with http://). For linking to files on other sites, you need to use absolute URLs.

When dealing with relative paths, it's important to understand that the layout of directories is hierarchical. So, the relationship of the current source file to the destination file is described by listing the sequence of the directories you pass through to get from the source to the destination. Each directory listed in the sequence is separated by a slash. When put all together, this becomes the path.

To provide a visual, you can think of directories as levels of a parking garage and files as the parking spots. To get from the C level to a parking spot on the A level, you must go through the B level. So your path from level C to parkingspot1 would look like:
B/A/parkingspot1

In other words, from your starting point on the C level, you would go down to the B level, then down again to the A level where you would find parkingspot1.

Okay, so let's apply this to the web and specifically to your FutureQuest account.

On FutureQuest, each hosting package is set up with the same basic structure. Your www directory, which is sometimes referred to as your "public html" directory in script documentation, is located at:
/big/dom/xdomain/www

(Note: The xdomain part is specific to your account and is based on your domain name. The above is also an example of an absolute path.)

Okay, now, let's say you have a page named index.html and that page is calling a graphic file named photo.jpg. Both index.html and photo.jpg are in the same directory (i.e., they are on the same "level"), which for this example is /big/dom/xdomain/www.

To call photo.jpg in your index.html page then, you could simply say:
img src="photo.jpg"

Just as you could simply point to parkingspot1 if you were already on level A.

Or, you could call the image using the absolute URL:
img src="http://www.example.com/photo.jpg"
(where example.com is replaced with your domain)

Because the files are in the same directory (i.e., at the same level), the server doesn't have to travel outside of the directory to locate the file.

Now, let's assume that photo.jpg is instead inside of a directory named images. That is, it's one level down from your index.html file and your www directory (i.e., it's at /big/dom/xdomain/www/images).

To call photo.jpg in your index.html file, you would then need to include more directions, such as:
img src="images/photo.jpg"

The above tells the server to start from the location of the source file (index.html), then go down to the images directory and there it will find your photo.jpg file.

Or, we can use an absolute URL to tell the server the location of the file:
img src="http://www.example.com/images/photo.jpg"
(where example.com is replaced with your domain)

Again, this is meant as an introduction to linking, but we hope you found it helpful. For additional assistance in this area, we welcome you to visit the FutureQuest Community Forums at:
http://www.FutureQuest.net/forums/