This assignment tests your understanding of basic XHTML and CSS. You will create several files related to a recipe web site for a fictional pie company named Granny's Pies. Write the following files:
index.html, the first of two web pages (with an optional CSS style sheet file)pie.html, the second of two web pagesrecipe.css, the style sheet for pie.html
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. The file must also be at least 20 lines long and must
contain at least 4 different XHTML elements in its body. It also may not significantly
borrow content from your pie.html. Otherwise, this front page can
have any appearance you like. If you like, you may use an optional
CSS stylesheet with this page named index.css and submit it with your
other files. Be creative!
The second (and more substantial) part of the assignment is to recreate a specific
web page describing a recipe for lemon meringue pie, stored in a file
named pie.html. Unlike index.html, this page is
rigidly specified and must exactly match the appearance specified in this document.
For full credit, your page must match several stylistic guidelines, all specified later in this document.
You must match in appearance the following pie web page (between but not including the thick black lines). 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. Any line breaks 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":
All headings on the page should use a foreground color of (red=164, green=164, blue=0)
or #A4A400 and a background color of (red=240, green=240, blue=240)
or #F0F0F0. The font families for headings are Century Gothic, Futura, Verdana,
or any sans-serif font available on the system. The page's main heading is aligned to the center
of the page body, and uses a 24pt bold font. Other headings on the page are left-aligned and appear
in an 20pt 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 (red=64, green=64, blue=64) or #404040 and
use an 12pt 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 (red=164, green=164, blue=0)
or #A4A400, matching the color of the page headings.
The names of the four major steps of the recipe directions (such as "Preheat Oven")
are formatted in a strong font. The quotations from the users appear in an italic font as indented
blocks 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:
The bottom of the page has four links. The "Home" link should link to your
index.html page. Use a relative URL and assume it is located on the same
web site as pie.html in the same directory. The "Search for other
lemon meringue pie recipes" text, the "W3C XHTML 1.1" button, and the "W3C CSS" button should
link to the following web pages, respectively:
Important: The XHTML and CSS validator services require your web page to be hosted on a publicly accesible server. On the CDF facility, only the shared servers, such as greywolf and redwolf, have public IP addresses. Thus, while you may do most of your development on any CDF workstation, make sure that you run your site on one of the public servers to test the XHMTL and CSS validation feature. Instructions for runing Apache on CDF are available here.
The pie web page's title text should be Grandma's Lemon Meringue Pie .
In addition to the previous required features, you must also complete all of the following additional requirements in your pie page.
As much as possible, you should implement these changes by modifying your CSS code rather than your HTML. Some of the CSS properties necessary will not have been covered in class, so you must learn them yourself. Try using the textbook, Google, or looking at a CSS property reference such as the following site:
Implement your pie.html web page using XHTML 1.1 as taught in class.
For full credit, your page must successfully pass the W3C
XHTML 1.1 validator with no errors (a green bar). (It is okay
if the validator says your page is "tentatively" valid or has warnings, as long as you see
the green "Valid" bar in the 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. You may not use HTML tables in your pie recipe page.
You only need to worry about the appearance of your page in Firefox. Your pages will not be tested other browsers.
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.
Put all necessary files in one directory, and archive the directory into a single file using tar or a similar utility. Finally, submit your assignment using the BlackBoard system.
Please do not place a solution to this assignment online on a publicly accessible web site.
Based on materials copyrighted by Marty Stepp / Jessica Miller and licensed under Creative Commons Attribution 2.5 License.