CSci 1001 Problem set 2. Due Thursday, February 22.

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>
<head>
<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 different from both classes.

Requirements:

  1. At least two CSS properties must be set for each class and, separately, for the id.
  2. The two lists must be formatted differently from each other. Use .class1 ul to refer to the list in class1 and #menu ul to refer to the list in the menu bar.
  3. 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). Use h1.class1 to refer to the header in class1.

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

Problem 2: 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 3: 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 2 and 3 if your JavaScript works.

Problem 4: Written part

Questions 14, 15, 16, 23 pp. 56-57.

How to submit

Send all of your program files to me by e-mail. Don't forget to include the lab if you haven't done so already. You may submit the written part 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 lower grade.

The views and opinions expressed in this page are strictly those of the page author. The contents of this page have not been reviewed or approved by the University of Minnesota.