CS-4220 Web Application Development
Lab 2: Web Page using CSS

Outcomes addressed

• Be able to use basic HTML/XHTML markup to provide structure to a webpage.
• Be able to use
  CSS to specify presentation/appearance to a webpage.
• Be able to deploy and maintain an application that resides on a remote server.

Assignment

As we've discussed, MS FrontPage emits junk that does not conform to the XHTML 1.0 standard; instead, it still generates old-style HTML with structure and presentation interwoven. This lab webpage is an example of this kind of old-style HTML. In this assignment, you'll rewrite this page so that it conforms to XHTML Strict 1.0 such that the HTML document contains only structural markup and a <link> reference to a Cascading Style Sheet which controls presentation. After the rewrite, the page you write should display substantially the same output as this original page.

While you can use the HTML source for this page as the basis for your re-write, it may be easier to start from scratch with an empty file - there is so much presentational markup mixed in with structural markup that correcting the original source would be tedious. It will be easier for you to just copy/paste only the text from a browser that is displaying the page, and then add your own markup.

Here are some detailed requirements:

• Place all HTML structural markup in a "main" file, and place all CSS style rules in a separate file, and <link> to the CSS file.

• Use media selection in your CSS stylesheet to control the presentation for screen vs. print display. For print, assume you'll be printing to a B/W printer, so designate a white background with only black text. Keep other style attributes, such as bolding, font-family, and italics.

• Make sure your HTML file passes the Strict validation test when submitted to the HTML validator site.

• Make sure your CSS file passes the validation test available on the CSS validator site.

• The <a> links within your page should reference the same "live" url's as this page.

Lab Submission (due 8:00am, the day of the following lab)

Follow these instructions to complete your assignment:

1. Publish your assignment on MSOE's web server. In order to make locating your assignments easier, use this navigation page (developed by Cory Larson) as your "main" c4220 page, and place links to this and subsequent labs on that page.
2. Make sure that all of the links and images reference live urls (no broken links!).
3. Submit your .htm(l) and .css files to webCT (lab 2).
4. Enter the overall time you spent on this lab into the FAST system (for week 2).

Be sure to keep copies of all your files, in case something gets lost.

Your grade will be based on the following criteria:

• Required content
• Technical quality (formatting, comments, appropriate usage)
• Spelling and grammar (of website content)
• Timeliness of submission as stated in the course policies.