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:

Windows screenshot for Problem 1a

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

Windows screenshot for Problem 1b

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:

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:

Windows screenshot for Problem 2

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:


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:

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>.



Use the standard class submission mechanism to submit all of the files needed to display the pages for Problems 1-3, including p1.html, p1a.css, p1b.css, p2.html, p2.css, all of the images for the tabs, and p3.html.