• +91-9142290450

  • Hajipur, Bihar, 844101

☰
❮
❯

HTML Images

← Previous Next →

🔹 What is the <img> Tag?

The <img> tag is used to embed images into a webpage. It is a self-closing tag, meaning it doesn't need a closing </img>.

🔹 Basic Syntax
<img src="image.jpg" alt="Description">
Attribute Purpose
src Specifies the path to the image file
alt Provides alternative text if the image fails
🔹 Example
<img src="logo.png" alt="Company Logo">

🔹 Adding Width and Height

You can set size using the width and height attributes (in pixels):

<img src="photo.jpg" width="300" height="200" alt="A Photo">

Or use CSS:

<img src="photo.jpg" style="width:100%; height:auto;" alt="Responsive Image">

🔹 Image from a Folder

<img src="images/pic1.jpg" alt="Gallery Image">

🔹 Image from URL

<img src="https://example.com/banner.jpg" alt="External Image">

🔹 Making Images Clickable

Wrap the image inside an <a> tag:

<a href="https://example.com">
  <img src="logo.png" alt="Go to site">
</a>

🔹 Responsive Images

<img src="image.jpg" style="max-width:100%; height:auto;" alt="Responsive">

📝 This ensures the image scales with screen size.

🔹 Image with Title (Tooltip)

<img src="book.jpg" alt="Book Cover" title="Click to view book details">

Practice Questions

Q1. Insert an image named banner.jpg into a webpage.

Q2. Add an alternative text “Nature Photo” to an image.

Q3. Display an image with width 500px and height 300px.

Q4. Create a responsive image using CSS.

Q5. Link an image to https://example.com.

Q6. Load an image from an external URL.

Q7. Show an image located inside a folder named gallery.

Q8. Use title attribute to show a tooltip on hover.

Q9. Add multiple images in a row using HTML.

Q10. Create an image gallery layout with three images.

← Previous Next →

HTML

online coding class codepractice

HTML5 Basics

HTML Styling and Design

HTML Links and Media

HTML Layout and Structure

HTML Forms

HTML Graphics

HTML APIs

HTML Advanced Topics

codepractice logo
Login
Go Back Top