HTML and CSS Reference
In-Depth Information
Fixing those broken images…
Hey, it's nice you fixed all
those links, but didn't you forget
something? All our images are broken!
Don't leave us hanging—we've got a
business to run.
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 couple of chapters), 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">
Finding the path from “lounge.html” to “drinks.gif”
To find the path, we need to go from the “lounge.html” file to
where the images are located, in the “images” folder.
<html>
.
. </html>
lounge
lounge.html
green.jpg
<html>
.
. </html>
beverage s
<html>
images
about
.
. </html>
blue.jpg
drinks.gif
directions.html
elixir.html
lightblue.jpg
red.jpg
and f ind a
p ath t o her e.
So when we put (1) and (2) together, our path looks like “images/drinks.gif ”, or:
<img src="images/drinks.gif">
 
 
Search WWH ::




Custom Search