HTML `` टैग वेब पेज पर एक इमेज जोड़ता है। उस इमेज का स्थान निर्दिष्ट करने के लिए `src` एट्रिब्यूट का उपयोग करें जिसे आप एम्बेड करना चाहते हैं। यदि इमेज लोड नहीं हो सकती तो `alt` एट्रिब्यूट का उपयोग अक्सर इमेज के स्थान पर टेक्स्ट प्रदर्शित करने के लिए किया जाता है।
जब वेब का आविष्कार हुआ था, तो वेब पेज केवल टेक्स्ट प्रदर्शित कर सकते थे। हालांकि, वेब पेज पर इमेज जोड़ने की क्षमता जल्दी ही जोड़ दी गई। तब से, इमेज वेब पर अधिकांश पेजों का एक महत्वपूर्ण हिस्सा बन गई हैं। लोगो से लेकर तस्वीरों तक, इमेज इंटरनेट पर हर जगह हैं।
यह ट्यूटोरियल चर्चा करेगा कि वेब डेवलपर के रूप में HTML इमेज के साथ काम करने के लिए `` टैग का उपयोग कैसे करें। हम `
` टैग के साथ उपयोग किए जा सकने वाले कुछ मुख्य एट्रिब्यूट के बारे में भी बात करेंगे।
HTML इमेज टैग
HTML `` टैग वेब दस्तावेज़ पर एक इमेज जोड़ता है। उस इमेज का स्थान निर्दिष्ट करने के लिए `src` एट्रिब्यूट का उपयोग करें जिसे आप एम्बेड करना चाहते हैं। यह आपके कंप्यूटर पर एक फ़ाइल या किसी अन्य फ़ाइल का URL हो सकता है। `alt` एट्रिब्यूट आपको वैकल्पिक टेक्स्ट निर्दिष्ट करने देता है जो तब दिखाई देता है जब इमेज लोड नहीं हो सकती।
HTML `` टैग का सिंटैक्स यहाँ है:
<img src="house.png">
`` टैग का कोई क्लोजिंग टैग नहीं होता। इसके बजाय, टैग "/>" के साथ समाप्त होता है। यह दर्शाता है कि `
` टैग को अलग क्लोजिंग टैग की आवश्यकता नहीं है। `
` टैग सभी ब्राउज़रों में समर्थित है।
HTML मानता है कि आपके HTML फ़ाइल को संग्रहीत करने वाला फ़ोल्डर वही फ़ोल्डर है जो आपके द्वारा संदर्भित किसी भी इमेज को संग्रहीत करता है। सटीक फ़ाइल पथ या URL निर्दिष्ट करके इस व्यवहार को नजरअंदाज किया जा सकता है जहां इमेज मिल सकती है।
उपरोक्त सिंटैक्स में, हमारा `` फ़ाइल house.png को संदर्भित करेगा। यह फ़ाइल उसी फ़ोल्डर में है जिसमें वह HTML फ़ाइल है जिसके साथ हम काम कर रहे हैं।
हालांकि, अगर हम अपनी इमेज फ़ाइलों को किसी अन्य फ़ोल्डर में संग्रहीत कर रहे थे—जिसे pictures कहा जाता है, उदाहरण के लिए—तो हम इस कोड का उपयोग करेंगे:
<img src="pictures/house.png">
यदि हम किसी बाहरी स्रोत से इमेज एम्बेड करना चाहते हैं, तो हम एक पूर्ण URL का उपयोग कर सकते हैं। यहाँ बाहरी इमेज को संदर्भित करने वाले `` टैग का एक उदाहरण है:
<img src="https://www.example.org/pictures/house.png">
कहा जाता है, जब भी संभव हो स्थानीय फ़ाइल से इमेज को संदर्भित करना आमतौर पर सबसे अच्छा होता है। ऐसा इसलिए है क्योंकि बाहरी इमेज को संदर्भित करने से ब्राउज़र को स्थानीय फ़ाइल से इमेज प्राप्त करने की तुलना में अधिक काम करना पड़ता है।
HTML इमेज उदाहरण
आइए HTML `` टैग के एक्शन में एक उदाहरण का पता लगाएं। मान लीजिए हम एक स्थानीय कॉफी हाउस, The Golden Roast के लिए एक वेबसाइट बना रहे हैं। The Golden Roast चाहता है कि उनकी होमपेज पर कॉफी के कप की एक इमेज दिखाई दे।
उन्होंने हमें वेब पेज पर जोड़ने के लिए coffee.png नाम की फ़ाइल दी। फ़ोल्डर जो हमारे HTML पेज को संग्रहीत करता है वह इस इमेज को भी संग्रहीत करता है। इस इमेज को हमारी साइट पर जोड़ने के लिए, हम निम्न कोड का उपयोग कर सकते हैं:
<body> <h1>The Golden Roast</h1> <img src="coffee.png"> </body>
हमारा कोड लौटाता है:
आइए हमारे कोड को तोड़ें। सबसे पहले, हमने `
` टैग का उपयोग किया, जो हमारे वेब पेज के मुख्य एलिमेंट को संग्रहीत करता है। फिर, हमने अपने पेज पर एक हेडिंग परिभाषित करने के लिए `` टैग का उपयोग किया। इस हेडिंग का टेक्स्ट है: The Golden Roast।
अगली लाइन पर, हमने coffee.png नाम की एक इमेज को अपने कोड में जोड़ने के लिए एक img एलिमेंट का उपयोग किया। यह इमेज उसी फ़ोल्डर में समाहित है जिसमें हमारी HTML फ़ाइल है। परिणामस्वरूप, हमें `src` एट्रिब्यूट का उपयोग करके फ़ोल्डर को इंगित करने की आवश्यकता नहीं थी। हमने केवल फ़ाइल का नाम निर्दिष्ट किया।
इमेज HTML: वैकल्पिक टेक्स्ट
HTML में इमेज के साथ काम करते समय वैकल्पिक टेक्स्ट जोड़ना एक महत्वपूर्ण हिस्सा है। वैकल्पिक टेक्स्ट, `alt` एट्रिब्यूट द्वारा दर्शाया गया, एक इमेज का टेक्स्टुअल विवरण है।
कई कारण हैं जिनकी वजह से आपको इमेज के साथ काम करते समय `alt` एट्रिब्यूट निर्दिष्ट करना चाहिए। Alt टेक्स्ट:
- एक इच्छित लेकिन गैर-मौजूद इमेज का वर्णन करता है। Alt टेक्स्ट उपयोगी है यदि इमेज नहीं मिल सकती—उदाहरण के लिए, क्योंकि वह फ़ाइल आपके द्वारा निर्दिष्ट फ़ोल्डर में मौजूद नहीं है।
- एक इच्छित लेकिन धीरे-धीरे लोड होने वाली इमेज का वर्णन करता है। यदि वेब पेज विज़िटर का कनेक्शन धीमा है, तो इमेज लोड होने में देरी हो सकती है।
- एक्सेसिबिलिटी में सुधार करता है। यदि विज़िटर स्क्रीन रीडर का उपयोग कर रहा है, तो alt टेक्स्ट होने से उन्हें इमेज का विवरण सुनने की अनुमति मिलेगी।
Alt टेक्स्ट यह सुनिश्चित करता है कि यदि किसी भी कारण से इमेज रेंडर नहीं की जा सकती, तो वेब पेज अभी भी उपयोगकर्ता को कुछ टेक्स्ट प्रस्तुत करेगा। यदि आप alt टेक्स्ट निर्दिष्ट नहीं करते हैं और इमेज टूटी हुई है, तो एक टूटी हुई इमेज आइकन दिखाई देगा।
HTML वैकल्पिक टेक्स्ट उदाहरण
मान लीजिए हम ऊपर अपने कॉफी हाउस उदाहरण में इमेज में एक `alt` एट्रिब्यूट जोड़ना चाहते हैं। हम जो alt टेक्स्ट निर्दिष्ट करना चाहते हैं वह है हल्के भूरे लकड़ी की मेज पर कॉफी बीन्स से घिरी भुनी हुई कॉफी। हम इस alt टेक्स्ट को निम्न कोड का उपयोग करके जोड़ सकते हैं:
<body> <h1>The Golden Roast</h1> <img src="coffee.png" alt="Roasting coffee, surrounded by coffee beans on a light brown wooden table."> </body>
अब, मान लीजिए कोई हमारी coffee.png फ़ाइल को किसी अन्य फ़ोल्डर में ले जाता है। परिणामस्वरूप, हमारा वेब पेज अब फ़ाइल नहीं ढूंढ सकता। इससे हमारा alt टेक्स्ट वेब पेज पर दिखाई देगा क्योंकि इमेज नहीं मिल सकती। यहाँ एक उदाहरण है कि इस मामले में विज़िटर हमारे वेब पेज पर क्या देखेगा:
जब आप `alt` एट्रिब्यूट जोड़ रहे हों, तो इसे संक्षिप्त रखने का प्रयास करें, और इसका उपयोग इमेज का वर्णन करने के लिए करें। हमारे कॉफी उदाहरण में, हमने वर्णन किया कि कॉफी की इमेज में क्या है। हम पेज पर पहले से मौजूद टेक्स्ट को दोहराना नहीं चाहेंगे क्योंकि यह उपयोगकर्ताओं के लिए भ्रमित करने वाला होगा।
HTML इमेज: टाइटल
आप इमेज के बारे में अतिरिक्त जानकारी प्रदान करने के लिए `title` एट्रिब्यूट का उपयोग कर सकते हैं। जब उपयोग किया जाता है, तो `title` एट्रिब्यूट एक टूलटिप प्रदान करता है जो तब दिखाई देता है जब उपयोगकर्ता माउस से इमेज पर होवर करता है।
`title` एट्रिब्यूट उपयोगी हो सकता है यदि आप किसी इमेज में टूलटिप जोड़ना चाहते हैं। हालांकि, `title` एट्रिब्यूट में स्क्रीन रीडर समर्थन नहीं है, और यह मोबाइल उपकरणों पर दिखाई नहीं देता (जिनमें माउस नहीं होता)।
मान लीजिए हम पहले की अपनी इमेज में मेज पर कॉफी का कप मान के साथ एक `title` एट्रिब्यूट जोड़ना चाहते हैं। हम ऐसा करने के लिए निम्न कोड का उपयोग कर सकते हैं:
<body> <h1>The Golden Roast</h1> <img src="coffee.png" alt="Roasting coffee, surrounded by coffee beans on a light brown wooden table." title="A cup of coffee on a table"> </body>
जब हम अपने कर्सर को इमेज पर होवर करते हैं, तो title टैग की सामग्री दिखाई देती है।
HTML इमेज आकार: चौड़ाई और ऊंचाई
आप इमेज की चौड़ाई और ऊंचाई निर्दिष्ट करने के लिए इमेज `width` और `height` एट्रिब्यूट का उपयोग कर सकते हैं।
आइए हमारे कॉफी हाउस उदाहरण पर वापस चलते हैं। मान लीजिए हम चाहते हैं कि हमारी कॉफी इमेज 400 पिक्सेल चौड़ी और 400 पिक्सेल लंबी हो। हम नहीं चाहते कि यह इमेज वेब पेज पर बहुत अधिक जगह ले। हम इन पैरामीटर्स को निर्दिष्ट करने के लिए निम्न कोड का उपयोग कर सकते हैं:
<body> <h1>The Golden Roast</h1> <img src="coffee.png" width="400" height="400"> </body>
हमारा कोड लौटाता है:
जैसा कि आप देख सकते हैं, इस उदाहरण में हमारी इमेज पहले वाले से छोटी है। हमारे पहले उदाहरण में, हमारी इमेज 500×500 थी। अब, हमारी इमेज 400×400 है। ऐसा इसलिए है क्योंकि हमने दोनों `height` और `width` एट्रिब्यूट निर्दिष्ट किए और प्रत्येक को 400 पर सेट किया।
HTML इमेज: इमेज की स्थिति
जब आप किसी इमेज के साथ काम कर रहे होते हैं, तो आप तय कर सकते हैं कि आप इसे पेज के बाएं या दाएं फ्लोट करना चाहते हैं। फ्लोट पेज पर इमेज के क्षैतिज संरेखण—बाएं या दाएं—को संदर्भित करता है। यहीं CSS `float` एट्रिब्यूट काम आता है।
मान लीजिए हम पहले की अपनी कॉफी इमेज को पेज के दाईं ओर दिखाना चाहते हैं। हम निम्न कोड का उपयोग करके ऐसा कर सकते हैं:
<body> <h1>The Golden Roast</h1> <img src="coffee.png" width="400" height="400" style="float:right;"> </body>
हमारा कोड लौटाता है:
हमने `float:right;` एट्रिब्यूट का उपयोग एक style एट्रिब्यूट के भीतर किया। यह हमें यह निर्दिष्ट करने देता है कि हमारी इमेज हमारे पेज के दाईं ओर फ्लोट होनी चाहिए।
निष्कर्ष
आप वेब पेज पर इमेज रखने के लिए HTML `` टैग का उपयोग कर सकते हैं। इमेज को स्थानीय फ़ाइल या फ़ोल्डर या बाहरी स्रोत से रेंडर किया जा सकता है।
यह ट्यूटोरियल HTML में `` टैग के साथ काम करने के तरीके पर चर्चा करता है। हमने HTML `
` टैग द्वारा प्रदान किए गए कुछ एट्रिब्यूट का उपयोग करने के तरीके के बारे में भी बात की। अब आप HTML में इमेज का उपयोग प्रो की तरह शुरू करने के लिए आवश्यक ज्ञान से लैस हैं!
क्या आप HTML के बारे में अधिक जानना चाहते हैं? विशेषज्ञ युक्तियों और ऑनलाइन पाठ्यक्रमों और सीखने के संसाधनों की सूची के लिए HTML सीखने का हमारा गाइड देखें।
