CST161: Web Site Design

Project 2:  The "Apple Bavarian Torte" Recipe Web Page

The "Apple Bavarian Torte" recipe page for the dessertWeb website is shown below. Download the files from the previous link and complete the web document following the instructions for the assignment described below.

CST161 Project 2

  1. Using an HTML editor, open the torte.htm web document file from the download and add the structure of an HTML5 document before and around the recipe text (all the existing text goes inside the body block)
  2. Within the head block, insert a comment containing your name and the project due date
  3. Specify Apple Bavarian Torte Recipe as the page title
  4. Within the head block, add a meta element with the charset attribute assigned the value UTF-8
  5. Link the document to the modernizr-1.5.js script file and the dessertstyles.css style sheet file
  6. Within the body block, add a header element; within the header element, insert an h1 heading containing the inline image dessertweb.jpg with the alt text "dessertWEB"
  7. Enclose the recipe description, ingredients list, and directions within a section element and 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 (Unicode character number 9733)
  10. Directly below the h1 heading, insert the inline image torte.jpg; specify the alt text as "Torte image" and 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 and the list of directions as an ordered list
  14. Within the ingredients, replace the occurrences of the text "1/2" with the character symbol ½ (Unicode character number 189), the occurrences of "1/4" with the symbol ¼ (Unicode character number 188), and the occurrences of "1/3" with the symbol ⅓ (Unicode character number 8531)
  15. Replace each occurrence of the word "degrees" in the directions with the degree symbol (°) (character entity name deg)
  16. Mark "REVIEWS" within the aside element as an h1 heading
  17. Change the text of each customer star rating in the recipe reviews aside 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 paragraph using a line-break element; insert an em-dash (—) (character entity 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 changes to the web documnet and then open the torte.htm web document in several browsers to verify that the layout and content resemble that shown in the image above