Lesson 5: Images in HTML

Overview

Students are introduced to some of the general tags all HTML documents should contain. Once students have added those to their Hobbies and Recipes page. Students will work through levels where they add images to a pre-built site. Then they will make a new About Me page for their portfolio that includes three images that show some of their preferences.

Purpose

This lesson introduces the <img> element in conjunction with attributes. Students will learn that an attribute describes information about an element. They will also get a surface-level understanding of file paths.

All of the images at this point are seeded in the projects for them. Use of other peoples images and intellectual property is a discussion in lessons later in the unit. Until students have those conversations projects are set up to allow students options of images without worrying about using images they are not allowed to use.

Agenda

Warm Up (10 minutes)

Activity 1 (25 minutes)

Wrap Up (10 minutes)

Objectives

Students will be able to:

  • Use the <img> tag to add locally stored images to a web page.
  • Explain the difference between an element, a tag and an attribute

Preparation

Links

For the Teacher

For the Students

Vocabulary

  • HTML Attribute - Provide additional information about HTML elements.

Introduced Code

Support

Report a Bug

Teaching Guide

Warm Up (10 minutes)

Quick Share

Set up: Have students take out their Web Development Practices - Project Guide.

Group: Have students partner up.

Prompt: In your pairs look at your the notes you took at the end of class yesterday. Discus the following questions:

  • What is common about all the HTML elements you worked with yesterday?
  • What is different about each of the elements?
  • What are you still curious about?

Discuss: Have a couple groups quickly share. This is just a quick way to get students brains warmed up for class.

Activity 1 (25 minutes)

Web Lab: Images

Goal: Use the img element to add images to a webpage

Transition: Have students open Code Studio.

Circulate: Helps students as they work through the first set of levels. Keep track of when students make it to the stop level.

Update HTML Elements List

Set Up: Have students take out their Web Development Practices - Project Guide.

Have students update their HTML Elements table on page 2 of their Web Development Practices - Project Guide packet with the image element.

Wrap Up (10 minutes)

Trivia Review Game

Goal: Run a trivia game with students to review and check their understanding.

Trivia Review Game

Group: Make teams of 4. Have each group come up with a team name.

Distribute: A way for students to write down answers for each question.

For each question:

  • Read the question
  • Give students about a minute to come up with answer as a team and write down their answer and team name
  • Repeat for all the questions
  • Give periodic updates on the score (1 point for each question)

Questions:

  1. What HTML element gives the largest header?
  2. What does HTML stand for?
  3. Which character is used to indicate an end tag?
  4. How can you make a numbered list?
  5. How many different header tags are there?
  6. Each item in a list is indicated with this tag.
  7. What tag is used show images on a page?
  8. What two attributes need to be included in each image tag?
  9. How can you make a bulleted list?
  10. All other tags go inside this tag.

Trivia Game - Answer Key linked in Code Studio.

View on Code Studio

The Internet - Web Development: Lesson 5 - Images in HTML

Background

Students are introduced to some of the general tags all HTML documents should contain. Once students have added those to their Hobbies and Recipes page. Students will work through levels where they add images to a pre-built site. Then they will make a new About Me page for their portfolio that includes three images that show some of their preferences.

Vocabulary

  • HTML Attribute - Provide additional information about HTML elements.

New Blocks

Resources

View on Code Studio

Student Instructions

**How do I alert the web browser what language I'm writing in?** You will need to add two things to your HTML document, Doctype and an html element.
**Why do I need to add these elements?** When a web browser is trying to read your document it looks for alerts which tell it which language you are using. In order to let the web browser know that this is an html document you need to tell it what type of document it is deal with (Doctype) and where to find the code (inside the html element).
**What is DOCTYPE and how do I use it? ** <!DOCTYPE html> is always the first thing in an html document because it notifies the computer that this is an html document and to interpret it as such. <!DOCTYPE html> is not technically a tag but instead an instruction to the web browser.

Add <!DOCTYPE html> at the very top of your html file.
**What is the HTML element and how do I use it? ** The <html> tag notifies the computer where the html starts and ends. The <html> tag is the container for all other HTML elements (The <!DOCTYPE html> tag does NOT go inside the html element). You will need an opening and closing <html> tag. This will also make your preview of your website update automatically if there are no issues with your code!

Wrap all the content of the file in an HTML element using the <html> tag.

Doctype and HTML tag

This is your Recipe page from the last lesson. Update it with elements that alert your browser which language the document was written in by adding DOCTYPE and <html> elements.

View on Code Studio

Student Instructions

**Why do I need to structure the HTML document this way?** Although many modern web browsers can make good assumptions about what language you are writing in and where to find different information in your document, you don't want to leave the display of you web page up to chance. To guarantee the best results for displaying your web page on all computers you need to assist the computer in figuring out where to find information.

As you go forward you are going to need two different sections in your HTML file. They will serve different purposes.

1. Content of the page
2. Information about the page

By breaking up a web page this way it is clear where to find the code that is creating the physical output on the web page and which code is just information for the computer about the page.

