HTML टैग एक वेब पेज पर एक छवि जोड़ता है। आप जिस छवि को बिस्तर पर रखना चाहते हैं उसका स्थान निर्दिष्ट करने के लिए src विशेषता का उपयोग करें। अगर इमेज लोड नहीं हो पाती है तो ऑल्ट एट्रिब्यूट का इस्तेमाल अक्सर इमेज की जगह टेक्स्ट दिखाने के लिए किया जाता है।

जब पहली बार वेब का आविष्कार किया गया था, तो वेब पेज केवल टेक्स्ट प्रदर्शित कर सकते थे। हालांकि, एक वेब पेज में एक छवि जोड़ने की क्षमता जल्दी से जोड़ दी गई थी। तब से, छवियां वेब पर अधिकांश पृष्ठों का एक महत्वपूर्ण हिस्सा बन गई हैं। लोगो से लेकर तस्वीरों तक, चित्र इंटरनेट पर हर जगह मौजूद हैं।

यह ट्यूटोरियल चर्चा करेगा कि . का उपयोग कैसे करें एक वेब डेवलपर के रूप में HTML छवियों के साथ काम करने के लिए टैग। हम उन कुछ मुख्य विशेषताओं के बारे में भी बात करेंगे जिनका उपयोग आप . के साथ कर सकते हैं टैग।

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

एचटीएमएल टैग वेब दस्तावेज़ में एक छवि जोड़ता है। आप जिस छवि को एम्बेड करना चाहते हैं उसका स्थान निर्दिष्ट करने के लिए src विशेषता का उपयोग करें। यह आपके कंप्यूटर पर फ़ाइल या किसी अन्य फ़ाइल का URL हो सकता है। Alt विशेषता आपको वैकल्पिक टेक्स्ट निर्दिष्ट करने देती है जो छवि लोड नहीं होने पर प्रकट होता है।

यहाँ HTML के लिए वाक्य रचना है टैग:

टैग का कोई क्लोजिंग टैग नहीं है। इसके बजाय, टैग "/>" के साथ समाप्त होता है। यह दर्शाता है कि टैग को एक अलग क्लोजिंग टैग की आवश्यकता नहीं है। टैग सभी ब्राउज़रों में समर्थित है।

HTML मानता है कि आपकी HTML फ़ाइल को संग्रहीत करने वाला फ़ोल्डर वही फ़ोल्डर है जो आपके द्वारा संदर्भित किसी भी छवि को संग्रहीत करता है। इस व्यवहार को एक सटीक फ़ाइल पथ या यूआरएल निर्दिष्ट करके अनदेखा किया जा सकता है जहां एक छवि मिल सकती है।

उपरोक्त वाक्य रचना में, हमारे फ़ाइल का संदर्भ देगा house.png. यह फ़ाइल उसी फ़ोल्डर में है जिसमें HTML फ़ाइल है जिसके साथ हम काम कर रहे हैं।

81% प्रतिभागियों ने कहा कि बूटकैंप में भाग लेने के बाद उन्हें अपनी तकनीकी नौकरी की संभावनाओं के बारे में अधिक आत्मविश्वास महसूस हुआ। आज ही एक बूटकैंप से मिलान करें।

बूटकैंप शुरू करने से लेकर अपनी पहली नौकरी खोजने तक, औसत बूटकैंप ग्रेड ने करियर संक्रमण में छह महीने से भी कम समय बिताया।

हालाँकि, यदि हम अपनी छवि फ़ाइलों को किसी अन्य फ़ोल्डर में संग्रहीत कर रहे थे - उदाहरण के लिए, चित्र कहा जाता है - तो हम इस कोड का उपयोग करेंगे:

यदि हम किसी बाहरी स्रोत से छवि एम्बेड करना चाहते हैं, तो हम एक पूर्ण URL का उपयोग कर सकते हैं। यहां एक . का एक उदाहरण दिया गया है बाहरी छवि को संदर्भित करने वाला टैग:

उस ने कहा, जब भी संभव हो, स्थानीय फ़ाइल से किसी छवि को संदर्भित करना सबसे अच्छा होता है। ऐसा इसलिए है क्योंकि बाहरी छवि को संदर्भित करने से ब्राउज़र स्थानीय फ़ाइल से किसी छवि को पुनर्प्राप्त करने की तुलना में अधिक काम करता है।

HTML छवि उदाहरण

