एचटीएमएल ट्यूटोरियल

एचटीएमएल होम एचटीएमएल परिचय एचटीएमएल संपादक एचटीएमएल बेसिक एचटीएमएल तत्व एचटीएमएल गुण एचटीएमएल शीर्षक एचटीएमएल पैराग्राफ एचटीएमएल शैलियाँ एचटीएमएल स्वरूपण एचटीएमएल कोटेशन एचटीएमएल टिप्पणियाँ एचटीएमएल रंग एचटीएमएल सीएसएस एचटीएमएल लिंक एचटीएमएल छवियाँ एचटीएमएल फ़ेविकॉन एचटीएमएल टेबल्स एचटीएमएल सूचियां एचटीएमएल ब्लॉक और इनलाइन एचटीएमएल क्लासेस एचटीएमएल आईडी एचटीएमएल इफ्रेम्स एचटीएमएल जावास्क्रिप्ट HTML फ़ाइल पथ एचटीएमएल हेड एचटीएमएल लेआउट एचटीएमएल उत्तरदायी एचटीएमएल कंप्यूटर कोड HTML शब्दार्थ एचटीएमएल स्टाइल गाइड एचटीएमएल इकाइयां एचटीएमएल प्रतीक एचटीएमएल इमोजी एचटीएमएल वर्णसेट एचटीएमएल यूआरएल एनकोड एचटीएमएल बनाम एक्सएचटीएमएल

एचटीएमएल फॉर्म

एचटीएमएल फॉर्म एचटीएमएल फॉर्म गुण एचटीएमएल फॉर्म एलिमेंट्स एचटीएमएल इनपुट प्रकार एचटीएमएल इनपुट गुण HTML इनपुट फॉर्म विशेषताएँ

एचटीएमएल ग्राफिक्स

एचटीएमएल कैनवास एचटीएमएल एसवीजी

एचटीएमएल मीडिया

एचटीएमएल मीडिया एचटीएमएल वीडियो एचटीएमएल ऑडियो एचटीएमएल प्लग-इन एचटीएमएल यूट्यूब

एचटीएमएल एपीआई

एचटीएमएल जियोलोकेशन एचटीएमएल ड्रैग/ड्रॉप एचटीएमएल वेब स्टोरेज एचटीएमएल वेब वर्कर्स एचटीएमएल एसएसई

एचटीएमएल उदाहरण

एचटीएमएल उदाहरण एचटीएमएल प्रश्नोत्तरी एचटीएमएल व्यायाम एचटीएमएल प्रमाणपत्र एचटीएमएल सारांश एचटीएमएल अभिगम्यता

एचटीएमएल संदर्भ

एचटीएमएल टैग सूची एचटीएमएल गुण HTML वैश्विक गुण एचटीएमएल ब्राउज़र समर्थन एचटीएमएल घटनाक्रम एचटीएमएल रंग एचटीएमएल कैनवास एचटीएमएल ऑडियो/वीडियो एचटीएमएल सिद्धांत एचटीएमएल कैरेक्टर सेट एचटीएमएल यूआरएल एनकोड एचटीएमएल लैंग कोड HTTP संदेश HTTP तरीके पीएक्स से ईएम कन्वर्टर कुंजीपटल अल्प मार्ग

HTML <तस्वीर> तत्व


HTML <picture>तत्व आपको विभिन्न उपकरणों या स्क्रीन आकारों के लिए अलग-अलग चित्र प्रदर्शित करने की अनुमति देता है।



एचटीएमएल <चित्र> तत्व

HTML <picture>तत्व वेब डेवलपर्स को छवि संसाधनों को निर्दिष्ट करने में अधिक लचीलापन देता है।

<picture>तत्व में एक या अधिक तत्व होते हैं, प्रत्येक विशेषता के माध्यम से विभिन्न छवियों का <source>संदर्भ देता है। srcsetइस तरह ब्राउज़र उस छवि को चुन सकता है जो वर्तमान दृश्य और/या डिवाइस के लिए सबसे उपयुक्त हो।

प्रत्येक <source>तत्व में एक mediaविशेषता होती है जो परिभाषित करती है कि छवि कब सबसे उपयुक्त है।

उदाहरण

विभिन्न स्क्रीन आकारों के लिए अलग-अलग चित्र दिखाएं:

<picture>
  <source media="(min-width: 650px)" srcset="img_food.jpg">
  <source media="(min-width: 465px)" srcset="img_car.jpg">
  <img src="img_girl.jpg">
</picture>

नोट:<img> तत्व के अंतिम चाइल्ड तत्व के रूप में हमेशा एक तत्व निर्दिष्ट करें <picture>तत्व का उपयोग उन ब्राउज़र द्वारा किया जाता है जो तत्व <img>का समर्थन नहीं करते हैं <picture>, या यदि कोई भी <source>टैग मेल नहीं खाता है।


पिक्चर एलिमेंट का उपयोग कब करें

<picture>तत्व के दो मुख्य उद्देश्य हैं :

1. बैंडविड्थ

यदि आपके पास एक छोटी स्क्रीन या डिवाइस है, तो बड़ी छवि फ़ाइल लोड करना आवश्यक नहीं है। ब्राउज़र पहले <source> तत्व का उपयोग मिलान विशेषता मानों के साथ करेगा, और निम्न में से किसी भी तत्व को अनदेखा करेगा।

2. प्रारूप समर्थन

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

उदाहरण

ब्राउज़र पहले छवि प्रारूप का उपयोग करेगा जिसे वह पहचानता है:

<picture>
  <source srcset="img_avatar.png">
  <source srcset="img_girl.jpg">
  <img src="img_beatles.gif" alt="Beatles" style="width:auto;">
</picture>

नोट: ब्राउज़र <source>मेल खाने वाले विशेषता मानों के साथ पहले तत्व का उपयोग करेगा, और निम्नलिखित <source>तत्वों को अनदेखा करेगा।


एचटीएमएल छवि टैग

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 टैग संदर्भ पर जाएं ।