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

Assignment 3  "Links"
• Handed out:   Wednesday, Feb. 20, 2008
• Due:          

  Part 1:  the Class Ring	Friday, February 29, 2008 (midnight) BEFORE SPRING BREAK!
  Part 2:  your own Multi-page WebSite	Wednesday after Spring Break (March 12, 2008)

• Goals: 
  1. Create a site with multiple, interlinked web pages (i.e., HTML files),
  2. Use different types of links,
  3. Use a table for simple layout of content,
  4. Use a standalone CSS file for styling of multiple pages.
• Details:

  PART 1:   the Class Ring   (50 pts total for Part 1)

  • This part of the assignment requires coordination and cooperation with other students in your section.  So plan to attend classes!
  •  (10 pts)  Create a separate web page just for this part of the assignment.  Name it one of the standard default names:
    • "index.html"
    • "default.html"
    • "home.html"
  •  (10 pts)  Put it into a folder whose name should be one that we standardize in class (e.g., "Class_Ring", "Ring", "classring", etc.).  Put the folder somewhere on your web server.
  • (20 pts) ON YOUR RING PAGE:
    1. (5 pts of the 20)  In the middle, insert your favorite image, animated GIF, YouTube video, etc. Center your FULL NAME above this visual content element.
    2. (5 pts of the 20)  On the right of the content element above, place a link to the NEXT web page in the ring. 
    3. (5 pts of the 20)  On the left of the content element, place a link to the PREVIOUS web page in the ring.
    4. (5 pts of the 20)  Use a table element to arrange the above elements.  For the full credit listed, your name should be centered located above the visual content element, while the NEXT and PREVIOUS links should be on the right and left of the visual content element.  Your page should clearly indicate which link is NEXT and which is PREVIOUS.
    5. Examples:
       1. An image of what it should look like: 
       2. My class ring page so far:  http://myweb.nmu.edu/~jhorn/classring
          • Note that my page is in all three rings (one for each CS 101 section). 
          • You can use it as a starting point to check out the ring for your section.
          • You can use it to check out the rings for all three sections.
          • I used two nested tables (one for the three PREVIOUS links, and one for the three NEXT links).  Don't bother to use nested tables in YOUR classring page!   You only need one each of the PREVIOUS and NEXT links!
  • (10 pts) The RING should be complete.
    • No broken links (5 pts of the 10 above)
    • Everyone is included (other 5 pts of the 10 above)

  PART 2:   your own multi-page web site  (50 pts total for Part 1)

  • Choose your own topic for a web site.  Create a main web page (HTML file), named index, default, or main, with the following features:

1. (5 pts) Text that is a link to a remote site.
2. (5 pts) An image that is a link to a remote site.
3. (5 pts) An image that is a link to a larger version of the image in the web page.
4. (5 pts) A link to a second local web page (within the same folder as the first web page).
5. (5 pts) Link from the second web page (in feature 4 above) back to the first web page. 
6. (20 pts) EXTERNAL CSS:  Use a separate file for your CSS (15 pts of the 20) , and have the CSS code in it format something on BOTH of your web pages for Part 2 (5 pts of the 20) .
• Refer to your external CSS file with this new HTML element:
  • <link rel="stylesheet" type="text/css" href="yourOwnFileName.css">
7. (5 pts)  Good style.  (see Assignments 1 and 2 for guidelines on style).
8. Example (of two local web pages that complete SOME of the above tasks for Part 2)

• 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.)
• 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. demo9.html  (tables) and demo10.html (tables) of our text book web site.
  3. Here is a table example of our own. 
• Turn-in Procedure:   Just email me your web site URLs. (jhorn@nmu.edu)  Send me the URLs for BOTH parts of this assignment!!!!!!!!!!!!!!!!