Still photography is a staple of Web content and the production of slideshows require that you understand the basics of photo editing and Web markup. This week you will create two slideshows.
Some sites, such as the Atlantic online, simply provide large-format photographs on a single HTML document. This is simple to accomplish: Within the body of the html document, one includes the image tags for each file with a line break or paragraph tag to ensure the photographs are displayed vertically. For example:
<body>
<img src="photo1.jpg" />
<p>This describes the first photo.</p>
<img src="photo2.jpg" />
<p>This describes the second photo.</p> …
</body>
This format has its advantages. First, it's easily produced because it requires just one HTML document and no navigation. Secondly, the audience only needs to request one document, making it easy on them as well. However, many news sites prefer a multiple-page format to ensure the photos stay "above the fold" (within the browser window) and to require only one photo download per page.
It's also worth mentioning that new documents mean new advertisements may be included, which raises revenue for the site.
Traditionally, slideshows use unique HTML documents for each page in news sites. Like the name implies, to create these types of slideshows, one must provide a new document for each photo as well as a means of navigating to other photos within the slideshow.
Our first task is to write code for a single document and include our first image.
<body>
<img src="photo1.jpg" />
<p>Photo caption goes here.</p>
</body>
Next, we need to save the HTML file as something easily linked to, let's call it photo1.html. Now, let's begin a new HTML document and include the next photo in our collection:
<body>
<img src="photo2.jpg" />
<p>Photo caption goes here.</p>
</body>
Like before, let's save it as an easily remembered file. We'll call it photo2.html.
Now, let's link one to the other by opening photo1.html and linking it to photo2.html:
<body>
<img src="photo1.jpg" />
<p>Photo caption goes here.</p>
<p><a href="photo2.html">Next photo</a> </p>
</body>
Now, photo1.html leads to photo2.html, which we may want to lead to photo3.html (after its created). This type of navigation, where one html file leads to only one other html file, is called linear navigation. In other words, it goes in one direction in a straight line. But we might also create non-linear navigation.
Matthew Blake Department of Journalism CSU-Chico
mdblake@csuchico.edu (530) 898-3608