Making of HTML List : using OL, UL and LI tag

-

 

List তৈরি করার Tag(Making of HTML List)

Type of list-

1.       Ordered List OR Numbered List(1, A, a, I, i)

2.       Unordered List or Bulleted List (Disc, Circle, Square)

 

Ordered List or Numbered List

Type: 1 (default)

Type: A

Type: a

Type: I

Type: i

1.       Geography

2.       Computer Application

3.       Mathematics

4.       Philosophy

A.      Geography

B.      Computer Application

C.      Mathematics

D.      Philosophy

a.       Geography

b.      Computer Application

c.       Mathematics

d.      Philosophy

    I.       Geography

  II.       Computer Application

III.       Mathematics

IV.       Philosophy

   i.       Geography

  ii.       Computer Application

iii.       Mathematics

iv.       Philosophy

Unordered List or Bulleted List

Type: disc (default)

Type: Circle

Type: Square

·  Geography

·  Computer Application

·  Mathematics

·  Philosophy

o  Geography

o  Computer Application

o  Mathematics

o  Philosophy

§  Geography

§  Computer Application

§  Mathematics

§  Philosophy

 

List Item:

Geography

Computer Application

Mathematics

Philosophy

Tag:

<OL> tag :(Container Tag): এই tag এর সাহায্যে Ordered List তৈরি করা যায়।

Parameter:

TYPE: এই Parameter এর সাহায্যে Ordered list এর Type(1, A, a, I, i) set করা যায়।

               Example: <OL TYPE=”a”>  …..  </OL>

 

START: এই Parameter এর সাহায্যে Ordered list এর starting Numbered value set করা যায়।

Example: <OL TYPE=1 START="10"> …….. </OL>

 

REVERSED: এই Parameter এর সাহায্যে Ordered list এর Number গুলিকে reversed order এ Print করা যায়।

EXAMPLE: <OL TYPE=1 START=100 REVERSED> …… </OL>

 

 

        <ol start="50">

            <li>Science</li>

            <li>Arts</li>

        </ol>

        <ol start="50" reversed>

            <li>Science</li>

             <li>Arts</li>

        </ol>

 

 

<UL> tag:(Container Tag):এই tag এর সাহায্যে Unordered List তৈরি করা যায়।

Parameter:

TYPE: এই Parameter এর সাহায্যে Unordered list এর Type (Square, Circle, Disc) set করা যায়।

Example:

<UL>

  <li> Geography</li>

  <li> Computer Application</li>

  <li> Mathematics</li>

  <li> Philosophy</li>

</UL>

<UL TYPE=”SQUARE”>

  <li> Geography</li>

  <li> Computer Application</li>

  <li> Mathematics</li>

  <li> Philosophy</li>

</UL>

<UL TYPE=”DISC”>

  <li> Geography</li>

  <li> Computer Application</li>

  <li> Mathematics</li>

  <li> Philosophy</li>

</UL>

<UL TYPE=”CIRCLE”>

  <li> Geography</li>

  <li> Computer Application</li>

  <li> Mathematics</li>

  <li> Philosophy</li>

</UL>

 

 <LI> tag (Container Tag): এই tag এর সাহায্যে Ordered or Unordered List এ List Item set করা যায়।

        

Example: <LI> GEOGRAPHY</LI>

 <ol>

       <li>Arts</li>

        <li>Science</li>

        </ol>

        <ol type="A">

            <li>Arts</li>

            <li>Science</li>

        </ol>

 

        <ul>

            <li>Arts</li>

            <li>Science</li>

        </ul>

 

        <ul type="square">

            <li>Arts</li>

            <li>Science</li>

        </ul>

 Nested List: A list under another list

 

Bankura Banga Vidyalay

 Streamwise Subject Details

1.       Arts

a.       Geography

b.      Computer Application

2.       Science

·         Physics

·         Chemistry

·         Computer Science

            Commerce

a.       Accountancy

b.      Business Math

c.       Costing

 

<html>

    <head>

        <title>

            Bankura Banga Vidyalay

        </title>

    </head>

    <body>

        <h1><u>Streamwise Subject Details</u></h1>

        <ol>

            <li>Arts</li>

            <ol type="a">

                <li>Geography</li>

                <li>Computer Application</li>

            </ol>

            <li>Science</li>

            <ul type="circle">

                <li>Physics</li>

                <li>Chemistry</li>

                <li>Computer Science</li>

            </ul>           

            <li>Commerce</li>

            <ol type="i">

                <li>Accuntancy</li>

                <li>Business Maths</li>

                <li>Costing</li>

            </ol>           

        </ol>

    </body>

</html>

Comments

Post a Comment