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

  1. Follow copyright law, accurately attributing others when using their work.

    See Level 8 in the Code Studio lesson.

  2. 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

Introduced Code

Support

Report a Bug

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
  • (click tabs to see student view)
View on Code Studio

Student Instructions

View on Code Studio

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

::: details [**How do I add images?**] The `` tag allows you to show images on your web page.

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 `` 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. :::

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.jpeg image to the page below the cat heading
View on Code Studio

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

::: details [**How do I add images?**] The `` tag allows you to show images on your web page. Example: wzxhzdk:0 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 **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 `` 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. :::

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.)

View on Code Studio

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!

View on Code Studio

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
View on Code Studio

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 alt attribute!
  • Add the attribution information below the image.
View on Code Studio

Student Instructions

Practice your new skills here.


Choose from the following activities:
a
Image Bug Match

None

b
Debug the missing image

Use your debugging skills to figure out why the image is not appearing.

c
Debug the missing image 2

Use your debugging skills to figure out why the alt text, but not the image, is appearing.

d
Debug the missing image 3

Use your debugging skills to figure out why the image is not appearing.

e
Add alt to existing images

Add alt attributes to describe existing images.

f
Add image link

Add an image link to make the image appear in the web page.

g
Add new image

Add an image to this recipe.

View on Code Studio

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

View on Code Studio

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.
View on Code Studio

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.
View on Code Studio

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.
View on Code Studio

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 alt attribute to each image.
View on Code Studio

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".
View on Code Studio

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 image button and include an image tag in your code.
  • Assessment
  • 8
  • (click tabs to see student view)
View on Code Studio

Assessment Opportunities

Key Concepts:

Structure content on a web page using HTML (Add an image to a web page). Accurately attribute others when using their work.

Assessment Criteria:
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.

No Evidence

The img tag is not used or is not a source address given for the 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.

:::

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.
View on Code Studio

Student Instructions

Find an extra challenge or a new type of code here.


Choose from the following activities:
a
Extra Code: Height and Width Attributes

Learn how to customize the height and width of images.

b
Extra Code: Add Video

Add videos into your web page

c
Challenge: Make an Illustrated Story

Use your new skills to create an illustrated story.

d
Challenge: Make a How-To Guide

Create a how-to guide to help others learn a new skill.

View on Code Studio

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.
View on Code Studio

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.
View on Code Studio

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.
View on Code Studio

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.