Images in HTML (HTML में चित्र)
- Siddharth Sharma
- Jan 30
- 3 min read
Web pages को attractive और informative बनाने के लिए Images का use बहुत important है। चाहे वह logo हो, product photo हो, या diagram हो, images content को user-friendly बनाती हैं।
HTML में images add करने के लिए हम <img> tag का use करते हैं।
1. The Image Tag (<img>)
Definition: HTML में image insert करने के लिए <img> tag use होता है।
Empty Element: <img> एक Empty Tag (Void Element) है। इसका मतलब है कि इसमें सिर्फ attributes होते हैं और इसका कोई closing tag (जैसे </img>) नहीं होता।
Basic Syntax:
HTML
<img src="url">
2. The src Attribute (Most Important)
<img> tag अकेले काम नहीं कर सकता। Browser को यह बताने के लिए कि image कहाँ (Where) रखी है, हम src attribute का use करते हैं।
Full Form: src का मतलब है Source।
Function: यह image file का path (URL) define करता है।
Types of Paths in src:
Relative Path: जब image आपके computer या server पर उसी folder में हो जहाँ HTML file है।
Example: src="picture.jpg" (Same folder)
Example: src="images/picture.jpg" (Images folder ke andar)
Absolute Path: जब image internet पर किसी दूसरी website पर हो।
Example: src="https://www.google.com/logo.png"
3. The alt Attribute (Alternative Text)
alt attribute बहुत important है लेकिन अक्सर students इसे ignore कर देते हैं। alt का मतलब है Alternative Text।
Why use alt? (इसके 2 main uses हैं):
Image Loading Failure: अगर internet slow है या image file delete हो गई है और browser image load नहीं कर पा रहा, तो user को image की जगह यह text दिखाई देगा। इससे user को पता चल जाता है कि वहाँ क्या था।
Accessibility (Screen Readers): जो blind people internet use करते हैं, उनके screen readers images को "देख" नहीं सकते। वे इस alt text को read करके user को बताते हैं कि image में क्या है।
Example:
HTML
<img src="cat.jpg" alt="A cute white cat sitting on a chair">
4. Image Dimensions (width and height)
Images का size control करना web design में बहुत ज़रूरी है। अगर image बहुत बड़ी होगी, तो page का layout खराब हो जाएगा। Size control करने के लिए हम width और height attributes का use करते हैं।
Pixels (px): Default unit pixels होती है।
Example: width="500" (मतलब 500 pixels wide)
Percentage (%): आप screen size के हिसाब से भी width set कर सकते हैं।
Example: width="50%" (Screen का आधा हिस्सा)
Best Practice:
कोशिश करें कि width और height में से कोई एक ही attribute दें। Browser automatically aspect ratio (लंबाई-चौड़ाई का अनुपात) maintain करके दूसरी value set कर लेगा। अगर आप दोनों देंगे और ratio सही नहीं होगा, तो image stretch (खिंच) जाएगी और खराब दिखेगी।
Example Code:
HTML
<img src="photo.jpg" alt="My Photo" width="300">
<img src="photo.jpg" alt="My Photo" width="300" height="300">
Complete Example Code
इस example को notepad में save करके check करें। (Note: flower.jpg नाम की एक photo उसी folder में रखें जहाँ HTML file है)।
HTML
<!DOCTYPE html>
<html>
<head>
<title>Image Example</title>
</head>
<body>
<h2>HTML Image Demo</h2>
<p>Image from same folder:</p>
<img src="flower.jpg" alt="Beautiful Red Rose">
<p>Resized Image (Width 200px):</p>
<img src="flower.jpg" alt="Small Rose" width="200" height="150">
<p>Google Logo from Internet:</p>
<img src="https://www.google.com/images/branding/googlelogo/1x/googlelogo_color_272x92dp.png" alt="Google Logo">
<p>Image jo exist nahi karti (Alt text dikhega):</p>
<img src="wrong-name.jpg" alt="Sorry, this image is missing!">
</body>
</html>
Summary Table for Revision
Attribute | Description (विवरण) | Required? |
src | Image का path या URL बताता है। | Yes (Compulsory) |
alt | Image का alternative description देता है। | Yes (Recommended) |
width | Image की चौड़ाई (pixels या % में) set करता है। | No (Optional) |
height | Image की ऊँचाई set करता है। | No (Optional) |
User Note: Exam में <img> tag को explain करते समय यह ज़रूर लिखें कि यह एक Empty Tag है और alt attribute SEO और blind users के लिए क्यों ज़रूरी है।
Comments