HTML and CSS Reference
Pizza image reproduced by permission of iStockphoto.com/Lauri Patterson
Figure 4-12 A <figure> element with a <figcaption>.
Because the caption is presented to the user, you will generally want the content of your <figcaption> element
to be different from your alt text when you are using an image.
Adding Product Images
To make the Menu page look a bit more appetizing, you are now going to add three product images to the right side
of the page. The CSS style sheet I provide will take care of positioning the images to the side.
You will be using multiple <figure> , <img> , and <figcaption> elements for these product images.
The code for this exercise can be found in folder 8.
Let's get going!
1. First you need to download the new image files from the topic's website. These can be found in the img
folder in folder 8. Once you have these images, place them in the img folder in your project directory. The
files you need are: margherita-pizza.jpeg , pepperoni-pizza.jpeg , and pollo-
2. Open the menu.html file in your text editor.
3. Locate the <div> element that you created in the previous exercise. This holds all the menu tables and has
the fitting ID menu-tables .
4. Underneath this <div> , create a new <div> element with the ID menu-images .