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

Assignment 4  "Class Ring"

• Handed out:   Monday, Oct. 3, 2011
• Due:     Monday, Oct. 17, 2011  
• Ring Assignments:   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:   ( 2 pts of your individual grade component)
    • "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.   ( 2 pts of your individual grade component)
  • ON YOUR RING PAGE:
    1. Create a table with two rows of three columns each.  ( 2 pts of your individual grade component for a 2 by 3 table )  In the middle column of the second row, insert your favorite video ( 2 pts of your individual grade component for an embedded video).   In the row above, in the middle column, put your full name.  Center it using inline CSS.  ( centering via CSS is 2 pts of your individual grade component)
    2. On the right of the content element above, in the second row, place a link to the NEXT web page in the ring.  ( 2 pts of your individual grade component)
    3. On the left of the content element, place a link to the PREVIOUS web page in the ring.
    ( 2 pts of your individual grade component)
    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.    ( 2 pts of your individual grade component)
    5. All table data elements should be centered via CSS.
    6. Examples:
       1. An image of what it should look like: 

•  GROUP CRADE COMPONENT:   The RING should be complete.  (10 pts)
  • No broken links (5 pts maximum => 5 * fraction of links that are working )
  • Everyone is included
  (5 pts maximum => 5 * fraction of class that is included)

• Grading:  Total 30 pts = 20 points individual component + 10 points group component
• Turn-in Procedure:   Just email me your web site URLs. (jhorn@nmu.edu)   ( 2 pts of your individual grade component for sendimg me the correct public URL)   Don't forget to put "CS 101:  A4" in the subject line.  (2 pts of your individual grade component for correct subject line!)

NOTE:  Using Network Location:  (only for Windows 7 users.  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 7 users go to Start -> Computer.  Under "Network Location " double click on the "myweb.nmu.edu" folder. 
2. You will be prompted for user name and password.   Use your NMU data.
3. 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"!
4. Drag and drop, or cut and paste, your A4 folder (or whatever you name it) into your pub folder on myweb. 
5. 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).