HTML सूचियाँ:चरण-दर-चरण मार्गदर्शिका

HTML सूची टैग का उपयोग वेबपेज पर सूचियां बनाने के लिए किया जाता है। यह तीन प्रकार की सूचियाँ बना सकता है:क्रमित सूचियाँ, अव्यवस्थित सूचियाँ और विवरण सूचियाँ।

जब आप एक वेब पेज बना रहे हों, तो आप जानकारी को एक अच्छी तरह से स्वरूपित सूची के रूप में प्रस्तुत करना चाह सकते हैं। उदाहरण के लिए, आपके पास छात्रों के नामों का एक रोस्टर हो सकता है जिसे आप सूची प्रपत्र में दिखाना चाहते हैं, या आपके पास ब्लॉग पोस्ट की एक श्रृंखला हो सकती है जिसे आप सूची के रूप में प्रारूपित करना चाहते हैं।

HTML . में , एक अंतर्निहित फ़ंक्शन है जो आपको सूचियां बनाने की अनुमति देता है। इस ट्यूटोरियल में, हम HTML . को कवर करेंगे सूची प्रकार और उन्हें वेब पेज में कैसे कार्यान्वित करें।

HTML सूची प्रकार

HTML . में सूचियां तीन प्रकार की होती हैं , और प्रत्येक का एक विशिष्ट उद्देश्य और कोड होता है। ये इस प्रकार हैं:

• Ordered list :एक विशिष्ट क्रम में वस्तुओं की सूची बनाने के लिए प्रयुक्त होता है।
• Unordered list :बिना ऑर्डर वाली वस्तुओं की सूची बनाने के लिए उपयोग किया जाता है।
• Description list :वस्तुओं और विवरणों की सूची बनाने के लिए उपयोग किया जाता है।

सूचियां वेबपेज के किसी भी हिस्से में दिखाई दे सकती हैं, चाहे आप उन्हें टेक्स्ट के अंदर रखें, लाइन ब्रेक के बाद, या यहां तक ​​कि किसी अन्य सूची के अंदर nested list बनाने के लिए . आइए देखें कि आप HTML . में इन तीन प्रकार की सूचियां कैसे बना सकते हैं ।

एचटीएमएल सूचियां:आदेशित

Ordered lists HTML . में उपयोग किया जाता है जब सूची का क्रम आवश्यक हो। उदाहरण के लिए, यदि आपके पास निर्देशों की एक श्रृंखला है जो किसी विशेष क्रम में होने की आवश्यकता है, तो आप एक आदेशित सूची का उपयोग करना चाहेंगे। Ordered lists क्रमांकित सूचियाँ हैं।

Ordered lists <ol> का उपयोग करें टैग, और सूची में प्रत्येक आइटम एक <li> . का उपयोग करता है उपनाम। यहां ऑर्डर की गई सूची का एक उदाहरण दिया गया है:

<ol>
	<li>Mix 100g plain flour, 2 eggs, 300ml milk, and 1tbsp sunflower oil in a bowl.</li>
	<li>Leave the mix to rest for 30 minutes.</li>
	<li>Set a medium-size frying pan over a medium heat and wipe it with oiled kitchen paper.</li>
	<li>Pour batter mixture into the pan and cook on each side for one minute.</li>
</ol>

उपरोक्त उदाहरण में, हमने पेनकेक्स के लिए एक मूल नुस्खा बनाया है। इस सूची में प्रत्येक चरण क्रम में होना चाहिए, इसलिए हमने एक आदेशित सूची को चुना। यहाँ हमारे कोड का आउटपुट है:

81% प्रतिभागियों ने कहा कि बूटकैंप में भाग लेने के बाद उन्हें अपनी तकनीकी नौकरी की संभावनाओं के बारे में अधिक आत्मविश्वास महसूस हुआ। आज ही एक बूटकैंप से मिलान करें।

