-->

HTML Lists

HTML lists are used to represent information more effectively and more ordered. The example of lists given below :

An Unordered List:

  • Item
  • Item
  • Item
  • Item

There are three types of lists:

Type

Explanation

Example

Ordered-list

In this, list is displayed by either in alphabetical or numeric order.

1.      1st Item

2.      2nd Item

3.      3rd Item

4.      4th Item

Unordered-list

In this, list is displayed without any order. It shows bullets.

  • Item
  • Item
  • Item
  • Item

Definition-list

It show list of terms with their definition.

HTML

             Hyper Text Markup Language

CSS

             Cascading Style Sheet

HTML Ordered List

An ordered list, created using the <ol> tag, and each list item starts with the <li> tag. Ordered list contain information where order should be emphasized. The list items in ordered lists are marked with numbers or alphabets. Syntax of ordered list:

<ol>

            <li>1st Item</li>

            <li>2nd Item</li>

            <li>3rd Item</li>

</ol>

Ordered HTML List - The Type Attribute

The type attribute of the <ol> tag, defines the type of the list item marker:

Type

Description

Type="1"

The list items will be numbered with number(default)

Type="A"

The list items will be numbered with uppercase letters

Type="a"

The list items will be numbered with lowercase letters

Type="I"

The list items will be numbered with uppercase roman numbers

Type="i"

The list items will be numbered with lowercase roman numbers

 

Example:

<ol type="A">

            <li>1st Item</li>

            <li>2nd Item</li>

            <li>3rd Item</li>

</ol>

Output:

A.      1st Item

B.      2nd Item

C.      3rd Item

HTML Unordered Lists

An unordered list created using the <ul> tag, and each list item starts with the <li> tag. The list items in unordered lists are marked with bullets (small black circles), by default. Syntax of unordered list:

<ul>

            <li> Item</li>

            <li> Item</li>

            <li> Item</li>

</ul>

Unordered HTML List - Choose List Item Marker

The CSS list-style-type property is used to define the style of the list item marker:

Value

Description

disc (style="list-style-type:disc;")

Sets the list item marker to a bullet(default)

circle (style="list-style-type:circle;")

Sets the list item marker to circle

square (style="list-style-type:square;")

Sets the list item marker to a square

none (style="list-style-type:none;")

The list items will not be marked

 

Example:

<ul style="list-style-type:square;" >

            <li>1st Item</li>

            <li>2nd Item</li>

            <li>3rd Item</li>

</ul>

Output:

§  1st Item

§  2nd Item

§  3rd Item

HTML Definition Lists

A definition list is a list of items, with a description of each item. The definition list created using <dl> tag. The <dl> tag is used in conjunction with <dt> — defines the item in the list, and <dd> describes the item in the list. Syntax of definition list:

 

<dl>

            <dt>Term 1</dt>

            <dd>Description of term 1.</dd>

            <dt>Term 2</dt>

            <dd>Description of term 2. </dd>

</dl>

Output :

Term 1

            Description of term 1.

Term 2

            Description of term 2.

HTML Code:

<!DOCTYPE html>

<html>

                             <head>

                                                <title> HTML Lists </title>

                                                <meta charset="UTF-8">

                             </head>

                             <body>

                                                <h1>HTML Lists</h1>

                                                <h3> Ordered List (Default) </h3>

                                                <ol>

                                                            <li>1st Item</li>

                                                            <li>2nd Item</li>

                                                            <li>3rd Item</li>

                                                </ol>

 

                                                <h3> Ordered List (Numbered by Alphabets) </h3>

                                                <ol type="A">

                                                            <li>1st Item</li>

                                                            <li>2nd Item</li>

                                                            <li>3rd Item</li>

                                                </ol>

                                                <h3> Unordered List (Default Bullet) </h3>

                                                <ul>

                                                            <li>1st Item</li>

                                                            <li>2nd Item</li>

                                                            <li>3rd Item</li>

                                                </ul>

 

                                                <h3> Unordered List (Square) </h3>

                                                <ul style="list-style-type:square;"  >

                                                            <li>1st Item</li>

                                                            <li>2nd Item</li>

                                                            <li>3rd Item</li>

                                                </ul>

                                                <h3> Definition List </h3>

                                                <dl>

                                                            <dt>HTML</dt>

                                                            <dd>HTML is a Hyper Text Mark Up Language.</dd>

                                                            <dt>PHP</dt>

                                                            <dd>Php is a sever side scripting language.</dd>

                                                </dl>

 

                        </body>

