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
Case Problem 4
Test your
knowledge of
HTML and use
your creativity
to design a
Web page for
an exercise
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
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 .
Search WWH ::

Custom Search