बूटकैंप शुरू करने से लेकर अपनी पहली नौकरी खोजने तक, औसत बूटकैंप ग्रेड ने करियर संक्रमण में छह महीने से भी कम समय बिताया।

Ordered lists नंबर एक से शुरू करें और आरोही क्रम में जाएं। हालाँकि, यदि आप चाहते हैं कि आपकी सूची किसी भिन्न संख्या से प्रारंभ हो, तो आप start . का उपयोग कर सकते हैं इस तरह की विशेषता:

<ol start="5">
	<li>Move the pancake onto a plate (repeat steps 2-4 if you are making multiple pancakes).</li>
	<li>Spread butter on your pancakes, maple syrup, lemon, or any other topping.</li>
	<li>Enjoy your pancakes!</li>
</ol>

हमारी नई सूची इस प्रकार दिखाई देती है:

एचटीएमएल सूचियां:अनियंत्रित

यदि आप उन वस्तुओं की सूची बनाना चाहते हैं जहाँ सूची के आइटम का क्रम महत्वपूर्ण नहीं है, तो आप HTML unordered का उपयोग कर सकते हैं सूची टैग। हम unordered lists create बना सकते हैं <ul> . का उपयोग करना टैग, और प्रत्येक सूची आइटम, जैसे हमारी ऑर्डर की गई सूची में, <li> . से शुरू होता है टैग।

यहां एक Unordered list का एक उदाहरण दिया गया है :

<ul>
	<li>Alex</li>
	<li>Carol</li>
	<li>Lucy</li>
	<li>Shawn</li>
</ul>

हमारी सूची इस प्रकार दिखाई देती है:

एचटीएमएल सूचियां:विवरण सूचियां

जब आप एक सूची लिख रहे हों, तो आप अपनी सूची में प्रत्येक आइटम का विवरण शामिल करना चाह सकते हैं। उदाहरण के लिए, यदि आपके पास छात्रों के नामों की सूची है, तो आप उनके ग्रेड जोड़ना चाह सकते हैं, लेकिन मुख्य सूची पाठ के भाग के रूप में नहीं।

यहीं पर description lists अंदर आएं। description lists प्रत्येक तत्व के विवरण के साथ वस्तुओं की सूची है। description lists <dl> . का उपयोग करके बनाए जाते हैं टैग, सूची में मुख्य तत्व <dt> . का उपयोग करते हैं टैग, और परिभाषाएं <dd> . का उपयोग करती हैं टैग।

यहां Description list का एक उदाहरण दिया गया है HTML . में :

<dl>
	<dt>Economy Class</dt>
	<dd>Standard seats, no meal service.</dd>
	<dt>First Class</dt>
	<dd>Luxury seats, catered meal service.</dd>
</dl>

हमारा कोड निम्नलिखित सूची लौटाता है:

जैसा कि आप देख सकते हैं, हवाई जहाज वर्ग के नाम एक सूची प्रारूप में दिखाई देते हैं, और उन नामों के विवरण प्रत्येक आइटम के नीचे दिखाई देते हैं। प्रत्येक विवरण भी इंडेंट किया जाता है, जो इसे सूची आइटम से अलग करता है।

निष्कर्ष

HTML . में सूचियां एक अनिवार्य टैग हैं , जो डेवलपर्स को अच्छी तरह से स्वरूपित तरीके से जानकारी प्रस्तुत करने की अनुमति देता है। सूचियाँ आमतौर पर उपयोगकर्ताओं के पढ़ने के लिए अधिक आरामदायक होती हैं, और सूचियों का उपयोग करने से डेवलपर्स को सूचना संरचना पर अधिक नियंत्रण भी मिलता है।

इस ट्यूटोरियल में, हमने HTML . में सूचियों को तोड़ दिया है , और तीन प्रकार के HTML . में से कोई भी कैसे बनाएं सूचियाँ:ordered (li ol टैग), unordered (उल ली टैग), और description (डीटी डीडी टैग)। अब आप HTML . में सूचियां बनाने की राह पर हैं एक समर्थक की तरह!