
/ - 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.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. The reason these don’t work is because we are often using the file:// protocol to view our websites.
The command line on your computer, aka the Terminal.Ī few of the different path styles won’t work on your local website if you aren’t using a web server.In the URL bar of your browser to navigate around. When using background-image in CSS: background-image: url("in/here.jpg").
If we start a path with a / it means, “start at the root domain and work from there.”. 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 immediately after the protocol, replacing all domains, and work from there.”. 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.īe careful though, because the browser will add the same protocol that our website is currently running at. This is how we write paths to other websites: If our website was hosted at the domain we’d get the following paths: If we start a path with a protocol (http) it means, “Start at the top level of the Internet, replacing everything, and work from there.”. Where relative paths are in relation to the current location, absolute paths are in relation to the top-level Internet and URLs. it means, “go up one folder from where I am and then go from there.”īut we can be very specific about our paths, making them absolute. If the path starts with nothing it means, “start where I am and go from there.”. / Out of 2 foldersĪll of the paths we learned above are all relative to the location you’re currently in-called document relative. If you need to go out of many folders, just add more. From: apatosaurus.html to: logo.svg - Path. From: apatosaurus.html to: main.css - Path. From: apatosaurus.html to: pterosaurs.html - Path. From: pterosaurs.html to: index.html - Path: dinosuars/. If a folder has its own index.html file we don’t need to specify that in the path. From: index.html to: logo.svg - Path: images/logo.svg. From: index.html to: main.css - Path: css/main.css. From: index.html to: tyrannosaurus.html - Path: dinosaurs/tyrannosaurus.html. To write a path that moves into a folder we specify the folder name, followed by a forward slash, then the file name. is implicit, meaning it will be added if we don’t add it ourselves. From: index.html to: pterosaurs.html - Path. From: apatosaurus.html to tyrannosaurus.html - Path: tyrannosaurus.html. From: index.html to: pterosaurs.html - Path: pterosaurs.htmlĮven if we’re inside a folder and need to get to another file in that same folder we just write the name of it. From: index.html to: plesiosaurs.html - Path: plesiosaurs.html. When creating a path within the same folder we only need to specify the filename of that folder. The web server will automatically call it to display our homepage, therefore it must be named index.html. Our homepage for our website is the index.html file directly inside our root folder. If the above image our root folder is prehistoric-animals-you can see it in the title bar of the window. The “root” folder is the primary folder for the website. To start paths we need to understand how our folder is set up. So paths and URLs are exactly the same when making websites. When it comes to paths for a website they also turn into URLs. Paths are the syntax we write to link and find files and folders on our computer. As a developer you need to become intimately familiar with how the directory system works.