Lesson 7: Intellectual Property and Images

Unplugged | Web Lab

Overview

Starting with an exploration of the song "Happy Birthday", and its history of copyright protection despite being a common American cultural staple, the class will explore the purpose and role of copyright for both creators and users of creative content. After a brief discussion about the purpose of copyright, we 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 will 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 understand 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 (5 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

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

Introduced Code

Support

Report a Bug

Teaching Guide

Warm Up (5 min)

Use of Your Work

Discussion Goal

Goal: This prompt aims to relate broader questions of copyright to their own experience creating and sharing content online. To make this hit close to home you may want to change the prompt to pick a particular form 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 creativity was plaigirized.

Prompt: If you took an awesome picture and someone put it on their social media account and claimed they took it how would you feel? What if they made money off of it?

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

Remarks

We probably don't always want other people using work we create, especially if they're making money off of it. The same thing is true of other people online. Today we're going to think a little more deeply about this problem and things we can do to solve it.

Activity 1 (20 min)

Video: Watch Should "Happy Birthday" be Protected by Copyright? - Video as a class. Stop at 5:38 in the video.

Remarks

Just a few years after that video was made, a federal judge ruled that "Happy Birthday" actually belongs in the public domain, due to some previously unknown publishings of the song lacking a copyright notice. Never the less, the fact that the copyright to a song so commonly used in popular culture was upheld so long brings up interesting questions about the purpose and benefits of copyright law.

Prompt: Given what you learned in the video, and what you may already know about copyright, what do you think about the current state of copyright law?

Goal: The purpose of this discussion is simply to get students thinking about the role of copyright in popular culture. Some students will come into this discussion with strong opinions, but if your students struggle with this discussion you can prompt them with the following questions:

  • What is copyright designed to do?
  • How can copyright foster creativity?
  • How can copyright hinder creativity?
  • Does copyright seem fair to you? Why or why not?

Discuss: Have students share their thoughts on copyright.

The Creative Commons Solution

Remarks

The standard copyright is not only incredibly long lasting and restrictive, but it's also unclear when a creation is covered under copyright. 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. Fortunately, there's an alternative. The Creative Commons (CC) licence was developed to address both the ambiguity and restrictiveness of the standard copyright.

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 creators 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" page 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. They 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.