🎯 Learning Objectives

By the end of this class, students will:

  1. Understand the purpose and syntax of the <img> tag.
  2. Learn how to properly use attributes like src, alt, width, and height.
  3. Understand relative vs absolute paths for images.
  4. Learn how to organize images inside project folders.
  5. Add clickable images, background images, and learn about image optimization.

🧩 Part 1: What Is an Image in HTML?

Concept:

Images make websites visually appealing. They can be icons, logos, banners, or even product photos.

HTML Tag Used:

<img src="path" alt="description">

✅ The <img> tag is self-closing (it doesn’t have a closing tag).

🧱 Basic Syntax Example

<img src="images/logo.png" alt="Company Logo">

Attributes Explained:

Attribute Description Example
src Specifies the path to the image src="images/logo.png"
alt Describes the image for screen readers or when it fails to load alt="Company Logo"
width Sets width of image (in px or %) width="200"
height Sets height of image height="150"
title Shows tooltip text on hover title="Our Company Logo"

🧠 Example 1: Local Image

If your folder structure looks like this: