CS142 Project #1: HTML and CSS

Problem 1 (10 points)

Create a single HTML document that presents two different appearances, determined by the document's CSS stylesheet. Your HTML file should be called p1.html and the two stylesheets should be called p1a.css and p1b.css. If the HTML file links to p1a.css then it should appear like this ("Version A"), assuming you are running Firefox 3.6 on a Windows 7 machine:

If the HTML file links to p1b.css then it should appear like this in Firefox 3.6 on Windows 7 ("Version B"):

On other platforms you may see a slightly different appearance, due to font differences. Here are the corresponding screen dumps for a few other platforms:

Here are some additional details and requirements for this problem:

The content should be described in a single HTML file, using a <table> element to display the main table.
There may not be any formatting information in the HTML file other than class and id attributes.
The appearance must be generated entirely with CSS style information; you may not use images or Javascript for this problem.
The only change that should be required to switch from Version A to Version B is to change the <link> element in the header to refer to a different CSS file.
Try to duplicate the appearance in the images above exactly ("pixel perfect"). For example:
- Some of the columns should be centered whereas others are left-justified.
- The "Total" line appears only in Version B (hint: you may find the display attribute useful in producing this effect).
- The title in the browser title bar should read "CS 142 Project 1, Problem 1".
- Both versions use the Tahoma font in a 13-pixel size.
- The background color for the header row in Version A is #687291.
- The background colors for the body rows in Version A are #eeeff2 and #dfe1e7.
- The white lines between rows in Version A are 1 pixel wide.
- The color for the frame around Version B is #d0d0ff.
- The frame in Version B is 10 pixels wide; there are 20 pixels of empty space on either side of the frame.
- The horizontal rule above the "Total" line in Version B is 2 pixels wide.
- Match the paddings and spacings as closely as possible.
Your HTML file must be a valid XHTML document that passes validation at http://validator.w3.org, and your CSS files must pass validation at http://jigsaw.w3.org/css-validator/
Note: the border and margin styles are not supported for <tr> elements; <td> elements support border but not margin.

Problem 2 (10 points)

Create an HTML file p2.html and its corresponding CSS file p2.css, which will create a set of tabs that appear like this on Windows 7 with Firefox 3.6:

For the corresponding appearance on the Macintosh, click here; for the corresponding appearance on Windows XP (Firefox), click here

In your solution for this problem you must use images in conjunction with the background-image CSS attribute to create the appearance of the tabs. We have generated 6 images for you to use. For tabs that are not selected there are three images, one for the left edge of the tab, one for the middle, and one for the right edge. There are three different images to use for the selected tab. Here are the images:

left.gif	mid.gif	right.gif
left-selected.gif	mid-selected.gif	right-selected.gif

To make a copy of any of these images for use in your solution, right-click over the image in Firefox and select "Save Image As...".

Here are some additional details and requirements for this problem:

Use the Tahoma font in a 13-pixel size.
The text in the selected tab should be displayed in bold.
When the mouse moves over a tab the text color should change to #cc6600. In addition, the mouse cursor should appear as a pointing hand (cursor type pointer) when the mouse moves over a tab. In the screen dump above the mouse is over the "Shippers" tab; unfortunately the screen dump does not display the mouse cursor.
The text in each tab should be a link that will switch to a different page when clicked. The URLS for the links should be, from left to right, "inventories", "orders", "accounts", "shippers", and "suppliers". You do not have to implement the Web pages corresponding to these links. Thus, when you click on a tab you will get a "missing page" error; in a real application each of these pages would display the same set of tabs, but with a different tab selected.
The color of the horizontal line separating the tabs from the rest of the page is #cccccc. The line should extend from the rightmost tab to the right edge of the window, except for a small margin at the right side; the line length should adjust as the window is resized.
The tabs should automatically resize both horizontally and vertically. If you replace the text in a tab with longer or shorter text, the tab should automatically get wider or narrower. If you change the font size for the tab text, the tabs should automatically get taller or shorter. Note that the images are taller than you will need in most cases; you should only display as much of each image as needed for the actual font size. You do not need to handle fonts that are too tall for the images we have provided.
There may not be any formatting information in the HTML file other than class and id attributes.
You may not use Javascript for this assignment; you can solve this problem entirely with HTML and CSS.
As with Problem 1, try to create a (nearly?) pixel perfect imitation of the screen shot.
Note: browsers sometimes behave badly if a <td> contains nothing; for example, they may not display a background or border in this case. You can use an empty <div> inside the <td> to get around this problem.
Your HTML file must be a valid XHTML document that passes validation at http://validator.w3.org, and your CSS files must pass validation at http://jigsaw.w3.org/css-validator/
An easy way to make sure your Web pages pass XHTML validation is to use the HTML Validator add-on for Firefox, which checks your pages automatically and displays error information. You can download this add-on at https://addons.mozilla.org/en-US/firefox/addon/249/.

Problem 3 (5 points)

Create a simple mashup page that displays both the Yahoo! news page (http://news.yahoo.com) and the San Jose Mercury News home page (http://www.mercurynews.com). Your solution should be in a file p3.html. Note: your solution for this problem need not validate perfectly, because the <iframe> element is not permitted in the strictest interpretation of XHTML. However, your solution should be valid XHTML except for issues related to <iframe>.

Resources

Use the Firefox browser for this project, and for all projects in this class. This will eliminate browser compatibility issues, and the Firebug add-on is a big help in debugging.
Download the Firebug add-on if you haven't already: https://addons.mozilla.org/en-US/firefox/addon/1843
Another tool you may find useful is the "Virtual Magnifying Glass", which allows you to examine individual pixels on the screen. You can download the Virtual Magnifying Glass from http://sourceforge.net/projects/magnifier.
Yet another useful tool is the Pixel Perfect Firefox add-on, which allows you to overlay an image transparently on top of a Web page to compare them. You can download Pixel Perfect from http://www.pixelperfectplugin.com/.

Deliverables