DIY – Relative Path Links
This week’s blogpost will be how to create relative path links, and what they are useful for. This will allow you to not only create links to pages within folders on your web space, but to create links on those pages that refer back to the index page and pages within other folders.
Firstly, you’ll need to understand how to create a link. Links involve the following:
Step 1 – Create an anchor tag, the first of which contains an “href” followed by an equal sign. We will put the link to the site you’re trying to reach here. Put whatever words or text you want between the tags.
Step 2 – Decide whether you want a relative path or an absolute path. An absolute path is necessary if you want to reach a web site other than your own. When you do this, you include the full url, including the “www.” at the beginning. A relative path only refers to a url within the domain of your website. To make a link to your main page, for instance, use “index.html” for the url.
Step 3 – To reach a page within a subfolder, you can simply refer to that folder, followed by a slash and the name of the page you are trying to reach. For example, to refer to an image in an “images” folder, your link should be “images/imageA.jpg.” This also works for html pages if you happen to keep web pages categorized into folders.
Step 4 – Now, this is only useful if the link is on a page in the root directory, but what if you have a web page within a subfolder? Trying to access the index page or another subfolder from there isn’t possible with this script. So you have to tell the browser to take a step back out of the subfolder, and start from there. To do this, add a “../” to the beginning of your relative path link. For instance, if you’re trying to refer back to the home page, you would need to use “../index.html” instead of just “index.html.” This is also the case for pages in other subfolders – “../images/imageA.jpg” instead of just “images/imageA.jpg.”
Step 5 – It’s also important to apply this to your css in any web pages you have in subfolders. instead of “style.css,” you need to refer to “../style.css.” If you don’t follow these instructions, or those from the step above, your page will inexplicably lose all it’s styles, and none of your links will work.
Hopefully this will be helpful with improving your websites. It’s certainly made my life easier.
– Dan Pinsky