 |
| HTML and CSS tutorial for beginners in Hindi |
हेलो फ्रेंड्स, KTL के HTML और CSS tutorial में फिर स्वागत है। आज हम लेसन ३६ सीखेंगे।
पिछले लेसन में हम ने CSS float property के बारे में सीखा।
आज हम CSS float के बारे में और सीखेंगे।
CSS float property - making inline
कभी भी ब्राउज़र में elements एक के निचे एक डिस्प्ले होते हैं। यह default होता है। हम ने पिछले लेसन में यह देखा की CSS float property का उपयोग elements को inline बनाने के लिए होता है। इससे एक के बाजू दूसरा element डिस्प्ले होता है। आज हम इसके बारे में आगे सीखेंगे।
हम पहले दो divisions को inline करेंगे।
एक नयी Notepad फाइल ओपन कीजिये। इस में नीचे दिया हुआ कोड कॉपी कीजिये।
<html>
<head>
<!-- Normal div -->
<style>
.div1 {
background : red;
padding:5vw 0vw;
}
.div2 {
background : blue;
padding: 5vw 0vw;
}
p {
text-align:center;
}
</style>
</head>
<body>
<div class="div1">
<p>This is div-1</p>
</div>
<div class="div2">
<p>This is div-2</p>
</div>
</body>
इस फाइल को "Lesson-36-1" और "Lesson-36-1.html" के नाम से save कीजिये।
 |
| आकृति ३६-१. Normal divisions in web page |
HTML document पर डबल क्लिक कीजिये। आउटपुट देखिये।
 |
| आकृति ३६-२ Default blocks in web page |
एक के निचे एक दो blocks डिस्प्ले हुए है। हम उनको दिए हुए कलर्स देख सकते हैं। ऐसे एक के निचे डिस्प्ले करना default होता है।
अब हम float का उपयोग करेंगे और इनको एक दुसरे के बाजू में डिस्प्ले करेंगे। इस के लिए हर एक div के स्टाइल में यह इन्सर्ट कीजिये।
float:left;
width:50%;
इस फाइल को "Lesson-36-2" और "Lesson-36-2.html" के नाम से save कीजिये।
 |
| आकृति ३६-३ Float property for divisions |
HTML document पर डबल क्लिक कीजिये और आउटपुट देखिये।
 |
| आकृति ३६-४ Float:left - inline blocks |
हम ने हर एक div के स्टाइल में float: left दिया है। इसलिए हमारे आउटपुट में दो inline blocks आये है। हमने width 50% दिया है। इस लिए आधे width में लाल रंग है और आधे width में नीला रंग है।
अब हम लिस्ट्स को inline करना सीखेंगे। हम default लिस्ट का उपयोग करके एक vertical menu बनाएंगे और inline लिस्ट का उपयोग करके एक horizontal menu बनाएंगे।
पहले vertical menu बनाएंगे। एक नयी Notepad file ओपन कीजिये। इस में <ol> के लिए ऐसा स्टाइल दीजिये।
<style>
ol.a {
list-style-type: none;
}
ol li {
width: 15vw;
padding: 1vw;
letter-spacing: 0.5vw;
word-spacing: 1vw;
font-weight: bold;
background: yellow;
}
a:hover {
background-color:red;
}
</style>
Body में ol का कोड ऐसा लिखिए।
<ol class="a" >
<li><a href="Lesson-36-4-wpage-login.html">Log in</a></li>
<li><a href="Lesson-36-4-wpage-home.html">Home</a></li>
<li><a href="Lesson-36-4-wpage-about us.html">About Us</a></li>
<li><a href="Lesson-36-4-wpage-contact us.html">Contact us</a></li>
<li><a href="Lesson-36-4-wpage-faq.html">FAQ</a></li>
</ol>
हम यह सब tags जानते हैं। यह simple HTML है। इस फाइल को "Lesson-36-3" और "Lesson-36-3.html" नाम save कीजिए।
 |
| Figure 36-5. Code for vertical menu |
HTML document पर डबल क्लिक कीजिये और आउटपुट देखिये।
 |
| आकृति ३६-६ Vertical menu |
एक Vertical menu आया है।
अब हम इससे horizontal menu बनाते हैं। हमको लिस्ट items को inline करना होगा। इसके लिए हम CSS float प्रॉपर्टी का उपयोग करेंगे।
एक नयी Noptepad फाइल ओपन कीजिए। इस में Lesson-36-3 का सारा कोड कॉपी कीजिये। इस में केवल एक लाइन इन्सर्ट करने से यह horizontal हो जायेगा। ol li की style में यह लाइन इन्सर्ट कीजिये।
float: left;
 |
| Figure 36-7. CSS float property |
इस फाइल को "Lesson-36-4" और "Lesson-36-4.html" के नाम से save कीजिये।
 |
| आकृति ३६--८ CSS float property - horizontal menu |
आउटपुट देखिये। हमारा horizontal menu डिस्प्ले हुआ है।
Important Points:
१, CSS float प्रॉपर्टी का उपयोग हम elements को inline डिस्प्ले करने के लिए कर सकते हैं।
