Introduction
जब हम कोई web page बनाते हैं, तो केवल text ही काफी नहीं होता। अगर page में images या graphics हों, तो वह ज्यादा attractive और user-friendly बन जाता है।
सोचिए—अगर किसी website पर products दिखाने हों लेकिन images ही ना हों, तो user को समझने में कितनी दिक्कत होगी।
यहीं पर HTML में graphics (images) का उपयोग किया जाता है। Images web page को visually appealing बनाती हैं और information को बेहतर तरीके से समझाने में मदद करती हैं।
Web Designing के students के लिए images add करना बहुत जरूरी skill है, क्योंकि लगभग हर website में graphics का उपयोग होता है।
Definition
HTML में graphics जोड़ने की प्रक्रिया को image tag <img> के माध्यम से किया जाता है, जिससे हम किसी भी image को web page पर display कर सकते हैं।
Concept
1. Image Tag क्या होता है
HTML में image add करने के लिए <img> tag का उपयोग किया जाता है।
यह एक empty tag होता है, यानी इसका closing tag नहीं होता।
2. Basic Syntax
<img src="image.jpg" alt="Sample Image">Give feedback
3. Important Attributes
(a) src (Source)
यह image का path या location बताता है।
Example:
<img src="photo.jpg">Give feedback
(b) alt (Alternative Text)
अगर image load नहीं होती है, तो alt text दिखाई देता है।
<img src="photo.jpg" alt="Student Photo">Give feedback
(c) width और height
Image का size set करने के लिए use होते हैं।
<img src="photo.jpg" width="300" height="200">Give feedback
Output:
Image 300px width और 200px height में दिखाई देगी।
(d) title
Image पर mouse ले जाने पर text दिखाने के लिए।
<img src="photo.jpg" title="This is an image">Give feedback
4. Local Image vs Online Image
Local Image
जब image आपके computer या project folder में होती है:
<img src="images/photo.jpg">Give feedback
Online Image
जब image internet से load होती है:
<img src="https://example.com/image.jpg">Give feedback
5. Image as Link
Image को clickable link भी बनाया जा सकता है।
<a href="https://example.com">
<img src="photo.jpg" alt="Click Image">
</a>Give feedback
Output:
Image पर click करने से दूसरी website open होगी।
6. Image Alignment (Basic)
HTML में image को align करने के लिए पुराना तरीका:
<img src="photo.jpg" align="right">Give feedback
Note: Modern web designing में CSS का उपयोग किया जाता है।
Real-Life Example
मान लीजिए आप एक online shopping website बना रहे हैं:
Product का नाम
Price
Description
अगर image नहीं होगी, तो user को product समझ नहीं आएगा।
ठीक इसी तरह HTML में images add करके हम information को visually clear बनाते हैं।
Important Points
Images web page को attractive बनाती हैं<img> एक empty tag होता है
src attribute image का path बताता है
alt attribute accessibility के लिए जरूरी है
Images local और online दोनों हो सकती हैं
Image को link के रूप में भी use कर सकते हैं
निष्कर्ष
Adding Graphics to HTML Documents web designing का एक महत्वपूर्ण हिस्सा है, जो web page को simple text से visual experience में बदल देता है। सही तरीके से images का उपयोग करने से user experience और engagement दोनों बेहतर होते हैं।