4-image

#Lesson 4 - Images

Before Class

###Objective

• Students will be able to create a webpage that includes two images.

###Key Points

• An img tag is used to add a photo to your HTML site.

###Assessment

1. Review each student’s webpage after class
2. Students will be assessed by their performance on the Do Now and Exit Task

###Vocabulary

• img tag
• src
• Self closing tag

###References

• JSBin
• http://www.w3schools.com/tags/tag_img.asp
• How to Save in JS Bin

During Class

Do Now

1. Volunteer takes attendance. Procedure found here.
2. Do Now activity is posted for students on the board:

Open the developer tools on your school's homepage. By searching around the HTML code try to figure out what tag is used to place an image on a site.

Opening

• Discuss the Do Now with the class. See if anyone figured out that the img tag stands for image.

Introduction to New Material (“I Do”)

Ask students to close computer screens so they can give all their attention to the lecture. Today we are going to work in JS Bin to add images to an HTML webpage.

We do this using the img tag. The image tag is unlike other tags we worked with in the past because it is a self closing tag.

The lead teacher should then live-code placing a ScriptEd image on a page in JS Bin.

<img src = "http://i.imgur.com/8KnVLzU.png">

Guided Practice (“We Do”)

Have students open a new bin in JS Bin. Ensure that they are logged in with their GitHub, so they can properly save their work.

"Now I want all of you to make the same page I did on the board a moment ago."

After the students have created this page, they must save this page properly by completing the directions found in this presentation.

Independent Practice ("You Do")

All students will create a page with the following criteria:

• A title
• A heading
• 2 pictures, both with text under them.

During this time, teachers will circulate to help students with technical issues. If a majority of the class is struggling with the same issue you may consider demonstrating the solution on the board.

Closing

“Today we created a HTML webpage with multiple tags. Would anyone like to share what they have done and explain how they did it?”

Encorage students to share their work on the board.

##How to Submit

This process can take 5+ minutes, given that it will be new for students:

Students must submit their Gist URL at the project submission link found in the header of the Daily Session Document.

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.