Understanding File Paths

HTML is nothing more than a set of instructions on how to display a page of information.

For example, if the browser sees

<h1>Celine Dion Appreciation Society</h1> 

in a bit of HTML code, it knows that it should display the phrase Celine Dion Appreciation Society styled as a header (typically, bigger & border, unless this default appearance is overridden by a stylesheet).

Similarly, if it sees

<img src = “celinedion.jpg” alt=”Celine Dion”>

it knows to display an image called celinedion.jpg at that point in the page.

Naturally, if it sees

<a href = “rene.html”>Rene Charles’ Blog</a>,

the browser knows to make a link. The phrase Rene Charles’ Blog will be underlined and blue. When clicked, the link will cause the page rene.html to load into the browser.

These two examples illustrate file paths. In both the image and the link example, the file used (a jpg file and an html file, respectively) is in the same folder as the HTML page it would appear in.

There’s no law against that. In fact, it’s perfectly fine to do that if you have a very small site.

However, it’s usually frustrating to have all your files in the same place.

On your own computer, you use folders to group files, projects, etc. On your web site, you can do exactly the same thing, as long as you understand how to code the file path.

The important thing to remember is that with these kinds of paths, we are showing a relationship between two files:

• where we are: the file we are editing
• where we are going: the file we want to link to, or the image we want to use in our page

Fortunately, it’s easy once you’ve done it a couple times. Here are some examples:

Down one folder: Put the folder name and then the file name:

example: “images/celinedion.jpg”

Down two folders: Put the folder name, then the next folder name, then the file name:

example: “images/celine/mansioninflorida.jpg”

Up one folder: Put ../

example: ../index.html

Up two folders: put ../../

example: ../../index.html

Concrete Examples

Imagine that you are editing a file inside a subfolder in your site. To have a link take you back to the home (“index.html”) page, you’d put the following:

<a href = “../index.html”>Home</a>

Imagine again that you are editing a file inside a subfolder in your site. To have a link take you outside that folder and then into another folder and then to a file, you’d type the following:

<a href = “../theotherfolder/thefile.html”>Home</a>

Imagine that you are putting a link (in your index.html page) to a file called chicken.html which is inside a folder called kfc which is itself inside a folder called unpleasantfastfood. The code would be

<a href = “unpleasantfastfood/kfc/chicken.html”>KFC Specialty</a>

A Special File Name: index.html

Files named index.html have a special purpose: they shorten the URL.

Home pages of sites are typically named index.html. They will load automatically. For that reason, the two URLs below point to the same place:

• www.ilovebeiber.com
• www.ilovebeiber.com/index.html

If we don’t have an index.html file, then our URL needs to specify the file:

• www.ilovebeiber.com/homepage.html

Similarly, if a URL ends in a folder name rather than a file name (ie there’s no extension at the end of the URL), the index.html file inside that folder will load automatically

• www.ilovebeiber.com/tour
• www.ilovebeiber.com/music
• www.ilovebeiber.com/store

In short, all of these URLs will work if there is an index.html page inside the tour, music, and store folders. If there is no index.html file in each, the URL will result in the browser displaying a 404 “File Not Found” error.

This pattern applies not just with URLs you enter in the browser, but to file paths too.

For that reason, the following paths point to the same file:

• <a href=”movies/index.html”>Movies</a>
• <a href=”movies/”>Movies</a>