DearHeart's Subdirectory Tutorial

*~*~*~*~*~*~*~*~*~*~*~*~*~*~*~*~*~*~*~*~*

What is your domain?

If you have purchased a domain and are having Crosswinds host it for you, then your domain name is your main directory. For instance, my domain is dearheart.org and is being hosted by Crosswinds. As you navigate through my site you will see my personal domain at the front of the address for every page.

If you have a Basic Crosswinds account, your main directory is your basic URL:

http://www.crosswinds.net/~username

If you have a Premium account, your main directory is a "subdomain" of Crosswinds:

http://username.crosswinds.net

Remember to replace username above with your actual Crosswinds username. Also note that the link to home illustrated below will not work unless you have a personal domain name hosted by Crosswinds. Otherwise, the code will send your visitor back to the main crosswinds page!

In the examples below, if you have either a basic or Premium account, substitute your main directory URL for www.domain.com.

Think of directories and subdirectories like the folders on your hard drive... you can nest folders within folders to organize your files. You may name subdirectories anything you like, with alpha-numeric symbols [a-z; A-Z; 0-9] and underscore [_] or dash [-]. You may also create a subdirectory within a subdirectory.

main level
www.domain.com/

second level of subdirectories
www.domain.com/subdir1/subdir2/

etc.
www.domain.com/subdir1/subdir2/subdir3/...

*~*~*~*~*~*~*~*~*~*~*~*~*~*~*~*~*~*~*~*~*

Visualize File Structure

Below is an example of a typical file structure with a main directory and two levels of subdirectories organizing all the files, it might help visualize how to move around within the subdirectories:

                 domain.com/
           ___________|_______________
          |           |               |
        images       midis        literature
        __|__                   ______|_______
       |     |                 |      |       |
      gif   jpg              poetry stories essays

*~*~*~*~*~*~*~*~*~*~*~*~*~*~*~*~*~*~*~*~*

Moving Down

How you call a file or link to a page depends on the file's relationship to the page you are working on. In the following examples, the page might be in the main directory, or it might be in a subdirectory, but the files being called are in directories with or below the page...

If accessing a file within the same directory as your HTML page:
Use only the filename within the quotes
SRC="filename.gif"

If accessing a file from a directory one level below your page:
Use the subdirectory name in front of your filename with a slash [/] between them
SRC="subdir/filename.gif"

If accessing a file two levels below your page:
Use the first level subdirectory, slash, second level subdirectory, slash, then the filename
SRC="subdir1/subdir2/filename.gif"

*~*~*~*~*~*~*~*~*~*~*~*~*~*~*~*~*~*~*~*~*

Moving Up

So, what do you do if the file is in a directory above your page? In these next examples, I show you how to move upward to get a file or link to a page...

If accessing a file one level above your page:
Use 2 dots and a slash in front of the filename
HREF="../filename.html"

If accessing a file two levels above your page:
Use 2 dots and a slash twice in front of the filename
HREF="../../filename.html"

*~*~*~*~*~*~*~*~*~*~*~*~*~*~*~*~*~*~*~*~*

Moving Across

But what if the file you need is in another subdirectory? Next to where your page is? When this happens, you must send the browser looking first up to the main level (or into a shared level above if both subdirectories are in the same directory), and then back down to the proper subdirectory:

If accessing a file in a neighboring subdirectory in the same first level of subdirectories:
Go up one level, then down one level
SRC="../subdir1/filename.jpg"

To access a file in the first level from the second level:
Go up two levels, then down one level
SRC="../../subdir1/filename.jpg"

To access a file in the second level from the first level:
Go up one level, then down two levels
SRC="../subdir1/subdir2/filename.jpg"

*~*~*~*~*~*~*~*~*~*~*~*~*~*~*~*~*~*~*~*~*

Link to Home

Use your knowledge of subdirectories to link back to Home:

if the link is on a page within your main directory
<a href="index.html">Home</a>
if the link is on a page within a first level subdirectory
<a href="../index.html">Home</a>
if the link is on a page within a second level subdirectory
<a href="../../index.html">Home</a>
etc...

But there are also several simple ways to link to home. A full URL works no matter what page you put it on:

http://www.domain.com/ (personal domain)
http://username.crosswinds.net/ (Premium account)
http://www.crosswinds.net/~username/ (Basic account)

Here's a neat trick if you have a personal domain name, create a link back to your index.html with a simple forward slash in the link: