आज इस आर्टिकल में हम आपको HTML Image Tutorials in Hindi – Part 9 के बारे में बताएँगे.
HTML images का इस्तेमाल हम अपने डॉक्यूमेंट में improvement करने के लिए कर सकते है.
,HTML में images डालने के लिए हम img element का इस्तेमाल करते है.
इसके साथ कई attributes का इस्तेमाल भी किया जाता है जिनके बारे में हम इस आर्टिकल में विस्तार से पढेंगे.
Example
<img src="file.jpg" alt="new photo" />
यहाँ पर हमने 2 attribute का इस्तेमाल किया है. src attribute का इस्तेमाल हम images के path को सेलेक्ट करने के लिए करते है. यह path local machine या कोई वेबसाइट address भी हो सकता है. दूसरा attribute alt इसका इस्तेमाल alternative text के लिए दिया जाता है जिसका मतलब है अगर image किसी वजह से दिखाई ना दे तो उसकी जगह इस attribute की value दिखाई जायेगी. alt attribute का इस्तेमाल SEO रैंकिंग बढ़ाने के लिए भी किया जाता है.
Images – Width & Height Attribute
Width और Height attribute का इस्तेमाल करके हम किसी भी image के साइज़ में बदलाव कर सकते है.
<img src="file.jpg" alt="rjbeat images" width="200px" height="200px" />
इस प्रकार आप किसी भी image का साइज़ अपने डॉक्यूमेंट के हिसाब से चेंज कर सकते है. यहाँ एक प्रॉब्लम है अगर आपका image का ratio अगर आपके define किये गए width और height Ratio से मैच नही करता है, आपके डॉक्यूमेंट में Show होने वाली फोटो Shrink हो जायेगी. इसके लिए एक और solution है.
<img src="file.jpg" alt="rjbeat images" width="200px" height="auto" />
इस attribute का इस्तेमाल करके आप किसी भी image का साइज़ बिना shrink किये show कर सकते है.
अगर हमें कई image की साइज़ चेंज करना चाहते है तो आप style attribute का इस्तेमाल करके सभी image के साइज़ को एक कोड की मदद से चेंज कर सकते है. जिसके बारे में हमने आपको HTML Style tutorial में हमने आपको बताया था.
Image Floating in HTML
अगर आप किसी image को float करके right या फिर left में show करवाना चाहते है तो आपको float property का इस्तेमाल करना चाहिए.
<p><img src="animate.gif" alt="face" style="float:right;width:42px;height:42px;">The image will float to the right of the text.</p>
इस प्रकार आप style attribute में float property का इस्तेमाल करके किसी भी image को right या left में shift कर सकते है.
Create Image Maps in HTML
अगर हमें किसी भी image में image-map को define करना है तो हम map element का इस्तेमाल करते है.
इसके लिए आपको 2 चीजों का ध्यान रखना होगा.
सबसे पहले आपको img element में usemap नाम से attribute का इस्तेमाल करना होगा.
इसके बाद में आपको map element में नाम attribute का इस्तेमाल करना होगा.
<img src="file.jpg" alt="rjbeat map image" usemap="mapimg"/>
<map name="mapimg"> <area shape="rect" coords="34,44,270,350" alt="location1" href="location1.html"> <area shape="rect" coords="290,172,333,250" alt="location2" href="location2.html"> <area shape="circle" coords="337,300,44" alt="location3" href="location3.html"></map>
map element में आपको area element का इस्तेमाल करना है. area element में हम shape attribute, coords attribute, alt attribute और href attribute का इस्तेमाल करते है.
HTML picture Element
इस element का इस्तेमाल भी आप अपने डॉक्यूमेंट में image add करने के लिए कर सकते है.
इसका इस्तेमाल अब ज्यादा नही होता है. इसका एक फायदा है की अगर आपको कोई image किसी browser के और screen के हिसाब से सेट करना है तो आप इस element का इस्तेमाल कर सकते है. इस element में <source> element का इस्तेमाल करना होता है ताकि हम किसी भी image फाइल को अपने html डॉक्यूमेंट में set कर सकते है.
<picture> <source media="(min-width: 650px)" srcset="kite.jpg"> <source media="(min-width: 465px)" srcset="flower.jpg"> <img src="computer.jpg" alt="Flowers" style="width:auto;"></picture>
HTML Background Image
इसका इस्तेमाल किसी भी डॉक्यूमेंट में background image सेट करने के लिए किया जाता है.
हम किसी डॉक्यूमेंट में 2 तरीके से background image को सेट कर सकते है.
एक हम element tag में ही style attribute का इस्तेमाल करके background property का इस्तेमाल करे और दूसरा <style> tag में element सेलेक्ट करके background property का इस्तेमाल करके background image को सेट करे.
Example
<p style="background-image:url('rjbeat.jpg')" />
Full Body Background Image
<body style="background-image:url('rjbeatimg.jpg')">
<h2>Set Background Image</h2>
</body>
Style Example
<style>body{background: url(newimg.jpg);}</style>
HTML Table Tutorials in Hindi – Part 10 >>>>>>>
इसे भी पढ़े – Vodafone All USSD Code Latest Updated 2018