</html>

Output:


HTML सूचियां

एचटीएमएल सूचियों  जानकारी को अधिक प्रभावी ढंग से और अधिक प्रतिनिधित्व करने के लिए उपयोग किया जाता है नीचे सूचियों का उदाहरण दिया है:

एक अनोर्ड सूची:

        वस्तु

        वस्तु

        वस्तु

तीन प्रकार की सूचियां होती हैं:

प्रकार

व्याख्या

उदाहरण

Ordered-list (व्यवस्थित सूची)

इसमें, सूची या तो वर्णानुक्रमिक या संख्यात्मक क्रम में प्रदर्शित होती है।

1.      प्रथम वस्तु

2.      द्वितीय वस्तु

3.      तृतीय वस्तु

Unordered-list (अव्यवस्थित सूची)

इसमें,  सूची बिना किसी क्रम के प्रदर्शित होती है।

·        प्रथम वस्तु

·        द्वितीय वस्तु

·        तृतीय वस्तु

Definition-list (परिभाषा-सूची)

यह शब्दों की सूची उनकी परिभाषा के साथ दिखाती है।

HTML

             Hyper Text Markup Language

CSS

             Cascading Style Sheet

HTML Ordered List (व्यवस्थित सूची)

एक व्यवस्थित सूची, <ol> टैग का उपयोग करके बनाई जाती है और प्रत्येक सूची आइटम <li> टैग से शुरू होता है। व्यवस्थित सूची में वो जानकारी देते है जहां क्रम पर बल देना होता है।  ऑर्डर की सूची में सूची आइटम संख्या या वर्णों के साथ चिह्नित किये जाते है। व्यवस्थित सूची के सिंटैक्स:

<ol>

<li>प्रथम वस्तु</li>

<li>द्वितीय वस्तु </li>

            <li>तृतीय वस्तु </li>

</ol>

Ordered HTML List - The Type Attribute

<ol> टैग का Type Attribute, सूची आइटम मार्कर के प्रकार को परिभाषित करता है:

प्रकार

व्याख्या

Type="1"

सूची आइटम संख्या के साथ चिह्नित किये जाते है। (default)

Type="A"

सूची आइटम बड़े (uppercase)  अंग्रेज़ी वर्णों के साथ चिह्नित किये जाते है।

Type="a"

सूची आइटम छोटे (lowercase)  अंग्रेज़ी वर्णों के साथ चिह्नित किये जाते है।

Type="I"

सूची आइटम बड़े (uppercase)  रोमन नंबर के साथ चिह्नित किये जाते है।

Type="i"

सूची आइटम छोटे (lowercase)  रोमन नंबर के साथ चिह्नित किये जाते है।

 

उदाहरण:

<ol type="A">

            <li> प्रथम वस्तु</li>

            <li> द्वितीय वस्तु</li>

            <li> तृतीय वस्तु </li>

</ol>

परिणाम:

A.      प्रथम वस्तु

B.       द्वितीय वस्तु

C.      तृतीय वस्तु

HTML Unordered Lists(अव्यवस्थित सूची)

<ul> टैग का उपयोग करके एक अव्यवस्थित सूची बनाई गई है, और प्रत्येक सूची आइटम <li> टैग से शुरू होता है। अव्यवस्थित सूचियों में सूची आइटम बुलेट्स (छोटे काले हलकों) के साथ डिफ़ॉल्ट रूप से चिह्नित हैं। अव्यवस्थित सूची का सिंटेक्स:

