চতুর্থ অধ্যায় পাঠ-৮ অর্ডারড লিস্ট, আনঅর্ডারড লিস্ট ও ডেসক্রিপশন লিস্ট।

এই পাঠ শেষে যা যা শিখতে পারবে-

১। অর্ডারড লিস্ট (Ordered List) তৈরি করতে পারবে।
২। আনঅর্ডারড লিস্ট (Unordered List) তৈরি করতে পারবে।
৩। ডেসক্রিপশন লিস্ট (Description List) তৈরি করতে পারবে।

HTML লিস্ট : অনেকসময় ওয়েবপেইজের তথ্য লিস্ট আকারে অর্থাৎ আইটেমগুলোকে নাম্বারিং বা পয়েন্ট আকারে প্রকাশ করার প্রয়োজন হয়। তথ্য লিস্ট আকারে প্রদর্শনের জন্য HTML এ তিন ধরনের লিস্ট আছে। যথা-

১। অর্ডারড লিস্ট (Ordered List)
২। আনঅর্ডারড লিস্ট (Unordered List)
৩। ডেসক্রিপশন লিস্ট (Description List)

Ordered List: অর্ডারড লিস্টের আইটেমগুলো সাধারণত অর্ডারিং বা নাম্বারিং করা থাকে। অর্ডারড লিস্ট তৈরি করার জন্য <ol>…</ol> ট্যাগ এবং লিস্ট আইটেম তৈরি করার জন্য <li>…<li> ট্যাগ ব্যবহার করা হয়। অর্ডার এর প্রকৃতি কেমন হবে তা <ol>…</ol> বা <li>…<li> ট্যাগের ওপেনিং ট্যাগে type অ্যাট্রিবিউট এর মাধ্যমে নির্ধারণ করা হয়। যদি কোন type উল্লেখ না থাকে তাহলে Numbered list তৈরি হয়।

অর্ডারড লিস্টে type অ্যাট্রিবিউট এর ব্যবহারঃ

type অ্যাট্রিবিউট	ব্যবহার
type=”1″	লিস্টের অর্ডারড হবে 1,2,3,4….
type=”a”	লিস্টের অর্ডারড হবে a,b,c,d…..
type=”A”	লিস্টের অর্ডারড হবে A,B,C,D….
type=”i”	লিস্টের অর্ডারড হবে i,ii,iii,iv….
type=”I”	লিস্টের অর্ডারড হবে I,II,III,IV….

নিচের অর্ডারড লিস্টগুলো তৈরির জন্য HTML কোডটি দেখ-

অর্ডারড লিস্টের ব্যবহার

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

31

32

33

34

35

36

37

38

39

40

41

42

43

<html>

 <body>

  <h4>Numbered list:</h4>

  <ol>

      <li>Physics</li>

      <li>Chemistry</li>

      <li>Bangla</li>

      <li>English</li>

  </ol> 

  <h4>Letters list With start attribute:</h4>

  <ol type="A" start="3">

      <li>Physics</li>

      <li>Chemistry</li>

      <li>Bangla</li>

      <li>English</li>

  </ol> 

  <h4>Lowercase letters list:</h4>

  <ol type="a">

      <li>Physics</li>

      <li>Chemistry</li>

      <li>Bangla</li>

      <li>English</li>

  </ol>  

  <h4>Roman numbers list:</h4>

  <ol type="I">

      <li>Physics</li>

      <li>Chemistry</li>

      <li>Bangla</li>

      <li>English</li>

  </ol>  

  <h4>Lowercase Roman numbers list:</h4>

  <ol type="i">

      <li>Physics</li>

      <li>Chemistry</li>

      <li>Bangla</li>

      <li>English</li>

  </ol>  

 </body>

</html>

অর্ডারিং বা নাম্বারিং কত থেকে শুরু হবে তা <ol>…</ol> ট্যাগের ওপেনিং ট্যাগে start অ্যাট্রিবিউট এর মাধ্যমে নির্ধারণ করা হয়। যেমন- start =”3″ হলে, অর্ডারিং বা নাম্বারিং শুরু হবে তৃতীয় অবস্থান থেকে।

নিচের অর্ডারড লিস্টগুলো তৈরির জন্য HTML কোডটি দেখ-

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

<html>

<body>

<ol start="3">

  <li>Coffee</li>

  <li>Tea</li>

  <li>Milk</li>

</ol>

<ol type="A" start="3">

  <li>Coffee</li>

  <li>Tea</li>

  <li>Milk</li>

