HTML and CSS Reference
In-Depth Information
Fixing up the myPod HTML
Once you've saved the image, you can close Photoshop Elements. Now all you need to do is change the
myPod “index.html” page to include the new version of the photo, “seattle_video_med.jpg”. Here's a
snippet of the “index.html” file, showing only the parts you need to change.
<html>
<head>
<title>
myPod
</title>
<style type="text/css">
body { background-color: #eaf3da;}
</style>
</head>
<body>
.
.
.
<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>
T
he re
st of
the H
TML
goes h
ere. Y
ou've
a
lready
got
it in y
our “i
ndex.h
tml”
file.
A
ll you
need
to do
is cha
nge t
he
f
ilenam
e in t
he <im
g> el
ement
to
t
he na
me of
the i
mage y
ou jus
t
m
ade:
“seatt
le_vid
eo_m
ed.jpg
”.
<p>
<img src="photos/seattle_video_med.jpg" alt="My iPod in Seattle, WA">
</p>
</body>
</html>
And now for the test drive…
Go ahead and make the changes, save them, and
reload “index.html” in your browser. Things
should look much better. Now the image is sized
just right to give your visitors a good view—without
overwhelming them with a large photo.
