CS 101   Web Construction,  Fall 2010,  Instructor:  Jeffrey Horn     ASSIGNMENT 4

Assignment 4  "Class Ring"
• Handed out:   Wednesday, October 6, 2010
• Due:     Friday, October 15, 2010   
• Ring Assignments:   try here.
• Goals: 
• Learn basic use of <table> element
  • Table with text, video, links.
• publishing a web page
  • ftp to a server (via Fetch, WSFTP, Network Locations, winSCP, filezilla, or other FTP client)
  • constructing a URL (based on the location of the file on the server)
• A bit more CSS (Cascading Style Sheets), for centering.
• 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 video.   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 30 pt.s  
• 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:  (only for Windows XP.   Windows 7 users must use "Network Locations", while Mac OS users can try "Fetch".  Currently, I don't have on-line instructions for these services; we'll cover them in class!)

1. Windows XP 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).