Head First HTML with CSS

working with paths
Planning your paths...
What do you do when you’re planning that vacation
in the family truckster? You get out a map 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.
Let’s work through a couple of relative paths (and
fix the lounge at the same time):
Linking down into a subfolder
1
2
Linking from “lounge.html” to “elixir.html”.
60 Chapter 2
about
.
.
.
directions.html
lounge
beverages
Okay, you’d
really go to
Google maps,
but work
with us here!
We need to fix the elixirs link in the “lounge.html” page. Here’s what the
element looks like now:
elixirs
Identify the source and the destination.
There are other kinds of
paths too. We’ll get to
those in later chapters.
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”.
.
.
.
lounge.html
.
.
.
elixir.html
Start here...
images
...and find a
path to here.
Right now we’re just using the
filename “elixir.html”, which tells
the browser to look in the same
folder as “lounge.html”.
drinks.gif
green.jpg
blue.jpg
lightblue.jpg
red.jpg