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

Assignment 4  "Class Ring"
• Handed out:   Monday, October 5, 2009
• Due:     Tuesday, October 13, 2009     
• Goals: 
• Learn basic use of <table>
  • a bit of both page layout AND presentation of tabular data
  • Table with text, image, links.
• publishing a web page
  • ftp to a server (via Fetch, WSFTP, my Network Places, winSCP, or other FTP client)
  • constructing a URL (based on the location of the file on the server)
• Intro to CSS (Cascading Style Sheets), for centering.  Use of in-line CSS.
• Details:
  • This assignment requires coordination and cooperation with other students in your section.  So plan to attend classes!
  •  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"
  •  Put it into a folder.  Maybe we can standardize in class (e.g., "Class_Ring", "Ring", "classring", etc.).  Put the folder somewhere on your web server.
  • ON YOUR RING PAGE:
    1. Create a table with two rows of three columns each.   In the middle column of the second row, insert your favorite image.   In the row above, in the middle column, put your full name.  Center it using inline CSS.
    2. On the right of the content element above, in the second row, place a link to the NEXT web page in the ring. 
    3. On the left of the content element, place a link to the PREVIOUS web page in the ring.
    4. Use a table element to arrange the above elements.  For the full credit listed, your name should be centered 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. All table data elements should be centered via CSS.
    6. Examples:
       1. An image of what it should look like: 
  •  The RING should be complete.
    • No broken links (  X pts )
    • Everyone is included
    (Y pts)

• 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)   Don't forget to put "CS 101:  A4" in the subject line.

nOTE:  Using My Network Places:

1. Windows users go to Start -> My Network Places.  On the left panel, top, click on "Add a Network Place" to run the wizard.  In the wizard, choose "Next" then "Choose another network location", then "next" then type into the address window:  "ftp://myweb.nmu.edu" then "Next" then UNCHECK "Log on anonymously" then "Next" then type in whatever you want to name this icon in your "Network Places folder (e.g., "myweb").  Then finish the wizard.
2. In "My Network Places", click on the icon for your "myweb" account (the one you made in step 1 above!).  You now see what is in your folder on the server.  Create a new folder and name it "pub" (lower case).  Open it.  Everything you put in here, and only what you put in here, will be "on the web"!
3. Drag and drop, or cut and paste, your A4 folder (or whatever you name it) into your pub folder on myweb. 
4. Test it all by giving your browser this URL:  "http://myweb.nmu.edu/~jhorn/A4/A4.html", substituting your NMU user ID for "jhorn", your folder name for "A4", and your file name for "A4.html".  Keep the "~" but don't put in "pub" (that is understood).