Directory Navigation & Command-Line Interfaces and What They Mean For Web Developers
Comprehension of command-line interfaces is a necessary skill for web developers.
Using directory structures is an important and necessary skill to learn in order to truly utilize the underlying technology of web sites. Because web servers are so intimately tied to the directory and file structures of the computers they are run on, knowing how to use and manipulate these directories using a command-line interface provides a great deal of insight into how to best utilize the organization of files in your web site, particularly larger web sites.
The 'cd' Command: In DOS and in most UNIX shells, there is a command "cd" which stands for "change directory". When you are working in a command-line environment, you are navigating through the directory tree, the structure that is somewhat like a real tree. There is a trunk and root area, followed by branches, followed by leaves.
Imagine that:
- your files are the leaves.
- the directories (or folders) are branches.
- the root and trunk of the tree is the place where all the lowest branches come together.
When you are working in a command-line environment, you can only be on the root (trunk) of the directory tree, or on one of the branches.
In order to move into a deeper directory, you issue the command 'cd' followed by the name of the branch you want to move up into. So if you were in the directory 'graphics' and you wanted to move into the directory 'thumbnails that was inside of the 'graphics' directory, you would give the command 'cd thumbnails' and be placed in that directory.
Two Shortcuts: Now there are two shortcuts you should know about here: The period "." is a shorthand way of referring to the current directory that you are in. If you were in the directory 'thumbnails' as above, you could issue the command "cd ." and you would be instantly whisked away to exactly where you already are. You would not move anywhere, because you just said 'change the directory to where I am at' or in other words 'move me to here.'
The other shortcut is '..' or two periods. This shortcut refers to the parent directory. If you were still in the thumbnails directory, and you typed "cd .." you would be moved back to the 'graphics' directory because the graphics directory is the parent of the thumbnails directory.
The Slash: You can combine these commands too. In order to do that you use the '/' in UNIX and the '\' in DOS. (Macs usually use ':') So for instance if you were in the 'graphics' directory and wanted to move to the products directory inside the thumbnails directory, you type 'cd thumbnails/products/'. Now that you are in the products directory you can type 'cd ../..' to get back to the graphics directory without having to stop in the thumbnails directory.
Using these two commands you can run all the up and down a directory structure within a hard drive or a floppy drive. At this point you should play around with these commands in a DOS window or in a UNIX command-line shell. Get a feel for moving around in the directory tree using these commands. Remember that DOS uses the backslash (\) to separate directories and that UNIX uses the foreslash (/).
The Slash Unleashed: But you'll find one other shortcut that will help as well. If you just use a slash all by itself with nothing in front of it, you are referring to the bottom of your tree, the trunk or root of the tree. Most of the time this is the "root" of your hard drive. On DOS machines this will be where you can see 'C:\>' or 'A:\>'. Or on UNIX you will just see the root called '/', one lone slash all by itself.
If you were in the 'products' directory inside the 'thumbnails' directory inside the 'graphics' directory inside the 'web' directory which was at the root of your hard drive, and you wanted to get the root of your hard drive, you could either type 'cd ../../../../' or you could simply type 'cd /' and be instantly whisked to the root of your file structure. When you use a file reference that starts with a slash in an HTML tag, you are making a "root relative" reference because your command is looking for a file based on it's location in relation to the root rather than in relations to the current HTML document.
If you want to get more technical: One crucial difference to know is that the root of your web site is not usually the root of your hard drive. Most of the time you will find that your web site's document tree's root is actually buried within your hard drive's file system. This becomes important where you're working with CGI scripts and with other file system level commands, but not with HTML documents which work on the 'web system' level.
Remember that if your computer is a web server, you don't want to put all of the files from your computer on the web, just the web site documents, the HTML files and images and such. So the web server software is set up to look at a particular directory that is the root for the web site. That 'Web site root', like I wrote in the last paragraph, is not the root of your hard drive.
How these shortcuts affect HTML files: In the same way that you can use '.', '..' and '/' to move and refer to other files from a command-line interface, these same conventions are used to refer to other refer to other documents in <A HREF> tags and <IMG SRC> attributes. Any time you're writing HTML that needs to link to another file, or include an image, these shortcuts will help you organize your files better.
Why putting a web site onto a CD is non-trivial: Now imagine that someone wanted to make a CD of his web site. When he puts them on the CD, he will just open the files using the directory structure, having the browser access the computer's files directly rather than through a web server. He put all of his HTML files at his web site's document root, the root of the web site's files. But since he was now going to access his files through a plain directory structure, he was removing the web server from the set up of his web site. His links to other files that used slashes no longer referred to the same place as they did before. When he was building his web site in a web server, the '/' slash character referred to the web site's root, but now, since the web server software is gone, the '/' slash now refers to the root of the hard drive.
It's a bit difficult to follow, because 99% of the time, web developers never have to worry about the actual file structure of the hard drive (or the CD), they just work with the web server's document file structure. Once that web server is no longer part of your environment, you've got to be very careful about how to refer to the root when you are making links.
If you do find yourself in the position of making a CD based version of a web site, you will save yourself a lot of trouble by never using a root reference. Don't use a "root relative" link like <IMG SRC="/graphics/header.gif">. Instead use a "document relative" link like <IMG SRC="../../graphics/header.gif"> or <IMG SRC="../graphics/header.gif">
Restate the Thesis: Using directory structures is an important and necessary skill to learn in order to truly utilize the underlying technology of web sites. A good way to grasp the concepts is to get a DOS window open or telnet to a UNIX box and start moving around. It's easy to see why these concepts are difficult to get a good conceptual hold of, now that nearly anyone who has come into the computer field in the past 7 to 8 years has never used a command-line interface. The graphical user interface, for all of it's power, is not what the underlying technologies of computers are built on.
Take your time and play around with the concepts I've presented here. Hands on work is the most effective means of developing these skills and conceptual models.
