CS 101 Assignment 2

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

Assignment 2 "Multimedia Pages with Style"

Handed out: Tuesday, Sept. 9, 2008
Due: Friday, Sept. 26, 2008 (for BOTH of my sections of CS 101)
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	GRADE
1	Use of the "Title" attribute.
2	Lists: Ordered list. Unordered list. *(e.g., see nested list below)* Nested list: This is an example of a nested list. This list is nested within the "main" list in this table element.
3	A header CSS that formats elements in the body of your page. Use at least THREE (3) CSS properties to VISUALLY format parts of your page: 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. (VIDEOS: Intro to CSS using background colors, Syntax_for_Comments_in_CSS)
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). This text must be a descriptive summary that substitutes for the visual image. But it can be very brief.
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.
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.
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">
8	Good style (indentation and some "main" comments at the top, including name, etc.) in your source file.
9	Send me your assignment in a compressed folder, with all files in the folder. Send it to "jhorn@nmu.edu" USE THE FOLLOWING SUBJECT LINE: "CS 101 MW A2" , where "MW" can be "TR" depending on which section of 101 you are in.

Grading: I will grade each task above with "A", "B", "C", etc. and then average them for an overall A2 grade.
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), from Dan Reed's text book web site.
Turn-in Procedure: (see tasks above.)