Lesson 9: 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?

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.

As students start to use images, they may have trouble finding the right size to fit their pages. In the two lessons, students will learn how to resize their images with CSS. For now, students can use an online image resizer, such as the one found at https://resizeimage.net/, to resize their images. Alternatively, they can use the height or width attribute inside the img tag to resize it as the page loads.

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.

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.

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: This level can be used as a formative assessment. A rubric is provided in the level, and written feedback can be given to students. Click here to learn more about giving feedback to students.

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

Journal 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?