HTML Lists – গল্প আকারে নোট
একবার একটি ওয়েব ডিজাইনার ছোট্ট শহরে নতুন স্কুল ওয়েবসাইট তৈরি করার দায়িত্ব পেল। সে জানত ওয়েবপেজের তথ্য সুন্দরভাবে দেখানোর জন্য লিস্ট ব্যবহার করা খুব জরুরি। তাই সে HTML লিস্টের জগতে প্রবেশ করল।
১. অর্ডারড লিস্ট (Ordered List)
ওয়েব ডিজাইনার প্রথমে ভাবল, “আমার ওয়েবসাইটে শিক্ষার্থীদের বিষয় ক্রমানুসারে দেখাতে হবে।”
-
সে ব্যবহার করল
<ol>ট্যাগ। -
লিস্ট আইটেম তৈরি করল
<li>ট্যাগ দিয়ে। -
যদি চাই যে লিস্ট 3 থেকে শুরু হোক, সে ব্যবহার করল
start="3"। -
যদি চাই অক্ষর বা রোমান সংখ্যা, ব্যবহার করল
type="A"বাtype="i"।
উদাহরণঃ
২. আনঅর্ডারড লিস্ট (Unordered List)
পরে সে ভাবল, “কিছু বিষয়কে শুধু পয়েন্ট আকারে দেখাতে হবে।”
-
সে ব্যবহার করল
<ul>ট্যাগ। -
<li>দিয়ে তৈরি করল আইটেম। -
বুলেট পয়েন্ট পরিবর্তনের জন্য type বা style ব্যবহার করল।
উদাহরণঃ
৩. নেস্টেড লিস্ট (Nested List)
ওয়েব ডিজাইনার জানত, “একটি লিস্টের মধ্যে আরেকটি লিস্ট বসানো যায়।”
-
<ol>বা<ul>এর মধ্যে<ol>বা<ul>ব্যবহার করে নেস্টেড লিস্ট তৈরি হয়।
উদাহরণঃ
৪. ডেসক্রিপশন লিস্ট (Description List)
শেষে সে ভাবল, “কিছু বিষয় বর্ণনা সহ দেখাতে হবে।”
-
সে ব্যবহার করল
<dl>ট্যাগ। -
টার্মের জন্য
<dt>এবং বর্ণনার জন্য<dd>।
উদাহরণঃ
এভাবে, ডিজাইনারটি তার স্কুলের ওয়েবপেজ সুন্দরভাবে সাজাল।
HTML List Tags & Types – চার্ট
| List Type (লিস্টের প্রকার) | Start Tag (শুরু ট্যাগ) | List Item Tag (আইটেম ট্যাগ) | Description (বর্ণনা) | Attributes/Styles (অ্যাট্রিবিউট বা স্টাইল) |
|---|---|---|---|---|
| Ordered List (OL) | <ol> |
<li> |
ক্রমানুসারে তালিকা (নাম্বার বা অক্ষর বা রোমান সংখ্যা) | type (1, A, a, I, i), start (যে নাম্বার বা অক্ষর থেকে শুরু হবে) |
| Unordered List (UL) | <ul> |
<li> |
বুলেট পয়েন্ট তালিকা | type (disc, circle, square), style="list-style-type:disc/circle/square/none" |
| Description List (DL) | <dl> |
<dt> (Term), <dd> (Description) |
টার্ম এবং তার বর্ণনা সহ তালিকা | সাধারণত style অ্যাট্রিবিউট ব্যবহার করে ফন্ট বা মাপ পরিবর্তন করা যায় |
| Nested List | <ol> বা <ul> ভিতরে আরেকটি <ol> বা <ul> |
<li> |
একটি লিস্টের মধ্যে অন্য লিস্ট বসানো | মিশ্র লিস্টের ক্ষেত্রে parent লিস্টের type/style ও child লিস্টের type/style আলাদা হতে পারে |
Quick Tip:
-
Ordered List → নাম্বার বা অক্ষর ক্রমানুসারে
-
Unordered List → বুলেট পয়েন্ট
-
Description List → টার্ম + বর্ণনা
-
Nested List → লিস্টের ভিতরে লিস্ট
20টি MCQ প্রশ্ন (উত্তর ও অপশনসহ)
-
HTML-এ লিস্ট কত প্রকার?
ক) ২ খ) ৩ গ) ৪ ঘ) ৫
উত্তর: খ) ৩ -
অর্ডারড লিস্ট তৈরি করতে কোন ট্যাগ ব্যবহার হয়?
ক)<ul>খ)<ol>গ)<li>ঘ)<dl>
উত্তর: খ)<ol> -
আনঅর্ডারড লিস্টের জন্য কোন ট্যাগ?
ক)<ul>খ)<ol>গ)<li>ঘ)<dl>
উত্তর: ক)<ul> -
লিস্ট আইটেমের জন্য কোন ট্যাগ?
ক)<li>খ)<ol>গ)<ul>ঘ)<dl>
উত্তর: ক)<li> -
অর্ডারড লিস্টে নাম্বারিং শুরু করতে কোন অ্যাট্রিবিউট?
ক) start খ) type গ) style ঘ) number
উত্তর: ক) start -
অর্ডারড লিস্টে অক্ষর ব্যবহার করতে কোন অ্যাট্রিবিউট?
ক) type=”A” খ) start=”1″ গ) style=”disc” ঘ) list-style-type
উত্তর: ক) type=”A” -
আনঅর্ডারড লিস্টে বুলেট পরিবর্তন করতে কোন অ্যাট্রিবিউট?
ক) type বা style খ) start গ) value ঘ) font
উত্তর: ক) type বা style -
নেস্টেড লিস্ট কী?
ক) লিস্টের ভিতরে আরেকটি লিস্ট খ) ডেসক্রিপশন লিস্ট গ) অর্ডারড লিস্ট ঘ) আনঅর্ডারড লিস্ট
উত্তর: ক) লিস্টের ভিতরে আরেকটি লিস্ট -
ডেসক্রিপশন লিস্টের টার্মের ট্যাগ?
ক)<dt>খ)<dd>গ)<li>ঘ)<ol>
উত্তর: ক)<dt> -
ডেসক্রিপশন লিস্টের বর্ণনার ট্যাগ?
ক)<dt>খ)<dd>গ)<li>ঘ)<ul>
উত্তর: খ)<dd> -
<ul>এর ডিফল্ট বুলেট?
ক) disc খ) circle গ) square ঘ) none
উত্তর: ক) disc -
<ol type="i">কোন লিস্ট তৈরি করে?
ক) রোমান সংখ্যা খ) অক্ষর গ) নাম্বার ঘ) বুলেট
উত্তর: ক) রোমান সংখ্যা -
<ol start="5">মানে?
ক) নাম্বার 5 থেকে শুরু হবে খ) নাম্বার 1 থেকে শুরু হবে গ) 0 থেকে শুরু ঘ) সংখ্যা অদৃশ্য
উত্তর: ক) নাম্বার 5 থেকে শুরু হবে -
নেস্টেড লিস্টে
<ul>কোথায় বসানো হয়?
ক)<li>এর ভিতরে খ)<ol>এর বাইরে গ)<dl>এর ভিতরে ঘ)<ul>এর বাইরে
উত্তর: ক)<li>এর ভিতরে -
<dl>লিস্টের উদ্দেশ্য?
ক) টার্ম এবং বর্ণনা খ) নাম্বার লিস্ট গ) বুলেট লিস্ট ঘ) ফটো গ্যালারি
উত্তর: ক) টার্ম এবং বর্ণনা -
<li>ট্যাগ কোন লিস্টে ব্যবহার করা যায়?
ক)<ol>ও<ul>খ)<dl>গ)<dt>ঘ)<dd>
উত্তর: ক)<ol>ও<ul> -
<ul style="list-style-type:square;">কী দেখাবে?
ক) স্কয়ার বুলেট খ) ডিফল্ট disc গ) circle বুলেট ঘ) নাম্বার
উত্তর: ক) স্কয়ার বুলেট -
<ol type="A">লিস্টের প্রথম আইটেম কোনটি হবে যদি start=”1″?
ক) A খ) B গ) C ঘ) D
উত্তর: ক) A -
<dl>এ<dt>না দিলে কী হয়?
ক) লিস্ট চলবে না খ) সমস্যা হয় না গ) শুধুমাত্র বুলেট দেখাবে ঘ) ভিজুয়াল ত্রুটি
উত্তর: খ) সমস্যা হয় না -
নেস্টেড লিস্টের সুবিধা?
ক) তথ্য শ্রেণীবদ্ধ খ) লিস্ট অদৃশ্য গ) ছবি প্রদর্শন ঘ) টেক্সট ফন্ট পরিবর্তন
উত্তর: ক) তথ্য শ্রেণীবদ্ধজ্ঞানমূলক প্রশ্ন (Knowledge-based Questions)
-
প্রশ্ন: অর্ডারড লিস্ট তৈরি করতে কোন ট্যাগ ব্যবহার করা হয়?
উত্তর:<ol> -
প্রশ্ন: আনঅর্ডারড লিস্টের লিস্ট আইটেম কোন ট্যাগ দিয়ে লেখা হয়?
উত্তর:<li> -
প্রশ্ন: ডেসক্রিপশন লিস্টে টার্ম এবং বর্ণনা প্রদর্শনের জন্য কোন ট্যাগ ব্যবহার করা হয়?
উত্তর:<dt>এবং<dd> -
প্রশ্ন: অর্ডারড লিস্টে নাম্বার বা অক্ষর ক্রম নির্ধারণ করতে কোন অ্যাট্রিবিউট ব্যবহার করা হয়?
উত্তর:typeএবংstart -
প্রশ্ন: লিস্টের ভিতরে আরেকটি লিস্ট তৈরি করলে তাকে কী বলা হয়?
উত্তর: Nested List
অনুধাবনমূলক প্রশ্ন (Understanding-based Questions)
-
প্রশ্ন:
<ul type="circle">ব্যবহার করলে লিস্টে কীভাবে বুলেট দেখাবে?
উত্তর: বুলেট গোলাকার (circle) আকারে প্রদর্শিত হবে। -
প্রশ্ন: যদি
<ol start="3">ব্যবহার করা হয়, তাহলে লিস্টের প্রথম আইটেমের নাম্বার কী হবে?
উত্তর: 3 -
প্রশ্ন: কোন লিস্টে টার্মের সঙ্গে তার বর্ণনা প্রদর্শন করতে হলে কোন লিস্ট প্রকার ব্যবহার করতে হবে?
উত্তর: Description List (<dl>). -
প্রশ্ন: Nested List-এর উদাহরণ দিন।
উত্তর:<ol>এর মধ্যে<ul>বা<ul>এর মধ্যে<ol>ব্যবহার করা। -
প্রশ্ন:
<ul style="list-style-type:square;">ব্যবহার করলে কী ধরনের বুলেট তৈরি হবে?
উত্তর: বুলেট স্কয়ার (square) আকারে দেখাবে।
-