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.