|Style||Document Segments||Course Contents|
The public component of a website is really a repository for information files
which are delivered to the client on demand. The better organized the information
is, the easier the site will be to build, manage and maintain. The key to good
organization is a good system for filing information.
Directory Structure -Just as information is filed in folders in a file cabinet drawer for ease of storage and access, information is stored within a website file directory structure for the same purposes. The directory structure consists of a system of virtual file folders each containing a portion of the data within the website (see diagram below).
Website Directory Structure
A three-tiered website directory structure, like the hypothetical one in the diagram above, can be displayed as if it were an organization chart because files are stored in hierarchically arranged directories. What is not intuitively obvious about hierarchical directory structures is that lower level directories are contained entirely within the upper level directories. In the example above there are only three directories at the root level. All subordinate directories and files are completely contained within these three primary directories.
In this example the entire website "MY STUFF" is contained within the root (topmost) directory. A website home page generally resides in the root directory. Lower level web pages, which generally comprise the bulk of the content of a website, reside within the appropriate subdirectories.
File Paths -The route that must be taken down through a hierarchical directory structure to locate a file within a subordinate directory is called a path. An analogy might be useful to demonstrate the concept of a path.
If you were in the front foyer (root level) of your house and wanted to get a jar of jam on the second shelf of the refrigerator in the kitchen, the path to the jar of jam might be diagrammed like this:
or, in computer parlance:
Extending this simple logic, in the example website directory structure shown in the diagram above suppose that there
were a graphics file named
Note that spaces, special characters and capitalization count and must match exactly! Almost
all file paths are case, character and place sensitive, especially on the Internet. This is
common in the Unix/Linux systems which pervade the Internet. Note also that the directory names are
separated by a forward slash
Proper paths to the content of a website are critical because they are integral to the URLs that are used to point users to the right stuff. URLs which contain incorrect path information are often referred to as broken or malformed and will lead users into dead ends.
Accretion vs. Planning -Most novice web authors make the mistake of allowing their websites to grow by simple accretion. They add more HTML documents as their site grows. They often make the mistake of placing all the HTML documents and files that support them in a single root level directory in a number of files with non-mnemonic names. As time goes by the content of this directory becomes more and more complex and, eventually, arcane.
Rather than allowing a website to grow by accretion, it is far better to organize the site from the outset into a clear directory structure which can accommodate all the content logically. All that needs to be done is to develop an outline of the prospective site content and to mirror this in the directory structure.
In the examples of website structure shown below, that on the left places all the content in a single root level directory and uses mnemonic file names for consituent HTML documents. That is OK for small and uncomplicated websites, but for larger, more complex websites it shortly becomes inadequate and makes maintenance and management much more difficult.
In the structure shown at the right, there are directories for each category of information
within the website. This does not require that HTML documents receive mnemonic names
because each is contained within it's own directory. Note that all the HTML documents
in the website are called simply
File Naming Conventions -There are magic (index or default) HTML document file names defined on most servers. Generally the file names
In the example at the right above note that the default index file name is used in every directory of the website. This means that URLs which address the content need only reference the directory in which information resides. Shown below are the URLs which would be required to address information on the websites in the examples above:
One of the difficulties novice web authors have is understanding index files and how they work. They can't understand that multiple files can have the same name but different content if they reside within different directories on a website. An analogy might be helpful.
Consider how many men named Smith may live in your neighborhood. They all share the same name
but you have no difficulty in telling one Smith from another. Why? Because they all
look different (have different content) and live in different houses (directories). So what's the problem with index files all
bearing the same name -
A word of warning. If you use a directory structure to contain content on your website and use default file names for index files in each directory, then, like Luke Skywalker, you must know where you are and what you're doing all the time. A good rule of thumb is to download code from the server to the correct local directory before modifying it. That way, you are assured of having the most recent copy available to you and you do not run the risk of overwriting existing code on the server with older versions or with index files from other directories.
Another word of warning. No matter how diligent and careful you are, the day will dawn when, before consuming your first cup of coffee, you mistakenly overwrite good code on the server with bad code from your local copy. Be prepared. Make backups of your entire website at least quarterly to permanent storage media so that you can repair damage quickly and easily.
|Style||Document Segments||Course Contents|
You are here: NetStrider » Tutorials » HTML » STRUCTURE «