চতুর্থ অধ্যায় লেকচার-০৮ : HTML লিস্ট তৈরি।

HTML লিস্ট

ওয়েবপেজকে সুন্দর ও দৃষ্টিনন্দনভাবে উপস্থাপনের জন্য লেখার অনেক আইটেমকে সংখ্যা, অক্ষর বা প্রতিক দিয়ে তালিকা আকারে প্রকাশ করাকে HTML লিস্ট বলে।

HTML এ সাধারণত ৪ ধরনের লিস্ট ব্যবহৃত হয়।
১. Ordered List বা ক্রমিকযুক্ত লিস্ট
২. Unordered List বা ক্রমিকবিহীন লিস্ট
৩. Description/Definition List বা বর্ণনামূলক লিস্ট
৪. Nested List (নেস্টেড লিস্ট)

 

Ordered List বা ক্রমিকযুক্ত লিস্ট :

কোন ওয়েবপেজের লিস্ট আইটেমগুলো সংখ্যা/অক্ষরের মাধ্যমে চিহ্নিত করাকে Ordered List বলে। লিস্টের প্রতিটি আইটেমকে একটি নম্বর দিয়ে প্রকাশের জন্য এ ধরনের লিস্ট ব্যবহার করা হয়। Ordered List বিভিন্ন ধরনের হয়ে থাকে, নিচে বিস্তারিত উদাহরণসহ দেখানো হলো-

Ordered List তৈরির ট্যাগ ও অ্যাট্রিবিউটস :

• Ordered List তৈরিতে < ol > …… < /ol > ট্যাগ ব্যবহার করা হয়।
• লিস্টের প্রতিটি আইটেম এর জন্য < li > ….. < /li > ট্যাগ ব্যবহার করা হয়।
• < ol > ট্যাগে ব্যবহৃত অ্যাট্রিবিউটস হলো- ১. type=”   ”    ২. start=”  “

Ordered List চেনার উপায় :

• সাধারণত কোন  তালিকার আইটেমগুলো যদি ক্রমিক আকারে সাজানো থাকে তাহলে সেটি  Ordered List
• তালিকার আইটেমগুলো 1 , 2, 3, 4, 5 ….. অর্ডারে সাজানো থাকলে।
• তালিকার আইটেমগুলো A, B, C, D, E ….. অর্ডারে সাজানো থাকলে।
• তালিকার আইটেমগুলো a, b, c, d, e ….. অর্ডারে সাজানো থাকলে।
• তালিকার আইটেমগুলো i, ii, iii, iv, v ….. অর্ডারে সাজানো থাকলে।
• তালিকার আইটেমগুলো I, II, III, IV, V ….. অর্ডারে সাজানো থাকলে।

 

বিভিন্ন ধরনের Ordered List এর ব্যবহার :
উদাহরণ-০১:

HTML Code:

< h4 > Our Students List: < /h4 >
< ol type=”1″ >
< li > Hasan < /li >
< li > Rahim < /li >
< li > Karim < /li >
< li > Abir < /li >
< /ol >

Output:

Our Students List:

1. Hasan
2. Rahim
3. Karim
4. Abir

Note : উদাহরণ-০১ এ type অ্যাট্রিবিউট ব্যবহার না করলেও হবে কারন অর্ডার লিস্টের ডিফল্ট আইটেম হলো-1,2,3…..
তবুও মনে রাখার সুবিধার্থে আমরা সকল লিস্টে type অ্যাট্রিবিউট ব্যবহার করবো। type এর ভ্যালু 1,A,a,i,I ব্যবহৃত হবে।

 

উদাহরণ-০২:
HTML Code:

< h4 > Our Students List: < /h4 >
< ol type=”A” >
< li > Hasan < /li >
< li > Rahim < /li >
< li > Karim < /li >
< li > Abir < /li >
< /ol >

Output:

Our Students List:

1. Hasan
2. Rahim
3. Karim
4. Abir

Note : type এর ভ্যালু A ব্যবহার করায় A,B,C…….দিয়ে তালিকাটি প্রদর্শিত হয়েছে।

 

উদাহরণ-০৩:
HTML Code:

< h4 > Our Students List: < /h4 >
< ol type=”1″ start=”4″ >
< li > Hasan < /li >
< li > Rahim < /li >
< li > Karim < /li >
< li > Abir < /li >
< /ol >

Output:

Our Students List:

4. Hasan
5. Rahim
6. Karim
7. Abir

Note : type এর ভ্যালু 1 ব্যবহার করায় 1,2,3……. আইটেম দিয়ে তালিকাটি প্রদর্শিত হয়েছে তবে start অ্যাট্রিবিউট ব্যবহার এবং তার ভ্যালু 4 দেওয়ায় সিরিয়ালটা 4 থেকে শুরু হয়েছে ।

 

উদাহরণ-০৪:
HTML Code:

< h4 > Our Students List: < /h4 >
< ol type=”a” start=”7″ >
< li > Hasan < /li >
< li > Rahim < /li >
< li > Karim < /li >
< li > Abir < /li >
< /ol >

Output:

Our Students List:

7. Hasan
8. Rahim
9. Karim
10. Abir

Note : type এর ভ্যালু a ব্যবহার করায় a,b,c……. আইটেম দিয়ে তালিকাটি প্রদর্শিত হয়েছে তবে start অ্যাট্রিবিউট ব্যবহার এবং তার ভ্যালু 7 দেওয়ায় সিরিয়ালটা 7 নং লেটার g থেকে শুরু হয়েছে ।

 

