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.
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
- Preview Creative Commons Overview - Video. You may need to download it before school if Youtube is blocked.
Links
Heads Up! Please make a copy of any documents you plan to share with students.
For the Teachers
- Licensing Your Work - Exemplar
For the Students
- Creative Commons Overview - Video
- Licensing Your Work - Activity Guide
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
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.
- You take an awesome picture and someone puts it on their social media account and with your name beside it.
- You write a story and someone else publishes it and says that they wrote it.
- You write a song and someone sings it to her friends.
- You write a song and someone sings it at a concert and makes a lot of money.
- 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 Licensing Your Work - Activity Guide
Licensing Your Work
License Components
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.
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
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.
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.
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)
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.
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) and 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.
- Check out the Creative Commons license chooser
Students can add a footer at the bottom of each page with their Creative Commons License.
- Lesson Overview
- Teacher Overview
- Student Overview
- Images in HTML
- Student Overview
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. To mark this we put the which usually goes in the close tag at the end of the image 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. Use an image tag to add the cat.jpeg image to the page below the cat heading.
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. To mark this we put the which usually goes in the close tag at the end of the image 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!
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. To mark this we put the which usually goes in the close tag at the end of the image 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
altattribute.
- Creative Commons Search
- Teacher Overview
- Student Overview
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
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. To mark this we put the which usually goes in the close tag at the end of the image 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)
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 underneathAdding 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.