HTML इमेज

HTML का उपयोग करके दस्तावेज़ में चित्र दिखाया जा सकता है。

उदाहरण

चित्र जोड़ें
इस उदाहरण में दिखाया गया है कि कैसे चित्र को वेब पृष्ठ में दिखाया जाता है。
विभिन्न स्थान से चित्र जोड़ें
इस उदाहरण में दिखाया गया है कि कैसे अन्य फ़ोल्डर या सर्वर के चित्र को वेब पृष्ठ में दिखाया जाता है。

（इस पृष्ठ के नीचे अधिक उदाहरण पाएँ。）

चित्र टैग (<img>) और स्रोत गुण (Src)

HTML में चित्र <img> टैग से परिभाषित होता है。

<img> एक खाली टैग है, अर्थात यह केवल गुणों को शामिल करता है और बंद टैग नहीं है。

चित्र को पृष्ठ पर दिखाने के लिए आपको स्रोत गुण (src) का उपयोग करना होगा। src "source" का अर्थ है। स्रोत गुण का मूल्य चित्र का URL संदर्भ है。

चित्र को परिभाषित करने के लिए व्याकरण है:

<img src="url" />

URL चित्र के स्थान को सूचित करता है। अगर "boat.gif" नाम का चित्र www.codew3c.com के images डिरेक्ट्री में है, तो इसका URL http://www.codew3c.com/images/boat.gif है。

ब्राउज़र चित्र को दस्तावेज़ में चित्र टैग के दिखने स्थान पर दिखाता है। अगर आप चित्र टैग को दो पैराग्राफ के बीच रखते हैं, तो ब्राउज़र पहले पहला पैराग्राफ दिखाएगा, फिर चित्र दिखाएगा और अंत में दूसरा पैराग्राफ दिखाएगा。

तत्व प्रतिस्थापित करें (Alt)

alt गुण इमेज के लिए एक जानकारी टेक्स्ट को डिफाइन करता है।बदले गए टेक्स्ट के मूल्य उपयोगकर्ता द्वारा निर्धारित है।

<img src="boat.gif" alt="बड़ा नाव">

जब ब्राउज़र इमेज को लोड नहीं कर सकता है, तो बदले गए टेक्स्ट गुण ग्राहकों को खोने वाली सूचना बताते हैं।इस समय, ब्राउज़र इस विकल्पीय टेक्स्ट को दिखाएगा न कि इमेज।साइट पर सभी इमेजों के लिए बदले गए टेक्स्ट गुण को जोड़ना एक अच्छी प्रथा है, जो सूचना को बेहतर दिखाने में मदद करता है और उन लोगों के लिए भी उपयोगी है जो साफ़ी टेक्स्ट ब्राउज़र का उपयोग करते हैं।

बुनियादी ध्यान करें - उपयोगी राहत:

यदि कोई HTML फ़ाइल दस इमेजों को शामिल करती है, तो इस पृष्ठ को सही तरीके से दिखाने के लिए 11 फ़ाइलों को लोड करना जरूरी है।इमेजों को लोड करना समय लेता है इसलिए हमारी सलाह है: इमेजों का इस्तेमाल करते समय सावधानी बरतें।

और अधिक उदाहरण

पृष्ठभूमि इमेज
इस उदाहरण में, HTML पृष्ठ में पृष्ठभूमि इमेज को जोड़ने के तरीके दिखाया गया है。
इमेज रखें
इस उदाहरण में, लेख में इमेज को कैसे रखा जाएगा दिखाया गया है。
फ्लॉट इमेज
इस उदाहरण में, इमेज को पैराग्राफ के बाईं या दायं ओर फ्लॉट करने के तरीके दिखाया गया है。
इमेज आकार समायोजित करें
इस उदाहरण में, इमेज को विभिन्न आकारों में समायोजित करने के तरीके दिखाया गया है。
इमेज के लिए बदले गए टेक्स्ट दिखाएं
इस उदाहरण में, इमेज के लिए बदले गए टेक्स्ट को दिखाया गया है।ब्राउज़र इमेज को लोड नहीं कर सकता है तो बदले गए टेक्स्ट ग्राहकों को खोने वाली सूचना बताते हैं।साइट पर सभी इमेजों के लिए बदले गए टेक्स्ट गुण को जोड़ना एक अच्छी प्रथा है।
इमेज लिंक बनाएं
इस उदाहरण में, इमेज को लिंक के रूप में इस्तेमाल करने के तरीके दिखाया गया है。
इमेज मैप बनाएं
इस उदाहरण में, एक इमेज मैप बनाया गया है जिसमें क्षेत्र हैं और हर क्षेत्र एक सुपरलिंक है।
इमेज को इमेज मैप में बदलें
इस उदाहरण में एक साधारण इमेज को इमेज मैप में रखने के तरीके दिखाया गया है。

इमेज टैग

टैग वर्णन
<img> इमेज डिफाइन करें。
<map> इमेज मैप डिफाइन करें。
<area> इमेज आरेक्ट के भीतर क्षेत्रों को डिफाइन करें。