HTML and CSS Reference
In-Depth Information
Planning your paths…
Oka
y, you
'd
real
ly go
to
Goo
gle M
aps,
but
work
with
us h
ere!
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 that 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
Linking from “lounge.html” to “elixir.html”.
We need to fix the “elixirs” link in the “lounge.html” page. Here's what the
<a>
element looks like now:
Ri
ght n
ow we
're ju
st usi
ng th
e
fil
ename
“elix
ir.ht
ml”, w
hich
tells
th
e bro
wser
to loo
k in t
he sa
me
<a href="elixir.html">
elixirs
</a>
fo
lder a
s “lo
unge.h
tml”.
2
Identify the source and the destination.
When we reorganized 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”.
St
art h
ere…
<html>
.
.
</html>
lounge
lounge.html
green.jpg
<html>
beverage
s
<html>
images
about
.
.
.
.
blue.jpg
</html>
</html>
drinks.gif
directions.html
elixir.html
lightblue.jpg
…a
nd f
ind a
p
ath t
o her
e.
red.jpg