INFORMATION
The assignment is due (both parts) on Wednesday October 3, 2007 no later than 11:59 pm.
BE SURE TO ASK IN THE LAB IF YOU NEED HELP WITH ANY STEPS!!!!
NOTE: be sure to finish Part I before you begin Part II.
PART II. MAKE YOUR HTML FILE LOOK PRETTY.
Step 0. Introduction to Style Sheets.
Cascading Style Sheets or CSS files provide a way to control the look-and-feel of your web page that is more convenient, more flexible and more comprehensive than adding parameters to HTML tags (like <td bgcolor="blue">). Style sheets let you define a wide range of settings such as colors, font types, font sizes, boxes around regions on your web page and spacing between various types of elements on the page.
There are two ways to use style sheets. The first way is to use the <style> tag within your HTML file header. Here is an example:
<html>
<head>
<title> my pretty html file </title>
<style type="text/css">
body { color: black; background: white; }
</style>
</head>
<body>
hello world
</body>
</html>
The second way is to create a separate CSS file that contains the style sheet commands. An example of a style sheet command is:
body { color: black; background: white; }
where body is the element on the web page to which the parameter settings apply (text and background colors, in this case). Here, you need to add a tag inside the <head> that tells the HTML file where it can find the style file:
<link type="text/css" rel="stylesheet" href="style.css">
You can get a lot more information on style sheets from this on-line tutorial guide:
http://www.w3.org/MarkUp/Guide/Style.html
OR
http://www.w3.org/Style/Examples/011/firstcss
OR
more than you ever wanted to know here:
http://www.w3.org/Style/Examples/011/firstcss
Step 1. Use style sheets to set table properties.
(1 point)
Use a style sheet to set at least three properties of the table you created in the second HTML file (recipe) from Part I of the assignment. The syntax for changing the colors of all the table cells and text is:
table { color: black; background: white; }
Note the use of punctuation: the open-curly-bracket { at the beginning of the list of properties being set, the close-curly-bracket } at the end of the list of properties being set, the colon : after the name of each property being set, and the semi-colon ; after the name of each property value.
Table properties that can be set include:
| name | description | possible values |
|---|---|---|
| color | color of text in table cells | any valid color name or hex value |
| background | background color for table cells | any valid color name or hex value |
| font-family | font specification for text in table cells | examples: serif, sans-serif, monospace, courier, verdana |
| font-size | size of font in table cells | relative (e.g., 200%) or absolute (e.g., 8pt) values |
You can choose whether you want to include the CSS commands in your HTML file or create an external style.css file. If you do create an external file, don't forget to submit it along with the HTML files!
Step 2. Use style sheets to set DIV properties.
(1 point)
A web page can be divided up into sections, where each section is called a DIV. Then you can set parameter values for the DIV.
First, create a file named style.css. Put in some tags to change the color of the text and background in your document.
Then, in your first HTML file (the one with the list, from part I), create a DIV like this:
<div class="list">
my favorite things to eat:
<ul>
<li> chocolate
<li> chocolate
<li> chocolate
</ul>
</div>
and in your style file, create an entry like this:
div.list { color: purple; background: yellow; border: solid; border-width: 5pt }
and play with the property settings of div.list in your style file to make it look nifty.
Step 3. Off-line question.
On Monday, we talked in class about algorithms. We discussed three different types of algorithms: sequential, parallel, and binary. We solved the problem of finding the oldest person in the classroom by using either a sequential algorithm or a parallel algorithm. And we solved the problem of finding Al Pacino in the phone book using either a sequential search algorithm or a binary search algorithm. We compared the different approaches (e.g., how long it takes an algorithm to run in the worst case, how much the computer has to remember while an algorithm is running, etc.).
Here are two new problems:
Create a text file in Textedit (or Notepad) and write your answers to the questions below in that file.
Include that file in the ZIP package of HTML and style files you're submitting for this assignment.
Question 1 (2 points)
Which type of algorithm would you choose to solve problem A? Why? Describe how you could use each of the three types of algorithms and defend your choice by explaining why you feel the one you've chosen is better than the others.
Hint: there is no "right" choice! Any of them can be used to solve the problem, and they all have different strengths and weaknesses. Your task is to explain the strengths and weaknesses and provide your opinion about why you would choose one over another.