 |
| HTML and CSS tutorial for beginners in Hindi |
हेलो फ्रेंड्स, KTL के HTML और CSS tutorial में आप का स्वागत है। आज हम लेसन २३ सीखेंगे।
पिछले लेसन में हम ने CSS selector लिखने के अलग अलग तरीके सीखे।
आज हम या देखेंगे की CSS में measurements कैसे देते हैं।
Measurements in CSS
एक वेब पेज में elements डिस्प्ले करने के लिए measurements की जरूरत पड़ती है। कुछ उदाहरण लेंगे। वेब पेज में दिखायी हुई इमेज की चौड़ाई (width) और ऊंचाई (height) कितनी होनी चाहिए या हमारे टेक्स्ट का साइज कितना बड़ा होना चाहिए या एक element का margin कितना होना चाहिए, border की thickness कितनी होनी चाहिए, यह सब बताने के लिए हमें माप देना पड़ता है।हमको लम्बाई के लिए cm, mm, मीटर, किलोमीटर वगैरह units मालूम हैं। हम cm और mm को अपने HTML में use कर सकते हैं। जब हम HTML में मेजरमेंट देते हैं तो उस मेजरमेंट में और उसके unit में स्पेस नहीं होता है। जैसे margin के लिए हम मेजरमेंट दे सकते हैं - 2cm।
मेजरमेंट के units (units of measurement) दो तरह तरह के होते हैं। १. Absolute measurement और 2. Relative measurement. हम इनके बारे में आज सीखनेवाले हैं।
Absolute measurements
यह fixed होते हैं। इस का मतलब अगर हमने margin 2cm दिया है तो वह 2cm का ही margin रखेगा। Relative measurements तुलनात्मक होते हैं। इस में हम ने दिया हुआ measurement किसी दुसरे element के dimension से compare किया जाता है और डिस्प्ले किया जाता है। उदाहरण: vw एक relative मेजरमेंट है। अगर हम vw देते हैं तो माप होगा browser के width के १%, अगर हम 10vw देते हैं तो browser के width के १०%। यहाँ ब्राउज़र के विड्थ के साथ compare किया जा रहा है।
Absolute measurements fixed होते हैं इस लिए वह स्क्रीन के साइज से adjust नहीं कर सकते हैं। इस लिए अगर हमारी वेब साइट कंप्यूटर स्क्रीन पर दिखानी है और मोबाइल के स्क्रीन पर भी दिखनी चाहिए तो हमें relative measurements देने पड़ेंगे।
Absolute units इस प्रकार है:
१. cm - centimeter
२. mm - millimeter
३. in - inches
४. px - pixels (96 pixles = 1 inch)
५. pt - point (72 points = 1 inch)
६. pc - pica (1 pica = 12 points)
हम absolute measurements का उपयोग हमारे स्क्रिप्ट में करेंगे। एक नयी Notepad फाइल ओपन कीजिये। इसमें Lesson-22-1 का कोड कॉपी कीजिये। इस में पहले लिखा हुआ CSS डिलीट कीजिये और इस प्रकार दीजिये।
<style>
h1 {
font-size: 1;
}
p {
font-size: 0.5cm;
}
</style>
इस फाइल को "Lesson-23-1" और "Lesson-23-1.html" के नाम देकर save कीजिये। नीचे दिखाई हुई आकृती देखिये। Source कोड की PDF फाइल देखने के लिए आकृति २३-१. पर क्लिक कीजिये।
 |
| आकृति २३-१. CSS Absolute measurements in Hindi |
HTML document पर डबल क्लिक कीजिये और आउटपुट देखिये।
 |
| आकृति २३-२ Output of CSS measurements in absolute units |
हमने दिए हुए dimensions आये हैं।
अब हम measurements बदलते हैं। अब h1 के लिए दीजिये 30px और paragraphs के लिए दीजिये 15px। फिर से फाइल को "Lesson-23-1" और "Lesson-23-1.html" के नाम से save कीजिये। इसका आउटपुट देखिये।
हम ने हमारे कोड में cm और pixels दिया है। इसी तरह हम दुसरे units भी दे सकते हैं।
Relative measurements
अब relative measurements के बारे में सीखेंगे। Relative measurements नीचे दिए हैं।
१. em - relative to measurement of current element. Current element के तुलना में दिया हुआ मेजरमेंट। उदाहरण, 5em का मतलब current element के 5 गुना।
२. vw - browser window के width का १%। Browser window के साइज को viewport कहते हैं। इस लिए यह viewport width (vw) होती है। अगर हम १०vw देते हैं इस का मतलब viewport width के १०% होगा।
३. vh - viewport height का १%।
४. vmin - viewport के छोटे साइज का 1%।
५. vmax - viewport के बड़े साइज का 1%।
६. % - parent element के तुलना में (relative to parent element)।
इसे हम अपने स्क्रिप्ट में लिखते हैं। एक नयी Notepad file ओपन कीजिये। इस में Lesson-23-1 का पूरा टेक्स्ट कॉपी कीजिये। <style> में नीचे दिया हुआ कोड लिखिए।
h1 {
font-size: 15vw;
}
p {
font-size: 10vh;
}
इस फाइल को "Lesson-23-2" और "Lesson-23-2.html" के नाम से save कीजिये। Source कोड की PDF फाइल देखने के लिए आकृति २३-३. पर क्लिक कीजिये।
 |
| आकृति २३-३. CSS relative units of measurement |
HTML फाइल पर डबल क्लिक कीजिये।
 |
| आकृति २३-४ Output of measurements in relative units |
आउटपुट देखिये। हमने दिए हुए साइज में टेक्स्ट डिस्प्ले हुआ है।
यहाँ पर बहुत महत्वपूर्ण बात - ध्यान से देखिये: आप Lesson-23-1 के आउटपुट को डिस्प्ले कीजिये। अब Lesson-23-2 के आउटपुट को डिस्प्ले कीजिये। यह दोनों अलग अलग tabs में आये हैं। Lesson-23-1 के आउटपुट में जाइये, वेब browser का साइज छोटा छोटा करते जाइये। टेक्स्ट का साइज नहीं बदलेगा। Lesson-23-2 के आउटपुट में जाइये, वेब browser का साइज छोटा छोटा करते जाइये। यहाँ हम ने relative measurement units दिए हैं। इस लिए टेक्स्ट का साइज छोटा छोटा होता जा रखा है लेकिन हमारा आउटपुट same रहेगा। यह बात वेब पेज डिज़ाइन में बहुत महत्व रखती है। हम वेब पेज desktop पर देखे या मोबाइल पर देखे आउटपुट same रहना चाहिए, बदलना नहीं चाहिए। इसलिए वेब पेज develop करते समय relative measurement units का उपयोग करना चाहिए। इससे हमें जो पेज डेस्कटॉप पर दिख रहा है वही मोबाइल के स्क्रीन पर भी दिखेगा।
Important Points:
१. Measurements दो तरह के होते हैं - absolute और relative।२. स्क्रीन्स के साइज अलग अलग होते हैं। इस लिए relative measurements को recommend किया है। कभी भी relative measurements देने चाहिए।
लेसन २२ लेसन २४
