CSci 1001 Problem set 2

CSci 1001 Problem set 2. Due Thursday, October 9 at 2pm.

Problem 1: Using CSS classes and id

Copy/paste this HTML code into a file problemset2.html:


<!DOCTYPE html
PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html  xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
<title>
A web page to format.
</title>
<link rel="stylesheet" type="text/css" href="problemset2.css" />
</head>
<body>

<div id="menu">
<ul>
<li><a href="http://www.weather.com/">weather.com</a></li> 
<li><a href="http://www.morris.umn.edu/index.php">UMM web
page</a></li> 
<li><a href="http://www.m-w.com/">Merriam-Webster Online
Dictionary</a></li> 
</ul>
</div>

<h1 class="class1">This is the first heading.</h1>

<div class="class2">
First paragraph. Here is a link to <a
href="http://www.w3schools.com/css/default.asp">CSS Tutorial</a> at <a
href="http://www.w3schools.com/">W3 Schools</a>. 
</div>

<div class="class1">
Here is another paragraph. Here is what CSS tutorial say about
advantages of CSS: <cite>CSS is a breakthrough in Web design because
it allows developers to control the style and layout of multiple Web
pages all at once. </cite>
</div>

<h1 class="class2">This is the second heading.</h1>
<ul class="class1">
<li>The first list element</li>
<li>The second list element</li>
<li>The third list element</li>
</ul>

</body>
</html>

Open a new file problemset2.css. Write CSS styles to format the page so that elements in class1 and class2 look very different. You can experiment with fonts, colors, background color. Make sure that link colors (including visited links) go well with the colors of the text.

Also set formatting for the element in the beginning of the page that is marked with id menu. Make it look different from both classes.

Requirements:

At least two CSS properties (such as font, color, text width, border, etc.) must be set for each class and, separately, for the id.
The two lists must be formatted differently from each other.
The headers in each of the two classes must be formatted somewhat differently from other elements in the same class (for instance, they may be displayed in italics or in a different font).
Make sure your page passes the CSS validator.

Use the examples that we studied in class: HTML file and the corresponding CSS file.

Problem 2

Exercise 5.14 p. 93.

Problem 3: Computing the total of a bill

Write a JavaScript program that prompts the person for costs of two items, then adds the costs together, adds 5% sales tax to the total cost, and displays the result using document.write.

Problem 4: Displaying data as a table

Change the program from the previous question so that it asks for the names and the costs of two items and displays the result as a table: one row per item that shows the name and the cost, and the third row for the total with tax. You may submit just one answer for problems 3 and 4. However, if your first program works for problem 3 but has issues for problem 4, it's better to submit them separately.

How to submit

Send all of your program files to me by e-mail. You may submit the written part (if any) in class or send it together with your problem set. Please send only ONE e-mail with your entire submission, make sure you include everything. Multiple e-mails with your homework may result in a lower grade.

CSci 1001 course web site.