एचटीएमएल में इमेज (चित्र) लगाना बहुत ही आसान है । इसके लिये आपको बस थोडे से एचटीएमएल कोड लिखने होते हैं । यह प्रक्रिया लगभग हाइपरलिंक से मिलती जुलती है ।
इमेज लगाने के लिये <img> टैग का इस्तेमाल किया जाता है । आइये इसका प्रयोग करके देखते हैं ।
माना कि आपका इमेज है "logo.gif" । इसमें logo आपके इमेज का नाम है और gif आपके इमेज का प्रकार है । अब आपके इमेज को सेट करते हैं । नीचे दिये गये कोड को ध्यान से देखें । -
<img src="logo.gif" />
इसमें चार एलीमेण्ट हैं -
<img - इमेज ओपिनिंग टैग
src= इमेज का सोर्स (जहाँ पर इमेज स्थित है उदा-डेस्कटाप)
"logo.gif" - इमेज का नाम एक्सटेन्शन के साथ
/> - क्लोजिंग टैग
अब यदि आपका इमेज logo.gif आपके डेस्कटाप पर उपलब्ध है तो आपका इमेज कुछ इस तरह दिखाई देगा ।
इसमें कुछ और चीजें जोडी जा सकती हैं -
<img src="logo.gif" alt="SJWeb Logo" width="100px" height="auto" />
alt="SJWeb Logo" - आल्ट टैग के द्वारा आपकी इमेज का टाइटिल सेट किया जाता है । ऐसी स्थिति में जब आपका इमेज किसी भी कारण से खुल नहीं पाता है तो आपका टाइटिल दिखाई पडता है ।
width="100px" height="auto" - ये आपके पिक्चर की चौडाई और उंचाई को आपकी इच्छा के अनुरूप छोटा या बडा बनाने के काम आता है ।
अब आपका चित्र कुछ इस तरह दिखाई देगा ।
अब इस इमेज की चौडाई 100 पिक्सल है । और उंचाई इसके अनुरूप जितनी होनी चाहिये । यदि हम उंचाई को भी सेट कर देते तो हमारा पिक्चर थोडा भद्दा दिखाई पड सकता था ।
इमेज को लिंक बनाना -
यदि हमें इमेज को लिंक के रूप में प्रयोग करना है जिससे कि हम इमेज पर क्लिक करके उससे सम्बन्धित स्थान पर पहुँच जाएँ तो उसके लिये निम्न प्रक्रिया करनी होगी ।
<a href="http://www.sjweb.in/" target="_blank">
<img src="logo.gif" alt="SJWeb Logo" width="100px" height="auto" />
</a>
इसे ध्यान से देखें । इसमें हाइपरलिंक आपका पहले से ही सीखा हुआ है अत: उसमें कोई समस्या नहीं आनी चाहिये । फिर भी हम थोडा सा संकेत कर देते हैं ।
<a href="http://www.sjweb.in/" target="_blank">
यह आपका हाइपरलिंक ओपिनिंग टैग है, जिसमें आपके लिंक का सोर्स दिया हुआ है तथा टारगेट ब्लैंक पर सेट है ।
<img src="logo.gif" alt="SJWeb Logo" width="100px" height="auto" />
फिर आपका इमेज कोड है ।
</a>
और अन्त में क्लोजिंग हाइपरलिंक टैग है ।
अब आपका इमेज कुछ इस तरह दिखाई देगा जिसपर क्लिक करते ही आपके इमेज पर सेट हाइपरलिंक वाला पेज खुल जायेगा ।
इस तरह से आप अपने इमेज को हाइपरलिंक बना सकते हैं ।
thank you, aapne bhut acche se java script ke baare me btaaya hai. Aur agar aap HTML , CSS , Java Script, JQury, PHP ka hindi video tutorials chahte hai to meri site TechnicalProgramming.Com me jaake skihe.
ReplyDeleteAbsolutely posting, I'll try as soon as I can. Brilliant information and inspiration, both of which we all need!Relay appreciate your work.
ReplyDeleteWeb Design Company in Delhi | Website Designing Company in Delhi
Thanks!
Best regards,
Domaxy