Approx. read time: 2.8 min.
Post: The HTML image tag: img
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:
- The < img > Tag: Introduction
- Required Attributes:
srcandalt - Setting Image Size with
widthandheight - Using Images from Local Files
- Using Images from URLs
- Using Relative vs Absolute URLs
- Adding CSS Styling to Images
- Nesting Images inside Links
- 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 >
but must contain the src attribute, which points to the image source.
Example:
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:
- Create an HTML file that includes three images.
- The first image should be from a local file (e.g.,
image1.jpg). - The second image should be from a URL (e.g.,
https://example.com/image2.jpg). - Add descriptive
alttext to each image. - Set the width of each image to 300 pixels.
- Add a border around the third image.
- 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.
Related Posts
About the Author: Bernard Aybout (Virii8)
