HTML in Hindi

HTML Lists Tutorials in Hindi – Part 11

इस आर्टिकल में हम आपको HTML Lists Tutorials in Hindi – Part 11 के बारे में बताएँगे.

HTML Lists Tutorials in Hindi - Part 11
HTML Lists Tutorials in Hindi – Part 11

List के द्वारा डॉक्यूमेंट में जरुरी चीजों को क्रम के अनुसार सेट कर सकते है. HTML में 3 तरह की लिस्ट होती है जिनके बारे में आज इस आर्टिकल में हम आपको बताएँगे.

  1. Ordered List
  2. Unordered List
  3. Description List

HTML Ordered List

इस लिस्ट का मतलब है किसी किसी भी लिस्ट को शुरू करने से पहले उसको किसी संख्या या शब्द से अंकित करके लिस्ट बनाना. इसके लिए हम <ol> element का इस्तेमाल करेंगे. हर item को दर्शाने के लिए हम <ol> element में <li> element का इस्तेमाल करेंगे.

Example

<ol>
  <li>Item 1</li>
  <li>Item 2</li>
  <li>Item 3</li>
  <li>Item 4</li>
</ol>

इस प्रकार हम एक order लिस्ट बना सकते है. इसकी आउटपुट हम आपको नीचे दिखा रहे है.

HTML Ordered List
HTML Ordered List

यहाँ पर by default नंबर आ रहे है. आप इसको चेंज करके roman या character भी लिख सकते है. इसके लिए आपको <ol> में type attribute का इस्तेमाल करना होगा. जैसे

  • type=”A” => यह बड़ी ABC के लिए इस्तेमाल किया जाता है.
  • type=”1″ => यह by default होता है. इसमें आपको 123 नंबर दिखाई देंगे
  • type=”a” => यह छोटी abc के लिए इस्तेमाल किया जाता है.
  • type=”I” => यह बड़े roman नंबर के लिए इस्तेमाल किया जाता है.
  • type=”i” => यह छोटे roman नंबर के लिए इस्तेमाल किया जाता है.

Example

<ol type="I">
  <li>Item 1</li>
  <li>Item 2</li>
  <li>Item 3</li>
  <li>Item 4</li>
</ol>

इसकी आउटपुट आप नीचे फोटो में देख सकते है.

HTML roman order list
HTML roman order list

HTML Unordered List

जैसे हमने आपको Order list के बारे में बताया था उसी प्रकार आप Unordered list का भी इस्तेमाल होता है. इसके लिए आपको <ul> element का इस्तेमाल करना होगा. इसके अन्दर आप <li> element का इस्तेमाल कर सकते है.

Example

<ul>
  <li>Item 1</li>
  <li>Item 2</li>
  <li>Item 3</li>
  <li>Item 4</li>
</ul>

इसकी आउटपुट हम आपको नीचे बता रहे है.

HTML Unordered List
HTML Unordered List

अगर हमें इसका marker टाइप चेंज करना है तो हम style=”list-style-type:value” का इस्तेमाल करके आसानी से इसके टाइप को चेंज कर सकते है. value में आप नीचे बताये गए type इस्तेमाल कर सकते है.

  • disc
  • circle
  • square
  • none

HTML Description Lists

HTML उपर बताये गए लिस्ट के अलावा Description Lists को भी सपोर्ट करता है. इसकी मदद से आप किसी भी item की Description तैयार कर सकते है. Description Lists को define करने के लिए <dl> element का इस्तेमाल किया जाता है. इसके अन्दर आपको आप <dh> जो की heading के लिए इस्तेमाल होता है और <dd> जो की Description heading के Data को दर्शाता है.

Example

<dl>
  <dt>Coffee</dt>
   <dd>- black hot drink</dd>
  <dt>Milk</dt>
   <dd>- white cold drink</dd>
</dl>

इसकी आउटपुट हम आपको नीचे बता रहे है.

HTML Description Lists
HTML Description Lists

HTML Nested List

हम HTML list item में nested लिस्ट भी बना सकते है. इसका इस्तेमाल dropdown menu बनाने के लिए किया जाता है.

Example

<ul>
<li>item 1</li>
<li>item 2
<ul>
<li>nested item one</li>
<li>nested item two</li>
</ul>
</li>
<li>item 3</li>
</ul>

इसकी आउटपुट हम आपको नीचे दिखा रहे है.

HTML Nested List
HTML Nested List

Important Note

Ordered List के साथ में हम counting के लिए attribute का इस्तेमाल भी कर सकते है. इसके लिए आपको start="number" डालना होगा. जब भी आप नंबर में कोई desire नंबर डालेंगे आपकी list उसी नंबर से शुरू होगी.

Example

<ol start="50">
  <li>Coffee</li>
  <li>Tea</li>
  <li>Milk</li>
</ol>

इसकी आउटपुट हम आपको नीचे दिखा रहे है.

Counting list
Counting list

HTML List CSS के बारे में हम आपको CSS Tutorials in Hindi part में बताएँगे.

HTML Iframe Tutorials in Hindi – Part 12 >>>>>>>>

Related Articles

Leave a Reply

Your email address will not be published. Required fields are marked *

Back to top button
Close