HTML List in Hindi – HTML List Tag in Hindi.
इस Lesson में हम आपको HTML Lists के बारे में जानकारी देंगे. आप जानेंगे HTML List क्या होती है? HTML Document में List कैसे बनाते है? HTML List कितने प्रकार की होती है. आदि सवालों के जवाब भी आपको मिल जाएंगे.
HTML List Concept को आसानी से समझने के लिए इस Lesson को अलग-अलग छोटे-छोटे भागों में बांटा गया है. जिनकी सूची नीचे दी जा रही है.
Table of Content
- HTML List का परिचय – Introduction to HTML List in Hindi
- HTML List बनाने के लिए Use होने वाले HTML Elements के नाम और उपयोग
- HTML List के प्रकार – Types of HTML List
- HTML Unordered List
- HTML Ordered List
- HTML Definition List
- Nested HTML List
- आपने क्या सीखा?
1. HTMl List का परिचय – Introduction to HTML List in Hindi
HTML Document में Important Text को Points में Show कराने के लिए Lists का उपयोग किया जाता है. List Define करने के लिए List Elements का इस्तेमाल किया जाता है.
HTML List Document Structure को बनाए रखती है और महत्वपूर्ण सूचना को Points में Display करने में मदद करती है. जिससे हमारा Content अर्थपूर्ण और पठनीय नजर आता है.
HTML List बहुत महत्वपूर्ण होती है. Lists का उपयोग Articles के अलावा Websites में Navigation Menu Create करने के लिए भी किया जाता है. E-commerce Websites में Product Features को Display करने के लिए HTML Lists का ही इस्तेमाल किया जाता है.
2. HTML List बनाने के लिए Use होने वाले HTML Elements के नाम और उपयोग
HTML List बनाने के लिए कई Elements का उपयोग किया जाता है. इसलिए हम सबसे पहले HTML List Create करने के लिए काम आने वाले Elements के नाम और उनका उपयोग के बारे में बता रहे है.
- UL Element – UL Element का पूरा नाम Unorder List होता है. Unorder List Element द्वारा Bullet Lists या Unorder Lists बनाई जाती है.
- OL Element – OL Element का पूरा नाम Order List होता है. Order List Element द्वारा Number या Order Lists बनाई जाती है.
- LI Element – LI Element का पूरा नाम List Item होता है. List Item Element द्वारा एक List में लिखे जाने वाले Data को Define किया जाता है.
- DL Element – DL Element का पूरा नाम Definition List होता है. Definition List Element द्वारा Definition Lists को Define किया जाता है.
- DT Element – DD Element का पूरा नाम Definition Term होता है. Definition Term Element द्वारा Definition Term को Define किया जाता है.
- DD Element – DD Element का पूरा नाम Definition Description होता है. Definition Description Element द्वारा Definition Terms के Description को Define किया जाता है.
3. HTML List के प्रकार – Types of HTML List
HTML में Data को Points में दिखाने के लिए कई प्रकार की Lists का Use किया जाता है. प्रत्येक प्रकार की List का अपना विशेष उद्देश्य और अर्थ होता है. नीचे HTML List के प्रकार के बारे में बताया जा रहा है.
- Unordered List -UL List
- Ordered List – OL List
- Definition List – DL List
- Nested List
Unordered List
Unordered List को <ul> Tag द्वारा Define किया जाता है. इस Type की List का उपयोग एक प्रकार की सूचना को बिना किसी तय क्रम में दिखाने के लिए किया जाता है. Unordered List को Bulleted List भी कहते है. क्योंकि List Items के पहले Bullet लग जाते है.
इसे Try कीजिए.
नीचे दिए HTML Code को Copy करके अपने नोटपैड में Paste कीजिए या फिर अपने हाथों से इस कोड को Type करके फाईल को htmllist1.html नाम से Save कीजिए. और इसे Open कीजिए.
<html>
<head>
<title>HTML Unordered List Example</title><body>
<ul>
<li>Computer</li>
<li>Tablet</li>
<li>Mobile</li>
</ul>
</body> </html>
जब आप ऊपर लिखे गए HTML Code को ब्राउजर में Run करेंगे तो आपको इस प्रकार का परिणाम मिलेगा.
- Computer
- Table
- Mobile
The type Attribute in Unordered List
Unordered List में type Attribute का इस्तेमाल Bullet Style को Define करने के लिए किया जाता है. By Default UL List में List Items के लिए “Circle” का इस्तेमाल किया जाता है. लेकिन, type Attribute की सहायता से हम Circle के अलावा 3 अन्य प्रकार की List Style Type लगा सकते है.
- Circle
- Square
- Disc
- None
इसे देखिए
हम आपको ऊपर बताए गए चारों List Style Type को उदाहरण द्वारा समझा रहे है. हम इसके लिए ऊपर दिए गए उदाहरण को ही ले रहे है. इसमें हमे type Attribute का उपयोग करके List Style Type को square Set कर रहे है.
<html>
<head>
<title>HTML List Example</title><body>
<ul type=”square”>
<li>Computer</li>
<li>Tablet</li>
<li>Mobile</li>
</ul>
</body> </html>
जब आप ऊपर दिए गए कोड को ब्राउजर में देखेंगे तो आपको कुछ इस प्रकार का परिणाम दिखाई देगा.
- Computer
- Table
- Mobile
जिस प्रकार आपने List Style Type को square Set किया है. बिल्कुल इसी तरह disc, circle और none (कोई Style नही) Set कर सकते है. बस आपको Square के स्थान पर बाकि style Type को लिखना पडेगा और List Style Type बदल जाएगा.
Ordered List
Ordered List को <ol> Tag द्वारा Define किया जाता है. और List Item को <li> Element से Define करते है. Order List को Numbered List भी कहते है. OL का उपयोग एक प्रकार की सूचना को एकक तय Order (क्रम) में दिखाने के लिए किया जाता है. OL List में List Items के पहले Number Order से लिख जाते है.
इसे Try कीजिए.
Order List को समझाने के लिए भी हमने ऊपर बताए गए उदाहरण को ही लिया है. आप नीचे दिए HTML Code को Copy करके अपने नोटपैड में Paste कीजिए या फिर अपने हाथों से इस कोड को Type करके फाईल को htmllist2.html नाम से Save कीजिए. और इसे Open कीजिए.
<html>
<head>
<title>HTML Ordered List Example</title><body>
<ol>
<li>Computer</li>
<li>Tablet</li>
<li>Mobile</li>
</ol>
</body> </html>
जब आप ऊपर दिए गए कोड को ब्राउजर में देखेंगे तो आपको कुछ इस प्रकार का परिणाम दिखाई देगा.
- Computer
- Table
- Mobile
The type Attribute in Ordered List
Ordered List में type Attribute का इस्तेमाल List Style Type को Define करने के लिए किया जाता है. By Default OL List में List Items के लिए “Number” का इस्तेमाल किया जाता है. लेकिन, type Attribute की सहायता से हम Number के अलावा 5 अन्य प्रकार की List Style Type लगा सकते है.
- Number (Default) – 1
- Uppercase Letter – A
- Lowercase Letter – a
- Uppercase Roman Number – I
- Lowercase Roman Number – i
- None
इसे देखिए
हम आपको ऊपर बताए गए सभी List Style Type को उदाहरण द्वारा समझा रहे है. हम इसके लिए ऊपर दिए गए उदाहरण को ही ले रहे है. इसमें हम type Attribute का उपयोग करके List Style Type को A Set कर रहे है.
<html>
<head>
<title>HTML List Example</title><body>
<ul type=”A”>
<li>Computer</li>
<li>Tablet</li>
<li>Mobile</li>
</ul>
</body> </html>
जब आप ऊपर दिए गए कोड को ब्राउजर में देखेंगे तो आपको कुछ इस प्रकार का परिणाम दिखाई देगा.
- Computer
- Table
- Mobile
जिस प्रकार आपने List Style Type को A Set किया है. बिल्कुल इसी तरह 1, a, I, i और none (कोई Style नही) Set कर सकते है. बस आपको A के स्थान पर बाकि Style Type को लिखना पडेगा और List Style Type बदल जाएगा.
Definition List
किसी शब्द या Term विशेष को परिभाषित करने के लिए Definition Lists को बनाया जाता है. Definition List को <dl> Tag से Define किया जाता है. Definition Term को <dt> और Definition Description को <dd> Element से Define किया जाता है.
Online Dictionaries, Glossary Definition एवं किसी शब्द विशेष का अर्थ बताने के लिए Definition List सबसे Suitable Element है. क्योंकि इस List प्रकार में पहले Definition Term को Define किया जाता है. फिर उस Term का अर्थ बयाता जाता है. इस List की बनावट शब्दकोश की तरह होती है.
इसे Try कीजिए.
नीचे दिए HTML Code को Copy करके अपने नोटपैड में Paste कीजिए या फिर अपने हाथों से इस कोड को Type करके फाईल को htmllist3.html नाम से Save कीजिए. और इसे Open कीजिए.
<html>
<head>
<title>HTML Definition List Example</title><body>
<dl>
<dt>HTML</dt>
<dd>HTML stand for Hyper Text MarkUp Language and it is widely used to create webpages.</dd>
<dt>CSS</dt>
<dd>CSS stands for Cascading Style Sheet and it is used to Style an HTML Document.</dd>
</dl>
</body> </html>
जब आप ऊपर दिए गए कोड को ब्राउजर में देखेंगे तो आपको कुछ इस प्रकार का परिणाम दिखाई देगा.
- HTML
- HTML stands for Hyper Text MarkUp Language and it is widely used to create webpages.
- CSS
- CSS stands for Cascading Style Sheet and it is used to Style an HTML Document.
Nested HTML List
आप ऊपर HTML की सभी प्रकार की Lists को Define करना सीख चुके है. अब हम HTML में Nested List और बनाना सीखेंगे.
Nested List वैसे कोई HTML प्रकार नही है. लेकिन, हमने इसे यहाँ 4th प्रकार के रूप में शामिल किया है. ऐसा सिर्फ List Concept को सरल बनाने के उद्देश्य से किया गया है. ताकि Learners को सीखने में सुविधा रहे.
आइए, अब जानते है Nested List क्या होती है? Nested List को कैसे Define किया जाता है? और Nested List को बनाने का तरीका क्या है?
Introduction to Nested HTML List in Hindi
Nested List का मतलब होता है, एक List के अंदर अन्य List बनाना. सरल शब्दों मे कहे तो आप एक UL में OL Define कर सकते है. और एक OL में UL Define की जा सकती है.
इसे Try कीजिए
नीचे दिए HTML Code को Copy करके अपने नोटपैड में Paste कीजिए या फिर अपने हाथों से इस कोड को Type करके फाईल को htmllist4.html नाम से Save कीजिए. और इसे Open कीजिए.
<html>
<head>
<title>HTML Definition List Example</title><body>
<ol>
<li>Programming Languages
<ul>
<li>HTML</li>
<li>PHP</li>
</ul>
</li>
<li>CMS
<ol type=”a”>
<li>WordPress</li>
<li>Blogspot</li>
</ol>
</ol>
</body>
</html>
जब आप ऊपर दिए गए कोड को ब्राउजर में देखेंगे तो आपको कुछ इस प्रकार का परिणाम दिखाई देगा.
- Programming Languages
- HTML
- PHP
- CMS
- WordPress
- Blogger
ऊपर दिए गए उदाहरण को देखकर आप समझ ही गए होगे कि एक Nested List कैसे बनाई जाती है. आपने ध्यान दिया होगा कि एक List Item को Open करके उसके अंदर दूसरी List को Define किया गया है. फिर उस List Item को बंद किया गया है. HTML में इसी तरह ही Nested Lists को बनाया जाता है.
आपने क्या सीखा?
इस Lesson में हमने आपको HTML List के बारे में बताया है. आपने जाना कि HTML List क्या होती है? HTML List को कैसे बनाया जाता है? इसमे कौन-कौनसे Tag इस्तेमाल होते है? HTML List के कितने प्रकार होते है? हमने आपको उदाहरण द्वारा HTML List को समझाया है. हमे उम्मीद है कि यह Lesson आपके लिए उपयोगी साबित होगा.
0 Comments