3.4. Class Exercise (15 minutes)

Objective:

In this exercise, students will combine their knowledge of lists and tables to finalize their webpages. They will ensure their pages include both an ordered or unordered list and a table to organize information. This activity will help reinforce their understanding of HTML structure and content formatting.

Instructions for the Exercise:

Finalize the Webpage:

Ask students to open their existing HTML file (from previous lessons) using their preferred text editor (such as Notepad or Visual Studio Code).
Instruct them to ensure their webpage contains the following elements:
- An unordered or ordered list: This could be a list of their favorite websites, movies, or hobbies.
- A table: The table should include at least three columns and multiple rows of data, such as a product list, a list of items with prices and quantities, or a comparison table.

Example:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>My Webpage</title>
</head>
<body>
    <h1>Welcome to My Webpage</h1>
    
    <!-- Adding a List -->
    <h2>My Favorite Websites</h2>
    <ul>
        <li>Google</li>
        <li>YouTube</li>
        <li>Wikipedia</li>
        <li>GitHub</li>
        <li>Stack Overflow</li>
    </ul>

    <!-- Adding a Table -->
    <h2>Product List</h2>
    <table border="1">
        <tr>
            <th>Product Name</th>
            <th>Price</th>
            <th>Quantity</th>
        </tr>
        <tr>
            <td>Apple</td>
            <td>$1.00</td>
            <td>10</td>
        </tr>
        <tr>
            <td>Banana</td>
            <td>$0.50</td>
            <td>20</td>
        </tr>
        <tr>
            <td>Orange</td>
            <td>$0.75</td>
            <td>15</td>
        </tr>
    </table>
</body>
</html>

Save and Preview the Webpage:
- After completing their list and table, students should save their HTML file and open it in a browser to preview the results.
- They should check that:
  - The list is correctly formatted with bullet points or numbers.
  - The table is properly displayed with borders, headers, and data rows.

Refine the Layout (Optional):

Encourage students to experiment with adjusting the style of their list and table using basic CSS.

Example:

<style>
  table {
    border-collapse: collapse;
    width: 100%;
  }
  th, td {
    border: 1px solid black;
    padding: 8px;
    text-align: center;
  }
  th {
    background-color: #f2f2f2;
  }
</style>

// CSS
<style>
ul {
        list-style-type: none;
        margin: 0;
        padding: 0;
        overflow: hidden;
        background-color: #333333;
      }

      li {
        float: left;
      }

      li a {
        display: block;
        color: white;
        text-align: center;
        padding: 16px;
        text-decoration: none;
      }

      li a:hover {
        background-color: #dcd462;
      }
</style>

// CSS
<style>
ul {
        list-style-type: none;
        margin: 0;
        padding: 0;
        overflow: hidden;
        background-color: #333333;
      }

      li {
        float: left;
      }

      li a {
        display: block;
        color: white;
        text-align: center;
        padding: 16px;
        text-decoration: none;
      }

      li a:hover {
        background-color: #dcd462;
      }
      ul.ll {
        list-style-type: square;
        background-color: #b7adc0;
   </style>

Web Page Output:

Welcome to My Webpage

My Favorite Websites

Google
YouTube
Wikipedia
GitHub
Stack Overflow

Product List

Product Name

Price

Quantity

Apple

$1.00

Banana

$0.50

Orange

$0.75

Peer Review and Feedback:

// Some code

Peer Review:
- Pair students up or form small groups to review each other's work. Each student should view a peer’s webpage and provide constructive feedback.
- Peers should check:
  - Is the list correctly formatted (ordered or unordered)?
  - Is the table well-organized, with clearly labeled columns and rows?
  - Does the webpage look clean and easy to read?
Instructor Feedback:
- After the peer review, select a few students’ work to review with the entire class.
- Provide constructive feedback on:
  - The accuracy of the list and table structure.
  - The readability and organization of the webpage.
  - Any improvements that can be made, such as ensuring accessibility (e.g., using alt text for images, consistent use of table headers).

Reflection:

After the exercise, lead a short reflection session by asking students to think about the following questions:

How does using lists and tables help organize information on a webpage?
What challenges did you face while formatting your list or table?
How would you use tables and lists on more complex websites, such as an online store or a personal portfolio?

This reflection will help students solidify their understanding of how these HTML elements can enhance the structure and usability of webpages.

Extended Activity (Optional):

For students who finish early or want additional practice, suggest the following:

Add More Complex Lists and Tables:

Students can add a nested list (a list within a list) or a more detailed table (e.g., a comparison table with more columns and rows).

Example of a nested list:

<ul>
  <li>Websites I Visit
    <ul>
      <li>Google</li>
      <li>YouTube</li>
      <li>Wikipedia</li>
    </ul>
  </li>
  <li>Favorite Books</li>
</ul>

Experiment with Table Design:
- Encourage students to further customize the look and feel of their tables with CSS, such as changing the border style, cell padding, or background color of rows.

By the end of this exercise, students will have successfully integrated both lists and tables into their webpages, demonstrating their ability to structure and display content effectively in HTML.

Previous3.3. Creating Tables (30 minutes)NextLecture_4_Forms and Semantic HTML

Last updated 1 year ago