As a developer you need to become intimately familiar with how the directory system works.
Paths & URLs
Paths are the syntax we write to link and find files and folders on our computer.
When it comes to paths for a website they also turn into URLs. So paths and URLs are exactly the same when making websites.
The root folder
To start paths we need to understand how our folder is set up. The “root” folder is the primary folder for the website. Our Git repo. Where our homepage resides.
If the above image our root folder is
prehistoric-animals—you can see it in the title bar of the window.
Our homepage for our website is the
index.html file directly inside our
root folder. It’s the default file. The web server will automatically call it to display our homepage, therefore it must be named
Paths in the same folder
When creating a path within the same folder we only need to specify the filename of that folder.
Even if we’re inside a folder and need to get to another file in that same folder we just write the name of it.
We can start these paths with
./ and get the same effect:
./ is implicit, meaning it will be added if we don’t add it ourselves.
Moving into folders
To write a path that moves into a folder we specify the folder name, followed by a forward slash, then the file name.
If a folder has its own
index.html file we don’t need to specify that in the path.
Moving out of folders
When moving out of folders we use
../, then follow all the rules above.
If you need to go out of many folders, just add more:
../../ Out of 2 folders ../../../ Out of 3 folders ../../../../ Out of 4 folders etc.
Relative vs. absolute
All of the paths we learned above are all relative to the location you’re currently in—called document relative.
- If the path starts with nothing it means, “start where I am and go from there.”
- If the path starts with
../it means, “go up one folder from where I am and then go from there.”
But we can be very specific about our paths, making them absolute.
Where relative paths are in relation to the current location, absolute paths are in relation to the top-level Internet and URLs.
- If we start a path with a protocol (http[s]) it means, “Start at the top level of the Internet, replacing everything, and work from there.”
If our website was hosted at the domain
prehistoric-animals.com we’d get the following paths:
https://prehistoric-animals.com/ https://prehistoric-animals.com/plesiosaurs.html https://prehistoric-animals.com/dinosaurs/ https://prehistoric-animals.com/dinosaurs/apatosaurus.html https://prehistoric-animals.com/css/main.css https://prehistoric-animals.com/images/trex.jpg
This is how we write paths to other websites:
https://www.google.ca/ https://github.com/ http://www.starwars.com/databank/millennium-falcon http://www.amazon.ca/Dragon-Doom-Rose-Estes/dp/0880381000/
If we don’t want to write the protocol (https) we can just leave it off and the browser will automatically add it for us.
Be careful though, because the browser will add the same protocol that our website is currently running at.
- If we start a path with a
//it means, “start immediately after the protocol, replacing all domains, and work from there.”
//prehistoric-animals.com/ //prehistoric-animals.com/plesiosaurs.html //prehistoric-animals.com/dinosaurs/ //github.com/ //www.starwars.com/databank/millennium-falcon
If we only want to write paths within our domain but have more absolute-like paths, we can use root-relative paths.
- If we start a path with a
/it means, “start at the root domain and work from there.”
/ (goes to the homepage) /plesiosaurs.html /dinosaurs/ /dinosaurs/apatosaurus.html /css/main.css /images/trex.jpg
Where do we use this stuff?
- In HTML links, the
- In image tags, the
<img src="//in-here.com" alt="">
- When linking CSS, the
<link href="/in/here.css" rel="stylesheet">
- When using
In the URL bar of your browser to navigate around.
In Finder’s “Go to Folder…”,
- The command line on your computer, aka the Terminal.
Why doesn’t it work on my local website?
A few of the different path styles won’t work on your local website if you aren’t using a web server.
The reason these don’t work is because we are often using the
file:// protocol to view our websites. If you drag your HTML file directly to the browser, look at the URL closely, it should start with
file://—that means it’s only on your computer, not on the Internet.
/— root relative won’t work because it will link to the root of your hard drive, not the root of the domain because there is no domain.
//— protocol relative won’t work because your protocol is
file, where everything else on the Web is
These two forms of syntax specifically require a web server to work properly.
Here’s the different syntax you need to know for dealing with paths:
start with nothingor
./— single dot + slash
Start in the same location as this file and work from there.
Implicit, if you reference a filename that doesn’t start with a slash, e.g.
index.htmlis the same as
../— double dot + slash
Start in the same location as this file, go out a folder, and work from there.
Can be combined:
../../— goes out two folders
/— slash at the beginning
Start at the root domain and work from there.
//— double slash at the beginning
Start immediately after the protocol, replacing all domains, and work from there.
https://— protocol at the beginning
Start at the top level of the Internet, replacing everything, and work from there.
Paths on your computer
If you’re using these paths just on your computer, for “Go to Folder…” and the Terminal, there’s a few differences:
/— is the root of your computer’s hard drive
http://— will do nothing because you aren’t on the Web
And we get an extra starting character,
~: start in your home folder.
~/Desktop— go to my own Desktop folder
~/Dropbox— go to my own Dropbox folder