 |
| HTML and CSS tutorial for beginners in Hindi |
हेलो फ्रेंड्स, KTL के HTML और CSS tutorial में फिर स्वागत है। आज हम लेसन ३७ सीखेंगे।
पिछले लेसन में हम ने देखा के CSS float property का उपयोग करके elements को कैसे inline डिस्प्ले करते हैं।
आज हम CSS float का उपयोग करके एक वेब पेज का layout बनाना सीखेंगे।
CSS float property - web page layout
आज हम एक वेब पेज का layout डिज़ाइन करेंगे। इस में right साइड में एक vertical menu डिस्प्ले करेंगे। यह menu हम टेक्स्ट में फ्लोट करेंगे। हम वेब पेज का header और footer डिस्प्ले करेंगे। इस के लिए हम वेब पेज में divisions बनाएंग।आइये शुरू करते हैं। एक नयी Notepad फाइल ओपन कीजिये। इसमें <html> और <head> लिखिए। अब heading के लिए स्टाइल लिखिए।
<style>
div.heading1 {
text-align: center;
color:red;
}
अब vertical menu के लिए स्टाइल लिखिए।
ol.a {
float: right;
margin: 0.2vw;
list-style-type: none;
}
ol li {
width: 15vw;
padding: 1vw;
letter-spacing: 0.5vw;
word-spacing: 1vw;
font-weight: bold;
background: #FFD700;
}
a:hover {
background-color:red;
}
इस में एक ordered list दी है जिसको right में फ्लोट किया है। लिस्ट के आइटम पर mouse लाने पर उसका रंग लाल हो जायेगा। लिस्ट के items के लिए background कलर दिया है। हम को ये सब प्रॉपर्टीज मालूम है।
अब वेब पेज के main टेक्स्ट के लिए स्टाइल लिखेंगे।
div.main {
color:blue;
text-indent: 10vw;
font-family: "Arial", Sans-serif;
font-weight: bold;
text-align: justify;
}
इससे हमारे टेक्स्ट को यहाँ दी हुई स्टाइल आ जाएगी।
हम वेब पेज के लेफ्ट में एक इमेज फ्लोट करनेवाले हैं। इसकी स्टाइल ऐसी होगी।
#img1 {
float:left;
margin-right:1rem;
}
अब footer के लिए स्टाइल लिखते हैं।
div.footer1 {
text-align: center;
color:white;
background-color: gray;
}
</style>
यह हमारी स्टाइल हो गयी।
अब इनको body में कैसा लिखेंगे? आप heading और इमेज के लिए कोड देखिये।
<div class="heading1">
<h1>Earth - My planet</h1>
</div>
<div>
<img id="img1" src="Image for Lesson-34.jpg" alt="Image 2" style=“width:200px;height:170px;">
</div>
ऐसे ही बाकी के सब divisions लिखेंगे। इस कोड के PDF फाइल लिए ऊपर दी हुई लिंक को क्लिक कीजिये।
 |
| आकृति ३७-१ CSS float property - web page layout |
इस फाइल को "Lesson-37" और "Lesson-37.html" के नाम से save कीजिये। HTML फाइल को डबल क्लिक कीजिये और आउटपुट देखिये।
 |
| आकृति ३७-२ CSS float property - web page layout design |
वेब पेज में हम ने दिया हुआ layout डिस्प्ले हुआ है।
Important Points:
१. CSS float property का उपयोग वेब पेज का layout design करने के लिए होता है।२. फ्लोट प्रॉपर्टी का उपयोग करके elements को container के left या right में फ्लोट करते हैं।
३. वेब पेज डिज़ाइन में divisions का role महत्वपूर्ण होता है।
लेसन ३६ लेसन ३८
