कैसे HTML में इमेजेस शामिल करें (Insert Images with HTML)

आपकी वेबसाइट पर या सोशल नेटवर्किंग प्रोफाइल पर इमेजेस एड करना, आपके पेज को तैयार करने का एक अच्छा तरीका है। इमेज एड करने का HTML कोड काफी आसान है और किसी भी के नौसिखिये के लिए एक पहला पाठ भी है।

विधि 1

विधि 1 का 2:

इमेज शामिल करना (Inserting the Image)

आर्टिकल डाउनलोड करें

1
आपकी इमेज को अपलोड करें: यहाँ पर ऐसी बहुत सारी इमेज होस्टिंग सर्विस हैं, जो आपको फ्री में इमेज उपलब्ध कराती हैं, जिनमें Picasa Web Albums, Imgur, Flickr या Photobucket जैसे नाम शामिल हैं। इनकी शर्तों को सावधानी से पढ़ें। कुछ सर्विस आपकी इमेज की क्वालिटी को कम कर देती हैं या फिर यदि आपकी फोटो को बहुत सारे लोग देखते हैं, (क्योंकि ये होस्ट की बैंडविड्थ को ज्यादा इस्तेमाल कर रही होती हैं), तो उसे हटा भी सकते हैं।
- कुछ ब्लॉग-होस्टिंग सर्विस, एडमिनिस्ट्रेटर टूल्स के जरिये आपको इमेज अपलोड करने की सुविधा देती हैं।
- यदि आप किसी भुगतान किये जाने वाले वेब होस्ट का इस्तेमाल कर रहे हैं, तो फिर FTP सर्विस का इस्तेमाल करके आपकी साईट पर इमेज अपलोड करें। आपकी फाइल्स को व्यवस्थित रखने के लिए, एक "images" डायरेक्टरी तैयार करने की सलाह दी जाती है।^{[१]Xरिसर्च सोर्स}
- यदि आप किसी और वेबसाइट पर मौजूद इमेज का इस्तेमाल करना चाह रहे हैं, तो फिर इसके निर्माता से अनुमति जरुर माँग लें। यदि वो आपको अनुमति देते हैं, तब इमेज डाउनलोड करें और फिर उस इमेज को आपकी इमेज होस्टिंग साईट पर अपलोड कर दें।
2
आपकी HTML फाइल को खोलें: आप जिस वेबपेज पर इमेज को दर्शाना चाहते हैं, उस के HTML डॉक्यूमेंट को खोलें।
- यदि आप किसी फोरम (forum) पर इमेज को शामिल करना चाह रहे हैं, फिर आप इसे सीधे पोस्ट में लिख सकते हैं। बहुत सारे फोरम HTML की जगह पर कस्टम सिस्टम का इस्तेमाल करते हैं। यदि आपको इस में कोई परेशानी होती है, तो किसी अन्य फोरम चलानेवाले से मदद की माँग करें।
3
आप आपके HTML बॉडी (body) की जिस भाग पर फोटो शामिल करना चाह रहे हैं, उस भाग पर जाएँ। वहाँ पर <img> ये टैग लिखें। ये एक खाली टैग है, जिसका मतलब कि ये बिना क्लोजिंग (closing) टैग के काम करता है। अब आपकी इमेज में जो कुछ भी दिखने वाला है, वो इन दो एंगल ब्रैकेट में मौजूद होगा।
- <img>
4
आपकी इमेज का यूआरएल (URL) पायें: उस वेबपेज पर जाएँ, जहाँ पर आपकी इमेज होस्ट की गई है। इमेज पर राईट-क्लिक (मैक पर कंट्रोल-क्लिक) करें और फिर "Copy Image Location" चुनें। यदि आप पेज पर सिर्फ इमेज अकेले को देखना चाहते हैं, तो "View Image" भी क्लिक कर सकते हैं, उसके बाद उसके यूआरएल को आपके एड्रेस बार में कॉपी कर लें।
- यदि आपने इस इमेज को पहले ही आपकी अपनी वेबसाइट की किसी इमेज डायरेक्टरी पर अपलोड कर दिया है, तो फिर इसे /images/आपके फाइलनेम के साथ लिंक कर दें। यदि ऐसा करके भी काम नहीं होता है, तो इसका मतलब कि आपकी इमेज डायरेक्टरी और किसी फोल्डर के अंदर है। इसे रूट डायरेक्टरी पर लेकर आ जाएँ।
5
आपके यूआरएल को src एट्रिब्यूट में रखें: जैसा कि आप जानते हैं, कि HTML एट्रिब्यूट, इस पर कोई बदलाव करने के लिए, टैग के अंदर इस्तेमाल होते हैं। src एट्रिब्यूट "source" के लिए लिखा जाता है, और आपकी ब्राउज़र को, इमेज की लोकेशन का पता देता है। src=" " लिखें और फिर कोटेशन मार्क्स (" ") के बीच में यूआरएल को पेस्ट कर दें। यहाँ पर एक उदाहरण दिया गया है:
- <img src="http://www.exampleimagehost.com/my-cute-dog.jpg">
6
एक alt एट्रिब्यूट एड करें: वैसे तो तकनीकी रूप से आपके HTML के पास इमेज को दर्शाने के लिए सब कुछ मौजूद रहता है, लेकिन फिर भी साथ में एक alt एट्रिब्यूट को एड करना अच्छा माना जाता है। ये आपके ब्राउज़र को ये दर्शाता है, कि इमेज के लोड ना होने की स्थिति में ब्राउज़र पर क्या लिखा हुआ दर्शाना है। सबसे जरूरी कि ये आपके सर्च इंजन को उस इमेज के मूल कारण के बारे में बताता है और साथ ही स्क्रीन रीडर के जरिये किसी ऐसे विजिटर को इसकी जानकारी देने में मदद करता है, जिसकी आँखों की रौशनी कम हो चुकी है।^{[२]Xरिसर्च सोर्स} इस उदाहरण में, कोटेशन मार्क्स के बीच में लिखे हुए भाग को बदलकर देखें:
- <img src="http://www.exampleimagehost.com/my-cute-dog.jpg" alt="How.com.vn हिन्द: my dog eating a tangerine">
- यदि पेज के कंटेंट के लिए वो इमेज बहुत ज्यादा जरूरी नहीं है, फिर alt एट्रिब्यूट को खाली (alt="How.com.vn हिन्द: ") रहने दें।^{[३]Xरिसर्च सोर्स}
इस HTML फाइल को आपकी वेबसाइट पर सेव कर दें। आपके द्वारा एडिट किये हुए पेज पर जाएँ या यदि पेज पहले से खुला है, तो इसे रिफ्रेश कर दें। अब आप आपकी इमेज को देख सकेंगे। यदि ये इमेज गलत साइज़ में दिख रही है या फिर आपको सही नहीं लग रही है, तो फिर लेख के अगले भाग को पढ़ें।

