Understanding URL directory structure
Typically a web server may contain hundreds, if not thousands, of files. For practical use, the files are organized into manageable directories (folder). For instance, Products related files could be in a directory called products; similarly, files for services could be under a directory called services. You can also have nested directories: directories with directors. Think of nested directories forming a hierarchical structure that represents branches of a tree. See figure 1 as an example.
Here is some terminology to help you understand this file tree structure. A file system consists of all the files and directories forming a file tree. A root directory is the most top level directory; put in other way, a root directory contains all other directories and files. To locate a file in this file system, use its directory path. A directory path includes names of each of the directories and files from the root directory to the specific file or folder you want to access. Although in Windows and MS-Dos a backslash (\) i used to separate directories, on hosted web servers directories are separated by forward slashes(/). See figure 2 a and b.
| Figure 2: a. MS-DOS uses a backslash (\) to separate directory names: |
b. Web server uses a forward slash (/) to separate directory names:
URL directory referencing in links
Let’s look at figure 1 closely to understand the file paths to properly construct links in XHTML. Suppose you want to link to the file called Dell.asp. A full path to this file is /Products/Computers/Dell.asp. How did we get this file path? When moving down from the root directory, use the name of each directory and forward slash until you find the desired file or folder to which you want to link. You can also move in other direction, meaning from bottom of the tree to top. When you move up the file tree, use two dots and a forward slash (as ../) for each directory. The ../ syntax means moving one directory up in the file system hierarchy. For example, if you wanted to move to the root directory from Dell.asp, your link path will consist of:
../../
The first ../ above takes us out of the Computers directory. The second ../ takes us out of the Products directory. Together ../../ syntax takes us to the root directory.
Whether to move up or down a file system tree is very important when it comes to creating links. The direction of moving on a file system hierarchy is dependent on two things:
- what you want to link to (ask yourself where do you want to go?)
- from which file you want to make a link (ask yourself where are you now on the file tree?)
Assume you want to make a link to hp.asp from Dell.asp. Both of these are in separate directories and this requires you reference the specific directory name for proper functioning of the link. To get us started, answer the two questions listed above to ask yourself when creating links. We want to make a link to hp.asp and we are in the Dell.asp file.
So where are we on the file tree (figure 1)? We are in Dell.asp because this is where the link will be placed. Will be move up or down the tree to make the link? We see we can only reach hp.asp by moving up the tree. So if we start moving up, we first see the directory Computers. We need to move out of this directory. To do this use the syntax ../, as indicated earlier. This will take us to the products directory. Now, we need to move down to reach hp.asp. As we move down, we encounter the Printers directory. When you move down the tree, you simply use the directory name, as Printers/. Once we are in the Printers directory, all we need to do is use the destination file name, which is hp.asp, to construct the link. So our final link path will consist of:
../Printers/hp.asp
Table 1 shows some examples of linking paths based on the file system shown in figure 1.
| Table 1 linking path structure based on file system hierarchy shown in figure 1 | ||
|---|---|---|
| Current location | Destination location | Linking path to use |
| Root | Products | Products/ |
| Root | Computers | Products/Computers |
| Root | Printers | Products/Printers |
| Root | Dell.asp | Products/Computers/Dell.asp |
| Root | cell-phone.asp | Services/Repair/cell-phone.asp |
| hp.asp | choose.asp | ../../Services/Installation/choose.asp |
| cell-phone.asp | Dell.asp | ../../Products/Computers/Dell.asp |
When constructing links, keep in mind that directory naming follows conventions specific to an operating system, for instance, case sensitivity of names of files and directory. Case sensitivity should be address when constructing links to avoid broken links. Assume our figure 1 file structure is on a UNIX system. If, for example, you wanted to link to a file called Dell.asp from cell-phone.asp (see table 1 if you are not sure of the correct file path to use), you need to use the exact names you see for your files and directories. You cannot, for example, use
../products/COMPUTERS/dell.asp
In this case, your link won’t work because these directories may not exist. Even if they existed, you may not be accessing the right file. To avoid this situation, use proper casing for your files and folders. If your link is not working, make sure you are using the correct file path and that you are using the proper file names. It is also recommended to check the existence of the file before use in links. This also goes for directories.