Unit2
Ch. 1
1
2
3
4
5
6
7
8
9
Ch. 2
10
11
12
13
14

Lesson 6: Lists

Overview

Students are introduced to ordered and unordered lists in HTML and work through a few levels in which they use the <ul>, <ol>, and <li> tags. They then go back to their project, where they add a new HTML page. Inside the new page, they write the HTML to display a recipe, top ten list, or any other content that uses the new tags that they have learned.

Purpose

This lesson introduces list elements, which are different from the previous elements in that they involve nested tags. Students should understand that the list item elements (<li></li>) go inside the list elements (<ul></ul> or <ol></ol>).

Students also continue to work on their projects, adding a new HTML page. Students are free to choose the content of this page, but it should include some type of list. Right now there is no way for users to navigate from one project page to another, but students will learn more about how to link the pages together in Lesson 9, right before they publish their project.

Assessment Opportunities

  1. Use the <ol>, <ul>, and <li> tags to create ordered and unordered lists in an HTML page.

    See levels 5 and 6 in the Code Studio lesson.

  2. Create and name a new HTML page.

    On the last level of the Code Studio lesson, check that students have created a new web page, given it a name, and put content inside.

Agenda

Warm Up (10 minutes)

Activity (40 minutes)

Wrap Up (10 minutes)

View on Code Studio

Objectives

Students will be able to:

  • Use the <ol>, <ul>, and <li> tags to create ordered and unordered lists in an HTML page.
  • Create and name a new HTML page.

Preparation

  • Have student journals (or project sketches) ready if they will use them to generate ideas for their lists page.

Introduced Code

Support

Lesson Forum

Report a Bug

Teaching Guide

Warm Up (10 minutes)

Quick Share

Remarks

In the last lesson, we looked at different types of content that we would or would not want to share with the world. Today you'll create an entirely new page for your project, and you'll need to think about the content of that page, but you'll also be using a new structure: lists.

Prompt: Take a few minutes to brainstorm some content that you would like to share with the world that you think could be structured as a list.

Discussion Goal

Goal: The goal of this discussion is to allow students some time to think about how lists are used, and to think about the difference between ordered and unordered lists before seeing them in HTML. Some possible lists students might come up with might be lists of their favorite things, top 10 lists, a shopping list, etc.

When students are discussing whether lists should be ordered or unordered use examples to highlight the difference. For example a list of finishers in a race should probably be ordered, while a grocery list probably does not need to be. Return to this discussion later in the lesson if need be.

Discuss: Students should brainstorm individually, then share with partners, then finally share with the whole class.

Prompt: Sometimes we use numbers to order our lists. Which of these lists do you think should be numbered, and which should not be numbered?

Discuss: Allow students to share their ideas for when numbering is appropriate.

Remarks

In HTML, there are two types of lists, ordered lists, which have numbers, and unordered lists, which have bullets. We're going to learn how to make both types of lists today so that you can use this structure in your project.

Activity (40 minutes)

Teaching Tip

Pair Programming: More on Pair Programming can be found in the Computer Science Discoveries Curriculum Guide.

Web Lab: Lists

Group: Place students into pairs.

Circulate: Helps students as they work through the first set of levels. Keep track of when pairs make it to Level 5.

Wrap Up (10 minutes)

Journal

Prompt: Have students update the "HTML Tags" page in their journals with the tags they learned in this lesson.

Prompt: Have students reflect on their development of the five practices of CS Discoveries (Problem Solving, Persistence, Creativity, Collaboration, Communication). Choose one of the following prompts as you deem appropriate.

  • Choose one of the five practices in which you believe you demonstrated growth in this lesson. Write something you did that exemplified this practice.

  • Choose one practice you think you can continue to grow in. What’s one thing you’d like to do better?

  • Choose one practice you thought was especially important for the activity we completed today. What made it so important?

View on Code Studio

Student Instructions

Lists

What are the two types of lists? There are two types of lists in HTML, ordered and unordered lists.

What is an unordered list?

An unordered list is just a set of bulleted items.

An unordered list element has the tag <ul> </ul>. This is an abbreviation for Unordered List. Each item in the list is marked by a list item element <li> </li>. This is an abbreviation for List Item. The list item element is a child element, which means that it goes inside of its parent element, the unordered list.

How do I make an unordered list?

