HTML for Kids · पाठ

सूचियाँ: क्रमबद्ध और अक्रमबद्ध

क्रमांकित और बुलेट वाली सूचियाँ बनाएँ

पाठ 2, कुल 4 में से10 चरण

सूचियाँ: क्रमबद्ध और अक्रमबद्ध, CoddyKit पर HTML for Kids का एक निःशुल्क पाठ है। यह 4 में से 2वाँ पाठ है। आप नीचे पूरा पाठ निःशुल्क पढ़ सकते हैं—फिर अंतर्निहित कोड संपादक और 24/7 एआई ट्यूटर के साथ ब्राउज़र में इसका व्यावहारिक अभ्यास कर सकते हैं। यह HTML for Kids सीखने के मार्ग का हिस्सा है और आपकी प्रगति वेब तथा CoddyKit ऐप पर सिंक होती रहती है। HTML for Kids पाठ्यक्रम में कुल 4 पाठ शामिल हैं।

सूचियाँ: क्रमबद्ध और अक्रमबद्ध

अगले पाठ में आपका स्वागत है! आज हम HTML में सूचियाँ बनाना सीखेंगे। सूचियाँ जानकारी को व्यवस्थित करती हैं और उसे पढ़ना आसान बनाती हैं।

सूचियाँ क्या होती हैं?

संबंधित वस्तुओं को एक साथ समूहित करने के लिए सूचियाँ एक शानदार तरीका हैं। HTML में सूचियों के दो मुख्य प्रकार होते हैं:

क्रमबद्ध सूचियाँ: वस्तुओं को क्रमांक दिए जाते हैं (1, 2, 3...)।
अक्रमबद्ध सूचियाँ: वस्तुओं के आगे बुलेट चिह्न होते हैं।

आइए, दोनों प्रकार बनाना सीखें!

क्रमबद्ध सूची बनाना

क्रमबद्ध सूची <ol> टैग का उपयोग करके बनाई जाती है। सूची की प्रत्येक वस्तु <li> (सूची वस्तु) टैग का उपयोग करके जोड़ी जाती है।

उदाहरण:

<ol>
  <li>Wake up</li>
  <li>Eat breakfast</li>
  <li>Go to school</li>
</ol>

अक्रमबद्ध सूची बनाना

अक्रमबद्ध सूची <ul> टैग का उपयोग करके बनाई जाती है। प्रत्येक वस्तु <li> टैग का उपयोग करके जोड़ी जाती है, ठीक उसी तरह जैसे क्रमबद्ध सूचियों में।

उदाहरण:

<ul>
  <li>Apples</li>
  <li>Bananas</li>
  <li>Cherries</li>
</ul>

सूची के भीतर सूची

आप किसी दूसरी सूची के भीतर एक सूची बना सकते हैं। इसे नेस्टेड सूची कहा जाता है। आप क्रमबद्ध और अक्रमबद्ध, दोनों प्रकार की सूचियों को एक-दूसरे के भीतर रख सकते हैं।

उदाहरण:

<ul>
  <li>Fruits
    <ul>
      <li>Apples</li>
      <li>Bananas</li>
    </ul>
  </li>
  <li>Vegetables
    <ul>
      <li>Carrots</li>
      <li>Spinach</li>
    </ul>
  </li>
</ul>

विवरण वाली सूचियाँ

HTML आपको <dl>, <dt>, और <dd> टैग का उपयोग करके विवरण वाली सूचियाँ बनाने की सुविधा भी देता है:

<dl>: सूची को परिभाषित करता है।
<dt>: पद (शीर्षक) को परिभाषित करता है।
<dd>: विवरण को परिभाषित करता है।

उदाहरण:

<dl>
  <dt>HTML</dt>
  <dd>The language used to create web pages.</dd>
  <dt>CSS</dt>
  <dd>The language used to style web pages.</dd>
</dl>

सूचियों में शैली जोड़ना

आप अपनी सूचियों का रूप बदलने के लिए CSS का उपयोग कर सकते हैं। उदाहरण के लिए, आप बुलेट बिंदुओं या संख्याओं का प्रकार बदल सकते हैं।

उदाहरण:

<style>
  ul {
    list-style-type: square; /* Changes bullets to squares */
  }
  ol {
    list-style-type: upper-roman; /* Changes numbers to Roman numerals */
  }
</style>

<ul>
  <li>Apples</li>
  <li>Bananas</li>
</ul>

<ol>
  <li>First Step</li>
  <li>Second Step</li>
</ol>

स्वयं करके देखें