<ul>

            <li> आइटम </li>

            <li> आइटम </li>

            <li> आइटम </li>

</ul>

Unordered HTML List - सूची आइटम मार्कर चुनें

CSS list-style-type property सूची वस्तु मार्कर की style को परिभाषित करने के लिए उपयोग किया जाता है:

Value

व्याख्या

disc (style="list-style-type:disc;")

सूची आइटम मार्कर में बुलेट सेट करता है (डिफ़ॉल्ट)

circle (style="list-style-type:circle;")

सूची आइटम मार्कर में वृत्त सेट करता है

square (style="list-style-type:square;")

सूची आइटम मार्कर में वर्ग सेट करता है

none (style="list-style-type:none;")

सूची आइटम मार्कर सेट नहीं किया जाता है

 

उदाहरण:

<ul style="list-style-type:square;" >

            <li> प्रथम वस्तु</li>

            <li> द्वितीय वस्तु</li>

            <li> तृतीय वस्तु </li>

</ol>

परिणाम:

§  प्रथम वस्तु

§   द्वितीय वस्तु

§  तृतीय वस्तु

HTML Definition Lists (परिभाषा सूचियां)

एक परिभाषा सूची आइटम की एक सूची है, जिसमें प्रत्येक आइटम का विवरण दिया गया है। <dl> टैग का उपयोग करके परिभाषा सूची बनाई जाती है। <dl> टैग का उपयोग <dt> के साथ संयोजन में किया जाता है -जो की सूची में आइटम को परिभाषित करता है, और <dd> सूची में आइटम का वर्णन करता है। परिभाषा सूची का सिंटेक्स:

 

<dl>

            <dt> शब्द 1</dt>

            <dd> शब्द 1 का वर्णन.</dd>

            <dt> शब्द 2</dt>

            <dd> शब्द 2 का वर्णन. </dd>

</dl>

परिणाम:

शब्द 1

            शब्द 1 का वर्णन

शब्द 2

            शब्द 2 का वर्णन

HTML Code:

<!DOCTYPE html>

<html>

                             <head>

                                                <title> HTML सूचियां </title>

                                                <meta charset="UTF-8">

                             </head>

                             <body>

                                                <h1> HTML सूचियां</h1>

                                                <h3> व्यवस्थित सूची (Default) </h3>

                                                <ol>

                                 <li> प्रथम वस्तु</li>

                                 <li> द्वितीय वस्तु</li>

                                 <li> तृतीय वस्तु </li>

                     </ol>

 

                                                <h3> व्यवस्थित सूची (अंग्रेज़ी वर्णों के साथ चिह्नित) </h3>

                                                <ol type="A">

                                 <li> प्रथम वस्तु</li>

                                 <li> द्वितीय वस्तु</li>

                                 <li> तृतीय वस्तु </li>

                     </ol>

 

                                                <h3> अव्यवस्थित सूची (Default Bullet) </h3>

                                                <ul>

                                                            <li> प्रथम वस्तु</li>

                                 <li> द्वितीय वस्तु</li>

                                 <li> तृतीय वस्तु </li>

                                                </ul>

 

                                                <h3> Unordered List (वर्ग) </h3>

                                                <ul style="list-style-type:square;"  >

                                                            <li> प्रथम वस्तु</li>

                                 <li> द्वितीय वस्तु</li>

                                 <li> तृतीय वस्तु </li>

                                                </ul>

                                                <h3> परिभाषा सूची </h3>

                                                <dl>

                                                            <dt> शब्द 1</dt>

                                                            <dd> शब्द 1 का वर्णन.</dd>

                                                            <dt> शब्द 2</dt>

                                                            <dd> शब्द 2 का वर्णन. </dd>

                                                </dl>

 

                        </body>

</html>

परिणाम:

Comments


ravi ( Date :12 Feb,2018) :
Good Tutorial kyuki ye hindi or english dono me h