CS-4220 Web Application Development
Lab 2: Web page using HTML and CSS

Outcomes addressed

• Be able to write a web page using HTML5 to provide structure/content.
• Be able to use CSS to specify presentation and appearance to the page.

Assignment

Replicate your own personal course schedule for the winter quarter, making it similar in appearance the my schedule shown below. Note that you cannot just copy the HTML page from this lab page and modify it for your page, since this page was created with MS Front Page, which generates truly awful HTML markup that does not conform to modern HTML5.

Your web page must conform to the following requirements:

1. the .html file must contain only structural markup; don't embed any css rules in the file
    
2. the .html file must refer to an external .css file containing all the style rules
    
3. your page body may be any color, just don't use the default browser background color
    
4. the generated page must contain at least one image (similar to below)
    
5. the page must make use of a table, with different borders for the cells vs the entire table
    
6. your name in the table should be a level-3 header (thus larger than all other text)
    
7. the headers in the table should be black with a contrasting text color, bolded and italicized, similar to below
    
8. your courses should each use a different background color with contrasting text, similar to below
    
9. unused table cells can assume the background color of the page body
    
10. the title of the page (that appears on the browser tab) must contain your name
     
11. when printed (or viewed in Print Preview) all text and cells should be black, white, or shades of grey (use a media selector in your css file to specify different rules for printing to screen vs. printers. Specify Arial text for the entire page for screen, and Times New Roman for print. Specify 12pt font-size for print, and 14px font-size for screen (don't replicate the font size/family used on this lab page).
     
12. your .css and .html files must pass validation with no errors using the html validator and css validator websites

When testing, be sure to set your browser's default color and font settings to something that will make it easy for you to detect errors in your page.

Dr. Mark L. Hornick Schedule of Classes Winter 2013-2014

Lab Submission (due by the start of the next lab)

1. Put your name, using appropriate comments, in both the .html and .css files.
2. Submit your .html, .css, and image files to Blackboard (Lab 2).
    

Your grade will be based on the following criteria:

• Required content (looks/behaves as stated above in the requirements list)
• Timeliness of submission as stated in the course policies.