 |
| HTML and CSS tutorial for beginners in Hindi |
हेलो फ्रेंड्स, KTL के HTML और CSS tutorial में आपका फिर स्वागत है। आज हम लेसन ९ सीखनेवाले हैं।
पिछले लेसन में हमने देखा की HTML में comments कैसे लिखते हैं और टेक्स्ट को quotation marks कैसा देते हैं।
आज हम वेब पेज में इमेज इन्सर्ट करना सीखेंगे।
HTML img tag - inserting an image in web page
वेब पेज में इमेज दिखाने के लिए <img> tag का उपयोग करते हैं। इस tag के ३ attributes होते हैं। हम एक इमेज को हमारे वेब पेज में इन्सर्ट कर के देखेंगे।एक नया Notepad फाइल ओपन कीजिये। इस में लेसन-०८ का कोड कॉपी कीजिये। इस में से नीचे दिए हुए लाइन्स डिलीट कीजिये।
<p>
He said, <q>Let us go to picnic today</q>
</p>
अब दुसरे </p> के बाद एक <br /> tag दीजिये। इस <br /> के नीचे लिखिए
<img src="hibiscus.jpg" alt="Hibiscus flower">
नीचे दी हुई आकृति ९-१ देखिये। इस फाइल को "Lesson-09" के नाम से save कीजिये। और एक बार इसे "Lesson-09.html" के नाम से save कीजिये।Windows explorer में जाइये और HTML Document पर डबल क्लिक कीजिये। आउटपुट देखिये। एक सुन्दर फूल डिस्प्ले हुआ है।
तो हमने अब तक क्या देखा? <img> tag वेब पेज में एक इमेज इन्सर्ट करता है। इसको एक attribute होता है - "src"। इस attribute में हम इमेज का नाम देते हैं।
src="image to be displayed"
इमेज का नाम quotation marks में लिखा जाता है। "alt" attribute में हम alternative टेक्स्ट देते हैं। अगर वेब ब्राउज़र इमेज डिस्प्ले नहीं कर सकता है तो यह टेक्स्ट डिस्प्ले होता है।
एक महत्त्वपूर्ण बात: <img> एक empty element है। इसको closing tag नहीं होता है।
<img> के और दो attributes हैं - width और height। ये जो इमेज डिस्प्ले हुई है उसके width और height बताते हैं। हम इनको pixels, cm, mm वगैरह में दे सकते हैं। जैसे
width="100" height="100"
हम इमेज की width और height देने के लिए "style" attribute का भी उपयोग कर सकते हैं। जैसे
style=“width:100px;height:100px;"
इसलिए हमारा <img> statement होगा
<img src="hibiscus.jpg" alt="Hibiscus flower" style=“width:100px;height:100px;">
इसको हमारे स्क्रिप्ट में लिखेंगे। यह पहले <img> के नीचे लिखिये।
 |
| आकृति ९-१. HTML img tag, src, style |
Source कोड की PDF फाइल देखने के लिए आकृति ९-१. पर क्लिक कीजिये। अब फिर से फाइल को "Lesson-09" के नाम से save कीजिये और "Lesson-09.html" के नाम से save कीजिये। Windows explorer में जाइये और HTML document पर डबल क्लिक कीजिये।
 |
| आकृति ९-२. Images in web page |
आउटपुट में दूसरी इमेज आयी है जो छोटी है। यह आउटपुट नए वेब पेज में देखने के लिए ऊपर डिस्प्ले की हुई आकृति पर क्लिक कीजिये।
Important Points:
1. <img> tag वेब पेज में इमेज डिस्प्ले करता है।2. <img> tag के "src", "alt", और "style" attributes हैं। हम इमेज का साइज बताने के लिए "style" का उपयोग करते हैं। इस के लिए हम "width" और "height" attributes का भी उपयोग कर सकते हैं।
3. इमेज "alt" और "style" नहीं देने पर भी डिस्प्ले होती है। लेकिन कभी भी इन attributes को देना चाहिए। यह एक अच्छी प्रैक्टिस है। इन से वेब ब्राउज़र इमेज को ठीक से डिस्प्ले करता है।
लेसन ८ लेसन १०
