CST161: Web Site Design

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

The "Apple Bavarian Torte" recipe page from 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.

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 (the number of stars for the "Nothing Special" review is two as per the image above, not four)
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

• Students may work on all projects in teams of two or three, and, if so, all students in the group must submit the same project to their own dropboxes in Blackboard.  In the text box's dropbox, as well as in the source code documentation (comments), state the name(s) of the classmate(s) with whom you worked.
• The completed project within a .ZIP archive file (check out the link Zip and unzip files using Windows 7) containing the entire folder with all files that make up the website submitted electronically via an attachment to a Brightspace dropbox is due to Prof. Struck no later than 11:59 p.m. on the date listed in the course outline.