Making an unordered list has two steps: making the list and adding the list items. To make the unordered list, write the unordered list tags <ul> </ul>. Next, add your list items inside the unordered list tags. To make each list item, use the list item tags <li> </li> and write the list item inside the tags.

It can be helpful to indent your <li> </li> tags so it's clear they are contained in the <ul> </ul> tags.

What is an ordered list?

An ordered list is a set of bulleted items which are numbered.

An ordered list element has the tags <ol> </ol>. This is an abbreviation for Ordered List. Each item in the list is marked by a list item element <li> </li>. This is an abbreviation for List Item. The list item element is a child element, which means that it goes inside of its parent element, the ordered list.

How do I make an ordered list?

Making an ordered list has two steps: making the list and adding the list items. To make the ordered list, write the ordered list tags <ol> </ol>. Next, add your list items inside the ordered list tags. To make each list item, use the list item tags <li> </li> and write the list item inside the tags.

It can be helpful to indent your <li> </li> tags so it's clear they are contained in the <ol> </ol> tags.

You can also use HTML to make different types of lists on your web page. This recipe includes two different types of lists, one ordered (with numbers) and one unordered (with bullets).

Do This

  • Use the inspector tool to see the code that is making the two different kinds of lists.
  • Make sure you and your partner agree on what the different tags do.
  • Fix the code so that the second item in each list displays correctly
View on Code Studio

Student Instructions

Unordered Lists

What are the two types of lists? There are two types of lists in HTML, ordered and unordered lists.

What is an unordered list?

An unordered list is just a set of bulleted items.

An unordered list element has the tag <ul> . This is an abbreviation for Unordered List. Each item in the list is marked by a list item element <li>. This is an abbreviation for List Item. The list item element is a child element, which means that it goes inside of its parent element, the unordered list (<ul>).

How do I make an unordered list?

Making an unordered list has two steps: making the list and adding the list items. To make the unordered list, write the unordered list tags <ul></ul>. Next, add your list items inside the unordered list tags. To make each list item, use the list item tags <li></li> and write the list item inside the tags.

It can be helpful to indent your <li> tags so it's clear they are contained in the <ul> tag.

Show me working code.

Example Result 
 <ul> 
   <li>Red </li> 
   <li>Green </li> 
   <li>Blue</li> 
 </ul>

This page should have an unordered list, but it's missing the list tags.

Do This

  • Use the <ul> and <li> tags to structure the content into an unordered list like the picture below.

View on Code Studio

Student Instructions

Ordered Lists

What are the two types of lists? There are two types of lists in HTML, ordered and unordered lists.
What is an ordered list?

An ordered list is a set of bulleted items which are numbered.

An ordered list element has the tag <ol> . This is an abbreviation for Ordered List. Each item in the list is marked by a list item element <li>;. This is an abbreviation for List Item. The list item element is a child element, which means that it goes inside of its parent element, the ordered list (<ol>).

How do I make an ordered list?

Making an ordered list has two steps: making the list and adding the list items. To make the ordered list, write the ordered list tags <ol></ol>. Next, add your list items inside the ordered list tags. To make each list item, use the list item tags <li></li> and write the list item inside the tags.

It can be helpful to indent your <li> tags so it's clear they are contained in the <ol> tag.

Show me working code.

Example Result 
 <ol> 
   <li>Step 1 </li> 
   <li>Step 2 </li> 
   <li>Step 3 </li> 
 </ol>

This page should include an ordered list, but it's missing the list tags.

Do This

  • Use the <ol> and <li> tags to structure this content into an ordered list that looks like the one below.

Hint: There will be NO NUMBERS in your code.

View on Code Studio

Student Instructions

Hint: Some of the HTML lists have errors, so you'll have to think about what mistakes in the code are causing the errors.

View on Code Studio

Assessment Opportunities

Key Concepts:

Structure content on a web page using HTML. (Use the <ol>, <ul>, and <li> tags to create ordered and unordered lists in an HTML page.)

Assessment Criteria:
Extensive Evidence

