---

CS 101   Web Construction,  Winter 2021,  Instructor:  Jeffrey Horn     ASSIGNMENT 4

---

Assignment 4  "Class Ring"

• Handed out:   Thursday, February 18, 2021
  
• Due:     Monday, March 5, 2021 (11:59pm)
  
• Reading: 
  • Chapter 5 of the Jamsa textbook
  • You should read ALL of Ch. 5 but for this assignment you will need only the material in Ch. 5 up to page 112.
• Ring Assignments:   here
• Here is Jeff's page on the ring!
• 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.). ) ( 2 pts of your individual grade component )
• Put the folder somewhere on your web server.   ( 4 pts of your individual grade component )
• ON YOUR RING PAGE:

• 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). 
  
•  I made a 10-minute video (low-res version) about embedding YouTube videos!
  
• In the row above, in the middle column, put your full name.    ( 2 pts of your individual grade component )
• In the right (third) column, in the first row, put the full name of the person NEXT to you in the ring. ( 2 pts of your individual grade component)
• In the same column (the third), in the second row, place a link to the NEXT web page in the ring.  ( 2 pts of your individual grade component)
• In the left (first) column, in the first row, put the full name of the person PREVIOUS to you in the ring. ( 2 pts of your individual grade component)
• In the same column (the first), in the second row, place a link to the PREVIOUS web page in the ring.  ( 2 pts of your individual grade component)
• Your page should clearly indicate which link is NEXT and which is PREVIOUS.   
• The table itself, and all table data elements should be horizontally centered via CSS. ( centering via CSS is 4 pts of your individual grade component )
• See pages 103-106  of Ch. 5 of Jamsa for horizontal centering with CSS
• W3 schools also has a good page on horizontal centering with CSS:
• Example:      (An image of what it should look like)
  
•  GROUP GRADE COMPONENT:  
The RING should be complete.  ( TOTAL 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 40 pts = 30 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 Windows File Explorer to Access the myweb server:  (only for Windows 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 users go to a File Explorer window. In the left side navigation panel, under "This PC", find an icon for the "myweb.nmu.edu" server and double click on it. 
2. You will be prompted for user name and password.   Use your NMU user account 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 include "pub" (that is understood).