Lesson 8: Using Images

Today, we're going to add some images to our sites. This can make the websites a lot more fun, but it also means we'll need to be extra careful about making sure that we are safe and responsible in how we use them.

Prompt: In your journal, think of some guidelines we should keep in mind when using images. How can we make sure that we are safe and respecting the rights of others?

Discussion Goal: As students come up with their guidelines, you may choose to prompt them by reminding them of the recent activities they have done around sharing personal information and respecting copyright. Many classes may also want to add in other guidelines, such as defining what is appropriate in a school setting, or making sure that any people depicted in the image are comfortable with the image being posted online. Regardless, make sure that you are satisfied that the guidelines are sufficient before you move on.

Discuss: Have students journal individually, then share with a neighbor, and finally discuss as a whole class. You may choose to create a poster with the guidelines that students have created, and prompt them if anything seems missing from the list.

Question of the Day: How can we add images on our websites, while making sure we respect everyone's rights?

Transition: Send students to Code Studio.

Guide to Programming Levels: Additional guidance for programming levels is provided in the CSD Guide to Programming Levels. This document includes strategies and best-practices for facilitating programming levels with students.

Circulate: Give students time to explore the image tag and discuss the questions on the level with their partner.

Prompt:

• How do you think they knew what the name of the image should be for the src (source) attribute? Where did they find this information here in Web Lab?
• What did they put as the alternate text? Do you think that is descriptive enough?
• What else do you notice about the image tag?

Discussion Goal: Students should notice the new image file in the left-hand panel of Web Lab. This is where they can find the names of images for their web pages. Students may also notice that the image tag does not have a closing tag. You can explain to students that the image tag is a self-closing tag and is one of the few that do not need a closing tag.

Do This: Use the "Adding Images" slide to go over the three important parts needed when adding images with the <img> tag.

Code Studio: Have students continue to the next levels in Code Studio

Level 1: Students may come across some image tags that include a slash at the end, like this: <img src="imgURL.jpg" alt="my image" />

These ending slashes are there to indicate that this tag is self-closing, but they are optional and have no effect on the web page.

Level 2: Because of the type of license used, students are not legally required to include attribution, but it is a good habit for them to get into when developing their websites.

Level 5 - Recommended Search Engines: Because we can't know which sites might be blocked in your district, we've avoided pointing students to a specific search engine. Not all search engines make it easy to set Creative Commons filters - some of the easiest include:

• Creative Commons Search
• Google Image Advanced Search
• Wikimedia Commons
• Flickr Creative Commons

As with any site with crowdsourced content, search engine results will change from day to day, and some of those results may be inappropriate for the classroom. You may want to check these sites shortly before displaying them to the class, and decide what is best for your classroom.

A useful way to have students name images that they find in image repositories online would be to combine description + image source + Creative Commons license type.

An example might be: CatWikimediaCC0.jpg

This ensures that the students know where they found the image originally, what the search terms might have been, and that they are able to provide attribution to a source if needed.

Although this level can be used to assess student understanding of the syntax of the <img> tag, its main purpose is to make students aware of the most common types of bugs they may encounter when adding images to web pages.

Formative Assessment: Levels 8 & 9 can be used as a formative assessment.

A rubric is provided in level 8, and written feedback can be given to students. Click here to learn more about giving feedback to students.

Level 9 is a free response reflection that can be used as an opportunity to gain insight into how the students completed the assessment level and the choices they made with adding images. In addition, this reflection can be used to identify any misconceptions shared among students that should be cleared up.

Question of the Day: How can we add images on our websites, while making sure we respect everyone's rights?

Do This: Have students update their HTML Tags chart in their journals to include the image tag and its attributes.

Journal Prompt: 3-2-1

• What are 3 ways you can use images to make your site better?
• What are 2 challenges in adding images to a website?
• What is 1 way you can respect people's rights when using images?