आइए HTML का एक उदाहरण देखें कार्रवाई में टैग। मान लीजिए हम एक स्थानीय कॉफी हाउस, द गोल्डन रोस्ट के लिए एक वेबसाइट बना रहे हैं। द गोल्डन रोस्ट चाहता है कि उनके होमपेज पर एक कप कॉफी की छवि दिखाई दे।

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

 
द गोल्डन रोस्ट

हमारा कोड लौटाता है:

आइए हमारे कोड को तोड़ दें। सबसे पहले, हमने एक . का इस्तेमाल किया टैग, जो हमारे वेब पेज के मुख्य तत्वों को स्टोर करता है। फिर, हमने एक

. का इस्तेमाल किया हमारे पृष्ठ पर एक शीर्षक को परिभाषित करने के लिए टैग। इस शीर्षक का पाठ है:द गोल्डन रोस्ट।

अगली पंक्ति में, हमने अपने कोड में एक छवि जोड़ने के लिए एक img तत्व का उपयोग किया- जिसे Coffee.png कहा जाता है। यह छवि हमारी HTML फ़ाइल के समान फ़ोल्डर में समाहित है। नतीजतन, हमें src विशेषता का उपयोग करके किसी फ़ोल्डर को इंगित करने की आवश्यकता नहीं थी। हमने अभी फ़ाइल का नाम निर्दिष्ट किया है।

छवि HTML:वैकल्पिक टेक्स्ट

वैकल्पिक पाठ जोड़ना HTML में छवियों के साथ काम करने का एक महत्वपूर्ण हिस्सा है। वैकल्पिक पाठ, विशेषता alt . द्वारा दर्शाया गया है , एक छवि का पाठ्य विवरण है।

छवियों के साथ काम करते समय आपको एक ऑल्ट विशेषता निर्दिष्ट करने के कई कारण हैं। वैकल्पिक पाठ:

1. इच्छित लेकिन गैर-मौजूद छवि का वर्णन करता है . यदि छवि नहीं मिल पाती है तो Alt टेक्स्ट उपयोगी होता है—उदाहरण के लिए, क्योंकि वह फ़ाइल आपके द्वारा निर्दिष्ट फ़ोल्डर में मौजूद नहीं है।
2. इच्छित लेकिन धीरे-धीरे लोड होने वाली छवि का वर्णन करता है . यदि वेब पेज विज़िटर का कनेक्शन धीमा है, तो छवि लोड करने में देरी हो सकती है।
3. पहुंच-योग्यता में सुधार करता है . यदि विज़िटर स्क्रीन रीडर का उपयोग कर रहा है, तो वैकल्पिक टेक्स्ट होने से वे छवि का विवरण सुन सकेंगे।

ऑल्ट टेक्स्ट यह सुनिश्चित करता है कि अगर किसी कारण से इमेज को रेंडर नहीं किया जा सकता है, तो वेब पेज अभी भी यूजर को कुछ टेक्स्ट प्रस्तुत करेगा। यदि आप वैकल्पिक पाठ निर्दिष्ट नहीं करते हैं और एक छवि टूटी हुई है, तो एक टूटी हुई छवि आइकन दिखाई देगा।

HTML वैकल्पिक टेक्स्ट उदाहरण

मान लीजिए कि हम ऊपर दिए गए हमारे कॉफी हाउस उदाहरण में इमेज में एक ऑल्ट एट्रिब्यूट जोड़ना चाहते हैं। हम जो वैकल्पिक पाठ निर्दिष्ट करना चाहते हैं वह है कॉफ़ी भूनना, एक हल्के भूरे रंग की लकड़ी की मेज़ पर कॉफ़ी बीन्स से घिरा हुआ है। हम निम्नलिखित कोड का उपयोग करके इस वैकल्पिक पाठ को जोड़ सकते हैं:

 
गोल्डन रोस्ट
 पूर्व> 

 अब, मान लीजिए कि कोई हमारी कॉफी.पीएनजी फाइल को दूसरे फोल्डर में ले जाता है। नतीजतन, हमारे वेब पेज को अब फाइल नहीं मिल रही है। यह वेब पेज पर हमारा ऑल्ट टेक्स्ट प्रदर्शित करेगा क्योंकि छवि नहीं मिल सकती है। इस मामले में एक आगंतुक हमारे वेब पेज पर क्या देखेगा इसका एक उदाहरण यहां दिया गया है:
  

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

 आप किसी छवि के बारे में अतिरिक्त जानकारी प्रदान करने के लिए शीर्षक विशेषता का उपयोग कर सकते हैं। जब उपयोग किया जाता है, तो शीर्षक विशेषता एक टूलटिप प्रदान करती है जो तब प्रकट होती है जब कोई उपयोगकर्ता माउस के साथ किसी छवि पर होवर करता है।
 

 यदि आप किसी छवि में टूलटिप जोड़ना चाहते हैं तो शीर्षक विशेषता उपयोगी हो सकती है। हालांकि, शीर्षक विशेषता में स्क्रीन रीडर समर्थन नहीं है, और यह मोबाइल उपकरणों (जिनमें माउस नहीं है) पर दिखाई नहीं देता है।
 

 मान लीजिए कि हम टेबल पर एक कप कॉफी . के मान के साथ एक शीर्षक विशेषता जोड़ना चाहते हैं पहले से हमारी छवि के लिए। ऐसा करने के लिए हम निम्नलिखित कोड का उपयोग कर सकते हैं:
 
 
