CS 101 Assignment 3 Fall 2013

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

Assignment 3 "Images and CSS"

Handed out: Sunday, February 2, 2014
Due: Wednesday, February 12, by email (see below, last task, number 10)
Readings from Jamsa text: Ch. 2 about images, Ch. 3 for hyperlinks (up to p. 65), Ch. 7 (just pp. 171-182) for CSS (inline and embedded, NOT external!).
Goals: Create a static web page with images in various roles. Learn CSS basics by using in-line styles and embedded style sheets.

Details:

Choose your own topic for a web site. Create a web page (.html file) with the following properties.
And YES, you may accomplish multple tasks with a single image, e.g., a local image (Task 1), that is also an animated gif (Task 3) as well as a link to a remote site (Task 4). Just remember to go down this "checklist" of tasks before you submit your A3 to make sure you've tackled all the tasks.

TASK NUMBER	TASK DESCRIPTION	POINTS	Reading (Jamsa)
1	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)!	5	Ch. 2 p. 34
2	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).	5	p. 30
3	An animated gif. (local or remote) Example: Here is a link to some free animated gifs. Note that you MUST put in alternative text (in the "alt" attribute)!	5	p. 40
4	An image that is a link to a remote site. (Note that you MUST put in alternative text (in the "alt" attribute)!)	5	pp. 61-62
5	A “thumbnail” (size) image (e.g., height and width both less than 200 pixels) that is a link to a larger version of the image in the web page. The larger version of the image must show up in the browser by itself, and not as part of a different web page. The easiest way to do this is to simply link to the image file itself (e.g., the .png, .jpg, .gif, .bmp, .jpeg, etc. file). (Note that you MUST put in alternative text (in the "alt" attribute)!)	5	(builds on the above tasks)
6	Document types: insert the following doctype definition at the top of your .html file: <!DOCTYPE html> This must come BEFORE the html code (which means before the <html> tag).	2	p. 10
7	CSS: INLINE (using the "style" attribute) Use the "style" attribute with CSS to color some text on your page. Use the "<span>" or "<div>" elements to select the text to color. Use all three different ways of specifying color: color name (e.g., "blue") hexadecimal color value (e.g., "#0000FF") decimal color value (e.g., " rgb(0,0,255)" ) There is an excellent online "color picker" page here that explains RGB and hex color codes and allows you to easily see and "pick" the color you want.	9	pp. 172-177
8	CSS: EMBEDDED (using the "<style>" element) Use the "<style>" element with CSS to color some text on your page. Basically do the exact same thing as you did in task 7 above. Apply it to different text on your page!	9	pp. 177-182
9	Good style (indentation and some "main" comments at the top, including name, etc.) in your source file.	5	p. 23
10	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: A3"	5	video
TOTAL:		55

ALTERNATIVE TEXT:

Note that you MUST put in alternative text (in the "alt" attribute) for ANY IMAGE.
This text must be a descriptive summary that substitutes for the visual image. But it can be very brief. (E.g., alt="This is an image of Lorde singing with a wireless mic.")
This alt text should 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.
More info in our textbook, Jamsa, Ch. 2, p. 35.