HTML and CSS Reference
In-Depth Information
7. Enclose the recipe description, ingredients list, and directions within a
section
ele-
ment. Enclose the recipe reviews within an
aside
element.
8. Mark the text
Apple Bavarian Torte
as an
h1
heading.
9.
Replace the text
(4 stars)
in the
h1
heading with a set of four
star symbols
(character
number 9733).
10.
Directly below the
h1
heading, insert the inline image
torte.jpg
. Specify the alternate
text
Torte image
. Set the width of the image to
250
pixels.
11. Mark the description of the dessert as a paragraph.
12. Mark
INGREDIENTS
and
DIRECTIONS
as
h2
headings.
13. Mark the list of ingredients as an unordered list. Mark the list of directions as an
ordered list.
14.
Within the ingredients, replace the occurrences of 1/2 with the character symbol
½
(reference number 189), the occurrences of 1/4 with the symbol
¼
(reference num-
ber 188), and the occurrences of 1/3 with the symbol
¹∕
³
(reference number 8531.)
15
.
Replace each occurrence of the word
degrees
in the directions with the degree sym-
bol (
°
) (character name
deg
).
16. Mark
REVIEWS
within the
aside
element as an
h1
heading.
17. Change the text of each customer star rating to a set of
star symbols
using character
number 9733 placed within a paragraph.
18.
Enclose the text of each customer review in a paragraph nested within a
blockquote
element. Place the name of the reviewer and the date on a new line within that para-
graph. Insert an
em-dash
(character name
mdash
) before the word
Reviewed
in each
of the reviews. Enclose the date of each review within a
time
element and enclose by
reviewer
within a
cite
element where
reviewer
is the name of the reviewer.
19. Save your changes to the fi le, and then verify the layout and content of the page in
your Web browser.
20. Submit the completed fi les to your instructor, in either printed or electronic form, as
requested.
Case Problem 4
Test your
knowledge of
HTML and use
your creativity
to design a
Web page for
an exercise
equipment
company.
Data Files needed for the Case Problem: logo.jpg, smith.jpg, and smith.txt
Body Systems
Body Systems is a leading manufacturer of home gyms. The company
recently hired you to assist in developing its Web site. Your fi rst task is to create a Web
page for the LSM400, a popular weight machine sold by the company. You've been given
a text fi le describing the features of the LSM400. You've also received two image fi les:
one of the company's logo and one of the LSM400. You are free to supplement these fi les
with any other resources available to you. You are responsible for the page's content and
appearance.
Complete the following:
1. Create a new HTML5 fi le named
smith.htm
and save it in the tutorial.01\case4
folder included with your Data Files.
2. Add the appropriate doctype for HTML5 to the beginning of the fi le.
3. Add a comment to the document head describing the document's content and con-
taining your name and the date.
4. Add an appropriate page title to the document head.
5. Set the character set of the fi le to
UTF-8
.
