File Paths

When working with the web sites we will be linking different pages together, adding images to our web pages and linking to resources to make our website work.

Paths are the syntax we write to point to different files folders on our computer. There are two types of Paths:

Relative Paths
Absolute Paths

Relative Paths

When we link to a file or folder on the same computer using the relative location from the file we are adding the link to. Let's say we have the following folder structure

- mtm6130/
    - week-1/
        - index.html
        - about.html
        - images/
              - birds.jpg
        - projects/
              - example-1.html
              - example-2.html

Now in the above folder structure we have:

week-1 folder which contains two files index.html and about.html and two folders images and projects
images folder contains one file birds.jpg
projects folder contains two files example-1.html and example-2.html

Paths in the same folder

Now if we want to write a path from index.html file to about.html file.

The path in this case will be simply about.html since the file is next to the one we starting from.

We can add ./ in front of the file to get the same result.

./ simply suggests that the file is in the same folder, it is added automatically if we do not add it.

./about.html is same as about.html

Moving into folders

For moving into folders we write a path with the folder name following a forward slash /

Let's write a path from index.html file to the birds.jpg image

In this case we will have to move into the images folder point to the birds.jpg file

The path from index.html file to the birds.jpg file will be images/birds.jpg or ./images/birds.jpg

Moving out of folders

For moving out of a folder we use ../ notice the two dots in front of forward slash which means moving out of the current folder

Let's say we want to write a path from example-1.html file to index.html file

The path will be ../index.html first we are moving out of the current folder ../ which will bring us out from projects folder to the week-1 folder and then we are pointing to index.html

Let's go one step further, we will write a path from example-1.html to birds.jpg here are the steps:

Move out of the projects folder
Move into the images folder
Point to the birds.jpg file

Here is how the path will be written ../images/birds.jpg

If we were to write a path from example-2.html to the birds.jpg image it will be exactly the same as both example-1.html and example-2.html are in the same folder.

Absolute Paths

Absolute paths are not in relation to the current file and start with a protocol http(s):// which means they are pointing to files in relation to the top-level Internet and URLs. Example: https://apple.com, https://algonquincollege.com

# File Paths

# Relative Paths

# Paths in the same folder

# Moving into folders