HTML 07: Relative paths
What do you do when you're planning a vacation with the family? You get out a map - or go to Google Maps - and start at your current location, and then trace a path to the destination. The directions themselves are relative to your location. If you were in another city, they'd be different directions, right?
To figure out a relative path for your links, it's the same deal: you start from the page which has the link, and then you trace a path through your folders until you find the file you need to point to. (There are other kinds of paths too, but we'll get to those later on.)
Let's work through a couple of relative paths (and fix the lounge at the same time).
Linking Down into a Subfolder
1. Linking from "lounge.html" to "elixir.html".
We need to fix the link in the "lounge.html" page. Here's what the <a> element looks like now:
<a href="elixir.html>elixirs</a>
Right now we're just using the filename "elixir.html", which tells the browser to look in the same folder as "lounge.html".
2. Identify the source and destination.
When we re-organized the lounge, we left "lounge.html" in the lounge folder, and we put "elixir.html" in the beverages folder, which is a subfolder of "lounge".
Start with "lounge.html"...
...and find a path to "elixir.html".
3. Trace a path from the source to the destination.
Let's trace the path. To get from the "lounge.html" file to "elixir.html", we need to go into the beverages folder first, and then we'll find "elixir.html" in that folder.
4. Create an href to represent the path we traced.
Now that we know the path, we need to get it into a format the browser understands. Here's how you write the path:
First we go into the beverages folder.
beverages
Seperate all parts of the path with a "/".
beverages/
Finally, we have the file name.
beverages/elixir.html
Putting it all together:
<a href="beverages/elixir.html">elixirs</a>
We put the relative path into the href value. Now when the link is clicked on, the browser will look for the "elixir.html" file in the beverages folder.
Go ahead and make this change in "lounge.html" and test the page in a browser.
Exercise 1
Your turn: trace a relative path from "lounge.html" to "directions.html". When you've discovered it, complete the <a> element below.
<a href="_______________">detailed directions</a>
Check your answer by editing "lounge.html" in Notepad and testing the page in a browser.
Going the Other Way: Linking up into a "Parent" Folder
1. Linking from "directions.html" to "lounge.html"
Now we need to fix those "Back to the Lounge" links. Here's what the <a> element looks like in the "directions.html" file:
<a href="lounge.html">Back to the Lounge</a>
Right now we're just using the filename "lounge.html", which tells the browser to look in the same folder as "directions.html". That's not going to work.
2. Identify the source and the destination.
Let's take a look at the source and destination. The source is now the "directions.html" file, which is down in the about folder. The destination is the "lounge.html" file which sits above the about folder where directions.html is located.
Start with "directions.html" and find a path to "lounge.html".
3. Trace a path from the source to the destination.
Let's trace the path. To get from the "directions.html" file to "lounge.html", we need to go up one folder into the lounge folder, and then we'll find "lounge.html" in that folder.
4. Create an href to represent the path we traced.
We're almost there. Now that you know the path, you need to get it into a format the browser understands. Let's work through this:
First you need to go up one folder. How do you do that? With a "..". That's right, two periods. Go with it, I'll explain in a sec.
..
Separate all parts of the path with a "/".
../
Finally, you have the filename.
../lounge.html
Putting it all together:
<a href="../lounge.html">Back to the Lounge</a>
Now when you click on the link, the browser will look for the "lounge.html" file in the folder above the current page.
Go ahead and make this change in both "elixir.html" and "directions.html. Test the pages in a browser.
Fixing Those Broken Images
You've almost fo the lounge back in working order. All you need to do now is fix those images that aren't displaying.
We haven't looked at the <img? element in detail yet (we will in a few lessons), but all you need to know for now is that the <img> element's src attribute takes a relative path, just like the href attribute.
Here's the image element from the "lounge.html" file:
<img src="drinks.gif">
The relative path is "drinks.html", which tells the browser where the image should be located. We specify this just like we do with the href attribute in the <a> element.
Finding the Path from "lounge.html to "drinks.html"
To find the path, we need to go from the"lounge.html" file to where the images are located, in the images folder.
Goal: we're in the lounge folder and we need to get down into the images folder.
- Start with "lounge.html".
- Go down into the images folder.
- There's our "drinks.gif".
So putting images and "drinks.html" together our path looks like images/drinks.gif, or:
<img src="images/drinks.gif">
Go ahead and fix the <img> element in "lounge.html" and test the page in a browser.
Finding the Path from "elixir.html" to "red.jpg"
The elixirs page contains images of several drinks: "red.jpg", "green.jpg", "blue.jpg", and so on. Let's figure out the path to "red.jpg" and then the rest will have a similar path becasue they are all in the same folder.
Goal: we're in the beverages folder and we need to get over to the images folder.
Start with "elixir.html".
Go up to the parent folder, lounge. Remember this will be written as ".." in the path.
Then go down into the images folder.
Finally, we find "red.jpg".
So putting these together, we get ../images/red.jpg, or:
<img src="../images/red.jpg">
Go ahead and fix the <img> element for "red.jpg" in "elixir.html" and test the page in a browser.
Exercise 2
That covers all the links we broke when we reorganized the lounge, although you still need to fix the remaining images in "elixir.html". Here's what you need to do:
- In "elixir.html", update the image src attribute so that "../images/"comes before each image name.
- Test "elixir.html" again in a browser.
Source: "Head First HTML: with CSS & XHTML" by Elisabeth Freeman and Eric Freeman
