 |
| HTML and CSS tutorial for beginners in Hindi |
हेलो फ्रेंड्स, KTL के HTML और CSS tutorial में आपका स्वागत है। आज हम लेसन १३ सीखनेवाले हैं।
पिछले लेसन में हम ने देखा की description lists और nested lists कैसे बनाते हैं।
आज हम div tag और span tag सीखेंगे।
HTML div tag
<div> tag का उपयोग वेब पेज में divisions या sections बनाने के लिए होता है। एक division में कई elements हो सकते हैं। इस से हम एक div tag का उपयोग करके उस में जो elements हैं उन सब को स्टाइल दे सकते है। <div> tag के लिये जो style define करते हैं वह उस के अंदर जो elements हैं उनको apply हो जाती है। इस से हर एक element को अलग अलग स्टाइल नहीं देनी पड़ती है और कोडिंग बहुत आसान हो जाता है।आईये आज का कोडिंग शुरू करते हैं। एक Notepad फाइल ओपन कीजिये। इस में Lesson-12 सारा कोड कॉपी कीजिये। इस में हम दो divisions बनाएंगे - एक description list लिए और दूसरा nested list के लिए।
पहली लिस्ट के लिए division बनाते हैं।
<body> के नीचे लिखिये
<div>
और </dl> के नीचे लिखिये
</div>
हम ने पहले लिस्ट के लिए एक division बनाया है। अब दूसरे लिस्ट के लिये division बनायेंगे।
</dl> के नीचे टाइप कीजिये
<div>
इस के बाद आयेगा
<ol type="1">
</ol> के बाद दीजिये
</div>
नीचे दिया हुई आकृति १३-१ देखिये।
इस को Lesson-13 और Lesson-13.html के नाम से save कीजिये।
HTML Document को डबल क्लिक कीजिये और आउटपुट देखिये। यहाँ दो divisions हैं। लेकिन हम दो divisions को देख नहीं पा रहे हैं। इसलिए अब हम divisions को background color देंगे।
फिर से हमारे फाइल में चलते हैं।
पहला div tag चेंज कीजिये
<div style="color:red;background-color:yellow">
दूसरे div tag के लिये लिखिये
<div style="color:yellow;background-color:black">
फिर से फाइल को Lesson-13 और Lesson-13.html के नाम से save कीजिये। Source कोड की PDF फाइल देखने के लिए आकृति १३-१. पर क्लिक कीजिये।
 |
| आकृति १३-१. HTML div tag, HTML divisions |
अब आउटपुट देखिये। दो divisions के लिए अलग अलग स्टाइल आयी है। नीचे आकृती १३-३ देखिये। पहले division के लिए background-color पीला है और टेक्स्ट लाल रंग में है। दूसरे division के लिए background-color काला है और टेक्स्ट पीले रंग में है।
HTML span tag
<span> tag का उपयोग एक वाक्य में कुछ शब्दों का स्टाइल बदलने के लिये होता है। हम कुछ ही शब्दों का कलर बदलेंगे।हमारे स्क्रिप्ट में जाते हैं। इस में lesson-8 का टेक्सट कॉपी कीजिये।
<! specifying color using color name> से दूसरे </p> तक कॉपी कीजिये।
इसे lesson-13 में </body> के पहले कॉपी कीजिये। अब इस में <span> देते हैं। एक शब्द है - "blue" इस के पहले tag लिखिये:
<span style="background-color:blue">
"blue" शब्द के बाद दीजिये </span>।
ऐसे ही <span> tags green, red, and yellow के लिये दीजिये।
 |
| आकृति १३-२ HTML span tag |
Source कोड की PDF फाइल देखने के लिए आकृति १३-२. पर क्लिक कीजिये। फिर से इस फाइल को "Lesson-13" और "Lesson-13.html" के नाम से save कीजिये। Windows explorer में जाकर HTML Document पर डबल क्लिक कीजिये और आउटपुट देखिये।
 |
| आकृति १३-३ HTML div tag and span tag |
हमने जहाँ जहाँ <span> tag दिया है उन शब्दों का कलर देखिये। यह आउटपुट नए वेब पेज में देखने के लिए ऊपर डिस्प्ले की हुई आकृति पर क्लिक कीजिये।
Important Points:
१. <div> tag वेब पेज में division बनाने के लिये होता है। एक division में एक या एक से जादा elements होते हैं।२. हम <div> में जो स्टाइल देते हैं वह उस <div> के हर एक element में आ जाती है।
३. <div> वेब पेज के layout के लियें बहुत महत्वपूर्ण होता है।
४. <span> का उपयोग करके हम टेक्सट के एक भाग को अलग कलर दे सकते हैं।
लेसन १२ लेसन १४
