HTML Images

HTML Images

<img> Tag और Src Attribute

HTML में, images (चित्र) <img> tag द्वारा दर्शाये जाते है। 

<img src="url" alt="some_text">

इसमें URL उस location को इंगित करता है जहाँ  image को सेव किया गया है।जैसे-
 एक image जिसका नाम है - "pic1.gif",
जो "http://mahaanindia.blogspot.in"  में "images" नामक directory मे स्थित है उसका URL होगा : http://mahaanindia.blogspot.in /images/ pic1.gif.
Output- browser में document में जहाँ <img> tag डाला गया है image वही दिखाई देगी। यदि आपने image tag दो paragraphs के बीच डाला गया है, तो browser में पहले paragraph, फ़िर image, और फ़िर दूसरा paragraph।          

---

Alt Attribute

The required alt attribute specifies an alternate text एक image , यदि image किसी कारण से दिखाई नही पडती तो alt attribute उस image के लिये alternate text दर्शाता है।
The value of the alt attribute की value  आपके द्वारा लिखा गया (author-defined) text होती है:

<img src=" pic1.gif " alt="loading pic">

The alt attribute किसी image के लिये alternate information उपलब्ध कराता है यदि कोई user किसी कारणवश उस image को देख नही पाता (because of slow connection के कारण, src attribute मे error के कारण, या यदि user कोई screen reader उपयोग करता है)

---

किसी Image की Height और Width सेट करना

height और width attributes का प्रयोग image में height और width सेट करने के लिये किया जाता है। attribute की values by default pixels मे निर्धारित होती है:

<img src="pulpit.jpg" alt="Pulpit rock" width="304" height="228">

नोट: किसी  image की height और width सेट करना अच्छा रहता है. यदि ये attributes सेट होते है, तो पेज के लोड होने पर image के लिये स्थान निर्धारित होता है।. जबकि, इन attributes के बिना, browser को image की साइज का पता नही चलता। परिणामस्वरुप लोडिंग के दौरान page layout बदल सकता है (जब images लोड होती है).

---

Basic Notes - Useful Tips

नोट: यदि एक HTML file में दस images है-  तो पेज को सही से प्रदर्शित होने के लिये 11 फ़ाइलें खुलना आवश्यक है। image लोड होने में टाइम लेती है , इसलिये images आवश्यक हो तो ही प्रयोग करें।
नोट: जब एक web page लोड होता है, यह browser होता है, जो उस समय web server से image प्राप्त करता है और फ़िर उसे पेज मे डालता है। फ़िर भी, यह सुनिश्चित कर लें कि images वास्तव मे web page पर उसी स्थान पर स्थित है जहाँ वे डाली गई थी, वरना आपके visitors एक broken link icon पायेंगे। broken link icon उस समय दिखाई देता है browser किसी image को खोज नही पाता है।

---

HTML Image Tags

Tag	Description
<img>	Defines an image
<map>	Defines an image-map
<area>	Defines a clickable area inside an image-map

 

---