2.2. Adding Images (20 minutes)
Introduction to the <img> Tag and Its Attributes
In HTML, the <img> tag is used to embed images into a webpage. Unlike other HTML elements, the <img> tag is self-closing, meaning it doesn’t have a closing tag. Instead, it uses attributes to specify information about the image.
Here’s the basic syntax of an image tag:
// Some code
<img src="image.jpg" alt="Description of the image" width="300" height="200">src (source): This attribute specifies the URL or file path to the image. It tells the browser where to find the image. The src can be a relative path (if the image is stored locally) or an absolute URL (if the image is hosted on the internet).
Example (local image):
src="images/photo.jpg"Example (online image):
src="https://example.com/image.jpg"
alt (alternative text): This is one of the most important attributes for accessibility. It provides a text description of the image, which is displayed if the image fails to load or is read aloud by screen readers for visually impaired users. This makes websites more inclusive and user-friendly.
Example:
alt="A beautiful mountain view"
width and height: These attributes define the image’s size in pixels. You can specify one or both attributes to adjust how the image is displayed on the page.
Example:
width="300"means the image will be displayed 300 pixels wide.
Importance of the alt Attribute for Accessibility
The alt attribute improves web accessibility by providing a textual description of an image, which can be especially helpful for users who rely on screen readers. It also serves as a fallback in case the image cannot load. Every image should have a meaningful alt text that describes the content or purpose of the image.
Example:
<img src="sunset.jpg" alt="A beautiful sunset over the ocean" width="500">
If the image is purely decorative and doesn’t add any informational value, you can leave the alt attribute empty:
<img src="decorative.png" alt="" width="200">
By providing appropriate alt text, developers make their websites more inclusive for users with disabilities and improve the site's SEO (Search Engine Optimization).
Activity:
Students add an image to their webpage. Provide a public image link or allow students to use an image from their computers.
Students Activity :
Objective:
Students will practice adding an image to their existing HTML webpage by using the <img> tag with appropriate attributes (like src, alt, and width). This activity will help them understand how to embed images and ensure accessibility.
Activity Steps:
Find or Use a Public Image:
Provide students with a public image URL they can use, or ask them to download an image to their local computer.
Example of a public image URL:
Modify the Existing HTML File:
Instruct students to open their existing HTML file (e.g., exercise.html) in their text editor.
Add the following HTML code to insert an image onto the webpage:
// Some code
<h1>My Webpage with an Image</h1>
<p>This is an example of adding an image to a webpage:</p>
<img src=" https://images.pexels.com/photos/14137361/pexels-photo-14137361.jpeg?auto=compress&cs=tinysrgb&w=600&lazy=load " alt=" Ferris Wheel During Night Time " width="300">Image from Local Computer (Optional):
If students want to use an image from their computer, instruct them to save the image in the same folder as their HTML file.
They can replace the src attribute with the local filename:
<img src="my-image.jpg" alt="A description of my image" width="300">
Save the HTML File:
After adding the image, students should save the file.
Preview the Image in a Browser:
Instruct students to open their updated HTML file in a browser. They should see the image displayed on their webpage, with the size adjusted according to the width attribute.
If the image doesn’t load, ask them to check the src path or URL and ensure the file is in the correct folder (for local images).
Experiment with Image Size:
Encourage students to experiment with different width and height values to see how they affect the image size.
Example:
<img src=" https://images.pexels.com/photos/16005383/pexels-photo-16005383/free-photo-of-entrance-to-pixar-amusement-park.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=2" alt=" Entrance to Pixar Amusement Park " width="200" height="150">
Reflection and Discussion:
Have students reflect on the following questions:
How did the image display on the webpage?
What happened when they changed the image’s width and height attributes?
Why is the alt attribute important, and what should be included in the alt text?
Extended Activity (Optional):
For students who finish early or want more practice, suggest the following:
Adding Multiple Images:
Students can add more images to their webpage by repeating the process. They could create a gallery or a list of images, for example:
// Some code
<h2>My Favorite Images</h2>
<img src="image1.jpg" alt="First image" width="200">
<img src="image2.jpg" alt="Second image" width="200">
<img src="image3.jpg" alt="Third image" width="200">Experiment with Responsive Images:
Have students remove the width and height attributes to see how the image scales based on the browser’s size.
They could also research and try using CSS for responsive images:
<img src="image.jpg" alt="Responsive image" style="width: 100%;">
By the end of this activity, students will have a clear understanding of how to add images to their webpages and how to make them accessible to all users. This experience will also prepare them for future lessons involving more advanced media elements and styling techniques.
Last updated