All list contents are contained in the appropriate tags so that the lists are displayed as in the example image. '

  • ' tags are all nested within '
      ' or '
        ' tags, and no numbers are used in the code to simulate the behavior of an ordered list.

    • Convincing Evidence

    <ul>, <ol>, and <li> tags are all used such that some items appear in an unordered list and some items appear in an unordered list.

    Limited Evidence

    At least two <li> tags are nested inside a <ul>or <ol> tag such that the content appears in a list.

    No Evidence

    List tags are not used, or are misused such that no content appears in a list.

    Student Instructions

    Combining Lists

    What are the two types of lists? There are two types of lists in HTML, ordered and unordered lists.
    What is an unordered list?

    An unordered list is just a set of bulleted items.

    An unordered list element has the tag <ul> . This is an abbreviation for Unordered List. Each item in the list is marked by a list item element <li>. This is an abbreviation for List Item. The list item element is a child element, which means that it goes inside of its parent element, the unordered list (<ul>).

    How do I make an unordered list?

    Making an unordered list has two steps: making the list and adding the list items. To make the unordered list, write the unordered list tags <ul></ul>. Next, add your list items inside the unordered list tags. To make each list item, use the list item tags <li></li> and write the list item inside the tags.

    It can be helpful to indent your <li> tags so it's clear they are contained in the <ul> tag.

    What is an ordered list?

    An ordered list is a set of bulleted items which are numbered.

    An ordered list element has the tag <ol> . This is an abbreviation for Ordered List. Each item in the list is marked by a list item element <li>;. This is an abbreviation for List Item. The list item element is a child element, which means that it goes inside of its parent element, the ordered list (<ol>).

    How do I make an ordered list?

    Making an ordered list has two steps: making the list and adding the list items. To make the ordered list, write the ordered list tags <ol></ol>. Next, add your list items inside the ordered list tags. To make each list item, use the list item tags <li></li> and write the list item inside the tags.

    It can be helpful to indent your <li> tags so it's clear they are contained in the <ol> tag.

    Show me working code.

    Example Result 
     <ul> 
       <li>Red </li> 
       <li>Green </li> 
       <li>Blue</li> 
     </ul>
    Example Result 
     <ol> 
       <li>Step 1</li> 
       <li>Step 2</li> 
       <li>Step 3</li> 
     </ol>

    This page should include both an unordered list and an ordered list.

    Do This

    • Use the list tags to structure this content into two lists that look like the ones below.

    Hint: There will be NO NUMBERS in your code.

    View on Code Studio

    Review

    Bring the class back together after all students have completed the previous level. You can track their progress in your Teacher Panel for that level. Review what students have learned about lists in the level progression. The previous level provides an opportunity to review both types of lists and how some common errors can affect how the list is displayed. Students can also use this time to update their HTML tag lists with <ul>, <ol>, and <li>.

    • Expanding Your Website
    • 8
    • (click tabs to see student view)
    View on Code Studio

    Teaching Tip

    These instructions for expanding the students' websites can be shown on the board so that you can go over them as a class. Click through to show the students the sample web pages.

    Student Instructions

    Expanding Your Website

    In the next level, you'll be expanding your website by adding a second page. You will discuss your plan with your partner, but you'll be working on your own site.

    You'll need to do three things in the next level.

    1. Create a new page.
    2. Name the new page.
    3. Put content on the new page.

    The new page you add should include:

    • at least one list
    • at least one heading

    Before you start coding, you should have a plan for what you want the website to be about. Here are some ideas. You can click on each page to see a full size version.

    Recipe Fun Fact List How to Guide
    • Expanding Personal Website
    • 9
    • (click tabs to see student view)
    View on Code Studio

    Teaching Tip

    The logistics of creating a new HTML page may be difficult for students. You can model creating a new page on this level so that students see how the process works.

    Student Instructions

    Create a New Page for Your Website.

    Here's your project from before. You'll be adding another page. Your new page can be a top 10 list, a recipe, or anything you like.

    Do This

    • Add a new HTML file by clicking . The new file will appear in the files list on the left side of the workspace.
    • Rename the file, either by right clicking it and choosing "Rename", or by clicking on it when it's already highlighted. Make sure the name is unique, descriptive and ends in ".html".
    • Use HTML to fill out your new page. It should include:
    • a list
    • a heading

    Standards Alignment

    View full course alignment

    CSTA K-12 Computer Science Standards (2017)

    AP - Algorithms & Programming
    • 1B-AP-12 - Modify, remix or incorporate portions of an existing program into one's own work, to develop something new or add more advanced features.
    • 1B-AP-15 - Test and debug (identify and fix errors) a program or algorithm to ensure it runs as intended.