File Structure

File structure is the hierarchy of folders or directories on your disk or hard drive. It is also called directory structure or directory hierarchy.

How to organize your disk for this class

First, create a folder on your zip disk called Internet to house all of the files you create for this class.

Note: the zip drive is now the F drive on the Humanities Lab computers, not the D drive.

Inside the Internet folder, create a separate folder for your raw photoshop files and scanned images, and another folder to house only your Web site files.

IMPORTANT: For the Web, DO NOT USE SPACES in file names or folder names. Get in the habit of naming your folders and files without spaces. You can use an underscore or a dash to break up a word.

Inside your WWW folder, make a folder for each assignment. Name these folders: personalsite, webart, finalproject, and postmodernism.

Remember: NEVER name a folder or file with spaces

 

The address field displays the path or file structure. Here we can see that the folder www is inside the folder called internet. If we double-click the "personal" directory, notice how the address changes:

IMPORTANT: By setting up folders like this on your zip disk, you are creating a directory structure. When you are working on HTML pages that are part of your personal site assignment, you will save them in the personal folder. When you are working on HTML pages that are part of your Web art and Javascript assignment, you will save them in the webart folder.

IMPORTANT: Each folder should have its own default file, named default.htm. You will have 5 files called "default.htm" each one will be inside a different folder and will serve as the start page or front page for each assignment.

Setting up your table of contents page

After you have set up your zip disk with all of these folders, the first thing you will do is create a page that will serve as a table of contents for your assignments.

Create a new HTML page that lists each of the following assignments: Resume, Web aesthetics paper, Personal HTML Web site, Web Art assignment, Final Project and Postmodernism Final Exam.

As each assignment is completed, you will link to it from this table of contents.

See an example table of contents

This table of contents page should be saved as default.htm and saved directly inside your www folder, but not inside any of the other four folders

Why File Structure is Important for Understanding Linking

With absolute links, you link to an outside external Web site somewhere on the Web. With relative links, you link to an internal file that you created within your Web site.

Because each assignment includes many files, keep the files for each assignment seperated into different folders. This way, when you are working on your Personal Site, you know to save all of your HTML files

Here we are inside the personal folder. Say you want to link your file resume.htm to the file called called links.htm. If both of these HTML files, resume.htm and links.htm are in the same folder, (in this case the "personal" folder, then the link would look like this:

<a href="links.htm">Links</a>

Remember, to make an absolute link, you must include the entire path to the file on the Web, starting with http (for example, http://nmc.loyola.edu/intro ) but to make a RELATIVE link, within your own file structure, YOU DO NOT NEED http, or a drive letter.

All that matters when making a relative link within your file structure is the directions from one file to another file. Think of it like this: the file with the link code in it asks: Where is that other file IN RELATION to where I am?

How would you link to your resume.htm file from the table of contents page, which is named default.htm and is sitting outside of the personal folder?

Give Directions: The Table of Contents page (default.htm in the illustration above) asks, "How do I get to resume from where I am?"

If we add this code to the default.htm table of contents file will the link work?

<a href="resume.htm">Resume</a>

Why or Why Not? Look at the file default.htm in the window above. Now read the HTML in the link and pretend that you are the browser and try and follow the instructions. The link tells us: look in the same folder that you are in and you will find the file resume.htm. But if we look, the file resume.htm is not inside the www folder with default.htm anymore. It now belongs inside the "personal" folder and if we click inside the personal folder, we will then see the file resume.htm

So in order to make our link from the table of contents page to the resume file, we have to revise the directions: First look inside the folder called Personal, and THEN you will find the file called resume.htm

The link will now look like this:

<a href="personal/resume.htm">Resume</a>

Now we can successfully link to the file because resume.htm is inside the personal folder.

Relative links work in relation to the file with the HTML link code. If we are going to make our link on the table of contents page, then we give directions from the table of contents page.

What if the file I'm linking to is up one level from where I am?

What if we wanted to reciprocate the link, and make a link from our resume.htm page back to the table of contents page. How would we give directions to the table of contents page from resume.htm?

In order to give directions from the resume page to the table of contents page we have to say:

Move up one directory, outside the one we're currently in (which is the personal folder) and into the www directory which is up one directory. If we click the UP button on the browser, we will then be in the www directory, which is where the default.htm table of contents page is.

How do we tell the link to look in the directory above it?

We do this by using ../ before the file name

(dot-dot-slash) ../ indicates "go up one folder level." So to link from resume.htm to the default.htm table of contetns page we have to say go up one folder level and then look. The code would be:

<a href="../default.htm">Table of Contents Page</a>

../ is used to indicate "up one directory"

What about this:

If we forgot to use the ../ before the file name and instead placed this code on the resume.htm page, would the link work?

<a href="default.htm">Table of Contents Page</a>

Where would that link take us?

Can you have more than one file named default.htm?

Think of it like this: The file with the link says:

"I know where I am. Where are you in relation to me? Are you right next to me in the same folder? Or do I have to look inside another folder before I can see you?"

A Fun Game of Drag and Drop File Structure

Back to Linking with the anchor tag

Jump down links