Unit2
Ch. 1
1
2
3
4
5
6
7
8
9
Ch. 2
10
11
12
13
14

Lesson 7: Intellectual Property and Images

Overview

Starting with a discussion of their personal opinions on how others should be allowed to use their work, the class explores the purpose and role of copyright for both creators and users of creative content. They then move on to an activity exploring the various Creative Commons licenses as a solution to the difficulty in dealing with copyright.

Finally, with a common understanding of the restrictions of various Creative Commons licenses, students learn how to add images to their web pages using the <img> tag.

Purpose

Until this point the only content that students have used on their web pages is their own, but it's common, and quite useful, to be able to integrate information and media created by others. Before learning about the technical ways to do this, however, we need to step back and gain a common understanding of the restrictions and purpose of copyright. We use the Creative Commons license as a clearer alternative to the more restrictive standard copyright and guide students through searching for, using, and properly citing Creative Commons licensed media.

Assessment Opportunities

  1. Explain the purpose of copyright.

    In the wrap up journal prompt, check that students are thinking of reasons that people may want their intellectual property covered under copyright law.

  2. Identify the rights and restrictions granted by various Creative Commons licenses

    In the activity guide, check that students are choosing licenses and providing explanations consistent with the given scenarios.

  3. Add an image to a web page

    See Level 5 in the Code Studio lesson.

Agenda

Warm Up (10 min)

Activity 1 (20 min)

Activity 2 (20 min)

Wrap Up (5 min)

View on Code Studio

Objectives

Students will be able to:

  • Explain the purpose of copyright.
  • Identify the rights and restrictions granted by various Creative Commons licenses
  • Add an image to a web page

Preparation

Links

Heads Up! Please make a copy of any documents you plan to share with students.

For the Teachers

For the Students

Vocabulary

  • Citation - A quotation from or reference to a book, paper, or author, especially in a scholarly work.
  • Copyright - the exclusive legal right to print, publish, perform, film, or record literary, artistic, or musical material, and to authorize others to do the same
  • Creative Commons - A collection of public copyright licenses that enable the free distribution of an otherwise copyrighted work, used when an author wants to give people the right to share, use, and build upon a work that they have created
  • Intellectual Property - A work or invention that is the result of creativity, such as a piece of writing or a design, to which one has rights and for which one may apply for a patent, copyright, trademark, etc.

Introduced Code

Support

Lesson Forum

Report a Bug

Teaching Guide

Warm Up (10 min)

Use of Your Work

Remarks

All of you have been working hard to create a new website that you're going to publish to the world. When you publish something, though, it can be hard to control what other people do with it. Sometimes people use our work in ways that don't seem fair to us. I'm going to describe a few situations for you. If you think what happened was fair, stand up. If you think it was unfair, sit down.

Teaching Tip

These prompts aim to relate broader questions of copyright to students' own experiences creating and sharing content online. To make this hit close to home you may want to change the prompts to pick particular forms of social media that students are interested in. If you know students don't use a lot of social media, then alter the prompt to reflect another area where your students might think their own creative work was used inappropriately.

  1. You take an awesome picture and someone puts it on their social media account and with your name beside it.
  2. You write a story and someone else publishes it and says that they wrote it.
  3. You write a song and someone sings it to her friends.
  4. You write a song and someone sings it at a concert and makes a lot of money.
  5. You take a picture and someone else Photoshops it and puts the new version on his web site.

Remarks

It's okay if not everyone agrees how they want their work to be used. Copyright law says that whoever creates new content, such as a picture, a story, or a song, gets to decide how other people are allowed to use it.

Prompt: What rules would you make for people who want to use your creative work?

Discuss: Have students journal individually, then share with a neighbor, and finally discuss as a whole class.

Activity 1 (20 min)

The Creative Commons Solution

Remarks

Copyright is granted the moment something is created, so unless explicitly told otherwise, we have to assume any picture, video, or other media we find online is fully covered by copyright law, which means that no one else can make copies or post it online without permission.

Sometimes, though, we want people to share our work so that more people can see it. The Creative Commons (CC) license was developed to help content creators have more specific control over how other people can use their work.

