Understanding Directory Structure (Windows)
One of the most common pitfalls in building/publishing webpages is a lack of understanding of directory structure. Without this basic foundation, many people are lost when it comes to correcting link problems in their website.
When you're creating a website, it's important that you understand WHERE your files are located WITHOUT the common shortcuts. When the website is published for everyone to view, those shortcuts won't be there and they don't work within a web page link to begin with.
In order for the links to work properly, the server needs to know where they are truly located. If it can't find them, it will return a broken link. This is a common reason for broken image links.
A basic understanding of the information here may help.
Helpful Terminology
Term Definition
A device for storing and/or retrieving data such as a hard drive, CD-ROM drive, or Drive floppy disk drive. In Windows, a letter is assigned to each drive for easy management.
Also known as a "folder", a directory is a collection of files typically created for Directory organizational purposes.
A file is a unit of (usually named) information stored on a computer. It may be a File document, a webpage or a wide range of other types of information.
Parent Directory The directory that is one level above the current directory.
Subdirectory A directory located inside a directory.
Files Hopefully, you know that most of what you create on your computer is stored as "files." Files can take on many formats and attributes but in our case, we'll be looking at webpages and related files. Almost all files have what is known as a "file extension." A file extension is the last part of a file name and follows a "." The purpose of the file extension is to define the type of file.
Mostly with web publishing, you'll be dealing with webpage (html) files and images. The most common file extensions in web publishing are listed below. Note, I've only included those extensions supported by UWG servers.
• Web pages • .html Basic HTML • .htm Basic HTML • .php Hypertext Pre-processor • Images • .jpg JPEG Image - Best for photography used on the web • .gif Graphic Interchange Format - Best for images with text and simple color like cartoons. Also supports transparency and animation.
Directory Basics It may be easier to explain directory structure with an analogy. So think of your computer as a large file room, filled with file cabinets. Each file cabinet contains folders and files. This is the basic premise of directories. Directories are very similar to file cabinets. They can hold subdirectories and files.
Location, location, location
Just like you have a physical address for your residence, each directory and file has a "path" which indicates its location within your hard drive. Whenever you link to a file, you'll need to let the browser know where the file is located. This can be accomplished by an "absolute" or "relative" link.
Absolute and Relative Links Absolute Links are like full addresses. These links are best used for external links such as other websites. For example, "http://www.westga.edu/departments/index.php" is a full web page address. With an absolute link, it doesn't matter where the file that contains the link is located because the browser is provided with the full address.
Relative Links are paths which are "relative" to the file linking to it. In other words, if your index.html page links to another page in the same directory you only have to type "nameOfOtherPage.html" for the href="" attribute. The browser will begin with the path of the index.html page to determine the path of the image. Most web editing software will use relative links when you insert a hyperlink in your document. Because you do not have to repeat the domain name in each link, they are easier and quicker to type. If your links aren't working, here are some clues to help you with relative links. File Location Link Requirements
If the linked page is located in the same directory: your link should only list the file name. (i.e. mystuff.html)
If the linked page is located in a your link would list "../" before the file name to indicate "move to HIGHER directory: the parent directory"
If the linked page is located in a your link would list the sub-directory name before the file name. (i.e. sub-directory: mysubdirectory/mystuff.html)
Drives, Directories & Files - An Easy Exercise Sometimes the best way to introduce you to directory structure is to start with a simple exercise. I find it very helpful when I'm troubleshooting over the phone. So let's find the exact location of our "My Documents" folder - WITHOUT using the shortcuts on our desktop or start menu.
1. Start by double clicking on "Start" then "Computer."
Once this window is open, you should see a listing of your "drives". Your drives are like the main file cabinet which stores all of the directories and files. In many cases you'll have only one "local" disk/drive. If you have more than one, your "C" drive is the most common letter given to the default local drive.
2. Double click on your local disk/drive. (This is usually your "C" drive). You should see a listing of directories and files. Click on Users
4. If you're using Windows XP or 2000, double click on the sub-directory called "Documents and Settings." Your view now should look something like the image below.
5. Double click on the directory with your user name. (Note, if you don't actually log in to your pc, try "Administrator" OR "Default User"). It's important to note that EACH user will have their own "My Documents" folder, so be sure the one you find is your own!. So my path to "My Documents" is "C:\users\its-pdean1\My Documents".
Why is this exercise important? It can help you in many situations where you're trying to find a file. But mostly, in web publishing, understanding where files are located and how to find them can help you troubleshoot broken links.
By walking through this exercise, you can easily see a basic directory structure on your computer. Hopefully, this will help you understand the directory structure of your website.