Unordered List বা ক্রমিকবিহীন লিস্ট :

কোন ওয়েবপেজের লিস্ট আইটেমগুলো বুলেট বা বিভিন্ন প্রতিকের মাধ্যমে চিহ্নিত করাকে Unordered List বলে। Unordered List বিভিন্ন ধরনের হয়ে থাকে, নিচে বিস্তারিত উদাহরণসহ দেখানো হলো-

Unordered List  তৈরির ট্যাগ ও অ্যাট্রিবিউটস :

• Unordered List  তৈরিতে < ul > …… < /ul > ট্যাগ ব্যবহার করা হয়।
• লিস্টের প্রতিটি আইটেম এর জন্য < li > ….. < /li > ট্যাগ ব্যবহার করা হয়।
• < ul > ট্যাগে ব্যবহৃত অ্যাট্রিবিউটস হলো- ১. type=”   “

Unordered List চেনার উপায় :
নিচের এই ধরনের প্রতিক ব্যবহৃত হলে-
১. Disc= • • • •
২. circle= ○ ○ ○ ○
৩. square= ■ ■ ■ ■

 

বিভিন্ন ধরনের Unordered List এর ব্যবহার :

উদাহরণ-০৫:
HTML Code:

< h4 > Our Students List: < /h4 >
< ul type=”disc” >
< li > Hasan < /li >
< li > Rahim < /li >
< li > Karim < /li >
< li > Abir < /li >
< /ul >

Output:

Our Students List:

• Hasan
• Rahim
• Karim
• Abir

Note : type এর ভ্যালু disc ব্যবহার করায় ডিস্ক( • ) প্রতিকে তালিকাটি প্রদর্শিত হয়েছে। মনে রাখতে হবে ডিস্ক প্রতিকটি Unordered List এর ডিফল্ট হিসেবে ব্যবহৃত হয়।

 

উদাহরণ-০৬:
HTML Code:

< h4 > Our Students List: < /h4 >
< ul type=”square” >
< li > Hasan < /li >
< li > Rahim < /li >
< li > Karim < /li >
< li > Abir < /li >
< /ul >

Output:

Our Students List:

• Hasan
• Rahim
• Karim
• Abir

Note : type এর ভ্যালু square ব্যবহার করায় স্কয়ার ( ■ ) প্রতিকে তালিকাটি প্রদর্শিত হয়েছে।

 

Description/Definition List বা বর্ণনামূলক লিস্ট :

যে লিস্টে কোন সংখ্যা, বর্ণ বা প্রতিক ব্যবহৃত হয় না এবং প্রতিটি আইটেমের একটি বর্ণনা থাকে তাকে Definition List বলে।

ব্যবহৃত ট্যাগসমূহ :

• লিস্টটি শুরু ও শেষ হয় < dl > (definition list) ট্যাগ দ্বারা।
• লিস্টের প্রতিটি আইটেম শুরু ও শেষ হয় < dt > (definition term) ট্যাগ দ্বারা।
• লিস্টের প্রতিটি বর্ণনা শুরু ও শেষ হয় < dd > (definition description) ট্যাগ দ্বারা।

উদাহরণ-০৭ :
HTML Code:

< h4 > This is Definition List: < /h4 >
< dl >
< dt > Hasan < /dt >
< dd > He is a good boy. < /dd >
< dt > Purnima < /dt >
< dd > She is a Beautiful girl. < /dd >
< dt > Sonia < /dt >
< dd > She is a small girl. < /dd >
< /dl >

Output:

This is Definition List:

Hasan

He is a good boy.

Purnima

She is a Beautiful girl.

Sonia

She is a small girl.

 

Note : Definition List এ কোন অ্যাট্রিবিউট ব্যবহৃত হয় না।

 

Nested List (নেস্টেড লিস্ট) :

ওয়েবপেজের একটি তালিকার মধ্যে আরেকটি তালিকা ব্যবহার করা হলো তাকে নেস্টেড লিস্ট বলে। সুতরাং নেস্টেড লিস্ট তৈরি করার জন্য উপরের লিস্টগুলি জানা থাকলেই যথেস্ট। এর জন্য অতিরিক্ত কোন ট্যাগ ও অ্যাট্রিবিউটস জানতে হবে না। এক্ষেত্রে Ordered List এর মধ্যে Unordered List থাকতে পারে, Unordered List এর মধ্যে Ordered List থাকতে পারে, Ordered List এর মধ্যে Ordered List থাকতে পারে বা Unordered List এর মধ্যে Unordered List থাকতে পারে।

উদাহরণ-০৮ :
HTML Code:

< h4 >This is Nested List:< /h4 >
< ol type=”A” >
< li >Hasan< /li >
< li >Rahim< /li >
< li >Karim
< ul type=”square” >
< li >Laptop< /li >
< li >Book
< ol type=”1″ >
< li >English< /li >
< li >Math< /li >
< /ol >
< /li >
< /ul >
< /li >
< li >Abir< /li >
< /ol >

Output:

This is Nested List:

1. Hasan
2. Rahim
3. Karim
   • Laptop
   • Book
     1. English
     2. Math
4. Abir

 

 

 

 

চতুর্থ অধ্যায় লেকচার-০৬: HTML টেক্সট ফরমেটিং ও প্যারাগ্রাফ ট্যাগের ব্যবহার।

---

Written by:

Habibur Rahman(Habib Sir)
Author at www.habibictcare.com
Email:habibbzm2018@gmail.com
Cell: +8801712-128532,+8801913865284