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.
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
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?
- Lesson Overview
- Student Overview
Overview
This lesson introduces ordered and unordered lists and the associated <ul>, <ol>, and <li> HTML tags. The class practices using the tags, then goes back to the personal web page project to add a new HTML page that includes the new tags.
Introduced Code
- Unordered List -
<ul></ul> - List Item -
<li></li> - Ordered List -
<ol></ol>
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
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> |
 |
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.
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> |
 |
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.
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.
- Lists in HTML
- Teacher Overview
- Student Overview
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
- 7
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.
- Create a new page.
- Name the new page.
- 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
- 8
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.