HTML and CSS Reference
In-Depth Information
5.
Next, you'll create three new
<figure>
elements, one for each of the product images. Here is the code for
the first figure. Add this within your new
<div>
element.
<figure>
<img src="img/pepperoni-pizza.jpeg"
alt="A pepperoni pizza presented on a wooden chopping
board."
width="240" height="180">
<figcaption>
Joe's Pepperoni Special
</figcaption>
</figure>
6.
Now add the second figure underneath the first.
<figure>
<img src="img/margherita-pizza.jpeg"
alt="A margherita pizza with mozzarella, baby tomatoes and
oregano."
width="240" height="180">
<figcaption>
Margherita - Mozzarella and Oregano
</figcaption>
</figure>
7.
Finally, add the last figure.
<figure>
<img src="img/pollo-pizza.jpeg"
alt="A pollo pizza with roasted yellow peppers."
width="240" height="180">
<figcaption>
Pollo - Chicken with Roast Peppers
</figcaption>
</figure>
8.
Now save the
menu.html
file.
Note how the alt text for each of the images describes what is shown in the image, whereas the figure caption relates
the image to the appropriate item on the menu. You have also explicitly defined the image dimensions using the
width
and
height
attributes.
Take a look at the updated
menu.html
file in your web browser. It looks much better with the pictures added! Fig-
ure 4-13 shows how your Menu page should look.
Creating the News Page
The News page a way for Joe's Pizza Co. to keep its customers up to date with what the company is up to as well as
notify them of any current special offers.
To create the News page, you are going to use the same content page template that you have been using up to now.
Each of the individual articles will then have its own
<article>
element (you were introduced to this element in
Chapter 2).
