Lesson Plan: Working with the HTML  < img > Tag

Objective:

By the end of this lesson, students will understand how to use the < img > tag in HTML to display images on a webpage. They will also learn about attributes such as src, alt, width, and height, and how to use images from both local files and URLs.

Topics Covered:

1. The < img > Tag: Introduction
2. Required Attributes: src and alt
3. Setting Image Size with width and height
4. Using Images from Local Files
5. Using Images from URLs
6. Using Relative vs Absolute URLs
7. Adding CSS Styling to Images
8. Nesting Images inside Links
9. Homework Assignment with Answer Key

1. The < img > Tag: Introduction

The img tag is a self-closing tag used to embed images in HTML documents. It does not have a closing tag like < p > or < div >

2. Required Attributes: src and alt

• src (source): Specifies the path to the image.
• alt (alternative text): Provides a textual description of the image, which is displayed if the image cannot load.

Example:

3. Setting Image Size with width and height

The width and height attributes can be used to set the dimensions of the image in pixels.

Example:

4. Using Images from Local Files

If you have an image file saved on your computer (e.g., sunset.jpg), you can reference it by setting the src to the file’s name if it is in the same folder as your HTML file.

Example:

5. Using Images from URLs

You can also use an image by providing its full URL from the web.

Example:

6. Using Relative vs Absolute URLs

• Relative URLs are used when the image is stored in the same domain or directory. For example, if the image is in a folder named images:

Absolute URLs specify the full URL of the image, including the http:// or https://.

7. Adding CSS Styling to Images

You can apply CSS styles directly to the < img > tag using the style attribute or link external CSS files to control properties like alignment and borders.

Example:

8. Nesting Images Inside Links

You can make an image clickable by placing it inside an < a > (anchor) tag.

Example:

9. Homework Assignment

Instructions:

1. Create an HTML file that includes three images.
2. The first image should be from a local file (e.g., image1.jpg).
3. The second image should be from a URL (e.g., https://example.com/image2.jpg).
4. Add descriptive alt text to each image.
5. Set the width of each image to 300 pixels.
6. Add a border around the third image.
7. Make the second image a clickable link that leads to a webpage (e.g., https://example.com).

Example HTML (Answer Key):

Suggested Next Steps:

a. Add a responsive design feature using CSS to ensure the images resize correctly on different screen sizes.
b. Experiment with additional HTML attributes for the < img > tag like loading="lazy" and srcset for responsive images.

Learn HTML images in 3 minutes  (Video) 📷

Related Videos:

Related Posts:

Python Glossary

Coding with JavaScript

Using CSS classes and the class attribute

Learn about JavaScript ELSE STATEMENTS

The color CSS property

Learn about programming Functions in Python

What is Python?

HTML, CSS, & JavaScript: Essentials of Web Development

Using the class attribute