 |
| HTML and CSS tutorial for beginners in Hindi |
हेलो फ्रेंड्स, KTL के HTML और CSS tutorial में आपका स्वागत है। आज हम लेसन ११ सीखेंगे।
पिछले लेसन में हमने hyperlinks के बारे में सीखा।
आज हम देखेंगे की वेब पेज में lists कैसे डिस्प्ले करते हैं।
HTML lists
Lists के तीन प्रकार होते हैं। १. Unordered list, २. Ordered list., और ३. Description list.इस लेसन में हम unordered लिस्ट और ordered लिस्ट सीखेंगे।
Unordered लिस्ट एक bulleted लिस्टडिस्प्ले करती है। इस लिस्ट के हर एक item के पहले एक काला गोल चिन्ह आता है। Ordered लिस्ट एक numbered लिस्ट होती है। इस लिस्ट के हर एक item के पीछे एक नंबर होता है।
Unordered लिस्ट और ordered लिस्ट में फरक क्या होता है? Unordered लिस्ट में लिस्ट के items को कोई order नहीं होती है। हम उनको किसी भी क्रम में लिख सकते हैं। एक उदाहरण लेते हैं।
चाय बनाने के लिए लगानेवाली सामग्री:
- चाय पत्ती
- शक्कर
- पानी
- दूध
हम इस लिस्ट में items का क्रम बदल सकते हैं.
- पानी
- दूध
- चाय पत्ती
- शक्कर
हम जो बताना चाहते हैं उसके मतलब में कोई फरक नहीं होता। यह एक unordered लिस्ट है। इस में bullets का उपयोग करना चाहिए।
अब या लिस्ट देखिये।
चाय बनाने का तरीका:
१. बरतन में एक गिलास पानी डालिये।
२. उसे उबालना शुरू कीजिये।
३. अब चाय पत्ती और शक्कर डालिये।
४. उसमे दूध डालिये।
५. इसे कप में दाल कर गरम गरम पीजिये !!!
अब इसका क्रम बदलेंगे।
१. बरतन में एक गिलास पानी डालिये।
२. उसे उबालना शुरू कीजिये।
३. कप में दाल कर गरम गरम पीजिये !!!
४. अब चाय पत्ती और शक्कर डालिये।
५. उसमे दूध डालिये।
यहाँ मतलब ही बदल रहा है। इस लिए यह एक ordered लिस्ट है। इसके items के पीछे नंबर आने चाहिए।
Unordered list
एक नयी Notepad फ़ाइल ओपन कीजिये। इस फाइल में lesson-10 के पहले लाइन से body tag तक का text कॉपी कीजिये।<body> के नीचे यह टाइप कीजिये:
<p>List of animals<p>
इस के नीचे लिखिए -
<ul>
<ul> tag का उपयोग unordered list बनाने के लिए होता है।
<ul> tag के नीचे लिस्ट के items लिखते हैं। इस के लिए <li> element होता है, जैसे
<li>Dog</li>
"Dog" इस लिस्ट का पहला item है। इसी प्रकार लिस्ट के बाकी items लिखते हैं।
अब </ul> लिखिए। हमारा कोड ऐसा होगा।
<p>List of animals</p>
<ul>
<li>Dog</li>
<li>Cat</li>
<li>Lion</li>
<li>Tiger</li>
</ul>
इस फाइल को "Lesson-11" के नाम से save कीजिये। इसी फाइल को "Lesson-11.html" के नाम से save कीजिये। इसका आउटपुट देखिये। एक bulleted list आयी है। नीचे दिखायी हुई आकृती ११-१ और ११-२ देखिये।
Ordered list
अब ordered list डिस्प्ले करने के लिए कोड लिखेंगे।
</ul> के नीचे <br /><br /> लिखिये।
</ul> के नीचे <br /><br /> लिखिये।
Ordered list के लिए <ol> tag का उपयोग किया जाता है। लिस्ट के items लिखिए। Items लिखने के लिए <li> का उपयोग कीजिये। <ol> tag को क्लोज कीजिये - </ol>।
<ol >
<li>Dog</li>
<li>Cat</li>
<li>Lion</li>
<li>Tiger</li>
</ol>
इस file को "Lesson-11" के नाम से save कीजिये और "Lesson-11.html" के नाम से save कीजिये। इसका आउटपुट देखिये। Unordered list के नीचे ordered list आयी है। नीचे दिखायी हुई आकृती ११-१ और ११-२ देखिये।
<ol> tag का एक attribute होता है - "type"। यह item marker का प्रकार बताता है।
इस "type" attribute की पाँच values होती है।
१. type="1" - item मार्कर्स 1, 2, 3... यह default type है।
2. type="A" - item मार्कर्स A, B, C etc.
3. type="a" - item मार्कर्स a, b, c etc.
4. type="I" - item मार्कर्स I, II, III etc.
5. type="i" - item मार्कर्स i, ii, iii etc.
अब हम इसका कोड लिखेंगे।
</ol> के नीचे लिखिये:
<br /><br />
अब टाइप कीजिये -
<ol type="a">
इस के नीचे ऊपर लिखे हुए <li> कॉपी कीजिये।
<br /><br />
<ol type="a">
<li>Dog</li>
<li>Cat</li>
<li>Lion</li>
<li>Tiger</li>
</ol>
इस file को "Lesson-11" के नाम से save कीजिये और "Lesson-11.html" के नाम से save कीजिये। Source कोड की PDF फाइल देखने के लिए आकृति ११-१. पर क्लिक कीजिये।
 |
| आकृति ११-१ HTML lists, HTML ul tag and HTML ol tag, type attribute of ol tag |
इसका आउटपुट देखिये।
 |
| आकृति ११-२ Types of HTML lists, unordered list, ordered list |
Unordered list के नीचे ordered list आयी है। तीसरी लिस्ट आयी है जिस में numbering a, b, c आया है।
Important points:
१. HTML में दो तरह की लिस्ट्स होती है - unordered lists और ordered lists। Unordered lists bulleted lists होती है और Ordered lists numbered lists होती है।२. <ul> tag का उपयोग unordered list के लिए होता है। <ol> tag का उपयोग ordered list के लिए होता है।
३. <li> tag का उपयोग लिस्ट में के items डिस्प्ले करने के लिए होता है।
४. <ol> tag का "type" attribute होता है। इससे अलग अलग तरह की numbering दे सकते हैं।
लेसन १० लेसन १२
