Here are some rules to follow in naming and organizing files on your Web site which will make your site easier to manage and navigate.

Create a Directory Hierarchy
It is possible to keep your entire Web site within a single directory or folder, and this may be appropriate if your site is small. As your site grows, however, it will come to include many images, individual pages or other objects (sound files, videos, etc.). This could make your site extremely difficult to manage. At this point, it is better to divide your files into separate folders an easily-understood hierarchy.

A simple way to divide your files into folders would be to separate your files into folders that reflect the topics the site covers. For example, let's consider a site about colors. You would place your home page (usually named index.htm) in the main folder or root directory and the files on each subtopic into folders named Blue, Red, Yellow, Green, Orange, Purple, etc.

The root folder and the general topic of this site is Colors. Different subtopics include Blue, Red and Yellow. The files associated with each of these subtopics are placed in their own folders.

Inside of these subfolders, you would put the images, homepages for this section (index.htm), other files, and possibly even further subfolders. Arranging your files in this type of hierarchy will make your site much more organized and manageable.

Reuse Redundant Images
The first time an image is called your computer downloads it and saves it in temporary memory (cache) along with the location of the image. If that same exact same image (from the exact same location) is called again, it will be loaded from the local cache instead of having to be downloaded from the server again. If the same image is used on many pages, it won't have to be downloaded each time if it comes from the exact same location.

Consider a site that has a logo or navigation buttons that appear on every page in the site. This is a large site, so files are arranged in a hierarchy as described above. Instead of placing the logo inside of every folder and all of its subfolders, you can place one copy of it in the root directory and call it from all the pages in the site that use it. This way, the image will load far more quickly as users navigate your site.

Instead of this... Each directory contains a copy of the same logo image.
Try this... There is only one copy of the logo image on the whole site that is called from all the different pages.

This same principal works for other media types. So if you display the same video or audio on several pages, you should only have one copy of it that gets called for all these pages.

a name=index>Have an index.htm File in Every Folder
When you open a folder on a server, your Web browser looks for certain files. If a file with one of a few special filenames (like index.htm or default.htm) is found, it is displayed automatically. If no file with one of these names is found, a list of the files found in that folder is displayed instead. This allows users to see how your site is structured (although they can't change anything) and is widely regarded as a poor practice on the Web. Of course there may be times when this is done intentionally, but these are very rare. The solution is to always have a file named index.htm (or one of the other special names) in each folder on your Web Site.

Let's say you have a Web page of images at http://www.yoursite.com/yourimages/images.htm. What if someone goes there by clicking a link to that address? The images.htm file will be brought up because it was specified. The same thing will happen if they manually type in that address. But what will happen if the images.htm is omitted? If a visitor types in http://www.yoursite.com/yourimages/ the images.htm file will not be loaded. Instead, they will see a list of the contents of the entire directory. What happens If you change the filename images.htm to index.htm? Now visitors who go to http://www.yoursite.com/yourimages/ will see your Web page of images and not the contents of the directory.

This is an example of what a user would see if they typed in the directory name and there was no index.htm.

Name Your Files Carefully
Careful naming of your Web files will make them easier for you to handle and others to remember, understand and enter in as Web addresses. While the following rules are not necessary in all circumstances, their application will make your site work properly on all Web servers and with all Web editors.

1. Always make filenames lowercase. This is important because while UNIX (the operating system on many Web servers) is case sensitive, some Web editors aren't. Sticking to lowercase names and file extensions can sometimes save a lot of work. Even if you are using someone's name for a filename, keep it in lowercase. For example:

Use ronald.htm instead of Ronald.htm.

2. Use only letters and numbers in your filenames. Try not to include any symbols like colons, semicolons, asterisks, etc. Even though underscores are commonly used in file names on the Web, they almost disappear when the hyperlink is underlined and confuse most users.

3. Never use spaces in a filename.

4. Keep filenames as short as possible. While keeping the filenames short, try your best to keep them descriptive and clear. For example:

Use animals.htm instead of thisismypageaboutcatsandfishanddogsandrats.htm

Use Relative Links for Local Files
Absolute links include the entire address or URL (Uniform Resource Locator) for the Web page or other object, including the protocol that should be used to process it. (like http).

Relative links include only the part of the URL that you need to get from where you are to where the object of interest is. For example, if you wanted to call an image at the location http://www.yoursite.com/yourimages/image.gif from your page at http://www.yoursite.com/yourimages/index.htm, then the relative link to the image will be simply image.gif because both files are inside the same directory.

Let's say you want to call that same image but this time from your page in the root directory at http://www.yoursite.com/. This time the relative link to the image will be yourimages/image.gif. Notice how the folder is specified first and then the filename.

What if you wanted to call an image further up the hierarchy? You want to call the same image but this time the page you're calling the image from is in a folder called personal inside of yourimages at http://www.yoursite.com/yourimages/personal/index.htm. The relative link to the image in this case will be ../image.gif. The ../ instructs the browser to go up one level in the hierarchy. Use it repeatedly to go up multiple levels in the hierarchy.

Absolute and relative links both have their advantages. You can move a page anywhere on your site and if its links are absolute, they will not be broken. If you move the whole site, however, every single link on the site will be broken. Relative links, on the other hand, will be broken if individual pages are moved within a site. But if the entire site is moved, none of the relative links will be broken.

In general, use relative links within a site and absolute links to link to pages outside a site. Fortunately most Web editors have ways of creating links by selecting files rather than typing in the actual location. In addition, many offer powerful tools to update, manage, and verify these links.

Create Meaningful Titles for All Your Pages
In addition to the filename of each page, each page has a Page Title This is what is displayed at the top of the browser window and is the name given to the page if it is Bookmarked or saved as a Favorite.

Notice the title for the page and the default entry for a name on the Favorites list are the same.

Good Page Titles are concise and descriptive at the same time. Titles can be changes in a Web Editor by altering the Page Properties. In the HTML code of a Web Page, the title goes between <title>        </title> tags in the head of the document as shown below:

<head>
< title>TRIO Training: File Organization for Web Sites</title>
< /head>