आइए, क्रमबद्ध और अक्रमबद्ध सूचियों वाला एक सरल वेब पेज बनाते हैं। इसका उदाहरण यहाँ है:

<!DOCTYPE html>
<html>
  <head>
    <title>HTML Lists</title>
  </head>
  <body>
    <h1>My To-Do List</h1>
    <h2>Morning Routine</h2>
    <ol>
      <li>Wake up</li>
      <li>Brush my teeth</li>
      <li>Have breakfast</li>
    </ol>
    <h2>Shopping List</h2>
    <ul>
      <li>Milk</li>
      <li>Bread</li>
      <li>Eggs</li>
    </ul>
  </body>
</html>

बहुत बढ़िया!

बधाई हो! आपने क्रमबद्ध और अक्रमबद्ध सूचियाँ, नेस्टेड सूचियाँ और विवरण वाली सूचियाँ बनाना सीख लिया है। आपके वेब पेजों पर जानकारी व्यवस्थित करने के लिए ये बहुत उपयोगी साधन हैं। अगले पाठ में हम अलग-अलग पेजों और वेबसाइटों को जोड़ने के लिए लिंक जोड़ना सीखेंगे। और अधिक मज़ेदार सीखने के लिए तैयार हो जाइए!

सूचियाँ: क्रमबद्ध और अक्रमबद्ध — चित्र 10

शुरुआत निःशुल्क

एआई शिक्षक के साथ HTML सीखें — निःशुल्क

अपने ब्राउज़र में वास्तविक कोड लिखें और चलाएँ, चौबीसों घंटे एआई शिक्षक से तुरंत सहायता पाएँ, और वेब या ऐप पर वहीं से शुरू करें जहाँ आपने छोड़ा था।

पाठ्यक्रम: 16
पाठ: 35

निःशुल्क सीखना शुरू करें पूरा पाठ्यक्रम देखें

अक्सर पूछे जाने वाले प्रश्न

क्या “सूचियाँ: क्रमबद्ध और अक्रमबद्ध” पाठ निःशुल्क है?

हाँ—“सूचियाँ: क्रमबद्ध और अक्रमबद्ध” का पूरा पाठ यहाँ वेब पर निःशुल्क पढ़ा जा सकता है। इंटरैक्टिव अभ्यास (अंतर्निहित कोड संपादक और 24/7 एआई ट्यूटर) करने और HTML for Kids पाठ्यक्रम का बाकी हिस्सा अनलॉक करने के लिए CoddyKit PRO लें। HTML for Kids पाठ्यक्रम में कुल 4 पाठ शामिल हैं।

“सूचियाँ: क्रमबद्ध और अक्रमबद्ध” में मैं क्या सीखूँगा?

क्रमांकित और बुलेट वाली सूचियाँ बनाएँ आप ब्राउज़र में सीधे चलाए जाने वाले व्यावहारिक कोड के साथ HTML for Kids का अभ्यास करते हैं, और पाठ पूरा करते समय 24/7 एआई ट्यूटर आपके प्रश्नों के उत्तर देता है।

क्या HTML for Kids शुरू करने के लिए मुझे किसी अनुभव की आवश्यकता है?

पहले के अनुभव की आवश्यकता नहीं है। CoddyKit पर HTML for Kids शुरुआती से लेकर उन्नत शिक्षार्थियों तक सभी के लिए व्यवस्थित किया गया है, इसलिए आप यहीं से या शुरुआत से सीखना शुरू कर सकते हैं और अपनी गति से आगे बढ़ सकते हैं। यह 4 में से 2वाँ पाठ है।

“सूचियाँ: क्रमबद्ध और अक्रमबद्ध” पाठ पूरा करने में कितना समय लगता है?

CoddyKit का अधिकांश पाठ लगभग 5–10 मिनट में पूरा हो जाता है। हर पाठ छोटा और संवादात्मक है, इसलिए आप लगातार प्रगति करते हैं और वेब या ऐप पर वहीं से सीखना जारी रख सकते हैं जहाँ आपने छोड़ा था।

क्या मैं इस HTML for Kids पाठ में कोड लिख और चला सकता हूँ?

हाँ। हर HTML for Kids पाठ में एक अंतर्निर्मित कोड संपादक शामिल है, जिससे आप सीधे अपने ब्राउज़र में वास्तविक कोड लिख और चला सकते हैं और तुरंत एआई प्रतिक्रिया पा सकते हैं—स्थानीय सेटअप की आवश्यकता नहीं है।

इस पाठ्यक्रम के सभी पाठ

← HTML for Kids पर वापस जाएँ