⬅ Previous Next ➡

11. Images in HTML

Images in HTML
  • The Image Tag (<img>): Used to embed images into a webpage. Unlike many other tags, the <img> tag is unpaired (self-closing), meaning it does not have a closing </img> tag.
  • Essential Attributes:
    • src (Source): Specifies the path or URL to the image file. If the path is wrong, the image won't load.
    • alt (Alternative Text): A text description of the image. It shows up if the image fails to load and is read by screen readers for accessibility and SEO.
  • Size and Styling Attributes:
    • width: Defines the width of the image in pixels (e.g., width="500").
    • height: Defines the height of the image in pixels.
    • title: Adds a tooltip that appears when a user hovers over the image.
  • Image Formats: Common formats used on the web include .jpg / .jpeg (photos), .png (transparent backgrounds), .gif (animations), and .svg (scalable vector graphics).

<!DOCTYPE html>
<html>
<head>
  <title>HTML Image Tag Examples</title>
</head>

<body>

<h2>Working with Images (&lt;img&gt; Tag)</h2>

<!-- Example 1: Local Image (same folder) -->
<img src="logo.png" alt="Company Logo" width="200">

<!-- Example 2: Local Image (inside a folder) -->
<img src="images/banner.jpg" alt="Website Banner" width="400">

<!-- Example 3: External Image from a URL -->
<img src="https://example.com/flower.jpg" alt="A beautiful red flower" width="400" height="300">

<!-- Example 4: Image with only Height (auto width) -->
<img src="profile.jpg" alt="User Profile Photo" height="150">

<!-- Example 5: Image with Title Tooltip -->
<img src="profile.jpg" alt="User Profile" title="This is a profile image" width="120">

<!-- Example 6: Image as a Link -->
<a href="https://www.sswebtechio.com">
  <img src="button.jpg" alt="Visit sswebtechio" width="180">
</a>

<!-- Example 7: Image with Border (using attribute style) -->
<img src="logo.png" alt="Logo with border" style="border:2px solid black;" width="200">

<!-- Example 8: Center Image using div (no CSS file) -->
<div align="center">
  <img src="logo.png" alt="Centered Logo" width="200">
</div>

<!-- Example 9: Clickable Image Opening in New Tab -->
<a href="https://quitexams.com" target="_blank">
  <img src="quiz.png" alt="Open quitexams" width="200">
</a>

<!-- Example 10: Broken Image Example (alt text shows) -->
<img src="wrongpath.jpg" alt="If image not found, this text appears" width="250">

<!-- Example 11: Responsive Image using width=100% (inline) -->
<img src="banner.jpg" alt="Full width banner" width="100%">

<!-- Example 12: Image Map (Clickable Areas) -->
<img src="campus.jpg" alt="Campus Map" usemap="#campusmap" width="400">

<map name="campusmap">
  <area shape="rect" coords="10,10,150,120" href="library.html" alt="Library">
  <area shape="rect" coords="170,10,320,120" href="lab.html" alt="Computer Lab">
</map>

</body>
</html>
⬅ Previous Next ➡