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
Create a simple web page consisting of three files - an .html file, a .css file,
and an image file.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:
- the .html file must contain only structural markup; don't embed any css
rules in the file
- the .html file must refer to an external .css file containing all the
style rules
- your page body may be any color, just don't use the default browser
background color
- the generated page must contain at least one image (similar to below)
- the page must make use of a table, with different borders for the cells
vs the entire table
- your name in the table should be a level-3 header (thus larger than all
other text)
- the headers in the table should be black with a contrasting text color,
bolded and italicized, similar to below
- your courses should each use a different background color with
contrasting text, similar to below
- unused table cells can assume the background color of the page body
- the title of the page (that appears on the browser tab) must contain
your name
- 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).
- 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.
![](../../../images/msoe.gif) |
Dr. Mark L. Hornick
Schedule of Classes
Winter 2013-2014 |
|
Monday |
Tuesday |
Wednesday |
Thursday |
Friday |
8:00 |
SE-3191
SDL |
|
|
SE-3191
SDL |
|
9:00 |
|
|
|
10:00 |
CS-4220 |
CS-4220 |
CS-4220 |
11:00 |
Office Hour/Advising |
Office Hour/Advising |
Office Hour/Advising |
Office Hour/Advising |
12:00 |
|
|
|
|
Office Hour/Advising |
1:00 |
Dept/Program Meetings |
|
|
|
|
2:00 |
|
|
|
|
|
3:00 |
|
|
|
|
|
4:00 |
|
|
|
|
|
Lab Submission (due by the start of the next lab)
Follow these instructions
to complete your assignment:
- Put your name, using appropriate comments, in both the .html and .css
files.
- Submit your .html, .css, and image
files to Blackboard (Lab 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 (looks/behaves as stated above in the requirements list)
- Timeliness of submission as stated in the
course policies.