হেলো টেকটিউনস কমিউনিটির বন্ধুরা! আপনারা সবাই কেমন আছেন আশাকরি ভাল আছেন। এইচটিএমএল এর ৯ম পর্ব নিয়ে আপনাদের সামনে হাজির হলাম। আমরা আজকের এই পর্বে লিস্ট ট্যাগ নিয়ে আলোচনা করব। আশাকরি এটা সবার অনেক উপকারে লাগবে এবং ভালও লাগবে। চলুন তাহলে শুরু করা যাক।
অনেক সময় আমাদের ডকুমেন্টে বিশেষ কিছু বিষয় কে লিস্ট বা তালিকা আকারে উপস্থাপনের প্রয়োজন হয়। যেমন বাজারে গেলে বাজারের তালিকা, বই কিনতে গেলে বইয়ের তালিকা, রেস্টুরেন্টে খাবারের মেনু বা তালিকা, কাজ করার জন্য যন্ত্রপাতির তালিকাসহ বিভিন্ন বিষয়ে কাজ করার জন্য বিভিন্ন রকম জিনিষপত্রের তালিকা করার প্রয়োজন হয়। আবার আপনি যদি কোন ব্যবহারিক কাজ করেন তবে সেই কাজের ধাপ সমূহের ধারাবাহিক বর্ণনা এবং ব্যবহৃত যন্ত্রপাতির তালিকা প্রস্তুত করার প্রয়োজন হয়। এবং কোন বিষয়ে ধারাবাহিক বর্ণনার বিশেষ অংশ গুলোকে বুলেট পয়েন্ট দ্বারা চিহ্নিত করার প্রয়োজন হয়।
এই সকল ধরনের লিস্ট জাতীয় কাজ করার জন্য মাইক্রোসফট ওয়ার্ড দিয়ে সহজেই নাম্বারিং এবং বুলেট পয়েন্ট আকারে উপস্থাপন করা যায়। কিন্তু এইচটিএমএল ডকুমেন্টে এই রকম লিস্ট বা তালিকা প্রস্তুত করার জন্য লিস্ট ট্যাগ আছে। সমস্ত প্রকার লিস্ট ট্যাগ নিয়ে ধাপে ধাপে আমরা আলোচনা করব।
লিস্ট ট্যাগ তিন প্রকারঃ
১. Order List
২. Unorder List
৩. Definition List
কোন কিছু কে নাম্বারিং বা সিরিয়ালই তালিকা করার জন্য অর্ডার লিস্ট ব্যবহার করা হয়। যেমন 1, 2, 3, a, b, c, A, B, C, i, ii, iii, I, II, III এভাবে সিরিয়াল মেইনটেইন করে লিস্ট তৈরি করার প্রয়োজন হলে অর্ডার লিস্ট ব্যবহার করা হয়। অর্ডার লিস্ট কে আবার Numbering এবং Lettered লিস্টও বলে। অর্ডার লিস্টের বেসিক সিনট্যাক্স বা ফরম্যাট হল: <ol> <li> …. </li> </ol>। অর্ডার লিস্ট ব্যবহার করে এইচটিএমএল কোড এবং উক্ত কোডের জন্য ব্রাউজারে কেমন আউটপুট দেখা যায় তার স্ক্রিনশট নিম্নে দেওয়া হল।
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>Order List</title> </head> <body> <h1>Use of "Order" List Tag</h1> <ol> <li>Book</li> <li>Pen</li> <li>Paper</li> <li>Eraser</li> <li>Bag</li> </ol> <hr> </body> </html>
অর্ডার লিস্ট ব্যবহারের ক্ষেত্রে সিরিয়াল কোন টাইপের হবে বা নাম্বারিং কোন সংখ্যার সিরিয়াল থেকে শুরু হবে এসব পূর্বে থেকেই সিলেক্ট করে দেওয়া যায়। এই কাজের জন্য অর্ডার লিস্টে start এবং type নামের এট্রিবিউট ব্যবহার করতে হয়। উপরের কোডে ডিফল্ট ভাবে 1, 2, 3 এভাবে সিরিয়াল শুরু হয়েছে কারণ এতে কোন এট্রিবিউট ব্যবহার করা হয় নি। নিচে start and type Attribute সহ অর্ডার লিস্ট এর কোড এবং ব্রাউজারের আউটপুটের স্ক্রিনশট দেওয়া হয়েছে। উক্ত কোডে start=”4”এবং type=”a” এভাবে এট্রিবিউট ভ্যালু সেট করা হয়েছে। এতে ডিফল্ট ভাবে 1, 2, 3 সিরিয়ালের বদলে a, b, c অক্ষর দিয়ে সিরিয়াল তৈরি হবে এবং ইংরেজি অক্ষরের 4 নাম্বার অক্ষর d থেকে সিরিয়াল শুরু হবে। যদি আমরা type=”Number” এবং start=”4” এভাবে ভ্যালু সেট করে দিতাম তাহলে সিরিয়াল টাইপ হত 1, 2, 3 এভাবে সংখ্যা দ্বারা এবং সিরিয়াল শুরু হত 4 থেকে। 4 এর জায়গাই যে কোন সংখ্যা কে ভ্যালু হিসাবে সেট করে দিলে সেই সংখ্যা থেকেই সিরিয়াল শুরু হত। কোডে যে ভাবে start এবং type Attribute এর ভ্যালু সেট করে দেওয়া হয়েছে সেটা ভাল ভাবে খেয়াল করে দেখুন এবং ব্রাউজারের আউটপুট ভাল ভাবে মিলিয়ে দেখুন আশাকরি সহজেই বুঝতে পারবেন অর্ডার লিস্টের এট্রিবিউট কিভাবে কাজ করে।
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>Order List</title> </head> <body> <h3>Use of "Order" List Tag with "start & type" Attribute</h3> <ol type="a" start="4"> <li>Book</li> <li>Pen</li> <li>Paper</li> <li>Eraser</li> <li>Bag</li> </ol> <hr> </body> </html>
এমন অনেক লিস্ট তৈরি করা লাগে যে গুলোতে সিরিয়াল মেইনটেইন করা লাগে না তার বদলে যে কোন স্টাইলের বুলেট পয়েন্ট ব্যবহার করলেই চলে। সিরিয়াল মেইনটেইন না করে শুধুমাত্র বুলেট পয়েন্ট ব্যবহার করে যে লিস্ট তৈরি করা হয় সেই লিস্ট কে আন-অর্ডার লিস্ট বলে। এই আন-অর্ডার লিস্ট কে আবার বুলেটেড (Bulleted) লিস্টও বলা হয়। কারণ এই টাইপের লিস্টে বুলেট পয়েন্ট ব্যবহার করা হয়। এই আন-অর্ডার লিস্ট ট্যাগের বেসিক ফরম্যাট হল: <ul> <li> …. </li> </ul>। আন-অর্ডার লিস্ট ব্যবহার করে এইচটিএমএল কোড এবং উক্ত কোডের জন্য ব্রাউজারে কেমন আউটপুট দেখা যায় তার স্ক্রিনশট নিচে দেওয়া হল।
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>Order List</title> </head> <body> <h1>Use of "UnOrder" List Tag</h1> <ul> <li>Book</li> <li>Pen</li> <li>Paper</li> <li>Eraser</li> <li>Bag</li> </ul> <hr> </body> </html>
যদি লিস্ট তৈরি করার পাশাপাশি প্রত্যেকটা লিস্টের ডেসক্রিপশন বা বর্ণনা দেওয়ার প্রয়োজন হয় তাহলে Definition List ব্যবহার করতে হয়। এই লিস্ট ট্যাগের সুবিধা হল তালিকা প্রস্তুতের পাশাপাশি প্রত্যেকটা আইটেম রিলেটেড ছোট্ট করে বর্ণনা দেওয়ার সিস্টেম আছে। এর আরেকটি নাম গ্লোসারি লিস্ট কারণ এতে প্রোডাক্ট এর লিস্ট করার পাশাপাশি প্রোডাক্টের বর্ণনা দেওয়ার কাজও করা যায়।
Definition List এর দুই টি অংশ আছেঃ
১. Term বা লিস্ট আইটেম। একে dt দ্বারা প্রকাশ করা হয়।
২. Term Description বা Definition Description। একে dd দ্বারা প্রকাশ করা হয়।
<dl> <dt>Term_Name <dd>Description</dd> </dt> </dl>
আজকের পর্বে আমরা লিস্ট ট্যাগ নিয়ে বিস্তারিত আলোচনা করলাম। ওয়েব ডিজাইনের জন্য লিস্ট ট্যাগ খুবই কাজে লাগে। ওয়েব পেজের মধ্যে যেখানে কোন কিছুকে লিস্ট আকারে দেখাতে হয় সেখানেই লিস্ট ট্যাগ ব্যবহার করা যায়। আবার আমরা যদি ন্যাভিগেশন মেনু তৈরি করতে চাই তাহলে ইচ্ছা করলে সেখানেও লিস্ট ট্যাগ ব্যবহার করতে পারি। এভাবে যে কোন জায়গায় লিস্ট ট্যাগ উপযুক্ত ফরম্যাটে ব্যবহার করতে পারি অনায়াসে। যখন আমরা ওয়েব ডিজাইন শিখব তখন লিস্ট ট্যাগ কত ভাবে ব্যবহার করা যায় তখন বুঝব। আজ এখানেই শেষ করলাম সবাই ভাল থাকবেন দেখা হবে আগামী পর্বে। আল্লাহ হাফেজ।
আমি মো সাদ্দাম হোসাইন। Student, ইনস্টিটিউশন অফ ইঞ্জিনিয়ার্স, বাংলাদেশ (আইইবি), ঢাকা। বিশ্বের সর্ববৃহৎ বিজ্ঞান ও প্রযুক্তির সৌশল নেটওয়ার্ক - টেকটিউনস এ আমি 1 বছর 12 মাস যাবৎ যুক্ত আছি। টেকটিউনস আমি এ পর্যন্ত 19 টি টিউন ও 5 টি টিউমেন্ট করেছি। টেকটিউনসে আমার 2 ফলোয়ার আছে এবং আমি টেকটিউনসে 1 টিউনারকে ফলো করি।
![jQuery for Web Design [পর্ব-০৪] :: jQuery এর FadeIn FadeOut মেথড জানবো ও ব্যবহার করে দেখব](https://dnc.techtunes.io/tDrive/tuner/2018/04/techtunes_fee81aa370998cccf57ea2d7dc08eaa8-368x207.jpg "jQuery for Web Design [পর্ব-০৪] :: jQuery এর FadeIn FadeOut মেথড জানবো ও ব্যবহার করে দেখব")
![খুব সহজে ওয়েব ডিজাইন – HTML [পর্ব-০১] :: HTML এবং ওয়েব সম্পর্কে প্রাথমিক ধারনা](https://dnc.techtunes.io/tDrive/tuner/2022/11/techtunes_aa386bbd8fb01f01c21a7e33f662bfda-368x207.png "খুব সহজে ওয়েব ডিজাইন – HTML [পর্ব-০১] :: HTML এবং ওয়েব সম্পর্কে প্রাথমিক ধারনা")
![খুব সহজে ওয়েব ডিজাইন – HTML [পর্ব-০৯] :: লিস্ট ট্যাগ এর ব্যবহার](https://dnc.techtunes.io/tDrive/tuner/2022/12/techtunes_1d2c9283d96faa2fec780f463701d0e9-368x207.png "খুব সহজে ওয়েব ডিজাইন – HTML [পর্ব-০৯] :: লিস্ট ট্যাগ এর ব্যবহার")