Subdirectories

And How to Use Them

Your Main Directory | Visualize File Structure | Moving Down | Moving Up | Moving Across | Link to Home | Top

What is your main (parent) website directory?

If Crosswinds is hosting your purchased domain, then your main (parent) directory is your domain name. It will take the form of:
 http://www.yourdomain.com/
(yours might end in .net or .org instead of .com)

If you have a Basic or 10/10 Crosswinds account, your main directory is your basic URL (website address):
 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, no matter what type of account you have, substitute your main directory URL for http://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 almost anything you like, using alpha-numeric symbols [a-z; A-Z; 0-9] and underscore [_] or dash [-]. You may also create a subdirectory within a subdirectory.

main level
http://www.domain.com/

first level of subdirectories
http://wwww.domain.com/subdir1/

second level of subdirectories
main level plus subdir1/subdir2/

third level of subdirectories
main level plus subdir1/subdir2/subdir3/

And so on, as deep as your subdirectories go.

*~*~*~*~*~*~*~*~*~*~*~*~*~*~*
Your Main Directory | Visualize File Structure | Moving Down | Moving Up | Moving Across | Link to Home | Top

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:

     parent_directory(domain.com)/
      __________|_____________
     |          |             |
  images/     midis/     literature/
   __|__                ______|_______
  |     |              |      |      |
 gif/  jpg/        poetry/ stories/ essays/

When we link within a site from one file to another, and from one subdirectory to another, we call it relative linking. How we link to an image or to another page depends on the file's relationship to the page it is linked from.

*~*~*~*~*~*~*~*~*~*~*~*~*~*~*
Your Main Directory | Visualize File Structure | Moving Down | Moving Up | Moving Across | Link to Home | Top

Moving Down

In the following examples, the files being called are in the same directory as or in subdirectories below the page being viewed.

Accessing a file within the same directory as your HTML page:
Use only the filename within the quotes:
<a href="anotherpage.html"

Linking to a file in a directory one level below your page:
Link from your site's home page to a listing of midi files. Use the subdirectory name in front of your filename with a slash [/] between them:
<a href="midis/index.html"

Linking to a file two levels below your page:
Link from your site's home page to a specific poem. Use the first level subdirectory, slash, second level subdirectory, slash, then the filename:
<a href="literature/poetry/mypoem.html"

*~*~*~*~*~*~*~*~*~*~*~*~*~*~*
Your Main Directory | Visualize File Structure | Moving Down | Moving Up | Moving Across | Link to Home | Top

Moving Up

Next, we show you how to move upward to get a file or link to a page above your page.

Linking to a file one level above your page:
From the midi list, link back to the home page in the parent directory. Use 2 dots and a slash in front of the filename:
<a href="../index.html"

Linking to a file two levels above your page:
On a poetry page, link back to the home page in the parent directory. Use 2 dots and a slash twice in front of the filename:
<a href="../../index.html"

*~*~*~*~*~*~*~*~*~*~*~*~*~*~*
Your Main Directory | Visualize File Structure | Moving Down | Moving Up | Moving Across | Link to Home | Top

Moving Across

Sometimes the file you need is in a parallel subdirectory next to where your page is. In this case, you must link along a path first up to the main level (or up to the first shared level above), and then back down to the proper subdirectory:

Accessing a file in a neighboring subdirectory in the same first level of subdirectories:

Link to an essay from a poetry page. Go up one level, then down one level
<a href="../essays/myessay.html"

To access a file in the first level from the second level:
Link to the listing of midi files from a poetry page. Go up two levels, then down one level:
<a href="../../midis/midilist.html"

To access a file in the second level from the first level:
Insert a picture of my dog on the midi files page. Go up one level, then down two levels:
<img src="../images/jpg/mydog.jpg"

*~*~*~*~*~*~*~*~*~*~*~*~*~*~*
Your Main Directory | Visualize File Structure | Moving Down | Moving Up | Moving Across | Link to Home | Top

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 other ways to link to home. A full URL (i.e. an absolute link) 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 or 10/10 account)

Note that using absolute linking is only recommended if the relative linking methods described above don't work for you; absolute links put extra strain on a webhost's servers since they have to start at the domain root and work down to your site again each time.

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:
<a href="/">Home</a>

*~*~*~*~*~*~*~*~*~*~*~*~*~*~*
Your Main Directory | Visualize File Structure | Moving Down | Moving Up | Moving Across | Link to Home | Top