Understanding File Paths

As you no doubt know by now, HTML is simply a recipe for a browser, with 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 = “celineshouseinflorida.jpg”>

it knows to display an image called celineshouseinflorida.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, in this case) 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, once you’ve moved beyond very small, it’s quite 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.

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 have a file inside a subfolder in your site (which is typical enough). 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 that you have a file inside a subfolder in your site (which is also typical enough). 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 disgustingfood. The code would be

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


2 thoughts on “Understanding File Paths

  1. Pingback: Publishing: Electronic Communications «

  2. Pingback: Chinese Film HTML Exercise «

Comments are closed.