गोल्डन रोस्ट
  

 जब हम अपने कर्सर से छवि पर होवर करते हैं, तो शीर्षक टैग की सामग्री दिखाई देती है।
 
HTML छवि का आकार:चौड़ाई और ऊंचाई
 

 आप छवि की चौड़ाई और ऊंचाई विशेषताओं का उपयोग क्रमशः किसी छवि की चौड़ाई और ऊंचाई निर्दिष्ट करने के लिए कर सकते हैं।
 

 आइए अपने कॉफी हाउस उदाहरण पर वापस आते हैं। मान लीजिए हम चाहते हैं कि हमारी कॉफी इमेज 400 पिक्सल चौड़ी और 400 पिक्सल लंबी हो। हम नहीं चाहते कि यह छवि वेब पेज पर बहुत अधिक जगह ले। हम इन मापदंडों को निर्दिष्ट करने के लिए निम्नलिखित कोड का उपयोग कर सकते हैं:
 
 
गोल्डन रोस्ट
 

 हमारा कोड लौटाता है:
  

 जैसा कि आप देख सकते हैं, इस उदाहरण में हमारी छवि पहले की छवि से छोटी है। हमारे पहले उदाहरण में, हमारी छवि 500×500 थी। अब, हमारी छवि 400×400 है। ऐसा इसलिए है क्योंकि हमने ऊंचाई और चौड़ाई दोनों विशेषताओं को निर्दिष्ट किया है और प्रत्येक को 400 पर सेट किया है।
 
HTML छवि:छवि की स्थिति निर्धारित करना
 

 जब आप किसी छवि के साथ काम कर रहे हों, तो आप यह तय कर सकते हैं कि आप इसे पृष्ठ के बाईं या दाईं ओर फ़्लोट करना चाहते हैं। फ्लोट पृष्ठ पर छवि के क्षैतिज संरेखण-बाएं या दाएं-को संदर्भित करता है। यहीं से CSS फ्लोट विशेषता आती है।
 

 मान लीजिए कि हम चाहते हैं कि हमारी कॉफी छवि पहले से पृष्ठ के दाईं ओर दिखाई दे। हम निम्नलिखित कोड का उपयोग करके ऐसा कर सकते हैं:
 
 
गोल्डन रोस्ट
 

 हमारा कोड लौटाता है:
  

 हमने फ्लोट:राइट; . का इस्तेमाल किया शैली विशेषता के भीतर विशेषता। यह हमें यह निर्दिष्ट करने देता है कि हमारी छवि हमारे पृष्ठ के दाईं ओर तैरती रहनी चाहिए।
 
 
 
निष्कर्ष
 

 आप  . का उपयोग कर सकते हैं वेब पेज पर इमेज डालने के लिए HTML टैग। छवियों को स्थानीय फ़ाइल या फ़ोल्डर या किसी बाहरी स्रोत से रेंडर किया जा सकता है।
 

 इस ट्यूटोरियल में चर्चा की गई कि  . के साथ कैसे काम किया जाए एचटीएमएल में टैग। हमने HTML  . द्वारा प्रस्तुत कुछ विशेषताओं का उपयोग करने के तरीके के बारे में भी बात की उपनाम। अब आप एक पेशेवर की तरह HTML में छवियों का उपयोग शुरू करने के लिए आवश्यक ज्ञान से लैस हैं!
 

 क्या आप HTML के बारे में अधिक जानना चाहते हैं? विशेषज्ञ युक्तियों और ऑनलाइन पाठ्यक्रमों और सीखने के संसाधनों की सूची के लिए हमारी HTML कैसे सीखें मार्गदर्शिका देखें।