HTML and CSS Reference
In-Depth Information
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-
pizza.jpeg
.
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
.
