Assignment 1: Recipe Solution

This assignment tests your understanding of basic HTML and CSS. You will create several files related to a recipe web site for a fictional pie company named Granny's Pies. For full credit, you must turn in your files via GradeIt. Please submit the following files:

pie.html: The appearance of this file must match that of which is specified below.

recipe.css: the style sheet for pie.html

Pie Recipe Page

This assignment is to recreate a specific web page of a recipe for lemon meringue pie, stored in a file named pie.html. You must match in appearance the pie web page shown on the last page of this document. The width of the screenshot below is based on a browser window width of 1024px; if your screen is a different size, the width of your page may not exactly match (Firefox's Web Developer Toolbar add-on can help you resize your browser to any dimension; you could use 1024x768 to compare the images). Any line breaks shown are done automatically by the browser, except ones that are clearly much narrower than the page width, such as the line “One 9-inch pie”

Provided Output Text

You don't need to type in all of the text of the pie web page, only the HTML tags. There is a provided text file on the course web site that you can copy and paste into your text editor to get started. Then you can add the appropriate HTML tags to the file and save it as your .html page.

Appearance and Behavior Details

Your pie web page should match the provided expected output image, though it doesn't need to match pixel for pixel. The web page's title text should be “Grandma's Lemon Meringue Pie”. All headings on the page should use a foreground color of #A4A400 (red=equals 164, green=164, blue=0) and a background color of #F0F0F0 (red=240, green=240, blue=240). The font families for headings are Lucida Sans Unicode, Helvetica, Arial, or any sans-serif font available on the system (in that order). The page's main heading is aligned to the center of the page body and uses a 22pt bold font. Other headings on the page are left-aligned and appear in an 18pt normal font. All headings should be underlined.

The overall page's body should have a white background. Text in the body should have a foreground color of #404040 (red=64, green=64, blue=64) and use an 11pt font. The font families for page text are Georgia, Garamond, or any serif font available on the system. Any links on the page should use the color #A4A400 (red=164, green=164, blue=0), matching the color of the headings.

In the Ingredients list, the underlined words “tbsp” and “tsp” are abbreviations for “tablespoons” and “teaspoons”, respectively. Make sure the abbreviations are underlined, but don’t worry about matching the dotted underline in the image. When the user hovers the mouse over these abbreviates, the full word should appear as a tooltip. At the end of the Directions, the deleted word “cake” with a strike-out line through it is replaced by the word “pie”. After the Links section there is a short copyright notice that appears as a section of pre-formatted text in a monospace font. The text is spaced such that the second line is indented by 2 spaces and the third line by 4 spaces. The names of the four major steps of the recipe directions (such as “Preheat Oven”) are strongly stressed. The quotations from the users appear in italic font as indented blocks with background color #FFFFA8 (red=255, green=255, blue=168). Some words in the last quote are bolded.

The picture of the pie and the W3C validator images at the bottom come from the following images, respectively. All images are located at the base URL of https://webster.cs.washington.edu/images/. Use an absolute URL to link each image; don't use a relative URL to files on your local machine.

pie.jpg

w3c-html.png w3c-css.png

The page bottom has four links. The “Home” link should go to the CSE 154 course home page (using an absolute URL). The “Search for other lemon meringue pie recipes” text, “W3C HTML5” button, and “W3C CSS” button should link to the following web pages, respectively:

http://www.google.com/search?q=lemon+meringue+pie+recipe&start=10 https://validator.w3.org/#validate_by_input

http://jigsaw.w3.org/css-validator/#validate_by_input

All other decisions about styling on the page are left to the web browser. Any styles mentioned previously that are same as browser defaults do not have to be explicitly included in your CSS file. The screenshot in this document was taken on Windows using Firefox, which may differ from the appearance on your system.

Implementation and Grading

For full credit, your HTML and CSS should follow the rules listed in the Style Guide on the class web site. Choose appropriate HTML tags to match the structure of the content on the page. Use <header>, <footer>, <article>, and <section> tags where appropriate to categorize the various blocks of content in your webpage. Do not express style information in HTML with inline styles or presentational tags such as b or font. Do not use any HTML tables in your pie.html.

Your pie.html page must also pass the W3C HTML5 validator with no errors (a green bar). (Your page is fine as long as you see the green bar and text “Document checking completed. No errors or warnings to show.”) We will click your W3C validation buttons to validate your page, so test them for validity by clicking those same buttons.

Note: the validator buttons will not work by default when viewing your page on Cloud9. We will show you several ways to validate your html in lecture. Your final check to make sure that your page passes html and css validation is to click your validation buttons on the Webster copy of the assignment after you have turned in. (Link in turn-in receipt page).

You only need to worry about your page's appearance in standards-compliant browsers such as Firefox or Chrome. You will not be tested in browsers that do not comply to web standards.

Express all stylistic information on the page using CSS defined in recipe.css. For full credit, your style sheet must successfully pass the W3C CSS validator. Part of your grade comes from expressing your CSS concisely and without unnecessary or redundant styles. For example, if the page uses the same color or font family for multiple elements on the page, you must group those elements into a single CSS rule, so that it would be possible to change the page's color/font by modifying a single place in the CSS file. Outside of extra features, do not use HTML or CSS constructs that have not been discussed in lecture or the slides, through Chapters 2-3 of the textbook.

Though they will not be discussed until after the homework is assigned, you may know about using HTML class and id attributes to target elements for styling. Do not overuse such attributes in your HTML. If there is already a suitable tag for representing a given piece of content, favor the use of that tag rather than a less appropriate tag with a class or id attached for styling purposes.

Format your HTML and CSS nicely so that it is as readable as possible, similarly to the examples shown in class. Also place a comment header in each file containing your name and section and a brief description of the assignment and the file's contents. You must properly use whitespace and indent your HTML and CSS code following examples shown in class. To keep line lengths manageable, do not place more than one block element on the same line or begin any block element past the 100th character on a line. For reference, our solution has 135 lines of HTML and 45 lines of CSS, though you do not need to match this exactly.

Submitting Your Files

Submit your assignment online from the turn-in link on the course website. Turn in your pie.html and your recipe.css files.

When you submit your files on GradeIt, you will be presented with a link to a copy of your webpage on another server called Webster. This is the version of your file that we will grade. Please look at it after you have submitted to verify that you have turned in the file(s) that you intended to.

Note: we will only grade the files that have been turned in via GradeIt before the deadline. This means that we won't look at your computer or IDE and use the files that are there, even if they haven't been modified: you must turn your files in using the GradeIt turnin link on the course website.

Please do not place a solution to this assignment online on a publicly accessible web site, neither during nor after the school quarter is over. Doing so is considered a violation of our course academic integrity policy.