In creating web pages we differentiate between these two areas using the <head> and <body> elements. The <head> element contains all the information about the page. The <body> element contains all the content for a web page.
**What is a head element?** The <head> element contains all the information about the page. This is extra information that is helpful for the computer in displaying your web page but is not the physical content of the web page. The <head> element usually comes above the body element but inside the <html> element. For right now it will be blank but later we will learn important things that are added to the head.
**How is the head element different than the header elements? ** The header elements (<h1> to <h6>) are used to display headers directly on your web page for your user to see. The head tag marks the information that is not user facing in your HTML document.
**What is the body element? ** The <body> element contains all the content for a web page. The HTML elements for your headers, paragraphs, and lists should all go inside the <body> element.

Head and Body

Format your HTML document with two sections using the <head> and <body> elements as shown in the image below. From this point forward anything you add to an HTML document should go inside either the <head> or the <body> elements. Put all the content and structure you have created so far inside the <body> element.

View on Code Studio

Student Instructions

**What is Doctype and how do I use it? ** <!DOCTYPE html> is always the first thing in an html document because it notifies the computer that this is an html document and to interpret it as such. <!DOCTYPE html> is not technically a tag but instead an instruction to the web browser.

Add <!DOCTYPE html> at the very top of your html file.
**What is the <html> element and how do I use it? ** The <html> tag notifies the computer where the html starts and ends. The <html> tag is the container for all other HTML elements (The <!DOCTYPE html> tag does NOT go inside the html element). You will need an opening and closing <html> tag. This will also make your preview of your website update automatically if there are no issues with your code!

Wrap all the content of the file in an HTML element using the <html> tag.
**Why do I need to structure the HTML document this way?** Although many modern web browsers can make good assumptions about what language you are writing in and where to find different information in your document, you don't want to leave the display of you web page up to chance. To guarantee the best results for displaying your web page on all computers you need to assist the computer in figuring out where to find information.

As you go forward you are going to need two different sections in your HTML file. They will serve different purposes.

1. Content of the page
2. Information about the page

By breaking up a web page this way it is clear where to find the code that is creating the physical output on the web page and which code is just information for the computer about the page.

In creating web pages we differentiate between these two areas using the <head> and <body> elements. The <head> element contains all the information about the page. The <body> element contains all the content for a web page.
**What is a head element?** The <head> element contains all the information about the page. This is extra information that is helpful for the computer in displaying your web page but is not the physical content of the web page. The <head> element usually comes above the body element but inside the <html> element. For right now it will be blank but later we will learn important things that are added to the head.
**How is the head element different than the header elements? ** The header elements (<h1> to <h6>) are used to display headers directly on your web page for your user to see. The head tag marks the information that is not user facing in your HTML document.
**What is the body element? ** The <body> element contains all the content for a web page. The HTML elements for your headers, paragraphs, and lists should all go inside the <body> element.

Update Hobbies Page

<!DOCTYPE html>, <html>, <head>, and <body> are important to add to your web page. Practice adding them to update your Hobbies page. In all future levels they will be included for you so you won't need to add themselves.

View on Code Studio

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 **void element** 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.
**What is a void tag?** An `` tag is an example of a **void element** 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. Void tags do not 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.
**Why does an image tag not have a closing tag?** An image tag is a void tag and void tags do not 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

Review: Image Attributes

Transition: Have students transition off the computer.

Group: Partner up.

Prompt: You are going to turn and talk about the difference between the two attributes, src and alt.

  1. Get together with your partner and decide who is taller.
  2. The taller person will go first and explain the element information that src contains.
  3. The shorter person will go second and explain the extra information that alt contains.

Web Lab: About Me Page

Transition: Have students return to Code Studio Bubble 6 Lesson 6.

Circulate: Students should be picking 3 images and formulating an About Me page. Students may want to find their own images but encourage them for now to stick to the ones included in the page. Keep an eye for students who might be sharing too much personal information.

View on Code Studio

Stop

Please stop and wait for instructions from your teacher before moving on.

Images Review

The tag allows you to show images on your web page.

Example:

dog jumping

In order to tell the browser which file to use, extra information, called an attribute, is added to the 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 tag is an example of a void element 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.

  • Levels
  • 7
  • (click tabs to see student view)
View on Code Studio

Teaching Tip

This is an open-ended page in terms of layout and content. The goal is to get students thinking about layout on their own. Students have the exemplar to look at and a checklist to help them make sure they are getting the right content on their page.

Student Instructions

About Me Page

You are going to make another page for your portfolio. This one will be your About Me page. The project has been loaded with 6 different images. Two pictures are associated with each question below.

  • Do you prefer chocolate or vanilla ice cream?
  • Are you a dog or a cat person?
  • Do you prefer watching a movie or reading a book?

Create a website that tells your user more about you by answering the 3 questions and showing pictures for each answer.

Checklist

  • At least three images
  • A large header with the name of the page
  • Descriptions of your image choices for each category inside a paragraph element
  • HTML document uses the correct structure. (Doctype, html, head, and body)

Standards Alignment

View full course alignment