Group: Pair students.

Distribute: Give each student a copy of the activity guide.

Teaching Tip

Is it Derivative?: Students may struggle with whether the use of a work is derivative or not. The rule of thumb is to consider whether your use of a licensed work would be considered a new copyrightable work.

Converting an image from digital to print, or a song from CD to mp3 would not create a derivative work, but animating a drawing or adding new lyrics to a song would be creating derivative works.

Licensing Your Work

License Components

The first portion of this activity guide covers the components of a Creative Commons license. Push students to think critically here about both the value each component adds to the creator, but also the ways it might limit the cultural exchange of ideas, connecting the components of the license to the scenarios that they considered earlier in the class.

Choosing the Right License

Discussion Goal

Goal: While there may not be a specific "right" license for each of these scenarios, encourage students to always consider whether the license they chose is more restrictive than it strictly needs to be. One of the design goals of the Creative Commons license is to increase the amount of creative material available to the general public, promoting the sharing of intellectual property for the common good. With this in mind we should only be adding the minimal restrictions needed to meet the content creator's wishes.

The second portion of this activity provides students with four CC licenses and two content creator scenarios. For each scenario, students are asked to evaluate which of the four provided licenses is the least restrictive but still addresses the concerns and needs of the content creator.

Discuss: Ask several students to share out their responses to the Choosing the Right License scenarios. Encourage discussion and debate if students identified different licenses for the same scenarios.

Activity 2 (20 min)

Content Corner

As students start to use images, they may have trouble finding the right size to fit their pages. In the second chapter, 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, where they will learn about the <img> tag and have an opportunity to add images to the pages they've already created.

Wrap Up (5 min)

Your Own CC License

Journal: Have students update their "HTML Tags" list with the tags they learned in this lesson.

Assessment Opportunity

As students discuss the advantages and disadvantages of various types of licenses, make srue that they recognize that copyright is intended to protect the rights of content creators, such as themselves. These rights include being recognized as the creator when the work is displayed, or deciding who can use and make money off the work.

Journal: Think of all the personally created items that you've put on your website so far, and those that you may add in the future. Without a clear license all of those of things (and your web pages themselves) are covered under the fully restrictive copyright. Which Creative Commons license would you rather use (if any) and why?

If there is time you may want to consider having students return to their site and add the Creative Commons license they decided they would like their website to have.

Students can add a footer at the bottom of each page with their Creative Commons License.

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

How do I add images? The `` 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 <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.
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.
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. Look at the code that made the dog image appear, then use an image tag to add the cat.jpeg image to the page below the cat heading.

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

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

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

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

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

Assessment Opportunities

Key Concepts:

Structure content on a web page using HTML. (Add an image to a web page.)

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.

Convincing Evidence

The image displays properly.

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.

No Evidence

The img tag is not used or is not a source address given for the image.

Student Instructions

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

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

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

  • Upload at least one image into this web page
  • Use the <img> tag to display the image(s) in your website.
  • Make sure to add an alt attribute.
View on Code Studio

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.

  • Attribution
  • 8
  • 9
  • (click tabs to see student view)
View on Code Studio

Student Instructions

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

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

Giving Credit

When using a Creative Commons licensed image, you need to give credit to the original creator (this is also called attribution). There are lots of ways to provide attribution, but the easiest way is to add text below the image that identifies the creator and website it came from.

Do This

In this page we've already added and attributed an image of a frog. Use the Creative Commons search engine to find another image of an amphibian. Add your found image to this page, along with proper attribution, including:

  • The name of the creator (if available)
  • The website it was found on (e.g. commons.wikimedia.org)
  • The license it was published under (e.g. CC-BY)
View on Code Studio

Student Instructions

Checklist

Ensure that your image is properly licensed Upload image into Web Lab Create an image tag with a descriptive alt attribute If the image isn't your own, add attribution underneath

Adding Images to Your Site

You've already created some pages with great content on your website, now you can add some images!

Do This

Using either your own images or those found through a Commons Search, add some images to the pages you've already created. Get creative! Use the checklist to the right to keep track of the steps you need to follow when adding images.

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.