Lesson 6: Lists

Web Lab

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.

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.

Introduced Code

Warm Up (10 minutes)

Quick Share

  1. 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.
  2. In your journal, 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.
  3. Sometimes we use numbers to order our lists. Which of these lists do you think should be numbered, and which should not be numbered?
  4. 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)

Web Lab: Lists

  1. Get with a partner
  2. Go to code.org Lesson 5 and using Pair Programming, work through the levels until you get to Level 5. DO LEVEL 5 & 6 ON YOUR OWN AT YOUR OWN COMPUTER–NOT WITH A PARTNER.
  3. Review as a class Level 7
  4. Complete Levels 8 & 9 on your own.

Wrap Up (10 minutes)

Journal

  1. Update the “HTML Tags” page in your journal with the tags you learned in this lesson.
  2. Reflect on your development of the five practices of CS Discoveries (Problem Solving, Persistence, Creativity, Collaboration, Communication). Choose one of the following prompts to respond to:
    1. Choose one of the five practices in which you believe you demonstrated growth in this lesson. Write something you did that exemplified this practice.
    2. Choose one practice you think you can continue to grow in. What’s one thing you’d like to do better?
    3. Choose one practice you thought was especially important for the activity we completed today. What made it so important?

Leave a Reply

Your email address will not be published. Required fields are marked *