চতুর্থ অধ্যায় পাঠ-৮ অর্ডারড লিস্ট, আনঅর্ডারড লিস্ট ও ডেসক্রিপশন লিস্ট।
এই পাঠ শেষে যা যা শিখতে পারবে-
- ১। অর্ডারড লিস্ট (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 কোডটি দেখ-
অর্ডারিং বা নাম্বারিং কত থেকে শুরু হবে তা <ol>…</ol> ট্যাগের ওপেনিং ট্যাগে start অ্যাট্রিবিউট এর মাধ্যমে নির্ধারণ করা হয়। যেমন- start =”3″ হলে, অর্ডারিং বা নাম্বারিং শুরু হবে তৃতীয় অবস্থান থেকে।
নিচের অর্ডারড লিস্টগুলো তৈরির জন্য 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 কোডটি দেখ-
Nested List: একটি লিস্টের মধ্যে যখন অন্য একটি লিস্ট তৈরি করা হয়, তখন তাকে নেস্টেড লিস্ট বলে। এক্ষেত্রে অর্ডারড লিস্টের মধ্যে আনঅর্ডারড লিস্ট থাকতে পারে। আবার অর্ডারড লিস্টের মধ্যে অর্ডারড লিস্ট এবং আনঅর্ডারড লিস্টের মধ্যে আনঅর্ডারড লিস্টও থাকতে পারে।
নিচের নেস্টেড লিস্টগুলো তৈরির জন্য HTML কোডটি দেখ-
নিচের নেস্টেড লিস্টগুলো তৈরির জন্য HTML কোডটি দেখ-
Description List: ওয়েবপেইজে কোন টার্ম এবং তার বর্ণনা সহকারে কোন লিস্ট তৈরি করতে ডেসক্রিপশন লিস্ট ব্যবহৃত হয়। ডেসক্রিপশন লিস্ট তৈরি করার জন্য ডেসক্রিপশন লিস্ট (<dl> </dl>) ট্যাগ ব্যবহৃত হয়। ডেসক্রিপশন লিস্ট ট্যাগ এর মধ্যে টার্ম এবং ডেসক্রিপশন তৈরির জন্য যথাক্রমে <dt> </dt> এবং <dd></dd> ট্যাগ ব্যবহৃত হয়। <dt> এবং <dd> এদের ক্লোজিং ট্যাগ না দিলেও সমস্যা নেই।
নিচের ডেসক্রিপশন লিস্টগুলো তৈরির জন্য HTML কোডটি দেখ-
পাঠ মূল্যায়ন-
সৃজনশীল প্রশ্নসমূহঃ
উদ্দীপকটি দেখ এবং প্রশ্নের উত্তর দাওঃ
গ। উদ্দীপকটি তোমার কলেজের ওয়েব সাইটের হোম পেজে প্রদর্শনের জন্য HTML কোড লিখ।
উদ্দীপকটি দেখ এবং প্রশ্নের উত্তর দাওঃ
গ। উদ্দীপকে উল্লিখিত লিস্টটি ওয়েবপেইজে দেখানোর HTML কোড লেখ।
উদ্দীপকটি পড় এবং প্রশ্নের উত্তর দাওঃ
“X” বিদ্যালয়ের কর্তৃপক্ষ একটি ওয়েবসাইট তৈরির কথা ভাবছে। যেখানে হোম পেইজে “Campus.jpg” নামক একটি ছবি এবং Information Technology, Physical Science এবং Biological Science শাখাগুলির ক্রমানুবরতী তালিকা এবং “Notice Board” নামক একটি লিংক থাকবে ।
গ। উদ্দীপকে উল্লিখিত হোম পেইজ তৈরির জন্য HTML কোড লিখ ।
উদ্দীপকটি দেখ এবং প্রশ্নের উত্তর দাওঃ
গ। উদ্দীপকের লিস্টটি ওয়েবপেইজে দেখানোর HTML কোড লেখ।
উদ্দীপকটি দেখ এবং প্রশ্নের উত্তর দাওঃ
- 1. Bangla
- 2. English
- 3.
ICT
গ। উদ্দীপকের লিস্টটি ওয়েবপেইজে দেখানোর HTML কোড লেখ।
উদ্দীপকটি দেখ এবং প্রশ্নের উত্তর দাওঃ
List of Subjects:
- c.Physics
- d.Chemistry
- e.Bangla
- f.English
গ। উদ্দীপকের লিস্টটি ওয়েবপেইজে দেখানোর HTML কোড লেখ।
বহুনির্বাচনি প্রশ্নসমূহঃ
১। HTML-এ লিস্ট কত প্রকার?
ক. ২ খ. ৩ গ. ৪ ঘ. ৫
২। অর্ডার লিস্ট তৈরি করতে চাইলে কোন ট্যাগ দিয়ে শুরু করতে হয়?
ক.<ul> খ.<ol> গ.<li> ঘ.<dl>
৩। আনঅর্ডার লিস্ট তৈরি করতে চাইলে কোন ট্যাগ দিয়ে শুরু করতে হয়?
ক.<ul> খ.<ol> গ.<li> ঘ.<dl>
৪। নিচের কোনটি লিস্ট এর অ্যাট্রিবিউট?
ক.type খ. src গ.href ঘ. face
৫। অর্ডার লিস্ট তৈরিতে ব্যবহৃত ট্যাগ-
i.<li> ii.<ol> iii.<ul>
নিচের কোনটি সঠিক?
ক.i ও ii খ.i ও iii গ.ii ও iii ঘ.i, ii ও iii
৬। লিস্ট তৈরিতে ব্যবহৃত ট্যাগ-
i.<li> ii.<ol> iii.<ul>
নিচের কোনটি সঠিক?
ক.i ও ii খ.i ও iii গ.ii ও iii ঘ.i, ii ও iii