HTML and CSS Reference
In-Depth Information
Add the image links to “index.html”
This is the last step. You just need to wrap
<a>
elements around each thumbnail's
<img>
element in your “index.html” file. Remember, the href of each
<a>
element should link to
the page containing the large version of the image in the “html” folder. Make sure that your
links, thumbnails, and pages all match up correctly.
Here's the complete “index.html” file. All you need to do is add the HTML marked in gray.
<html>
<head>
<title>
myPod
</title>
<style type="text/css">
body { background-color: #eaf3da;}
</style>
</head>
<body>
<h1>
Welcome to myPod
</h1>
<p>
Welcome to the place to show off your iPod, wherever you might be.
Wanna join the fun? All you need is any iPod, from the early classic
iPod to the latest iPod Nano, the smallest iPod Shuffle to the largest
iPod Video, and a digital camera. Just take a snapshot of your iPod in
your favorite location and we'll be glad to post it on myPod. So, what
are you waiting for?
</p>
<h2>
Seattle, Washington
</h2>
<p>
Me and my iPod in Seattle! You can see the
Space Needle. You can't see the 628 coffee shops.
</p>
<p>
<a href="html/seattle_video_med.html">
<img src="thumbnails/seattle_video_med.jpg" alt="My video iPod in Seattle, WA">
</a>
<a href="html/seattle_classic.html">
<img src="thumbnails/seattle_classic.jpg" alt="A classic iPod in Seattle, WA">
</a>
<a href="html/seattle_shuffle.html">
<img src="thumbnails/seattle_shuffle.jpg" alt="A iPod Shuffle in Seattle, WA">
</a>
