3.1  Photo Descriptions and Lists

Study the program in figure 4.

File: web3.ss Figure 4:  Making a photo gallery

Now let’s modify it so that we can improve it.

Exercise 3.1.1.   If you ignore the file extensions (.html, .gif, .jpg) the file, the src and the alt fields of a PD are the same. The common part is called the stem. Use the following PD instead:

(define-struct pd (stem title))

Modify the program accordingly.  Solution

Exercise 3.1.2.   Design a function that consumes the list of picture descriptions and produces an index file for the gallery. To create an index for three pictures, use <ul> ...</ul> for making an HTML enumeration and <li> ...<li> for making items in an enumeration:

<ul>
 <li><a href="picture1.html">Picture 1</a></li>
 <li><a href="picture2.html">Picture 2</a></li>
 <li><a href="picture3.html">Picture 3</a></li>
</ul>

Design a program to produce the a list of enumeration items from a list of photo descriptions and another one for making wrapping this list with <ul> and </ul> tags.

Now modify the Web pages for each picture so that they display a link that takes viewers back to the index page. Solution

Exercise 3.1.3.   Challenge: Modify the program so that a viewer can also walk through the gallery in a circular way. That is, the viewer starts with the index and then goes to a picture and from there to all the other pictures, one after another. Solution