Lesson 7: Intellectual Property and Images

Unplugged | Web Lab

Overview

Starting with an 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)

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 Teacher

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

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 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 page of this activity covers the components of a Creative Commons license and asks students to brainstorm reasons why a content creator might want to include each component in their 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.

Choosing the Right License

The second page of this activity provides students with six CC licenses and three content creator scenarios. For each scenario, students are asked to evaluate which of the six 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.

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

View on Code Studio

Overview

If you want to use media such as images, video, or music created by others into your own website, you'll first need to understand and respect the rights of the creator of that media. After first learning about Creative Commons licensing, you'll learn about how to add images to your web pages, and how to give proper attribution when you do it.

Vocabulary

  • Citation - A quotation from or reference to a book, paper, or author, especially in a scholarly work.
  • Copyright - the exclusive legal right, given to an originator or an assignee to print, publish, perform, film, or record literary, artistic, or musical material, and to authorize others to do the same.
  • Creative Commons - A public copyright licenses that enable the free distribution of an otherwise copyrighted work. A CC license is 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 manuscript or a design, to which one has rights and for which one may apply for a patent, copyright, trademark, etc.

New Tags

Resources

  • Adding Images
  • 3
  • 4
  • 5
  • (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. 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 header.

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

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

  • Attribution
  • 7
  • 8
  • (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. 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.

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

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.