Images and HTML
Images and HTML
LEARNING GOAL: The Basics of HTML
Students will be able to design multiple web pages with HTML through the use of simple Text Editors.
Google has made finding and using online images one of the easiest and most popular things to do online. Everyone likes to look at pictures and we also like to share them. Where better to share pictures than on the World Wide Web, right? Unfortunately, most images on the web were never intended to be free.
Just imagine if you had taken a photograph of a family friend that you loved. You shared your photograph on social media and everyone liked it. Three years later, you are browsing the World Wide Web and you come across your photograph, except someone is using it on their website to promote something you never would have supported. What would you do? Would you be upset?
In this lesson, we’ll take a closer look at the consequences of disrespecting copyright laws online. We’ll also examine some better ways to borrow images from the web and read a couple of stories that might cause you to think twice before taking another image from Google that doesn’t belong to you.
DAILY SCHEDULE (85 MINUTES):
PART 1: GETTING STARTED – Source Code Writing
Between Lesson 2.2 and Lesson 2.5, you are responsible for getting 4 out of 6 source codes completed for an A (3/6 = B, 2/6 = C, 1/6 = D, 0/6 = F). However, if you finish any of them early, just keep going because the more pages you build, the more prepared you’ll be for the Learning Goal #2 Project. Source Codes will be due by the end of Lesson 2.6.
Source Codes that are highlighted in green are NEW codes, but you really should finish an old code first.
SOURCE CODE :: HTML SAVE TITLE :: FOLDER :: LOOKS LIKE
If you finish ALL of these codes, please feel free to go back and work on your personal web page (index.html) or explore the W3Schools website.
PART 2: CLASS DISCUSSION – Images & Copyright
Topic #1 – A New Message from TimBL
“[My idea for] the Web was like a market economy… anybody can trade with anybody, and they don’t have to go through the market square to do it. What they do need, however, are a few practices everyone has to agree to, such as the currency used for trade, and the rules of fair trading.” (Tim Berners-Lee, Weaving the Web)
What does he mean? Using 30-30-60, consider how this quote applies to what we’re learning.
Topic #2 – HTML Review Questions (Lessons 2.1 & 2.2)
1. What are the three main parts of HTML and what is the difference between them?
2. What are two examples of self-closing tags?
3. What does the <a></a> element stand for and what does it do?
4. What is the advantage of learning to code?
5. What is the difference between Internal and Inline Styling?
Topic #3 – Debate: Legal and Illegal Images
Most of us have gone to Google at some point and grabbed an image for our personal use. Maybe you just wanted to add something to a web page. Maybe you wanted show something cool you found on social media. But was doing that legal or illegal?
Topic #4 – A Review of Copyright
Copyright is a form of protection for the original author of any created work, including music, writing, drawing, and even photography. When these works become digital and public (meaning they show up on the World Wide Web), the original authors still have power over their own creations. Notice that copyright is a “right” that you are given in the United States. You do not need to do anything special to receive that right. Everything you make is yours. That includes the right to share or to not share. Below are a few resources with more information.
Over the past three years, students have shared some interesting stories they learned about copyright and some of them are listed above. But your teacher has an interesting story as well that goes back to 2013.
Topic #5 – In the News: The Nebraska Photo
Sometimes the most innocent acts of grabbing an image from Google can get us into trouble. Those images belong to someone somewhere and unless we were given permission to use them, the original owner of a photo can take action.
IN THE NEWS: The Nebraska Photo
Topic #6 – How to Deal with Someone Who Steals
Imagine you were browsing the World Wide Web and you saw a photograph online that you had taken and shared a couple of years ago on social media. What would you do? What if the photo was really personal and you realized someone was using for a purpose you never intended? Click the link below to read some tips about how to handle that kind of problem.
Topic #7 – Three Main Image Types
The World Wide Web is full of images, but they’re not all created the same. See the list below for information about the three most popular image extensions: .gif, .png, .jpg.
The letters “GIF” (pronounced like “Jiff”) actually stand for “Graphics Interchange Format,” but what you should know is that a GIF is a compressed image file format. GIF files are great for small icons and animated images, but they lack the color range to be used for high-quality photos. To experiment with making a GIF Animation, use the GIF Maker.
PNG Images (pronounced “ping”) were originally created to replace GIF images on the web, but they both still exist. PNG stands for Portable Network Graphics and is often used for transparency images like logos and buttons on a website. Click here to learn more about the PNG Image Format.
JPEG is a compressed image file format used in most digital cameras for high quality photographs. JPEG images are not limited to a certain amount of color, like GIF images are. So if you see a large, colorful image on the Web, it is most likely a JPEG file. Most of the time, the file extension will look like .jpg, but sometimes it will include the “e” and look like this: .jpeg.
Topic #8 – Creative Commons
If a part of you is thinking that all this online copyright law is too strict, you might be right. A lot of important people who help make the World Wide Web a better place for sharing have created something to help. The Creative Commons is a non-profit organization that provides a license to many groups so that the images (and other creative works) being shared across the web can actually be shared. This doesn’t remove copyright from the conversation, but it helps.
For example, if you go to Google Images and look for an abstract, most of the images you see will have a note at the bottom that says “image may be subject to copyright.” But there are a few out there that will tell you that a specific image is free under the Creative Commons.
Topic #9 – Google Images Advanced Search
Now that you know how easy it is for someone to get in trouble for scraping the web and grabbing a random image, it’s time you learned how to navigate Google Images. The teacher will walk you through some of the easily overlooked tools and settings of a Google Image search.
Topic #10 – What Happens When Google Changes the Rules?
For the past 20 years, Google has gotten really good at changing the rules just when users get comfortable with the process. The site always LOOKS the same, which makes it harder to notice every little change that Google makes to their process. For example, below is an article about something that is about to change on the Google Image search.
Google and the New Copyright Credits (February 10, 2018)
PART 3: DAILY DESIGN – Images and HTML
This section is all about learning to save images and how to place them on your web page using HTML. Before we begin, you’ll need to do the following four things:
1. Go to your “images” folder and create a new subfolder called “cfat”
2. Create a new Notepad Document and save it as “cfat.html” in your “pages” folder.
3. Visit the website for Central Florida Airboat Tours.
4. Wait for further instructions or look over some of the <img> tag information below.
1. The Basic <img> Element
When you want to put an image into an HTML document, the code looks like this:
Notice that there is no closing </img> tag for images, so it’s one of the few tags that closes itself (a “self-closing” tag). Here’s a more specific example of a complete image element:
Notice in the source (src), we are telling the page where to find the image. By saying /images/mycity, we’re saying what folder those images are in, then we’re saying which file to show from that folder. Make sense?
2. Image Attributes
The image element has a few common attributes that you can use below:
src=”” (Without this attribute, an image cannot show up)
width=”” (This is an optional attribute, but it can control image dimensions)
height=”” (This is an optional attribute, but it can control image dimensions)
alt=”” (This is an important attribute, useful to search engines and certain web readers)
3. A Note About the File Path
But what if the /images folder is up one directory and doesn’t share the same directory as the folder my page is in? That’s when we use something called DOT DOT FORWARD SLASH and it looks like this “../”. You can see it in action below:
4. Online URLs
When you’re in a hurry and you want to see an image on your web page, you can sometimes just grab the URL from online.
<img src=”http://www.randomsite.com/images/cake.jpg” alt=”Chocolate Cake”>