एचटीएमएल छवियाँ
छवियां वेब पेज के डिज़ाइन और उपस्थिति में सुधार कर सकती हैं।
उदाहरण
<img src="pic_trulli.jpg"
alt="Italian Trulli">
उदाहरण
<img src="img_girl.jpg"
alt="Girl in a jacket">
उदाहरण
<img src="img_chania.jpg"
alt="Flowers in Chania">
एचटीएमएल इमेज सिंटेक्स
HTML <img>टैग का उपयोग वेब पेज में इमेज को एम्बेड करने के लिए किया जाता है।
छवियों को तकनीकी रूप से वेब पेज में नहीं डाला जाता है; छवियां वेब पेजों से जुड़ी हुई हैं। टैग संदर्भित छवि के <img>लिए एक होल्डिंग स्थान बनाता है।
टैग खाली है, इसमें <img>केवल विशेषताएँ हैं, और इसमें क्लोजिंग टैग नहीं है।
टैग में <img>दो आवश्यक विशेषताएं हैं:
- src - छवि का पथ निर्दिष्ट करता है
- alt - छवि के लिए वैकल्पिक टेक्स्ट निर्दिष्ट करता है
वाक्य - विन्यास
<img src="url" alt="alternatetext">
स्रोत विशेषता
आवश्यक srcविशेषता छवि के पथ (यूआरएल) को निर्दिष्ट करती है।
नोट: जब कोई वेब पेज लोड होता है, तो उस समय ब्राउज़र वेब सर्वर से छवि प्राप्त करता है और उसे पेज में सम्मिलित करता है। इसलिए, सुनिश्चित करें कि छवि वास्तव में वेब पेज के संबंध में एक ही स्थान पर रहती है, अन्यथा आपके आगंतुकों को एक टूटा हुआ लिंक आइकन मिलेगा। altयदि ब्राउज़र छवि नहीं ढूंढ पाता है तो टूटा हुआ लिंक आइकन और टेक्स्ट दिखाया जाता है।
उदाहरण
<img src="img_chania.jpg" alt="Flowers
in Chania">
ऑल्ट एट्रीब्यूट
आवश्यक altविशेषता एक छवि के लिए एक वैकल्पिक पाठ प्रदान करती है, यदि उपयोगकर्ता किसी कारण से इसे नहीं देख सकता है (धीमे कनेक्शन के कारण, src विशेषता में त्रुटि, या यदि उपयोगकर्ता स्क्रीन रीडर का उपयोग करता है)।
विशेषता का मान altछवि का वर्णन करना चाहिए:
उदाहरण
<img src="img_chania.jpg" alt="Flowers
in Chania">
यदि किसी ब्राउज़र को कोई छवि नहीं मिल रही है, तो वह alt
विशेषता का मान प्रदर्शित करेगा:
उदाहरण
<img src="wrongname.gif" alt="Flowers
in Chania">
युक्ति: स्क्रीन रीडर एक सॉफ्टवेयर प्रोग्राम है जो HTML कोड को पढ़ता है, और उपयोगकर्ता को सामग्री को "सुनने" की अनुमति देता है। स्क्रीन रीडर उन लोगों के लिए उपयोगी हैं जो नेत्रहीन हैं या सीखने में अक्षम हैं।
छवि का आकार - चौड़ाई और ऊंचाई
आप styleकिसी छवि की चौड़ाई और ऊंचाई निर्दिष्ट करने के लिए विशेषता का उपयोग कर सकते हैं।
उदाहरण
<img src="img_girl.jpg" alt="Girl in a jacket" style="width:500px;height:600px;">
वैकल्पिक रूप से, आप widthऔर heightविशेषताओं का उपयोग कर सकते हैं:
उदाहरण
<img src="img_girl.jpg" alt="Girl in a jacket" width="500" height="600">
और विशेषताएँ हमेशा पिक्सेल में छवि की चौड़ाई और ऊँचाई को परिभाषित करती हैं width।height
नोट: हमेशा एक छवि की चौड़ाई और ऊंचाई निर्दिष्ट करें। यदि चौड़ाई और ऊंचाई निर्दिष्ट नहीं है, तो छवि लोड होने पर वेब पेज झिलमिलाहट कर सकता है।
चौड़ाई और ऊंचाई, या शैली?
HTML में width, height, और styleविशेषताएँ सभी मान्य हैं।
हालांकि, हम styleविशेषता का उपयोग करने का सुझाव देते हैं। यह स्टाइल शीट को छवियों के आकार को बदलने से रोकता है:
उदाहरण
<!DOCTYPE html>
<html>
<head>
<style>
img {
width: 100%;
}
</style>
</head>
<body>
<img src="html5.gif" alt="HTML5 Icon" width="128" height="128">
<img src="html5.gif" alt="HTML5 Icon" style="width:128px;height:128px;">
</body>
</html>
अन्य फ़ोल्डर में छवियाँ
यदि आपके पास उप-फ़ोल्डर में आपकी छवियां हैं, तो आपको srcविशेषता में फ़ोल्डर का नाम शामिल करना होगा:
उदाहरण
<img src="/images/html5.gif"
alt="HTML5 Icon" style="width:128px;height:128px;">
किसी अन्य सर्वर/वेबसाइट पर छवियां
कुछ वेब साइट दूसरे सर्वर पर एक छवि की ओर इशारा करती हैं।
किसी अन्य सर्वर पर किसी छवि को इंगित करने के लिए, आपको विशेषता में एक पूर्ण (पूर्ण) URL निर्दिष्ट करना होगा src:
उदाहरण
<img src="https://www.w3schools.com/images/w3schools_green.jpg" alt="W3Schools.com">
बाहरी छवियों पर नोट्स: बाहरी छवियां कॉपीराइट के अंतर्गत हो सकती हैं। यदि आपको इसका उपयोग करने की अनुमति नहीं मिलती है, तो आप कॉपीराइट कानूनों का उल्लंघन कर सकते हैं। इसके अतिरिक्त, आप बाहरी छवियों को नियंत्रित नहीं कर सकते हैं; इसे अचानक हटाया या बदला जा सकता है।
एनिमेटेड छवियां
HTML एनिमेटेड GIF की अनुमति देता है:
उदाहरण
<img src="programming.gif" alt="Computer Man" style="width:48px;height:48px;">
एक लिंक के रूप में छवि
किसी छवि को लिंक के रूप में उपयोग करने के लिए, टैग को <img>टैग के अंदर <a>
रखें:
उदाहरण
<a href="default.asp">
<img src="smiley.gif" alt="HTML tutorial"
style="width:42px;height:42px;">
</a>
छवि फ़्लोटिंग
floatछवि को पाठ के दाईं या बाईं ओर तैरने देने के लिए CSS गुण का उपयोग करें :
उदाहरण
<p><img src="smiley.gif" alt="Smiley face"
style="float:right;width:42px;height:42px;">
The image will float to the right of
the text.</p>
<p><img src="smiley.gif" alt="Smiley face"
style="float:left;width:42px;height:42px;">
The image will float to the left of
the text.</p>
टिप: सीएसएस फ्लोट के बारे में अधिक जानने के लिए, हमारे सीएसएस फ्लोट ट्यूटोरियल को पढ़ें ।
सामान्य छवि प्रारूप
यहां सबसे आम छवि फ़ाइल प्रकार हैं, जो सभी ब्राउज़रों (क्रोम, एज, फ़ायरफ़ॉक्स, सफारी, ओपेरा) में समर्थित हैं:
| Abbreviation | File Format | File Extension |
|---|---|---|
| APNG | Animated Portable Network Graphics | .apng |
| GIF | Graphics Interchange Format | .gif |
| ICO | Microsoft Icon | .ico, .cur |
| JPEG | Joint Photographic Expert Group image | .jpg, .jpeg, .jfif, .pjpeg, .pjp |
| PNG | Portable Network Graphics | .png |
| SVG | Scalable Vector Graphics | .svg |
अध्याय का सारांश
<img>छवि को परिभाषित करने के लिए HTML तत्व का प्रयोग करेंsrcछवि के URL को परिभाषित करने के लिए HTML विशेषता का उपयोग करें- किसी छवि के लिए वैकल्पिक पाठ को परिभाषित करने के लिए HTML
altविशेषता का उपयोग करें, यदि इसे प्रदर्शित नहीं किया जा सकता है -
छवि के आकार को परिभाषित करने के लिए HTML
widthऔरheightविशेषताओं या CSSwidthऔर गुणों का उपयोग करेंheight floatछवि को बाईं या दाईं ओर तैरने देने के लिए CSS गुण का उपयोग करें
नोट: बड़ी छवियों को लोड करने में समय लगता है, और यह आपके वेब पेज को धीमा कर सकता है। छवियों का सावधानी से उपयोग करें।
एचटीएमएल व्यायाम
एचटीएमएल छवि टैग
| Tag | Description |
|---|---|
| <img> | Defines an image |
| <map> | Defines an image map |
| <area> | Defines a clickable area inside an image map |
| <picture> | Defines a container for multiple image resources |
सभी उपलब्ध HTML टैग्स की पूरी सूची के लिए, हमारे HTML टैग संदर्भ पर जाएं ।