</ol>

</body>

</html>

Unordered List: আনঅর্ডারড লিস্টের আইটেমগুলো সাধারণত বুলেট পয়েন্ট আকারে থাকে।আনঅর্ডারড লিস্ট তৈরি করার জন্য <ul>…</ul> ট্যাগ এবং লিস্ট আইটেম তৈরি করার জন্য <li>…<li> ট্যাগ ব্যবহার করা হয়। আনঅর্ডারড এর প্রকৃতি কেমন হবে তা <ul>…</ul> বা <li>…<li> ট্যাগের ওপেনিং ট্যাগে type অ্যাট্রিবিউট এর মাধ্যমে নির্ধারণ করা হয়। যদি কোন type উল্লেখ না থাকে তাহলে Disc bullets list তৈরি হয়।

আনঅর্ডারড লিস্টে type অ্যাট্রিবিউট এর ব্যবহারঃ

type অ্যাট্রিবিউট	ব্যবহার
type=”disc”	লিস্টের বুলেট পয়েন্ট
type=”circle”	লিস্টের বুলেট পয়েন্ট
type=”square”	লিস্টের বুলেট পয়েন্ট

নিচের আনঅর্ডারড লিস্টগুলো তৈরির জন্য HTML কোডটি দেখ-

Unordered List

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

<html>

 <body>

  <h4>Disc bullets list:</h4>

  <ul>

      <li>Physics</li>

      <li>Chemistry</li>

      <li>Bangla</li>

      <li>English</li>

  </ul>  

  <h4>Circle bullets list:</h4>

  <ul type="circle">

      <li>Physics</li>

      <li>Chemistry</li>

      <li>Bangla</li>

      <li>English</li>

  </ul>  

  <h4>Square bullets list:</h4>

  <ul type="square">

      <li>Physics</li>

      <li>Chemistry</li>

      <li>Bangla</li>

      <li>English</li>

  </ul>  

 </body>

</html>

Nested List: একটি লিস্টের মধ্যে যখন অন্য একটি লিস্ট তৈরি করা হয়, তখন তাকে নেস্টেড লিস্ট বলে। এক্ষেত্রে অর্ডারড লিস্টের মধ্যে আনঅর্ডারড লিস্ট থাকতে পারে। আবার অর্ডারড লিস্টের মধ্যে অর্ডারড লিস্ট এবং আনঅর্ডারড লিস্টের মধ্যে আনঅর্ডারড লিস্টও থাকতে পারে।

নিচের নেস্টেড লিস্টগুলো তৈরির জন্য HTML কোডটি দেখ-

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

<html>

     <body>  

          <ol>

      <li>Website Structure

  <ul type="square">

     <li>Linear</li>

     <li>Tree</li>

     <li>Web linked</li>

     <li>Hybrid</li>

  </ul>

       </li>    

       <li>Website Type

    <ol type="i">

        <li>Static</li>

        <li>Dynamic</li>

    </ol>

        </li> 

     </ol>   

      </body>

</html>

নিচের নেস্টেড লিস্টগুলো তৈরির জন্য HTML কোডটি দেখ-

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

<html>

   <body>

      <ol type="1" start="107">

         <li> English First Paper</li>

     <ul type="square">

  <li> True/False</li>

  <li> Fill in the gap</li>

     </ul>

         <li> English Second Paper</li>

     <ul type="circle">

  <li> Grammar Section</li>

      <ol type="a">

   <li>Article</li>

   <li>Narration</li>

   <li>Preposition</li>

      </ol>

  <li> Writing Section</li>

     </ul>

      </ol>

   </body>

</html>

Description List: ওয়েবপেইজে কোন টার্ম এবং তার বর্ণনা সহকারে কোন লিস্ট তৈরি করতে ডেসক্রিপশন লিস্ট ব্যবহৃত হয়। ডেসক্রিপশন লিস্ট তৈরি করার জন্য ডেসক্রিপশন লিস্ট (<dl> </dl>) ট্যাগ ব্যবহৃত হয়। ডেসক্রিপশন লিস্ট ট্যাগ এর মধ্যে টার্ম এবং ডেসক্রিপশন তৈরির জন্য যথাক্রমে <dt> </dt> এবং <dd></dd> ট্যাগ ব্যবহৃত হয়। <dt> এবং <dd> এদের ক্লোজিং ট্যাগ না দিলেও সমস্যা নেই।

নিচের ডেসক্রিপশন লিস্টগুলো তৈরির জন্য HTML কোডটি দেখ-