Lecture Notes 08: More HTML

Recap: Application layer

Editing HTML

1. On Mac: open this document and follow Setup for Mac TextEdit
2. On Windows: you can follow this tutorial to Create an HTML document on Windows
3. OR [Optional] Download and install Sublime Text 3

An example of a Table:

 1  
 2  
 3  
 4  
 5  
 6  
 7  
 8  
 9  
10  
11  
12  
13  
14  
15  
16  
17  
18  
19  
20  
21  

<table>
<thead>
  <tr>
    <th>Name</th>
    <th>Number</th>
    <th>Grade</th>
  </tr>
</thead>
<tbody>
  <tr>
    <td>Andrea Anders</td>
    <td>Becky Burns</td>
    <td>Carlos Cook</td>
  </tr>
  <tr>
    <td>A</td>
    <td>B</td>
    <td>C</td>
  </tr>
</tbody>
</table>

Final Project: Team Wiki Website!

This class will NOT have a final exam.

Instead, we will build a website in teams of 3, where you explain how the internet works in your own words and with your own style.

The project stages will be:

1. Make teams of 3 (a max of 2 teams of 2 will be accepted) [Let me know before Thursday 11/24]
   If you don't have people in mind, I can make random teams with all of those who remain without a team before next class. [Let me know before Thursday 11/24]


2. Your team will create a website that will include the following parts:
   
   1. [Due 12/03] A bio page for each member telling the reader who you are and what you like.
   2. [Due 12/07] A landing page for your team's webpage with your team name, logo, and welcome blurb.
   3. [Due 12/10]A wiki page by each member explaining how the internet works using analogies (the model to follow is Wikipedia).
      1. This page is the principal gradeable section and should explain how the main blocks of the OSI model work (Data-Link, Network, Transport, and Application).
      2. You should use Analogies to explain this to the layperson. The analogies must be your own! (not in the book; not used by me in class;)
      3. You should include an index (with links to sections), sections (headers), and images.
      4. You should include a references section where you cite all the resources (at least 5) you used to explain your materials (lecture notes, wikipedia, online book, etc)
      5. You should include an "External Links" section, with hyperlinks to relevant webpages (at least 5)

Grading Criteria

• Completeness: 40%
  This refers to the page having all specified sections
• Correctness: 20%
  The HTML is correct and works without issues
• Richness: 20%
  The HTML uses all required tags (headers, paragraphs, lists, tables, images, links, and anchors)
• Clarity: 20%
  The text is well written and any explanations are coherent, simple, and precise (even while using analogies).

Notes

1. You may start now and build a basic skeleton of your bio and wiki pages


2. Next Tuesday, we'll talk about CSS and Bootstrap, which will be EXTRA mechanisms to let you build fancy-looking pages. They will not be required (but you might want to include them to make it look cool)


3. The ONLY way to build this webpage is by performing small increments with testing
   . That means that you should start with a basic skeleton and perform the following actions:
   
   1. Add a small part (basically every time you add a tagged section)
   2. View the file in a browser
   3. Check if it shows what you expected. If YES, go to (1) or End; If NO, fix it immediately! and go to (3)

1-Minute Debrief

Please fill this out before leaving:

Next class: More HTML

Before next class (Tuesday)

[Due for everyone]

Quiz released Today... you have until Monday midnight to complete it.

[Optional]

TODO