 |
| HTML and CSS tutorial for beginners in Hindi |
हेलो फ्रेंड्स, KTL के HTML और CSS tutorial में फिर स्वागत है। आज हम लेसन ३५ सीखेंगे।
पिछले लेसन में हम ने देखा की lists को स्टाइल्स कैसे देते हैं।
आज हम CSS float सीखेंगे।
CSS float property
CSS float property का उपयोग यह तय करने के लिए होता है की टेक्स्ट में एक इमेज कैसी डिस्प्ले होगी। उदाहरण के लिए इमेज टेक्स्ट के बायी ओर आएगी और टेक्स्ट उसके बाजु में डिस्प्ले होगा या इमेज दायी ओर आएगी और टेक्स्ट उसके बाजु में डिस्प्ले होगा। CSS float property में हम यह देते हैं की इमेज टेक्स्ट में float कैसी होगी। इमेज container के लेफ्ट या राइट में डिस्प्ले होगी और टेक्स्ट उस इमेज को wrap करेगाहम ने हमारे उदाहरण में एक इमेज और टेक्स्ट लिया है। इस में इमेज element टेक्स्ट में फ्लोट होता है। इमेज container के बायी या दायी ओर डिस्प्ले होगी।
ब्राउज़र में default एक के निचे एक elements डिस्प्ले होते हैं। Float से हम यह default पोजीशन बदल सकते हैं और elements को inline डिस्प्ले कर सकते हैं।
हम एक इमेज को टेक्स्ट में float करने के लिए कोड लिखेंगे।
एक नयी Notepad file ओपन कीजिये और इसमें Lesson-33 का कोड कॉपी कीजिये।
अब हम एक इमेज इन्सर्ट करेंगे। पहले paragraph के <p> के निचे यह कोड लिखिए।
<img id="img1" src="hibiscus.jpg" alt="Hibiscus flower" style=“width:50vw;height:7vw;">
इसके लिए स्टाइल लिखते हैं।
#img1 {
float:left;
margin-right:1rem;
}
हमने इमेज को के लेफ्ट में float किया है।
और एक इमेज इन्सर्ट करेंगे और उसे कंटेनर के right साइड में फ्लोट करेंगे।
<img id="img2" src="Image for Lesson-34.jpg" alt="Image 2" style=“width:50vw;height:7vw;">
इस का स्टाइल ऐसे होगा।
#img2 {
float:right;
margin-left:1rem;
}
इस फाइल को "Lesson-35-1" और "Lesson-35-1.html" के नाम से save कीजिये। इस source कोड की PDF फाइल देखने के लिए निचे दी हुई आकृति पर क्लिक कीजिये।
 |
| आकृति ३५-१. CSS float property in Hindi |
HTML फाइल पर डबल क्लिक कीजिये और आउटपुट देखिये।
 |
| आकृति ३५-२ CSS Float property in Hindi |
यह आउटपुट नए वेब पेज में देखने के लिए ऊपर डिस्प्ले की हुई आकृति पर क्लिक कीजिये।
एक इमेज दायी ओर फ्लोट हुई है और दूसरी इमेज बाई ओर फ्लोट हुई है। आप ध्यान से देखिये की टेक्स्ट इमेजेज को कैसे wrap कर रहा है।
हम float:none भी दे सकते हैं। आप अपने कोड में इसका उपयोग कीजिये और देखिये की आउटपुट में क्या होता है। हम ब्राउज़र को यह बता रहे हैं की इमेज को फ्लोट ना करे। इसका मतलब इमेज की जो default पोजीशन दी हैं वहीँ डिस्प्ले करे।
CSS clear property
यह प्रॉपर्टी फ्लोट के बारे में इनफार्मेशन देती है। इसकी values होती है - left, right या both। उदाहरणclear: left;
property बताती है की container के लेफ्ट साइड में फ्लोट नहीं होना चाहिए। ऐसे ही clear: right; या clear: both; प्रॉपर्टीज होती है।
हमने अब तक इमेज को टेक्स्ट में फ्लोट करके देखा है। हम किसी भी element को फ्लोट कर सकते हैं। अब हम paragraph के पहले अक्षर को फ्लोट करके देखेंगे।
एक नयी Notepad फाइल ओपन कीजिये। इस फाइल में lesson-35-1 का कोड कॉपी कीजिये। अब style में <span> लिखिए।
span {
float:left;
font-family: "Goudy Stout";
font-size:300%;
margin-right: 0.2vw;
}
दूसरे paragraph tag के निचे लिखिए -
<span>E</span>
इस फाइल को "Lesson-35-2" और "Lesson-35-2.html" के नाम से save कीजिये। इस source कोड की PDF फाइल देखने के लिए निचे दी हुई आकृति पर क्लिक कीजिये।
 |
| आकृति ३५-३. CSS float property in Hindi |
HTML फाइल पर डबल क्लिक कीजिये और आउटपुट देखिये। यह आउटपुट नए वेब पेज में देखने के लिए आकृति ३५-४ पर क्लिक कीजिये।
 |
| आकृति ३५-४. CSS float property in Hindi |
दूसरे paragraph का पहला अक्षर फ्लोट हुआ है।
Important Points:
१. CSS float property यह बताती है की एक element में कैसा float होगा। इस का मतलब element container के दायी ओर या बायी ओर फ्लोट होगा।२. CSS float property का उपयोग करके वेब पेज में element की default पोजीशन बदल सकते हैं।
३. Float none का मतलब होता है element को फ्लोट न करें। इस का मतलब element की जो default पोजीशन है वहीँ डिस्प्ले करे।
४. Clear: left प्रॉपर्टी यह बताती है की left में float नहीं होना चाहिए। इसी तरह हम clear: right या clear: both का उपयोग कर सकते हैं।
लेसन ३४ लेसन ३६
