About file paths

In your web design you will often need to specify the location of another file, and to do that you need a ‘file path’. A file path tells the browser where to look for a file. Have a look in the address bar above and you'll see the file path to the HTML page you are viewing.

In the code below, the highlighted part between the quote marks is the path to a file.

<a href="lower_level_directory/example_file_3.htm">link to example file 3</a>		  
		  

This file path tells the browser to look in a directory called "lower level directory" to find a file called "example_file_3.htm".

Path to a file in the same directory

Look at the file path below:

example_file_1.htm		  
		  

You're probably wondering 'what kind of a path is that, it's just the name of a file'. It's like that because it's the simplest kind of file path. If you were writing the path to a file adjacent to the one you are working on – i.e. in the same directory – then this would be all you would need. Just enter the name of the other file.

For example, if were working on 'example_file_2.htm' in the picture, and you wanted to enter the path to 'example_file_1.htm', then the file path is the name of that file. However, if the file were in another directory, you would need to go 'up' or 'down' at least one level, and the path would look a bit more like the highlighted example you looked at earlier.

Path to a file on a lower level

To write the path to a file in a lower level directory (i.e. a directory that's inside the current directory, or subdirectory), write the name of that other directory, a slash and then the file name. For example, if the file was in 'lower level directory', and called 'example_file_3', you would write the following:

lower_level_directory/example_file_3.htm		  
		  

To go down more than one level, repeat the above pattern. For example:

lower_level_directory/another_directory/example_file_13.htm		  
		  

Path to a file on a higher level

You may need to write the path to one level 'up' (i.e. a directory that contains the current directory, the 'parent' directory of the current directory if you like).

To write the path to a file in the directory one level up, write two full stops and a slash (../) and then the file name. For example, if the target file was in another directory one level up from the file you were working on, and called 'another_example_file.htm', then you would write the following:

../another_example_file.htm	  
		  

To go up more than one level, repeat the above pattern. For example, if that target file were two levels up then you would write the following:

../../another_example_file.htm			  
		  

Example

Here is a link that goes to a sample page. The file path shown below would be used to direct the browser to that page from the one you are now reading. It goes to the next level up (../), into a directory called 'higher_level', and then down into a directory called 'lower_level', which contains the sample page html file.

../higher_level/lower_level/sample_page.htm	  
		  

You can see this file path in the address bar in the sample page.