Web File Basics

Contents

• Organization Issues
• Directory Trees
• Tree Depth: Deep vs. Broad
• Handling Images
• On your Own Computer

• The Home Page
• Spaces in File Names 
• What Characters Can go in File Names? 
• Name Length 
• Case 

Organization Issues

• Directory trees: a way of organizing information on computers
• Relative URL References: how to link from one page to another within a Web site
• The issue of tree "depth"
• File naming
• Where to put your images

Every disk has a "root directory" containing files and other directories. These subdirectories may contain other files and directories.

How does this apply to the Web?
The "root" directory for a Web server is the directory in which that server starts looking for files. It doesn't have to be the root of the disk itself. For example, the Washtenaw Community College Web "root" URL is at
www.wccnet.org
but the root directory of the Web is actually is
/home/httpd/html

As you have noticed, directories and subdirectories in URLs are separated by forward-slashes / 

In addition, the directory one level up can be represented by two dots .. and the current directory by a single dot . These can be used in creating links, as we'll see now...
 

Tree Depth: Deep vs. Broad

• A deep tree is one in which many of the directories contain other directories, which have directories of their own, and so on.
• A broad tree is one in which the top level directory has many subdirectories, but the second-level directories do not have many subdirectories.

Each plan has its tradeoffs:

• Deep trees let you set up a relatively small number of files per directory. Small directories are often easier to manage than large ones, but the URL gets longer the deeper you go.
• Broad trees end up with fewer directories but more files in each directory. The URLs stay relatively short. But with large numbers of files in each directory, you, as the designer, need to use a systematic file naming pattern so you can find what you want easily.

I have found it generally simpler on my site to keep the images together with the files they are used with. This results in some duplication, but fewer directories. Oh well, it's yet another tradeoff!
 

A good, practical way to do this is on your own computer is called "mirroring":

1. Create a subdirectory on your hard drive (or for a class, set aside a diskette) which will represent your Web site. A good name to use is public_html which is the name used on most servers.
2. In your Web directory or diskette, create a file called index.htm. This will be your home page.
3. If you want to keep images in a separate directory, create a directory called images to keep them in.
4. If you need other subdirectories on your Web site, create them on your own disk as well. If you have many, you may find it useful to draw a diagram showing the relationships between them.
5. When you are ready to put files on the Web, use your FTP program to create directories and subdirectories with exactly the same names as the ones on your disk - beginning at the level below your main Web directory. Then use the FTP program to transfer files from your disk to the Web server. (If you're using a service like CompuServe or AOL that doesn't give you access to the directory structure of your site, you'll have to keep it very simple: one directory for the whole site. Primitive, but it works as long as the site doesn't get too large!)

The advantage of using exactly the same directory names and file structures in both places is that you can create relative file links and have them work both on your own computer and on the server.
 

• index.htm 
• index.html
• default.htm
• default.html

www.wccnet.org
www.wccnet.org/dept/cis/

What if the server can't find any of these, but the directory exists? It's then programmed to give you a directory listing of the files in that directory; it's even linked so users can click on any listed file or directory and get it on their screen! But as a Web site designer, you will probably want to avoid giving your guests a directory list! It's rather like coming to an apartment building and finding a locked door with a row of labeled buttons to push. You hope someone is home! 

On the Web, it's much nicer to enter by a well-designed and attractive home page!
 

When you use conversion utilities you may find that Web files are created with spaces in their names. For example, Microsoft Access has a utility to convert database tables and reports into Web files. This utility takes the names of Access tables, which can have spaces, and simply converts them into file names. This can cause lots of trouble if you're not cautious.
 

Caution: Capital letters can be a problem with MS Windows. Although Windows doesn't care about capitals vs. lowercase letters when it looks for files, it sometimes automatically capitalizes the first letter of a file's name when it saves the file for the first time! This can cause much frustration when you create links using lowercase letters. They work just fine when you test them on your Windows computer, but you find that on the server the links no longer work!

To avoid this problem, check the names of Web files and graphics on your computer using Windows Explorer or My Computer. If you find a file with a capital letter, click the name twice slowly to edit it, and change the capitals to lower case. Once changed, they (generally) stay that way.

Audience:

Objectives:

1. Describe the hierarchical organization structure of computer files;
2. Express the relationship between files in related directories using relative link notation;
3. Use file names that work well on all computers that access the Web;
4. Organize files on local disks in a way that parallels the organization of the Web site for which they are intended.

Module W50c:

Author:

Institution: