Lesson 9: Using Images
Overview
Question of the Day: How can we add images on our websites, while making sure we respect everyone's rights?
Students start the class by considering the ethical implications of using images on their websites, specifically in terms of intellectual property. They then learn how to add images to their web pages using the <img> tag and how to cite the image sources appropriately.
Purpose
This lesson introduces images, which are different from earlier tags in that they are 'self-closing' and include attributes. Students should understand that these tags do not surround content in the same way as other tags.
This is also the first time that students are encouraged to use content from others, and provides them an opportunity to put into practice what they have learned about intellectual property and copyright.
Assessment Opportunities
-
Follow copyright law, accurately attributing others when using their work.
See Level 8 in the Code Studio lesson.
-
Add an image to a web page
See Level 8 in the Code Studio lesson.
Agenda
Lesson Modifications
Warm Up (10 min)
Activity (20 min)
Wrap Up (5 min)
View on Code Studio
Objectives
Students will be able to:
- Follow copyright law, accurately attributing others when using their work.
- Add an image to a web page.
Links
Heads Up! Please make a copy of any documents you plan to share with students.
For the Teachers
- Using Images - Slides
Introduced Code
Teaching Guide
Lesson Modifications
Attention, teachers! If you are teaching virtually or in a socially-distanced classroom, please see these modifications for Unit 2.
Warm Up (10 min)
Using Images
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.
Remarks
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?
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?
Activity (20 min)
Content Corner
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.
Adding Images
Transition: Send students to Code Studio.
Wrap Up (5 min)
Using Images
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?
- Lesson Overview
- 1
Teaching Tip
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.
Student Instructions
Example: wzxhzdk:0
In order to tell the browser which file to use, extra information, called an **attribute**, is added to the <img> tag inside the brackets. The attribute `src` stands for **s**ou**rc**e and tell the name of the image. Image files names include extensions which tell the computer which type of image they are working with. Common extensions are .jpg, .jpeg, .png.
In addition to have the src attribute, image elements also have the `alt` attribute which describe the image. This is important in case the image doesn’t load or for people who have trouble with their eyesight.
An `
Images
A Dog vs Cat web page has been started for you. The dog image has already been added to the below web page.
Do this
- Look at the code that made the dog image appear
- Use an image tag to add the
cat.jpegimage to the page below the cat heading
Teaching Tip
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.
Student Instructions
Giving Credit
When using someone else's image, you should give credit to the original creator (this is also called attribution). The easiest way to do this is to add text below the image that identifies the creator and website it came from. You may also add information about the publishing license.
Do this
- Add information about where the image came from and its license.
(This image was found at pixabay and was uploaded by the user "Alexas_Fotos", who used a "free for commercial use" and "no attribution required" license.)
Student Instructions
::: details [How do I add images?]
The <img> tag allows you to show images on your web page.
Example:
<img src="dog.png" alt="dog jumping">
In order to tell the browser which file to use, extra information, called an attribute, is added to the tag inside the brackets. The attribute
src stands for source and tell the name of the image. Image files names include extensions which tell the computer which type of image they are working with. Common extensions are .jpg, .jpeg, .png.
In addition to have the src attribute, image elements also have the alt attribute which describe the image. This is important in case the image doesn’t load or for people who have trouble with their eyesight.
An <img> tag is an example of a self-closing tag because it starts and closes in one tag.
:::
::: details [Why does an image tag not have a closing tag?] An image tag doesn't need a closing tag because there is no text content which must be wrapped in tags. The content that shows on the screen is specified through the tags attributes. :::
::: details [What is an attribute?]
Attributes are extra information included in a tag. Attributes have names and values. The name tells what type of information is being provided and then the value gives the specific information for that tag.
For example tags have two attributes, src and alt. src specifies the name of the image file and alt tells the browser in readable text what the image is.
:::
The Details Matter
The src attribute needs to point to the exact filename of the image you want to use. That means you need to pay attention to spelling, capitalization, and the file extension. Each of the three images on this page is broken because of an improper src attribute. Using the file menu for reference, fix each of the image tags.
Note: Even though the images are not loading properly, our website is still showing descriptive text of what should be there because we used alt attributes. Cool!
Student Instructions
::: details [How do I add images?]
The <img> tag allows you to show images on your web page.
Example:
<img src="dog.png" alt="dog jumping">
In order to tell the browser which file to use, extra information, called an attribute, is added to the tag inside the brackets. The attribute
src stands for source and tell the name of the image. Image files names include extensions which tell the computer which type of image they are working with. Common extensions are .jpg, .jpeg, .png.
In addition to have the src attribute, image elements also have the alt attribute which describe the image. This is important in case the image doesn’t load or for people who have trouble with their eyesight.
An <img> tag is an example of a self-closing tag because it starts and closes in one tag.
:::
::: details [Why does an image tag not have a closing tag?] An image tag doesn't need a closing tag because there is no text content which must be wrapped in tags. The content that shows on the screen is specified through the tags attributes. :::
::: details [What is an attribute?]
Attributes are extra information included in a tag. Attributes have names and values. The name tells what type of information is being provided and then the value gives the specific information for that tag.
For example <img> tags have two attributes, src and alt. src specifies the name of the image file and alt tells the browser in readable text what the image is.
:::
Choosing a Good Name
It's important for images to have good names, ones that are easy to understand and use characters that are good for links. This project's image names have some problems.
Do This
- For each image, fix the name according to the following rules:
- Avoid special characters such as
&,?,%,,(, etc. - Make sure the name has a specific meaning that helps you know what the image is.
- Use dashes (
-) or underscores (_) instead of spaces. - Keep the names as short as possible and still have a clear meaning.
- Choose your favorite image and add it to the web page.
- Don't forget the attribution!
| Image | Amphibian | Attribution |
|---|---|---|
 |
kani bushfrog | Rison Thumboor - Wikimedia Commons - CC-BY-SA |
 |
paedophryne amauensis | Rittmeyer EN, Allison A, Gründler MC, Thompson DK, Austin CC - Wikimedia Commons - CC-BY |
 |
red eyed tree frog | Carey James Balboa - Wikimedia Commons - Public Domain |
 |
fire salamander | Cristo Vlahos - Wikimedia Commons - CC-BY |
 |
axolotl | th1098 - Wikimedia Commons - CC-BY-SA |
Teaching Tip
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:
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.
Student Instructions
::: details [How do I add images?]
The <img> tag allows you to show images on your web page.
Example:
<img src="dog.png" alt="dog jumping">
In order to tell the browser which file to use, extra information, called an attribute, is added to the tag inside the brackets. The attribute
src stands for source and tell the name of the image. Image files names include extensions which tell the computer which type of image they are working with. Common extensions are .jpg, .jpeg, .png.
In addition to have the src attribute, image elements also have the alt attribute which describe the image. This is important in case the image doesn’t load or for people who have trouble with their eyesight.
An <img> tag is an example of a self-closing tag because it starts and closes in one tag.
:::
::: details [Why does an image tag not have a closing tag?] An image tag doesn't need a closing tag because there is no text content which must be wrapped in tags. The content that shows on the screen is specified through the tags attributes. :::
::: details [What is an attribute?]
Attributes are extra information included in a tag. Attributes have names and values. The name tells what type of information is being provided and then the value gives the specific information for that tag.
For example tags have two attributes, src and alt. src specifies the name of the image file and alt tells the browser in readable text what the image is.
:::
Uploading Images
You can upload images that you've found elsewhere using the Add Image button. Go find an image of a different type of pet that you like and download it to your computer (using right-click "Save As").
Once you have your images, click 
and upload the image from your computer into your project, where you can then use it in your page.
Do This
- Find an image you are allowed to use and upload it to this project.
- Make sure the file name follows your naming rules.
- Use the
<img>tag to display the image(s) in your website.- Make sure to add an
altattribute!
- Make sure to add an
- Add the attribution information below the image.
Student Instructions
Practice your new skills here.
Choose from the following activities:
None
Use your debugging skills to figure out why the image is not appearing.
Use your debugging skills to figure out why the alt text, but not the image, is appearing.
Use your debugging skills to figure out why the image is not appearing.
Add alt attributes to describe existing images.
Add an image link to make the image appear in the web page.
Add an image to this recipe.
Teaching Tip
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.
Student Instructions
Student Instructions
::: details [How do I add images?]
The <img> tag allows you to show images on your web page.
Example:
<img src="dog.png" alt="dog jumping">
In order to tell the browser which file to use, extra information, called an attribute, is added to the tag inside the brackets. The attribute
src stands for source and tell the name of the image. Image files names include extensions which tell the computer which type of image they are working with. Common extensions are .jpg, .jpeg, .png.
In addition to have the src attribute, image elements also have the alt attribute which describe the image. This is important in case the image doesn’t load or for people who have trouble with their eyesight.
An <img> tag is an example of a self-closing tag because it starts and closes in one tag.
:::
::: details [Why does an image tag not have a closing tag?] An image tag doesn't need a closing tag because there is no text content which must be wrapped in tags. The content that shows on the screen is specified through the tags attributes. :::
::: details [What is an attribute?]
Attributes are extra information included in a tag. Attributes have names and values. The name tells what type of information is being provided and then the value gives the specific information for that tag.
For example tags have two attributes, src and alt. src specifies the name of the image file and alt tells the browser in readable text what the image is.
:::
Debug: Missing Image
Someone has submitted a bug report on this web page. Can you fix the bug?
| What I expected to happen | What happened instead |
|---|---|
| There is an image of balloons | There is no image |
| # Do This | |
| * Find and fix the problem that is causing the bug. |
Student Instructions
::: details [How do I add images?]
The <img> tag allows you to show images on your web page.
Example:
<img src="dog.png" alt="dog jumping">
In order to tell the browser which file to use, extra information, called an attribute, is added to the tag inside the brackets. The attribute
src stands for source and tell the name of the image. Image files names include extensions which tell the computer which type of image they are working with. Common extensions are .jpg, .jpeg, .png.
In addition to have the src attribute, image elements also have the alt attribute which describe the image. This is important in case the image doesn’t load or for people who have trouble with their eyesight.
An <img> tag is an example of a self-closing tag because it starts and closes in one tag.
:::
::: details [Why does an image tag not have a closing tag?] An image tag doesn't need a closing tag because there is no text content which must be wrapped in tags. The content that shows on the screen is specified through the tags attributes. :::
::: details [What is an attribute?]
Attributes are extra information included in a tag. Attributes have names and values. The name tells what type of information is being provided and then the value gives the specific information for that tag.
For example tags have two attributes, src and alt. src specifies the name of the image file and alt tells the browser in readable text what the image is.
:::
Debug: Missing Image
Someone has submitted a bug report on this web page. Can you fix the bug?
| What I expected to happen | What happened instead |
|---|---|
| There is an image of Half Dome | There is alt text but no image |
| # Do This | |
| * Find and fix the problem that is causing the bug. |
Student Instructions
::: details [How do I add images?]
The <img> tag allows you to show images on your web page.
Example:
<img src="dog.png" alt="dog jumping">
In order to tell the browser which file to use, extra information, called an attribute, is added to the tag inside the brackets. The attribute
src stands for source and tell the name of the image. Image files names include extensions which tell the computer which type of image they are working with. Common extensions are .jpg, .jpeg, .png.
In addition to have the src attribute, image elements also have the alt attribute which describe the image. This is important in case the image doesn’t load or for people who have trouble with their eyesight.
An <img> tag is an example of a self-closing tag because it starts and closes in one tag.
:::
::: details [Why does an image tag not have a closing tag?] An image tag doesn't need a closing tag because there is no text content which must be wrapped in tags. The content that shows on the screen is specified through the tags attributes. :::
::: details [What is an attribute?]
Attributes are extra information included in a tag. Attributes have names and values. The name tells what type of information is being provided and then the value gives the specific information for that tag.
For example tags have two attributes, src and alt. src specifies the name of the image file and alt tells the browser in readable text what the image is.
:::
Debug: Missing Image
Someone has submitted a bug report on this web page. Can you fix the bug?
| What I expected to happen | What happened instead |
|---|---|
| There is a second Pikachu image | There is alt text but no image |
| # Do This | |
| * Find and fix the problem that is causing the bug. |
Student Instructions
::: details [How do I add images?]
The <img> tag allows you to show images on your web page.
Example:
<img src="dog.png" alt="dog jumping">
In order to tell the browser which file to use, extra information, called an attribute, is added to the tag inside the brackets. The attribute
src stands for source and tell the name of the image. Image files names include extensions which tell the computer which type of image they are working with. Common extensions are .jpg, .jpeg, .png.
In addition to have the src attribute, image elements also have the alt attribute which describe the image. This is important in case the image doesn’t load or for people who have trouble with their eyesight.
An <img> tag is an example of a self-closing tag because it starts and closes in one tag.
:::
::: details [Why does an image tag not have a closing tag?] An image tag doesn't need a closing tag because there is no text content which must be wrapped in tags. The content that shows on the screen is specified through the tags attributes. :::
::: details [What is an attribute?]
Attributes are extra information included in a tag. Attributes have names and values. The name tells what type of information is being provided and then the value gives the specific information for that tag.
For example tags have two attributes, src and alt. src specifies the name of the image file and alt tells the browser in readable text what the image is.
:::
Add alt to Existing Images
The alt attribute is short for alternative text. As you may have seen on web pages that do not load properly, alt text appears to describe the image that is not rendering.
Do This
- Read the HTML and look at where images are used.
- Add a descriptive
altattribute to each image.
Student Instructions
::: details [How do I add images?]
The <img> tag allows you to show images on your web page.
Example:
<img src="dog.png" alt="dog jumping">
In order to tell the browser which file to use, extra information, called an attribute, is added to the tag inside the brackets. The attribute
src stands for source and tell the name of the image. Image files names include extensions which tell the computer which type of image they are working with. Common extensions are .jpg, .jpeg, .png.
In addition to have the src attribute, image elements also have the alt attribute which describe the image. This is important in case the image doesn’t load or for people who have trouble with their eyesight.
An <img> tag is an example of a self-closing tag because it starts and closes in one tag.
:::
::: details [Why does an image tag not have a closing tag?] An image tag doesn't need a closing tag because there is no text content which must be wrapped in tags. The content that shows on the screen is specified through the tags attributes. :::
::: details [What is an attribute?]
Attributes are extra information included in a tag. Attributes have names and values. The name tells what type of information is being provided and then the value gives the specific information for that tag.
For example tags have two attributes, src and alt. src specifies the name of the image file and alt tells the browser in readable text what the image is.
:::
Add Image Link
An image has already been uploaded for you. The next step is to link it to the web page.
Do This
- Add an image link for the image "gymnast.gif".
Student Instructions
::: details [How do I add images?]
The <img> tag allows you to show images on your web page.
Example:
<img src="dog.png" alt="dog jumping">
In order to tell the browser which file to use, extra information, called an attribute, is added to the tag inside the brackets. The attribute
src stands for source and tell the name of the image. Image files names include extensions which tell the computer which type of image they are working with. Common extensions are .jpg, .jpeg, .png.
In addition to have the src attribute, image elements also have the alt attribute which describe the image. This is important in case the image doesn’t load or for people who have trouble with their eyesight.
An <img> tag is an example of a self-closing tag because it starts and closes in one tag.
:::
::: details [Why does an image tag not have a closing tag?] An image tag doesn't need a closing tag because there is no text content which must be wrapped in tags. The content that shows on the screen is specified through the tags attributes. :::
::: details [What is an attribute?]
Attributes are extra information included in a tag. Attributes have names and values. The name tells what type of information is being provided and then the value gives the specific information for that tag.
For example tags have two attributes, src and alt. src specifies the name of the image file and alt tells the browser in readable text what the image is.
:::
Add Image
Here you can practice adding a new image to a web page.
Do This
- Add an image to the end of this cake recipe.
- Don't forget to use the
add imagebutton and include an image tag in your code.
- Assessment
- 8
Assessment Opportunities
Structure content on a web page using HTML (Add an image to a web page). Accurately attribute others when using their work.
Extensive Evidence
The image displays properly and an alt attribute gives a reasonable test description of the image. No unnecessary code is included in theimg tag. There is accurate attribution and the image is named appropriately.
Convincing Evidence
The image displays properly and is being used according to its copyright license description.
Limited Evidence
The img tag is used and a source address for the image is provided, but there may be minor syntax errors or misspellings that prevent the image from being displayed properly. The image may not be available for legal use on the web page.
Student Instructions
::: details [How do I add images?]
The <img> tag allows you to show images on your web page.
Example:
<img src="dog.png" alt="dog jumping">
In order to tell the browser which file to use, extra information, called an attribute, is added to the tag inside the brackets. The attribute
src stands for source and tell the name of the image. Image files names include extensions which tell the computer which type of image they are working with. Common extensions are .jpg, .jpeg, .png.
In addition to have the src attribute, image elements also have the alt attribute which describe the image. This is important in case the image doesn’t load or for people who have trouble with their eyesight.
An <img> tag is an example of a self-closing tag because it starts and closes in one tag.
:::
::: details [Why does an image tag not have a closing tag?] An image tag doesn't need a closing tag because there is no text content which must be wrapped in tags. The content that shows on the screen is specified through the tags attributes. :::
::: details [What is an attribute?]
Attributes are extra information included in a tag. Attributes have names and values. The name tells what type of information is being provided and then the value gives the specific information for that tag.
For example tags have two attributes, src and alt. src specifies the name of the image file and alt tells the browser in readable text what the image is.
:::
All about you!
You can use images to make a web page more personal.
Do This
- Add an image to the page.
- Make sure to follow the rules about copyright, naming, and using good coding styles.
Student Instructions
Find an extra challenge or a new type of code here.
Choose from the following activities:
Learn how to customize the height and width of images.
Add videos into your web page
Use your new skills to create an illustrated story.
Create a how-to guide to help others learn a new skill.
Student Instructions
::: details [How do I add images?]
The <img> tag allows you to show images on your web page.
Example:
<img src="dog.png" alt="dog jumping">
In order to tell the browser which file to use, extra information, called an attribute, is added to the tag inside the brackets. The attribute
src stands for source and tell the name of the image. Image files names include extensions which tell the computer which type of image they are working with. Common extensions are .jpg, .jpeg, .png.
In addition to have the src attribute, image elements also have the alt attribute which describe the image. This is important in case the image doesn’t load or for people who have trouble with their eyesight.
An <img> tag is an example of a self-closing tag because it starts and closes in one tag.
:::
::: details [Why does an image tag not have a closing tag?] An image tag doesn't need a closing tag because there is no text content which must be wrapped in tags. The content that shows on the screen is specified through the tags attributes. :::
::: details [What is an attribute?]
Attributes are extra information included in a tag. Attributes have names and values. The name tells what type of information is being provided and then the value gives the specific information for that tag.
For example tags have two attributes, src and alt. src specifies the name of the image file and alt tells the browser in readable text what the image is.
:::
Height and Width Attributes
Images are not always the right size for a webpage. Luckily, there are width and height attributes to set how many pixels tall and wide an image is. Add the attributes inside the image tag using height="" and width="".
Do This
- Read the HTML and look at how the height and width attribute are used.
- Add height and width attributes to make the other images smaller.
Student Instructions
Adding Video
You can also add video to your website. Lots of video sites, including YouTube, have an "embed" option that allows you to copy and paste the video HTML code you'll need directly into your website.
Do This
- Read the HTML and look at how the video is created.
- Choose another video from this playlist
- Click on
, then 
- Copy the code into your web page.
Student Instructions
::: details [How do I add images?]
The <img> tag allows you to show images on your web page.
Example:
<img src="dog.png" alt="dog jumping">
In order to tell the browser which file to use, extra information, called an attribute, is added to the tag inside the brackets. The attribute
src stands for source and tell the name of the image. Image files names include extensions which tell the computer which type of image they are working with. Common extensions are .jpg, .jpeg, .png.
In addition to have the src attribute, image elements also have the alt attribute which describe the image. This is important in case the image doesn’t load or for people who have trouble with their eyesight.
An <img> tag is an example of a self-closing tag because it starts and closes in one tag.
:::
::: details [Why does an image tag not have a closing tag?] An image tag doesn't need a closing tag because there is no text content which must be wrapped in tags. The content that shows on the screen is specified through the tags attributes. :::
::: details [What is an attribute?]
Attributes are extra information included in a tag. Attributes have names and values. The name tells what type of information is being provided and then the value gives the specific information for that tag.
For example tags have two attributes, src and alt. src specifies the name of the image file and alt tells the browser in readable text what the image is.
:::
Make an Illustrated Story
Put your new image tag skills to the test and create an illustrated story. As an extra challenge, include code from past lessons, such as special characters and style sheets.
Do This
- Create an illustrated story of your choice using text and images.
Student Instructions
::: details [How do I add images?]
The <img> tag allows you to show images on your web page.
Example:
<img src="dog.png" alt="dog jumping">
In order to tell the browser which file to use, extra information, called an attribute, is added to the tag inside the brackets. The attribute
src stands for source and tell the name of the image. Image files names include extensions which tell the computer which type of image they are working with. Common extensions are .jpg, .jpeg, .png.
In addition to have the src attribute, image elements also have the alt attribute which describe the image. This is important in case the image doesn’t load or for people who have trouble with their eyesight.
An <img> tag is an example of a self-closing tag because it starts and closes in one tag.
:::
::: details [Why does an image tag not have a closing tag?] An image tag doesn't need a closing tag because there is no text content which must be wrapped in tags. The content that shows on the screen is specified through the tags attributes. :::
::: details [What is an attribute?]
Attributes are extra information included in a tag. Attributes have names and values. The name tells what type of information is being provided and then the value gives the specific information for that tag.
For example tags have two attributes, src and alt. src specifies the name of the image file and alt tells the browser in readable text what the image is.
:::
Make a How-To Guide
Use your new image skills to share another skill that you have. As an extra challenge, include code from past lessons, such as special characters and style sheets.
Do This
- Create an illustrated how-to guide to help someone learn a new skill.
Standards Alignment
View full course alignment
CSTA K-12 Computer Science Standards (2017)
AP - Algorithms & Programming
- 2-AP-16 - Incorporate existing code, media, and libraries into original programs, and give attribution.
- 3A-AP-20 - Evaluate licenses that limit or restrict use of computational artifacts when using resources such as libraries.
IC - Impacts of Computing
- 1B-IC-21 - Use public domain or creative commons media and refrain from copying or using material created by others without permission.
- 2-IC-23 - Describe tradeoffs between allowing information to be public and keeping information private and secure.