Web Site Directory Structures

• Introduction to site directories
• Directory structure
• Mirror directories for storage and testing
• Referencing files
• HTML relative references summary
• What do I do now, and why?

Introduction to site directories

This is a short description of how to organize the folders (paths or subdirectories) that hold html pages and the other files on your Web site. Read this to learn the customary locations for storing your Web files in an organized manner, and the most efficient way to reference these locations when authoring html.

A Web site begins with a home page folder. A student named James Johnson, for example, was assigned the URL below. His Web site begins with the James.Johnson folder. On the network James sees this folder as the root directory of his site.

It is customary to name home pages "index.html", and James has followed custom by placing the file in his root directory. Therefore users addressing the URL below would automatically see James' home page. The ending "/" is important because Web servers look for a default file if none is provided in the address, and the / terminates an unambiguous address to the James.Johnson folder with no file specified. Some servers would report "error 404 file (James.Johnson) not found" if the ending / is omitted.

Directory structure  

Other subdirectories below the home folder normally would be created to store graphics, scripts and style sheets. And still other subdirectories could be devoted to course work, personal and 'very' personal topics. A complete subdirectory structure would be:

James would probably place links to projects, mis325 and mis374 html pages in his home index.html; and to keep them away from school work, he might author separate index.html files for his personal and verypersonal folders. There would be no reason to have index.html files for the cgi (server-side scripts, sometimes named 'cgi-bin'), images, scripts and styles folders.

Mirror directories for storage and testing  

Because it is very convenient to develop, test, and revise Web pages on a workstation instead of uploading to the Web server to test, you should adopt identical directory structures on your workstation and Web server. This generally means from the root path downward to subdirectories. In other words, keep the main directory name and all subdirectory names the same on the workstation and Web server. Testing your html is much easier that way. And FTP transfers are less confusing.

For example, James could keep his mirror site on a zip disk. If the workstation assigns D to the zip drive, then James could test Assignment6 by using this address in the Internet Explorer:

Backslashes are the standard for workstations addresses, and slashes are the Web standard for URLs. Luckily, the slashes also work fine for workstation addresses. Browsers have no problem if your html scripts use slashes. Just use slashes.

Referencing files  

As an html author you probably will use a graphic or link to another page at your site. So you have to know where the graphic or page can be found (the directory structure). This section describes how to code the relative addresses of files on your site.

Three html attributes are concerned with addresses: href, src and url. Although they are used for different purposes, they have the same syntax and will be described together. Links from one html file to another depend on the anchor <a> tag. To give users a hyperlink from eproject0.html to another file named more.html in the same path:

Here is an explicit version of the same hyperlink that introduces unnecessary hard coding. It would prevent workstation testing. Relative references are preferred.

Here is a relative link to some project planning material from index.html in the James.Johnson home folder. Notice that the subdirectory path mis374 must be part of the address.

Graphic images are controlled with the <img> tag. The src attribute specifies the location and name of a graphic image file. The file reference syntax for href, src and url are identical. To reference the location of a graphic you want to use in eprojects, mis333k, mis333k, mis374, or personal:

To link from planning.html (in mis374) to the site home page provide this link:

If mis333k.html (in mis333k) uses a JavaScript function then you would code the src attribute:

In photoalbum.html (in verypersonal folder) you would code the src attribute for a photograph:

HTML relative references summary  

The table below is a summary of relative file referencing in html.

What do I do now, and why?  

A mirror directory is necessary because you need to transfer files to the Web server. Transfer files in either of these two ways: Map the Web folder, or use a secure FTP program .Either of the two methods must know where you have the files and where they are going on the server. Its time to organize.

The advantage of James Johnson's organization may not be apparent yet, but if you set up paths badly it will become pretty clear that you are spending too much time on path details, or looking for files, and something needs to be done. James' organization will save you time and grief.

Keeping html files separated into folders according to content areas (assignments, Kteam, mis374, personal) is not essential but will help you find your files quicker. And the html can reference graphics, styles and scripts using exactly the same html syntax in any of the folders. So the files could be copied and moved easily without changing references to common files. Often the only html file in the home folder is index.html with links to the other content in subdirectories.