CS 101 Assignment 2

CS 101 Web Construction, Winter 2008, Instructor: Jeffrey Horn ASSIGNMENTS

Assignment 2 "Multimedia Pages with Style"

Handed out: Monday, Feb. 4, 2008
Due: ~~Monday, Feb. 11, 2008~~ Wednesday, February 13, 2008
Goals: Create a static web page with images, lists, and using CSS to format.

Details:

Choose your own topic for a web site. Create a web page (.html file) with the following properties.

TASK NUMBER	TASK DESCRIPTION	POINT VALUE
1	Use of the "Title" attribute. Do me a favor: make this easy for me to grade by using the words "(HOVER HERE!!)" somewhere in the element with the title attribute. Example: (HOVER HERE!) A computer is the ultimate machine, the über machine, that controls, or will control, all other machines on the planet. (HOVER HERE!)	10
2	Lists: Ordered list. (5 pt.s) Unordered list. *(e.g., see nested list below)* (5 pt.s) Nested list: (5 pt.s) This is an example of a nested list. This list is nested within the "main" list in this table element.	15
3	A header CSS that formats elements in the body of your page. You earn points 5 pts. for each CSS property you use to VISUALLY format parts of your page: *(3 5 = 15 pt.s)** One example is element justification (e.g., right justified paragraph or image). Other examples are font, font size, font color, etc. Go here for a list of CSS properties. In particular, look under background, border, font, margin, positioning, or text. Click on the name of a property to see a simple example.	15
4	Local image (this means the src is the current folder; in other words, the same folder that your html file is in). Example: Note that you MUST put in alternative text (in the "alt" attribute).	10
5	Remote image (src is a URL for a web site, e.g., "http://cs.nmu.edu/~jeffhorn/nmu.gif"). Example: Happy Fat Tuesday! Note that you MUST put in alternative text (in the "alt" attribute). This alt text should acknowledge the entity (e.g., company, government organization) who owns the copyright.	10
6	An animated gif. (local or remote) Example: Note that you MUST put in alternative text (in the "alt" attribute). This alt text should give acknowledge the entity (e.g., company, government organization) who owns the copyright, or, if you have permission to use the image, then just put in something descriptive. Here is a link to some free animated gifs.	5
7	Document types: insert the following doctype definition (HTML 4.01 strict) at the top of your .html file: <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">	5
8	Good style (indentation and some "main" comments at the top, including name, etc.) in your source file.	10
9	Put your assignment on the web (find a server) and send me the URL!	10
10	Send me your assignment in a compressed folder, with all files in the folder. Send it to "jhorn@nmu.edu"	10
	TOTAL	100 pt.s

Grading: Total 100 pt.s The usual grading scale (i.e., 90 to 100 pt.s is an A, 80 to 89 pt.s is a B, etc.)
Example Code:
- Simple CSS example (also has images, remote and local): page itself, folder with the files for the page
- Older Example Code:
  1. (Warning! This is older code that does not necessarily live up to our current high standards of HTML 4 compatibility! For example, they are all missing DOCTYPE declarations.)
  2. See demo7.html (lists), demo8.html (nested lists), of our text book web site.
Turn-in Procedure: (see tasks above.)