1-divIdClass

#Lesson 1 - Divs, IDs & Classes

Before Class

Daily Objective

Students will be able to use the <div> tag in conjunction with id and class to identify areas of a webpage.

Key Points

• The <div> tag is a container. It can hold text, images and/or both.
• By using an id or a class you can identify portions of an HTML page more closely.

Assessment

1. Complete the Do Now (located in slide 2 of the Presentation Slides).
2. Write Exit Ticket based off assessments from current lesson.

Students will show progress toward reaching the objective based on their performance on the Do Now and Exit Ticket.

Vocabulary

• <div>
• id
• class

###References

• Presentation Slides
• http://www.w3schools.com/tags/tag_div.asp
• http://www.w3schools.com/css/css_selectors.asp

During Class

Do Now

1. Volunteer takes attendance. Procedure found here.
2. Place the Do Now on the board. The starter question can be found in slide 2 of the Presentation Slides

Opening

Discuss the answers of the Do Now with the class (slide 3 of the Presentation Slides).

Explain to the students that today they will be learning how to identify parts of a webpage.

"If you look at the source of any webpage you will notice it is made up mostly of <div> tags that are identified with id and class attributes."

Introduction to New Material (“I Do”)

#####What is an id? (slide 4-5) Giving a tag an id is like giving it a name. If you didn't have a name, it would be very hard to call on you in this classroom.

When using an id, you must ensure that you use the proper syntax noted in slides 4 and 5.

Can anyone think of a time they were making a webpage and could have used an id to improve their page?

#####What is a class? (slide 6-8) A class is very similar to id . They are also used to identify a tag.

They are called on in CSS using a . and not a #

In many cases, they can be used interchangably. However, you should always use a class to group several IDs. (slide 8)

#####What is a <div>? (slide 9) A <div> tag is like a blank container. It can hold anything. The <div> tag is used more than any other tag. Now that you are creating larger and more complicated sites, you should get use to using <div> tags for almost everything.

Guided Practice (“We Do”)

Follow the directions on slide 10 to set up an environment for the "You Do" portion of this class.

Independent practice ("You do")

In the workspace that the students just created, they must now make a simple HTML page that uses <div> tags, id and class attributes.

Encourage students to take this task even further by adding images and more styles.

Exit Ticket

Give the Exit Ticket.

###Closing Today you learned about how to use the <div> tag, with id and class attributes. Why is this important? How is id different than class? Why would you choose to use class instead of id?

Check for Understanding

Leave time at the end of class for students to wrap up and ask teachers any questions they may have.

####How to Submit Students must push their code to their GitHub repo using the following commands in the Cloud 9 Terminal:

git status
git add .
git commit -m "example comment"
git push origin master

This project does not yet have to be share with the instructors. It will soon be shared in a future lesson.

###Homework Students who are not complete with their site by the end of class should complete it at home for homework.

After Class

• Prepare for next lesson / hand off to next volunteer in rotation.