NHS Designs
Web Design
HTML

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"...

new site organization
Click for a larger image.

...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 got 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="images/drinks.gif">

The relative path is "images/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 "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.

 

Assignment

The Relativity Grand Challenge

Here's your chance to put your relativity skills to the test. Here's a Web site for the top 100 albums in a folder named music. In this folder you'll find HTML files, other folders, and images. Your challenge is to find the relative paths we need so we can link from our Web pages to other Web pages and files.

Below is the Web site structure. Beneath it you'll find the tasks to test your skills. For each source file and destination file, it's your job to make the correct relative path. If you succeed, you will truly be champion of relative paths.

Click on the site map image below to see it larger.

quiz html 07 site map

You may want to copy the structure down on your paper, or open two browser windows so you can see both the map and the quiz.

Ready...set...write!

Wriute the correct oath on a sheet of paper. The first one is done for you.

quiz html 07 challenge

 

Turn in your lounge folder.

Source: "Head First HTML with CSS & XHTML" by Elisabeth Freeman and Eric Freeman


ABOUT MRS. PEDERSEN · EMAIL MRS. PEDERSEN
resources · copyright information · Natomas High School Design Department