3.2. Lists in HTML (20 minutes)

• Ordered lists (<ol>) and unordered lists (<ul>). • Adding list items with <li>:

Introduction to Ordered and Unordered Lists

HTML provides two main types of lists for organizing content: ordered lists and unordered lists. Both types are made up of list items (<li>), but they differ in how the items are displayed.

• Ordered Lists (<ol>):

  • Ordered lists are numbered, making them ideal for steps, rankings, or any content that requires a specific order.

  • The items in an ordered list are automatically numbered by the browser.

  • Example:

    <ol>
      <li>First item</li>
      <li>Second item</li>
      <li>Third item</li>
    </ol>

• Unordered Lists (<ul>):

  • Unordered lists are bulleted, making them ideal for lists where the order of items doesn’t matter, such as a list of features or random facts.

  • Instead of numbers, each item in an unordered list is preceded by a bullet point.

  • Example:

    <ul>
      <li>First item</li>
      <li>Second item</li>
      <li>Third item</li>
    </ul>

Both list types use the <li> tag to define each list item, which can contain text, links, images, or other elements.

Creating Nested Lists

HTML also allows nested lists, where one list is placed inside another. This is useful for creating sublists or outlining hierarchical structures.

• Example of a nested unordered list:

  <ul>
    <li>First item</li>
    <li>Second item
      <ul>
        <li>Subitem 1</li>
        <li>Subitem 2</li>
      </ul>
    </li>
    <li>Third item</li>
  </ul>

• Example of a nested ordered list:

  <ol>
    <li>Step 1</li>
    <li>Step 2
      <ol>
        <li>Substep 2.1</li>
        <li>Substep 2.2</li>
      </ol>
    </li>
    <li>Step 3</li>
  </ol>

Nested lists are useful for displaying more complex data structures, such as a list of categories with subcategories.

Activity:

Students create an ordered and unordered list, possibly outlining their top 5 favorite websites or movies

Students Activity

Objective:

Students will practice creating both ordered and unordered lists in HTML by outlining their top 5 favorite websites or movies. This will help them understand the structure and syntax of lists.

Activity Steps:

1. Open the Existing HTML File:

   • Ask students to open their existing HTML file (e.g., exercise.html) using their preferred text editor (such as Notepad or Visual Studio Code).

2. Create an Unordered List:

   • Instruct students to create an unordered list that outlines their top 5 favorite websites or hobbies.

   • Example:

     <h2>My Favorite Websites</h2>
     <ul>
       <li>Google</li>
       <li>YouTube</li>
       <li>Wikipedia</li>
       <li>GitHub</li>
       <li>Stack Overflow</li>
     </ul>

3. Create an Ordered List:

   • Ask students to create an ordered list that ranks their top 5 favorite movies, books, or places they want to visit.

   • Example:

     <h2>My Top 5 Movies</h2>
     <ol>
       <li>Inception</li>
       <li>Interstellar</li>
       <li>The Dark Knight</li>
       <li>The Matrix</li>
       <li>Parasite</li>
     </ol>

4. Create a Nested List (Optional):

   • If students are comfortable with the basics, encourage them to create a nested list, where they can list subcategories or details for each item.

   • Example:

     <h2>My Favorite Hobbies</h2>
     <ul>
       <li>Reading
         <ul>
           <li>Fiction</li>
           <li>Non-fiction</li>
         </ul>
       </li>
       <li>Coding</li>
       <li>Photography</li>
     </ul>

5. Save and Preview the Webpage:

   • After adding their lists, students should save their HTML file and open it in a browser to preview the results. They should see their lists properly formatted, with the unordered list displaying bullet points and the ordered list displaying numbers.

6. Experiment with Styling (Optional):

   • Encourage students to experiment with the appearance of their lists by adding CSS styles (optional).

     • Example of styling an unordered list:

       html코드 복사<style>
         ul {
           list-style-type: square; /* Changes bullet points to squares */
           color: blue; /* Changes the text color of the list */
         }
       </style>

Discussion and Reflection:

After the activity, lead a brief discussion and ask students to reflect on the following questions:

• What’s the difference between an ordered and unordered list, and when would you use each type?

• How did creating a nested list help organize your content?

• How can lists improve the readability and organization of a webpage?

Encourage students to share their experience with creating lists and discuss any challenges they encountered during the activity.

Extended Activity (Optional):

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

1. Add More Lists:

   • Ask students to add additional lists to their webpage, such as a to-do list, a list of ingredients for a recipe, or a list of steps for a process.

   • Example of a to-do list:

     <h2>To-Do List</h2>
     <ul>
       <li>Complete homework</li>
       <li>Exercise</li>
       <li>Read a book</li>
     </ul>

2. Customize List Styles with CSS:

   • Encourage students to customize the appearance of their lists using CSS. For example, they could change the list marker style, such as using circles or squares instead of the default bullets.

     • Example of changing list styles:

       <style>
         ol {
           list-style-type: decimal-leading-zero; /* Adds a leading zero to the numbers */
         }
         ul {
           list-style-type: disc; /* Default bullet style */
         }
       </style>

By the end of this activity, students will have a solid understanding of how to create and format both ordered and unordered lists in HTML. They will also gain experience in structuring content hierarchically, which is an important skill for organizing information on web pages.