This assignment tests your understanding of basic XHTML and CSS. You will create several files related to a pie recipe web site. Turn in the following files:
index.html, the first of two web pagespie.html, the second of two web pagesrecipe.css, the style sheet for pie.htmlIn this assignment, you will be creating the web site for a small pie company named Granny's Pies. The first part of your task is to create a front page for this web site, stored in a file named index.html. Your front page must contain a link to pie.html. Otherwise, this front page can have any appearance you like. Be creative! We may show some students' pages in class on future dates.
The second part of the assignment is to recreate a specific web page describing the recipe for lemon meringue pie, stored in a file named pie.html. This page, unlike index.html, must exactly match the appearance specified in this document.
You must match in appearance the following pie web page (between but not including the thick black lines):
All headings on the page should use the color (red=164, green=164, blue=0) or A4A400. The page's main heading also has a background color of (red=240, green=240, blue=240) or F0F0F0, is aligned to the center of the page body, and uses a 22pt bold font. The preferred fonts for the main heading are Century Gothic, Futura, Verdana, or any sans-serif font available on the system. Other headings on the page are left-aligned and appear in an 18pt normal font. The preferred fonts for such headings are Arial, Futura, or any sans-serif font available on the system.
The overall page body should have a white background and should be 800 pixels wide. Any text within the body should have a foreground color of (red=64, green=64, blue=64) or 404040 and use a 12pt font. Preferred fonts are Georgia, Garamond, or any serif font available on the system. Any links on the page should use the color (red=164, green=164, blue=0) or A4A400, matching the color of the page headings.
The four steps of the recipe directions are formatted in a strong font. The quotation from the recipe author appears with an italic font as an indented block quotation with background color (red=255, green=255, blue=200) or FFFFC8. The picture of the pie on the page and the W3C validator images at the bottom come from the following image files, respectively:
All other style elements on the page are subject to the preference of the user's web browser. The screenshot in this document was taken on Windows XP using Firefox 2.0, which may differ slightly from the appearance on your system.
The bottom of the page has four links. The "Home" link should link to your index.html page. The "Search for other lemon meringue pie recipes" text, the "W3C XHTML 1.0" button, and the "W3C CSS" button should link to the following web pages, respectively:
The pie web page's title text should be Grandma's Lemon Meringue Pie.
Implement the content of your web page using XHTML 1.0 Strict as taught in class. For full credit, your page must successfully pass the W3C XHTML 1.0 Strict validator. You should choose appropriate HTML tags to match the structure of the content being displayed on the page. Do not express stylistic information in the HTML page itself, such as inline styles or presentational HTML tags such as b or font.
Express all stylistic information on the page using CSS defined in the file recipe.css. For full credit, your style sheet must successfully pass the W3C CSS validator. You should not use HTML or CSS constructs that have not been discussed in lecture or the slides.
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 in each file containing your name and section.
The majority of the points for this assignment will be for the pie.html and its recipe.css files. The index.html will also be graded, but it will be worth fewer points. The main stylistic constraint on your index.html file is that it should pass the W3C XHTML 1.0 and CSS validators. Beyond that it can contain any non-obscene content you like, even content that uses material we have not yet learned in lecture. Please do not link to external resources other than simple image files from your index.html page.
Submit your assignment online from the turnin area of the course web site. Make sure to turn in both .html files and your .css style sheet. You do not need to turn in the provided images. If your index.html page includes images that are linked using absolute URL paths, you do not need to turn in these images.
Please do not place a solution to this assignment online on a publicly accessible web site. If you are found to have done so, we will consider you as having violated the course academic integrity policy. Please see the course web site for directions on setting up password protection on your web space.
Except where otherwise noted, the contents of this presentation are © Copyright 2007 Marty Stepp and are licensed under the Creative Commons Attribution 2.5 License.