विधि 2

विधि 2 का 2:

वैकल्पिक सुधार करना (Optional Adjustments)

आर्टिकल डाउनलोड करें

1
इमेज का साइज़ बदलें: बेहतर रिजल्ट के लिए, फ्री एडिटिंग सॉफ्टवेयर की मदद से इमेज का साइज़ बदलें, फिर इस नये वर्जन को अपलोड कर दें। HTML पर width और height का इस्तेमाल, आपकी ब्राउज़र को, इमेज को छोटा या बड़ा करने की जानकारी देता है, और ये हर ब्राउज़र के लिए अलग-अलग होती है और (बहुत कम) डिस्प्ले एरर दर्शाता है।^{[४]Xरिसर्च सोर्स} यदि आप जल्दी में सुधार करना चाह रहे हैं, तो इस फॉर्मेट का इस्तेमाल करें:
- <img src="http://example.com/example.png" alt="How.com.vn हिन्द: display this" width=200 height=200> (Number of pixels, or the more phone-friendly "CSS pixels" in HTML5.)^{[५]Xरिसर्च सोर्स}^{[६]Xरिसर्च सोर्स}
- या <img src="http://example.com/example.png" width=100% height=10%> (वेबपेज के माप का परसेंटेज या इमेज शामिल किये हुए HTML एलिमेंट का परसेंटेज।)
- यदि आप सिर्फ एक एट्रिब्यूट (विड्थ ता हाइट) एंटर करते हैं, तो ब्राउज़र width:height रेश्यो को सुरक्षित रखेगा।
2
एक tooltip एड करें: title एट्रिब्यूट का इस्तेमाल, आपकी इमेज पर कोई अतिरिक्त कमेंट या अतिरिक्त जानकारी एड करने के लिए किया जाता है। उदाहरण के लिए, आप यहाँ पर इसके कलाकार को श्रेय दे सकते हैं। ज्यादातर मामलों में, जब भी कोई विजिटर इस इमेज के ऊपर माउस को लेकर जाता है, तो उसे यही टेक्स्ट नजर आता है।
- <img src="http://example.com/example.png" title="Photograph by J. Godfrey">
3
एक लिंक तैयार करें: एक ऐसी इमेज, जो खुद ही एक लिंक का काम करती है, को तैयार करने के लिए,<a></a> हाइपरलिंक के बीच में एक इमेज टैग लिख दें। यहाँ पर एक उदाहरण मौजूद है:
- <a href="http://www.urloflink.com"><img src="http://urlofimage.com/image.gif"></a>

सलाह

आपके कंप्यूटर पर आपकी उस इमेज का बैकअप जरुर रख लें।
GIF इमेजेस लोगो या कार्टून के लिए बेहतर परिणाम देती हैं, वहीँ JPEG इमेजेस, ज्यादा जटिल इमेज जैसे कि किसी फोटोग्राफ के लिए बेहतर परिणाम देती हैं।
यूआरएल (URL) में पिक्चर फाइल फॉर्मेट (.jpg, .gif आदि) के शामिल होने की पुष्टि जरुर कर लें।
ज्यादातर मामलों में, आपको इमेजेस के .gif, .jpeg, .jpg, या .png फॉर्मेट को ही इस्तेमाल करना पड़ता है।^{[७]Xरिसर्च सोर्स} इनके अलावा, अन्य फॉर्मेट ब्राउज़र पर सही ढ़ंग से प्रदर्शित नहीं होते।

चेतावनी

किसी और इंसान की वेबसाइट के यूआरएल को शामिल करके "hotlink" ना करें। ये उस इंसान की साईट पर कोई विजिटर भी नहीं भेजता और उस व्यक्ति की वेबसाइट की बैंडविड्थ को भी इस्तेमाल करता है। और इस बुरी आदत के अलावा, यदि उस व्यक्ति की साईट बंद हो जाती है या काम नहीं कर रही होती है, तो ये हॉटलिंक की गई इमेज भी गायब हो जाती है। यदि उस वेब का होस्ट आपके इस काम को देख लेता है, तो वो आपकी साईट पर दिखाई देने वाली इमेज को भी बदल सकता है।^{[८]Xरिसर्च सोर्स}