html image tags, html css, html css tutorial for beginners, html css full course,

on

HTML mein images ko display karne ke liye `<img>` tag ka use hota hai. Yeh tag ek empty tag hai, matlab iska koi closing tag nahi hota. Image ko specify karne ke liye `src` (source) attribute ka use kiya jata hai, aur alternative text provide karne ke liye `alt` attribute ka use kiya jata hai. Additional attributes jaise `width` aur `height` ko use karke image ka size specify kiya ja sakta hai.

`<img>` tag ka basic structure kuch is tarah hota hai:

```html
<!DOCTYPE html>
<html>
<head>
    <title>HTML Image Tag Example</title>
</head>
<body>
    <h1>HTML Image Example</h1>
    <img src="image.jpg" alt="Description of the image" width="500" height="300">
</body>
</html>
```

Is example mein:
- `src="image.jpg"`: Yeh attribute image file ka path specify karta hai. Yeh local file ya URL ho sakta hai.
- `alt="Description of the image"`: Yeh attribute alternative text provide karta hai jo image load na hone par ya screen readers ke liye display hota hai.
- `width="500"` aur `height="300"`: Yeh attributes image ka width aur height specify karte hain pixels mein.

Additional example with more attributes:

```html
<!DOCTYPE html>
<html>
<head>
    <title>HTML Image Tag Example</title>
</head>
<body>
    <h1>HTML Image with Link</h1>
    <a href="https://www.example.com">
        <img src="image.jpg" alt="Description of the image" width="500" height="300">
    </a>
    <h1>HTML Image with Title</h1>
    <img src="image.jpg" alt="Description of the image" title="Hover text" width="500" height="300">
</body>
</html>
```

Is example mein:
- `a` tag ke sath `img` tag ko wrap karke image ko clickable link banaya gaya hai.
- `title="Hover text"`: Yeh attribute hover text provide karta hai jo user ko mouse over karne par dikhayi deta hai.

`<img>` tag ka use karke web pages mein visual content add karna asaan hota hai, jo user engagement aur aesthetic appeal ko enhance karta hai.

Comments

Post a Comment