Files and File Systems

When working on a computer, no matter what you are doing, you are working with files and directories so it is critical to understand files, file types and directories. For instance, if you are writing a letter using Microsoft Word, you are working with a minimum of two files, the program file (winword.exe) and the data file containing the letter that you are writing.

In reality, you are probably using many more files than the two shown above. For the purposes of this course though, we will deal mainly with two types of file, text and binary. A text file is easily readable using a program such as Microsoft Notepad, or any of the many other text file readers/editors. Text files are easily transported to other systems while binary files may not be usable on other systems. The binary files we'll use are graphical in nature, having gif, jpg, or png as their extension. Working with these files will require a program that edits these types of graphics files. The three file extensions listed are graphics files each having advantages and disadvantages as compared to the others. Although there are many different graphic formats available, web pages primarily use these three. We'll explore those differences later in a section about graphics in particular. Later we'll also look at some other types of files that can be used within web pages/sites.

Understanding that no matter what we are doing on the computer, we are using files is a critical first step in web design as you will be creating files on your computer and then copying the file from your computer to the remote computer that acts as a web server. Of course, some files must be placed in particular locations so that the program using those files can find them, this necessitates the understanding of directories and directory structures.

File names in Windows are made up of a number of characters (maximum 254) followed by a dot (.) followed by a number of characters (maximum 255 - name) which make up a file extension. Common extensions denote how the file is used or which program is used to create/edit the file. Some of these file extensions are .exe for executable files (programs), .doc for Microsoft Word documents, .txt for text files and .htm or .html for web page files. The reason that most of these extensions are only three characters long is that before Windows 98, files were limited to eight characters, a dot, and a three character extension. With the introduction of Windows 98 SE, these limitations were expanded but many people still use the old 8+3 (eight character name, a dot, and three character extension) naming convention for users of older systems. The characters permitted in a file name are a - z, 0 - 9, and a few of the special characters such as _ (underscore), ! (exclamation) and a few others. It is best however not to use special characters other than the underscore due to differences between OSes.

To understand the difference between files and directories; I will use a real world item to help you understand, the file cabinet. You can think of a file as a page or pages of information stored in the cabinet. A file on the computer, no matter what it's type is also nothing more than information stored in a format that computer programs can read. Even another computer program is nothing more than information stored so that other computer programs can read (or execute) the file.

So, bottom line, a file is something that a computer can read and is a page of paper in our file cabinet analogy. Now that you have an idea of what a file is, we can move on to directory structures which are somewhat different depending on the Operating System. We will explore a little bit of two different Operating Systems, Microsoft Windows XP and Linux. We'll go into more depth about operating systems in the next section.

Files placed into the file cabinet must be placed in a way so that they can be found. It wouldn't do much good if you just threw papers into the drawers with no kind of organizaton. The same is true of computers; if you simply save files whereever with no kind of organization, it will be difficult later to find a particular file.

Although you may not understand the difference between operating systems yet, you'll need to understand that each OS (operating system) treats files somewhat differently. Our file cabinet is going to be used somewhat differently depending on which OS is used.

In the case of Windows, the entire cabinet is the computer, then you can have several disk drives in that computer, each disk drive is represented as a drawer labeled with a letter followed by a colon. In common setups, a: is the floppy disk drive, b: isn't used much anymore for a second floppy drive but you should be somewhat familiar with c: which is usually the first hard drive. D: will be either another hard drive or can be a CD or DVD drive; it just depends on the configuration of the computer.

Now, let's open a drawer (root of drive) to see that it contains a bunch of hanging folders (directories) and maybe a few papers (files) not placed within any of the folders. As you look through the drawer, you may find folders within folders (sub-directories). Also, as you look through, you'll see that each folder has a label attached to it so you can tell what it is. The same is true on the computer, each directory needs a name. In the Windows world, the character chosen to seperate folder names (directories) from one another is the backslash (\). I've already shown that the drive letter is denoted with a colon so when asking where a file is located, you can say "that file is on the c drive in the 'My Documents' folder which is in the 'stan' directory which is in the 'Documents and Settings' folder" or the easier way of giving the location like: c:\documents and settings\stan\My Documents or verbally, you can say "it's in c colon backslash documents and settings backslash stan backslash my documents." Much cleaner and easier to say and/or read.

My Documents is set up by Windows setup as a directory to contain all of a users personal files. Within My Documents, you should have directories to categorize your files. A few files may not fit into any category and may just be placed in My Documents but if you get too many files there, it will become difficult to find things in the large uncategorized mess of files that results.

With Linux, drives are somewhat hidden from the user with files and directories from all drives starting at the root of the file system (/). And yes, that is a slash instead of a backslash. In our file cabinet analogy, the drawers are directories in the root of the file system rather than disk drives as on a Windows system. The Linux OS uses slashes to seperate directories instead of the backslash as Windows does. Although this can be confusing, you'll need to know how both OS's treat file paths because many web sites are on Linux systems instead of on Windows systems. Chances are that you'll be using a Windows system to work on your web files and then put them on a Linux web server to view them over the web.

