INFORMATION
Instructions for using WinZip are available.
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 September 18, we talked in class about algorithms. We discussed four different types of algorithms: sequential, parallel, divide-and-conquer and binary. We solved the problem of finding two people in the class who have the same birthday using each of these types of algorithms, and 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: