 |
| HTML and CSS tutorial for beginners in Hindi |
हेलो फ्रेंड्स, KTL के HTML और CSS tutorial में आपका फिर स्वागत है। आज हम लेसन १२ सीखेंगे।
पिछले लेसन में हमने देखा की लिस्ट्स कैसे बनाते हैं।
आज हम description list और nested list सीखेंगे।
HTML Description list
Description list में लिस्ट के items को description दे सकते हैं।हम एक description list बनायेंगे। एक नया Notepad फाइल ओपन कीजिये। इस में Lesson-11 का <!doctype> tag से </p> tag तक का text कॉपी कीजिये।
Description list के लिए <dl> tag का उपयोग किया जाता है। <dt> का उपयोग लिस्ट में items लिखने के लिए होता है। <dd> tag का उपयोग item का description देने के लिए होता है।
</p> के नीचे यह कोड लिखिये।
<dl>
<dt>Cat</dt><dd>Cat is a pet animal</dd>
<dt>Dog</dt><dd>Dog is a pet animal</dd>
<dt>Tiger</dt><dd>Tiger is a wild animal</dd>
<dt>Lion</dt><dd>Lion is a wild animal</dd>
</dl>
इस फाइल को "Lesson-12" के नाम से save कीजिये। फिर से "Lesson-12.html" के नाम से save कीजिये। आउटपुट देखिये। आउटपुट में एक description लिस्ट आयी है। नीचे दी हुई आकृती १२-१ देखिये।
Nested lists
अब nested lists के बारे में सीखेंगे। इस के लिए कोड लिखेंगे।</dl> के नीचे लिखिये
<br /><br />
इसके नीचे यह कोड लिखिये।
<ol type="1"> - type 1 की लिस्ट
<li>Pet animals</li> - बाहरी लिस्ट का पहला item
<ol type="a"> - पहले item के अंदर लिस्ट बनााना
<li>Cat</li> - अंदर के लिस्ट का पहला item
<li>Dog</li> - अंदर के लिस्ट का दूसरा item
</ol> - end अंदर की लिस्ट
</li> end बाहरी लिस्ट का पहला item
<li>Wild animals</li> - बाहर के लिस्ट का दूसरा item
<ol type="a">
<li>Tiger</li>
<li>Lion</li>
</ol>
</li>
</ol>
यह कोडिंग समझ लेते हैं। बाहर के लिस्ट में दो items हैं "Pet animals" और "Wild animals". "Pet animals" के अंदर एक लिस्ट है जिसमें दो जानवरों के नाम हैं। इसी तरह "Wild animals" में एक लिस्ट है जिसमें दो जानवरों के नाम हैं।
यहाँ एक लिस्ट के अंदर दूसरी लिस्ट है। इस लिए इसको nested list कहते हैं।
इस फाइल को "Lesson-12" और "Lesson-12.html" नाम से save कीजिये। Source कोड का PDF फाइल देखने की लिए आकृति १२-१. पर क्लिक कीजिये।
 |
| आकृति १२-१. HTML description list, HTML nested list |
अब आउटपुट देखिये। Description लिस्ट और नेस्टेड लिस्ट डिस्प्ले हुई हैं।
 |
| आकृति १२-२ HTML description list and HTML nested list |
अब एक महत्वपूर्ण बात: किसी भी लिस्ट का numbering 1, 2, 3... होता है। हम इसे बदल सकते हैं। इसके लिए "start" attribute का उपयोग किया जाता है। उदाहरण के लिए अगर हमें 10 से शुरू होनेवाली लिस्ट चाहिए तो हम
<ol start="10"> लिख सकते हैं।
Important points:
१. Description list में हम items का description दे सकते है।२. Description लिस्ट्स के लिए <dl>, <dt>, <dd> tags होते हैं।
३. एक लिस्ट के अंदर और एक लिस्ट बना सकते हैं। इसे nested list कहते हैं।
४. हम लिस्ट का numbering 1 के अलावा किसी दूसरे नंबर से शुरू कर सकते हैं। इसके लिये <ol> tag के "start" attribute का उपयोग करते हैं।
लेसन ११ लेसन १३
