Head First HTML with CSS

adding individual image pages
Create individual pages for the photos
First, create a new folder called “html” to hold these individual pages, just
below the “mypod” folder:
photos
myPod: Seattle Ferry
body { background-color: #eaf3da; }
Seattle Ferry
200 Chapter 5
mypod
thumbnails
.
.
.
index.html
html
Now we’re going to create one HTML file for each photo. If the photo is called
“seattle_med.jpg”, then let’s call the HTML file “seattle_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:
Notice that we need to use “..” in the relative path
because the “html” folder is a sibling of the “photos”
folder, so we have to go up one folder and then down
into “photos” when using relative links.
Title for the page. This
should describe the photo.
Here we give the page a descriptive heading.
Here’s the element that points to the large
“seattle_med.jpg” photo. Let’s also give the image
a descriptive alt attribute.
As you’ve probably
guessed, we’ve already
created this folder for
you in the book examples.
Here’s our ready bake CSS
again, just to keep the page
a consistent color.