3-listTable

#Lesson 3 - Lists and Tables

Before class

---

###Teacher Preperation

• The teacher should create a webpage with a table that includes text and images.
• Review what was covered last lesson to understand the level of skill students have with HTML.

Daily Objective

• Students will be able to create a webpage that includes ordered and unordered list.
• Students will be able to create a site with html tables.

Key points

• Lists can be ordered or unordered depending on the tag you use.
• Almost anything can be placed in a table, not just text.
• You often see tables on weboages and don't even notice it.

Assessment

1. Review each student’s webpage after class

Vocabulary

• Ordered List
• Unordered List
• TD:Table Data
• TR: Table Row

###References

• https://c9.io/

During class

Do-now

1. Attendance: Teacher takes student attendance at www.kinvolved.com
2. Ask students to complete the following on paper:
   • Create a list of your 3 favorite hobbies.
   • Create a table of your three favorite hobbies.

Opening

"We have asked everyone to create a list on paper of your hobbies. Now let's compare lists and tables." Ask some of the following questions to see how list and table structure compared between students.

• Did you give your list/ table a title? What title?
• Did you use bullet points on you list?
• Did you number your hobbies 1, 2 and 3?
• Does your table have a border? Is it the same border everyone else used?

Introduction of new material (“I Do”)

"We can create lists and tables in HTML the same way we can create them on paper. We just need to know what tags to use." Ordered Lists
An Ordered List tag (ol) allows us to create a numbered list. It uses List Items tags (li) for each item on the list. Create a list on the board in front of the class.

Ask for a student volunteer to create and place a title on this list. Once a title is in, point out First In Last Out tag structure to the class.

Unordered Lists
Through a quick demo, show students how similar an ordered list and an unordered list can be.

Guided Practice (“We Do”)

"Now that you have seen me create a list, let's all create a table together." Ask students to open a new file in their IDE. They can follow along as you demo on the board.

First create a table tag with a border of 1. Let students know that the border is something that will be explained later.

Next we will use a table row(tr) tag that we will use to later place information in.

Next we will place three table data(td) tags in this page. We will place our three hobbies in these td tags.

Independent practice ("You do")

"Now that we have a horizontal table try to create the same table but this time make the list vertical."
After students have completed this task ask them to complete the following:

1. Create a table that is 2x2 cells.
2. One cell should have an ordered list with a title.
3. One cell should have an unordered list with a title.
4. The other two cells should include pictures and text.
   Extension: Create a Tic Tac Toe table
   

Closing/ Homework

“Today we created a HTML webpage with a table which included lists and images. Would anyone like to show off what they have done and explain how they did it?”

Check for understanding

Students must share their site with the teacher for your review.

##Homework Encourage students to log into their Cloud9 account at home and use w3schools to learn anything they can outside of class.

After Class

• Take a quick look at each webpage project from today. Students who were not able to create the page should be asked to recreate it, with teacher’s help, next class.
• Prepare for next lesson / hand off to next volunteer in rotation.