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 computer 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>
Path to a file in the same directory
Look at the file path below:
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, write the name of the other directory, a slash and then the file name. For example, referring to the picture, if the file were in the 'lower level directory', and called 'example_file_3', you would write the following:
To go down more than one level, repeat the above pattern. For example:
Path to a file on a higher level
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, referring to the picture, if the file was in the directory one level up, and called 'example_file_4', then you would write the following:
To go up more than one level, repeat the above pattern. For example:
Here is a link that goes to a sample page. The file path goes to the next level up (../), into a directory on that level ('higher_level'), and then two levels down ('lower_level', and then the sample page file itself). The file path looks like this: