« Previous Next »

Images


src Attribute

Output :

alt Attribute

Output :

Alternative text Example

Output :

Image Size - Width and Height

Output :

Animated Images

Output :

Image as a Link

Output :

Practice Exercises

Task 1: How to display image with alternative text?

Goal: Practice inserting an image and defining proper alt text for accessibility and broken links.
💡 Hint: Use <img src="..." alt="...">.
💡 Show Solution 
<html>
  <body>
    <h2>Classic Car Image</h2>
    <p>The image below displays a classic muscle car. The <code>alt</code> attribute describes the image for screen readers:</p>
    <img src="https://images.unsplash.com/photo-1617814076367-b759c7d7e738?w=500" alt="Classic Muscle Car" style="max-width:100%;height:auto;">

    <!-- Broken Image Example -->
    <h2>Alternative text Example</h2>
    <img src="invalid-image.png" alt="AIT - Academy of Information Technology Logo" width="200">
  </body>
</html>
Output :

Classic Car Image

The image below displays a classic muscle car. The alt attribute describes the image for screen readers:

Classic Muscle Car

Alternative text Example

🖼️ AIT - Academy of Information Technology Logo
Explanation: src specifies the path/URL to the image, while alt acts as descriptive fallback text if the image fails to load.
Task 2: How to resize images and display GIFs?

Goal: Learn setting explicit width/height attributes and embedding animated .gif images.
💡 Hint: Add width="..." height="..." attributes or load a .gif file URL.
💡 Show Solution 
<html>
  <body>
    <h2>Image Size - Width and Height</h2>
    <p>Below is the logo of the Academy of Information Technology:</p>
    <img src="AIT.png" alt="AIT Logo" width="150" height="60">

    <h2>Animated Images</h2>
    <p>This is an animated image showing a computer setup:</p>
    <img src="https://media.giphy.com/media/qgQUGG4dbv5BLDYnrA/giphy.gif" alt="Animated computer setup" width="250">
  </body>
</html>
Output :

Image Size - Width and Height

Below is the logo of the Academy of Information Technology:

AIT Logo

Animated Images

This is an animated image showing a computer setup:

Animated computer setup
Explanation: Explicit width and height control pixel dimensions, while animated .gif images load smoothly like standard images.
Task 3: How to make image clickable link?

Goal: Nest an <img> inside an anchor tag <a> to create an active clickable image.
💡 Hint: Wrap <img> inside <a href="..."> element.
💡 Show Solution 
<html>
  <body>
    <h2>AIT Logo as a Link</h2>
    <p>Click the AIT logo below to visit the website:</p>
    
    <a href="https://aitaurangabad.com/" target="_blank">
      <img src="AIT.png" alt="AIT Logo - Click to visit" width="120">
    </a>
  </body>
</html>
Output :

AIT Logo as a Link

Click the AIT logo below to visit the website:

AIT Logo - Click to visit
Explanation: Wrapping the image inside an anchor tag turns the image into a functional link.
« Previous Next »