HTML লিস্ট ট্যাগ ওয়েব পেজে লিস্ট তৈরি করতে ব্যবহৃত হয়। এটি তিন প্রকার লিস্ট তৈরি করতে পারে: অর্ডার্ড লিস্ট, আনঅর্ডার্ড লিস্ট, এবং ডেসক্রিপশন লিস্ট।
যখন আপনি একটি ওয়েব পেজ তৈরি করেন, তখন আপনি তথ্যকে একটি সুন্দর ফরম্যাট করা লিস্ট আকারে উপস্থাপন করতে চাইতে পারেন। উদাহরণস্বরূপ, আপনার কাছে ছাত্রদের নামের একটি রোস্টার থাকতে পারে যা আপনি লিস্ট আকারে দেখাতে চান, অথবা ব্লগ পোস্টের একটি সিরিজ যা আপনি লিস্ট আকারে ফরম্যাট করতে চান।
HTML-এ লিস্ট তৈরি করার জন্য একটি বিল্ট-ইন ফাংশন রয়েছে। এই টিউটোরিয়ালে আমরা HTML লিস্টের প্রকার এবং সেগুলো ওয়েব পেজে কীভাবে ইমপ্লিমেন্ট করতে হয় তা আলোচনা করব।
HTML লিস্টের প্রকার
HTML-এ তিন প্রকার লিস্ট রয়েছে, এবং প্রতিটির নির্দিষ্ট উদ্দেশ্য এবং কোড রয়েছে। এগুলো নিচে দেওয়া হল:
অর্ডার্ড লিস্ট: নির্দিষ্ট ক্রমে আইটেমের লিস্ট তৈরি করতে ব্যবহৃত হয়।আনঅর্ডার্ড লিস্ট: কোনো নির্দিষ্ট ক্রম ছাড়াই আইটেমের লিস্ট তৈরি করতে ব্যবহৃত হয়।ডেসক্রিপশন লিস্ট: আইটেম এবং তাদের বিবরণের লিস্ট তৈরি করতে ব্যবহৃত হয়।
লিস্টগুলো ওয়েব পেজের যেকোনো অংশে দেখানো যেতে পারে—টেক্সটের ভিতরে, লাইন ব্রেকের পরে, অথবা অন্য একটি লিস্টের ভিতরে নেস্টেড লিস্ট তৈরি করতে। চলুন এই তিন প্রকার লিস্ট HTML-এ কীভাবে তৈরি করা যায় তা ভাঙন করি।
HTML লিস্ট: অর্ডার্ড
অর্ডার্ড লিস্ট HTML-এ তখন ব্যবহৃত হয় যখন লিস্টের ক্রম গুরুত্বপূর্ণ। উদাহরণস্বরূপ, যদি আপনার কাছে নির্দিষ্ট ক্রমে অনুসরণ করার নির্দেশাবলির সিরিজ থাকে, তবে আপনি একটি অর্ডার্ড লিস্ট ব্যবহার করবেন। অর্ডার্ড লিস্ট হল নম্বরযুক্ত লিস্ট।
অর্ডার্ড লিস্ট <ol> ট্যাগ ব্যবহার করে, এবং লিস্টের প্রতিটি আইটেম <li> ট্যাগ ব্যবহার করে। এখানে একটি অর্ডার্ড লিস্টের উদাহরণ:
<ol> <li>একটি বাউলে ১০০ গ্রাম ময়দা, ২ টি ডিম, ৩০০ মিলি দুধ, এবং ১ টেবিলস্পুন সূর্যমুখী তেল মিক্স করুন।</li> <li>মিশ্রণটি ৩০ মিনিট বিশ্রাম দিন।</li> <li>একটি মিডিয়াম সাইজের ফ্রাইং প্যান মিডিয়াম आँচে গরম করুন এবং তেল দেওয়া কিচেন পেপার দিয়ে পোছান।</li> <li>ব্যাটার মিশ্রণ প্যানে ঢালুন এবং প্রতিটি দিকেই ১ মিনিট পকান।</li> </ol>
উপরের উদাহরণে, আমরা প্যানকেকের একটি বেসিক রেসিপি তৈরি করেছি। এই লিস্টের প্রতিটি ধাপ ক্রমাগতভাবে অনুসরণ করতে হবে, তাই আমরা অর্ডার্ড লিস্ট বেছে নিয়েছি। আমাদের কোডের আউটপুট নিচে দেওয়া হল:
অর্ডার্ড লিস্ট ১ নম্বর থেকে শুরু होकर আরোহী ক্রমে বাড়ে। যাইহোক, যদি আপনি চান আপনার লিস্ট অন্য কোনো নম্বর থেকে শুরু হোক, তবে start অ্যাট্রিবিউট ব্যবহার করতে পারেন:
<ol start="5"> <li>প্যানকেকটি একটি প্লেটে সরান (বহু প্যানকেক বানালে ধাপ ২-৪ পুনরাবৃত্তি করুন)।</li> <li>প্যানকেকের ওপর মাখন, মেপল সিরাপ, লেবু, বা অন্য যেকোনো টপিং ছড়ান।</li> <li>আপনার প্যানকেক উপভোগ করুন!</li> </ol>
আমাদের নতুন লিস্ট নিচের মতো দেখাবে:
HTML লিস্ট: আনঅর্ডার্ড
যদি আপনি এমন একটি লিস্ট তৈরি করতে চান যেখানে আইটেমগুলোর ক্রম গুরুত্বপূর্ণ নয়, তবে আপনি HTML আনঅর্ডার্ড লিস্ট ট্যাগ ব্যবহার করতে পারেন। আমরা <ul> ট্যাগ ব্যবহার করে আনঅর্ডার্ড লিস্ট তৈরি করতে পারি, এবং প্রতিটি লিস্ট আইটেম অর্ডার্ড লিস্টের মতো <li> ট্যাগ দিয়ে শুরু হয়।
এখানে একটি আনঅর্ডার্ড লিস্ট উদাহরণ:
<ul> <li>আলেক্স</li> <li>কэрল</li> <li>লুসি</li> <li>শন</li> </ul>
আমাদের লিস্ট নিচের মতো দেখাবে:
HTML লিস্ট: ডেসক্রিপশন লিস্ট
যখন আপনি একটি লিস্ট লিখছেন, তখন আপনি আপনার লিস্টের প্রতিটি আইটেমের বিবরণ যোগ করতে চাইতে পারেন। উদাহরণস্বরূপ, যদি আপনার কাছে ছাত্রদের নামের একটি লিস্ট থাকে, তবে আপনি তাদের গ্রেড যোগ করতে চাইতে পারেন, কিন্তু মূল লিস্ট টেক্সটের অংশ হিসেবে নয়।
সেখানে ডেসক্রিপশন লিস্ট কাজে আসে। ডেসক্রিপশন লিস্ট হল আইটেম এবং প্রতিটি এলিমেন্টের বিবরণের লিস্ট। ডেসক্রিপশন লিস্ট <dl> ট্যাগ ব্যবহার করে তৈরি করা হয়, লিস্টের মূল এলিমেন্টগুলো <dt> ট্যাগ ব্যবহার করে, এবং ডেফিনিশনগুলো <dd> ট্যাগ ব্যবহার করে।
এখানে HTML-এ একটি ডেসক্রিপশন লিস্ট উদাহরণ:
<dl> <dt>ইকনোমি ক্লাস</dt> <dd>স্ট্যান্ডার্ড সীট, মীল সার্ভিস নেই।</dd> <dt>ফার্স্ট ক্লাস</dt> <dd>লাক্সারি সীট, ক্যাটার্ড মীল সার্ভিস।</dd> </dl>
আমাদের কোড নিচের লিস্ট রিটার্ন করে:
আপনি দেখতে পাচ্ছেন, বিমানের ক্লাসের নামগুলো লিস্ট ফরম্যাটে দেখাচ্ছে, এবং সেসব নামের বিবরণ প্রতিটি আইটেমের নিচে দেখাচ্ছে। প্রতিটি বিবরণ ইন্ডেন্টেডও আছে, যা এটিকে লিস্ট আইটেম থেকে আলাদা করে।
উপসংহার
লিস্ট HTML-এ একটি অপরিহার্য ট্যাগ, যা ডেভেলপারদের তথ্যকে সুন্দর ফরম্যাটে উপস্থাপন করতে দেয়। লিস্টগুলো ইউজারদের পড়তে সাধারণত সহজ, এবং লিস্ট ব্যবহার করলে ডেভেলপারদের তথ্যের কাঠামোর ওপর অধিক کنترل থাকে।
এই টিউটোরিয়ালে আমরা HTML-এ লিস্ট নিয়ে আলোচনা করেছি, এবং HTML-এ যেকোনো তিন প্রকার লিস্ট তৈরি করার পদ্ধতি: অর্ডার্ড (li ol ট্যাগ), আনঅর্ডার্ড (ul li ট্যাগ), এবং ডেসক্রিপশন (dt dd ট্যাগ)। এখন আপনি HTML-এ প্রোফেশনালের মতো লিস্ট তৈরি করতে পারবেন!
