Our web page is looking a lot more like a web page now than it did when we started, but no movie review would be complete without stills from the movie. There are four images in the workshop folder, and we’ll add each of them to the review. The first image will be a screen capture of the main character looking at her reflection. Directly underneath the “<div id="review">”, add the image and a paragraph to caption it:
<img src="Reflections.jpg" alt="Double Reflections" />
<p>Does Mary have no soul, or one too many?</p>
For our purposes, the “src” attribute is exactly like the “href” attribute we’ve already seen. It can contain URLs and local references in exactly the same way. Here, it refers to the file called “Reflections.jpg” in the same folder as the web page.
Alternate text
A picture may be worth a thousand words, but words are much more versatile, especially on the Internet. Computer software—such as search engines and alternative browsers—find it much easier to reposition text to different viewing mechanisms than they do images. All images should contain an alt attribute, even if it’s empty. An empty alt attribute tells alternative browsers that if they can’t display this image, they shouldn’t display anything.
Images: Pullout
We’d like to combine these images with these captions. Sectioning off an img tag and a paragraph tag? That’s a job for a div. The style sheet already has a class ready for image pull-outs, called “pull”. Surround the image and the paragraph with a div that has a class of “pull”.
<div class="pull">
<img src="Reflections.jpg" alt="Double Reflections" />
<p>Does Mary have no soul, or one too many?</p>
</div>
The “pull” class is defined in the style sheet; take a look at it if you’re interested.
Now let’s do the next three. These images, their alt text, and their captions, are in the “images” folder of the resources folder, if you find that easier to copy from.
The Saltair image goes in front of the paragraph that begins “One of the problems with the site is that the Great Salt Lake has a very dynamic water level”.
<div class="pull">
<img src="Pavilion.jpg" alt="Saltair Pavilion" />
<p>The Saltair ruins were the inspiration for the film.</p>
</div>
The Star34 image goes in front of the paragraph that begins “There’s a commentary on the restored version”.
<div class="pull">
<img src="Star34.jpg" alt="Star 34" />
<p>A very young Herk Harvey praising Kansas in an early Centron film.</p>
</div>
And the diving Mule image goes in front of the paragraph that begins “There are a lot of outtakes”.
<div class="pull">
<img src="Mule.jpg" alt="Diving Mule" />
<p>The DVD includes old photos and postcards from Saltair. One of the attractions: a diving mule.</p>
</div>
The images alternate between the left and right because the style sheet tells them to.