In case you didn't notice, I slipped another new term in on you in that last paragraph, file paths. A file path is simply a file name along with the directories to find that file, the path to the file discussed above, c:\documents and settings\stan\My Documents is the path to a file located in the My Documents directory. A similar path on the Linux OS would be /home/stan, where stan's documents are stored on the Linux system.

With Windows, you will have a root path to each drive, while with Linux, you'll have a root path to the beginning of the file structure. The root is simply as far up as you can go in the directory structure.

Figure 1
To see how this works in Windows, open "My Computer." If you don't have a "My Computer" icon on the desktop, you should find it on the start menu. If you still cannot find a "My Computer" shortcut, find the Windows Explorer (Not Internet Explorer) shortcut and use that. In the text that follows, simply replace My Computer with Windows Explorer and keep in mind that the figures shown may be slightly different. In the "My Computer" window, you should see each drive listed as shown in figure 1. You will probably have fewer drives shown than in the figure as I have numerous devices that act as CD/DVD and other drives.

On a Windows system, \ by itself refers to the root of the current drive. Windows users often do not understand the Windows file structure because Windows covers up file paths somewhat due to its graphical interface. It is still a good idea to know the file system though since the Save As dialog used with most Windows programs to save files allows you to change directory paths so that you can create a logical file structure and store files to an appropriate directory.

Figure 2
For purposes of this course, you'll need to know where files are stored in order to transfer those needed to the web server when we get to that point. You can start with this by creating a directory in which to store the files you'll need for this course. To create a directory for this course, open My Computer, Windows Explorer, or if you have an icon for it, My Documents. If using My Computer or Windows Explorer, navigate to the My Documents folder (folder is another term for directory). Once you have My Documents as your current directory, in an area not occupied by file names or file icons, right click to get a popup menu which will have New as one of the options. When you move the cursor to New, a submenu will open; move the cursor to folder as shown in figure 2, then click the mouse to create a new folder. A new folder will appear with the name "New Folder" highlighted. At this point, you may simply type the new name for the new directory. Something like webcourse or website would be an appropriate name. I use webstuff as the directory where I store all files for the various web sites that I work on.

With the Linux file system, / is the root (top level) of all directories disregarding what device or hard drive is referred to. This is an important difference that you'll need to understand because later on when you begin working on the Linux system to actually begin creating web pages, you'll need to know where (what directory) the web files must be stored in. You'll need to know the path to the files and directories which make up your web site.

You'll also need to understand that while Windows is not case sensitive, Linux is. On a Windows system, you cannot have filename.ext and FileName.ext in the same directory because they both refer to the same name when disregarding case. On Linux, you can have both in the same directory since Linux sees them as different files due to the differences in case. On a Linux system, the maximum number of characters for a file is 255. The rules are slightly different than on Windows so it is best to avoid the use of the special characters except for the underscore which is valid on both OSes. The use of other characters may cause problems with accessing certain files with special characters in the name. Although not a requirement, it is best to keep all of your files and directories all lower case. By doing so, you'll eliminate questions when coding pages such as "was that file name capitalized or not?" and eliminate problems for users of your web pages where the users are used to just having to type all lower case. Lower case file and directory names have become somewhat of a defacto standard. I, and other web developers will often ignore this all lower case standard for names that are usually capitalized so this is not a hard and fast rule, just a guideline.

One thing that I've seen trip up many people when naming files is the use of a space. On Windows, a space in the file name is perfectly valid, although it is valid on Linux also, it is difficult for a web page to locate file names that contain spaces so it is best not to use spaces in file names. As mentioned above, Linux is case sensitive so another thing that you will want to make sure of is that you are aware of the case of all parts of the file name, including the extension. It is easy to inadvertantly name a file using an all capital letter extension because Windows hides the file extensions by default and some programs (especially older programs) will default to using an upper case file extension. When working on a computer creating files that will eventually be copied onto a web server, you may want to change the defaults so that you see the file extension instead of letting windows hide them. To set Windows to display file extensions, Open Control Panel by clicking the start button, and selecting Settings, Control Panel. Then double click on Folder Options. Select the View tab in Folder Options and look through the list for "Hide extensions for known file types" and uncheck it. Once this is done, files will be displayed with the file name and the extension; this will allow file extensions to be displayed so you will know whether it is upper or lower case; again lower case is preferred but not necessary, what is necessary is that any references that you make to the file be the same case as the actual filename. I've seen many people wonder why a picture isn't showing up in their web page only to find that the file is saved as picture.JPG and the reference to the file is picture.jpg.

Documents for both Windows and Linux will often refer to the directory "tree." In directory tree diagrams, the tree is often represented upside down with the "root" at the top of the diagram as so:

Linux directory tree

      /
      |
     / \
    /   \
 home   usr
  |\     |
  | \   bin
stan elacey

Windows directory tree

                       c:
                      / \
                     /   \
 Documents and Settings  Windows
            |               |
          stan            system32
          /  \              |
My Documents  Desktop     drivers
      |                     |
   webstuff                etc

Note how the root is at the top and branches out from there in the upside down tree model. Both of the above examples show only a small portion of the tree as it quickly becomes quite cumbersome to display the entire tree containing many many directories (branches). This type of diagram is only useful when displaying a small part of a tree as in these examples. To display the full tree for either OS would require many many pages and quickly become unusable.