When constructing a web site you may wish to organize your files into folders, creating a folder structure that reflects the overall structure of your site. For example, a web site whose structure is divided into Home, About Us, Contact, Projects and Clients might have a folder per category, as well as a folder in which to store images.

The home page (a.k.a. index.html) will be the only file not contained within a folder. In other words, the index.html file used for your home page will be kept at the top level of your folder structure. All other folders will be kept next to it.



Another option would be to store all folders containing HTML pages within a folder named pages, reducing the number of folders at the top level of your site.



There are no set rules regarding folder structure. Organizing multiple files within folders is a more efficient way of working as it allows you easy access to your files and makes your site more manageable.

CNN.com has a fairly elaborate file structure as it contains tens of thousands of files that need to be archived in a coherent manner. For example, if you navigate through CNN to a story about Israeli politics that was published on February 26, 2003, the URL for this file will reveal its location within the folders.

http://www.cnn.com/2003/WORLD/meast/02/26/israel.coalition.ap/index.htm

The first slash after the domain name signifies the top-most directory. At this level we see a folder named 2003. Inside the 2003 folder there is a folder named WORLD (files and folders names are case sensitive). Inside the folder titled WORLD there is yet another folder named meast (short for Middle East). This folder contains a folder named 02 for February. The 02 folder contains a folder named 26 for the 26^th day of the month. The folder at the bottom of the hierarchy is named israel.coalition.ap as the story contained within it was written by the Associated Press about the process of coalition-building in Israel. Inside israel.coalition.ap resides an index.html file containing the story.

A note about index.html: It is common practice to keep an index.html file inside every folder on your site. Doing so will ensure that none of your folders will ever reveal their content to a user who might type in an incomplete URL. While your folder structure is not a secret, having a list of files and folders appear in the browser does not look professional.

If we look at the example from the top, an index.html file placed inside the projects folder may serve as the portal for the projects section. It will link to all other index.html pages at the top level of the other categories, to the index.html serving as the home page at the upper-most level, as well as to pages contained within the projects folder.

It's paths time! So how do we link all the different files stored in different folders? In order to link one file to another file stored inside a different folder, we need to specify the logical path to get from file a to file b.

Let's take a look at the graphic below:

In the above graphic we have an index page at the top level of the site. On the same level there are two folders:

• pages
• images

The folder named pages contains an HTML file named food.htm, as well as a folder named fruits. The folder named fruits contains a file named pear.htm. Back at the top level of the site resides the folder named images, containing two image files: fruits.jpg and pear.gif.

In order to link the home page to the file named food.htm, we need to follow a path into the folder named pages where food.htm is stored. The path would be as follows:

pages/food.htm

The link will then be coded:

<a href="pages/food.htm">food</a>

In a sense, all we are telling the link coded in the index.htm page is to enter the folder named pages where food.htm is stored. The forward slash after the word pages indicates that pages is a folder. A forward slash will NEVER appear after a file´s name.

Remember the CNN example?

http://www.cnn.com/2003/WORLD/meast/02/26/israel.coalition.ap/index.htm

Notice there is no forward slash after the index.htm file name as forward slash will appear after the name of folders only

Remember: A file cannot contain other files or folders, but a folder can.

Now let´s connect our home page to the file named pear.htm. In order to do so, we need to first enter the folder named pages, and continue into the folder named fruits where the pear.htm is. Let's declare the path:

pages/fruits/pear.htm

The link will then be coded:

<a href="pages/fruits/pear.htm">pear</a>

Get out! Now that you have mastered getting into those folders, allow me to show you the way out.

When exiting a folder, the folder's name is unimportant. Let's link pear.htm back to the home page. In order to do that, we have to EXIT one folder, then EXIT another. The syntax for exiting is ../ (dot, dot, forward slash). Or, if you like... dot, dot, GET OUT!

Let's declare the path:

../../index.htm

The link will then be coded:

<a href="../../index.htm">home</a>


Finally, what would be the path leading us from pear.htm to fruits.jpg?

In order to get from pear.htm to fruits.jpg we must exit two folders and enter the images folder. Let's declare the path:

../../images/fruits.jpg

We first had to exit the fruits folder, then exit the pages folder and then enter the images folder.