When you're building a series of web pages, you may need to refer to documents outside the directory/folder that your current document is stored in. I am using as examples, something similar to the ITSE1411/2402 directory structure to illustrate.

Below is a four document/folder level illustration. I will use this to show how you refer to various documents from within your .htm/.html files.

1. • You're setting your index.html document to refer to the css document, myStyles.css.
   • Since myStyles.css is at the same "level", that is, in the same directory/folder, you would refer to it as "myStyles.css".
2. • You also want to refer to myStyles.css from homepage.html.
   • homepage.html is not at the same level. Its parent directory, assignment2, however, is. Here is where a little knowledge of the unix directory structure is useful. In unixspeak, the dot (.) (aka period) refers to the current directory. Two dots (..) refers to the directory containing the current directory.
     Your current directory is assignment2. The directory containing it is public_html. In order to point to a file that's in your current directory's parent, you type a ../ before the filename. So, in order to link to myStyles.css from homepage.html, you will type "../myStyles.css".
3. • You want to refer to flower.jpg from index.html.
   • flower.jpg is inside a folder/directory named images, which resides at the same level as index.html. You can't just specify the filename, flower.jpg. You have to specify where flower.jpg is. First you specify the directory name (images/), then the file name (flower.jpg) -- "images/flower.jpg". To specify picture.jpg from homepage.html, you have the same relative relationship: "images/picture.jpg". Note that the two images directories are in completely different places.
4. • You want to refer to flower.jpg from homepage.html.
   • If you want to keep all of the images for your website in one place, then a logical thing to do is to have an images directory/folder at the root level of your page (where your index.html file is). This means that however deep the directory nesting gets, you have to keep track of the levels and put the requisite number of "../" units in to refer back to the top level directory. We only have four levels, and only two of those have html files in them.
     In the situation illustrated here, to be able to have flower.jpg rendered on homepage.html, the link would reference "../images/flower.jpg".
5. • You want to refer to picture.jpg from index.html.
   • In this case, you have to specify a longer pathway. Similar to #3, above, you have one more level of directories between index.html and picture.jpg. "assignment2/images/picture.jpg".