Getting Started with HTML5 - HTML, CSS, and Dynamic HTML - page 67

2. Enclose the entire Macbeth text within the structure of an HTML document includ-
ing the html , head , and body elements. Add a doctype to the document head to
indicate that the page is written in HTML5.
3. Within the head section, insert a comment containing the following text:
Macbeth: Act I, Scene 1
Author: your name
Date: the date
4. Add the page title Macbeth: Act I, Scene 1 .
5. Link the fi le to the modernizr-1.5.js script fi le and to the macstyles.css style sheet.
Set the character set to UTF-8 .
6. Within the body element, insert a heading group consisting of an h1 heading and an
h2 heading. Within the h1 heading, insert an inline image containing the macbeth.
jpg image fi le. Specify Macbeth as the alternate text. Within the h2 heading, enter
the text Presented by: Mansfi eld Classical Theatre .
7. Enclose the text of the play within a section element.
8. Mark the text ACT I as an h2 heading. Mark SCENE 1 as an h3 heading. Group the
two headings within an hgroup element.
9. Mark the summary of the scene as a paragraph. Mark the word Summary using the
strong element.
10. In the text of the play, mark the descriptions of setting, scene, and exits as separate
paragraphs and italicize the text using the i element, as shown in Figure 1-50.
11. Mark the dialog as a description list, with each character's name marked as a
description term and each speech marked as a description. When a speech includes
two lines, add a line break at the end of the fi rst line to keep the speech on separate
lines, as shown in the fi gure.
12. Directly below the paragraph containing the text Exeunt , insert the line Go to
Scene 2 . Mark this line as a div element with the id value direction . At the end of
this line, insert a right arrow character using the 8658 character number. Add hori-
zontal rules directly above and below this statement.
13. Mark the line Text provided by Online Shakespeare as a footer. Make sure the
footer element is below the section element.
14. Save your changes to the fi le, and then confi rm the layout and content of the page in
your Web browser.
15. Submit the completed fi les to your instructor, in either printed or electronic form, as
requested.

Explore how to
use HTML to
create a recipe
page.

Case Problem 3

Data Files needed for the Case Problem: dessertstyles.css, dessertweb.jpg,
modernizr-1.5.js, torte.jpg, tortetxt.htm

dessertWEB Amy Wu wants to take her enjoyment of cooking and her love of shar-
ing recipes to the World Wide Web. She's interested in creating a new Web site called
dessertWEB where other cooks can submit and review dessert recipes. Each page within
her site will contain a photo and description of a dessert, along with a list of ingredients,
cooking directions, and a list of reviews. Each recipe will be rated on a fi ve-star scale.
She already has information on one recipe: Apple Bavarian Torte. She's asked for your
help in creating a Web page from the data she's collected. A preview of the completed
page is shown in Figure 1-51.