HTML and CSS Reference
In-Depth Information
Create individual pages for the photos
First, create a new folder called “html” to hold these individual pages, just
below the “mypod” folder:
index.html
As
you've
proba
bly
gue
ssed,
we've
alread
y
cre
ated
this f
older
for
you
in th
e book
exam
ples.
Now we're going to create one HTML file for each photo. If the photo is called
“seattle_video_med.jpg”, then let's call the HTML file “seattle_video_med.html”
just to be consistent. In each HTML file, we'll have a heading that describes
the photo, followed by the photo. Here's the HTML for the first Seattle photo.
All the other pages will follow this same format:
Title
for t
he pag
e. Thi
s
should
desc
ribe t
he pho
to.
<html>
<head>
<title>
myPod: Seattle Ferry
</title>
<style type="text/css"> body { background-color: #eaf3da; } </style>
</head>
<body>
<h1>
Seattle Ferry
</h1>
<p>
<img src="../photos/seattle_video_med.jpg" alt="A video iPod on the ferry">
</p>
</body>
</html>
Here we give the page
a descriptive heading.
He
re's the <im
g> element
that points
to the large
“se
attle_video_
med.jpg” ph
oto. Let's a
lso give the
im
age a descri
ptive alt at
tribute.
