Your site will contain quite a few files that must be grouped together in some manner. This grouping must be compatible with the hard-disk layout of both your development system and the web server hosting your site. This means that the grouping of your files can not involve the names of hard disks, because your development system will have different hard disks than the web server. Instead, the grouping must be relative to itself, as I will next explain.

Directory Tree

It is appropriate to have several folders in which you keep the files that make up your web site. These folders comprise a small "directory tree". Your home page should be the "root" of this tree, and the rest of the folders should be children off the home page. That is, all of the folders that contain your files should be inside the folder that contains your home page.

Common Example

A common arrangement for small sites is to have one folder that contains all of the pages (the HTML files). This folder is the main or root folder of the site. The name of the folder is part of the URL for the site. Inside that folder is a second folder that contains all of the graphics files. The name of this folder is not part of the URL.

HTML Links

This arrangement allows for a simple way to link files together. The links between HTML files consist of just the names of the files being linked since all of the HTML files are in the same folder. That is, the links are relative to the folder containing the home page. For example, the link to a file called plane.htm would be just the name of the file, plane.htm

<a href="plane.htm">Text that is visible on the screen</a>

Since the graphics files are in a different folder, links from the HTML files to the graphics files contain the paths to the graphics files. Since the graphics files are in a folder that is inside the main folder, the paths are just the name of the graphics folder and the names of the graphics files. For example, for a file called glasses.gif that is in a folder called graphics, the link is the name of the folder followed by the name of the file; a slash (/) separates the two names:

<img src="graphics/glasses.gif" /> [alt, height, width parameters omitted]

These two links are relative to the web page containing the home page.

File Name of Home Page

Your home page is the initial screen that appears when your site is accessed. Name the file containing your home page index.html, because that name is the default name used by web browsers. Actually, you can call it anything you want, but then you will have to include the name of the file in the URL for your web site. If you name the file index.html, you won't have to include the name in the URL.

Watch Out for WYSIWYG Editor Bad Links

Some WYSIWYG editors create bad links to graphics and web pages by putting your hard-drive paths in the links. These links don't work, because web servers can't access your hard-drive to fetch the files. If you have graphics that don't display in your browser, click on View and then on Source (in the browser Menu bar) and examine the <img src> tags to see if they contain your hard-drive paths. If so, return to your editor, go to the HTML mode and modify the links to have the proper relative paths, as explained above.

[ Site Map ] [ Distance Learning ][ Home ] [ Choosing a Theme ] [ Target Audience ] [ Organizing Your Site ] [ Site Navigation ] [ E-mail Addresses ] [ Copyright Law ] [ Aesthetics ] [ Mixing Colors ][ Organizing Your Info ] [ Organizing Your Files ]