HTML তালিকা:ধাপে ধাপে নির্দেশিকা

এইচটিএমএল তালিকা ট্যাগটি একটি ওয়েবপেজে তালিকা তৈরি করতে ব্যবহৃত হয়। এটি তিন ধরনের তালিকা তৈরি করতে পারে:অর্ডার করা তালিকা, ক্রমহীন তালিকা এবং বর্ণনা তালিকা।

আপনি যখন একটি ওয়েব পৃষ্ঠা তৈরি করছেন, আপনি একটি ভাল ফর্ম্যাট করা তালিকা হিসাবে তথ্য উপস্থাপন করতে চাইতে পারেন। উদাহরণস্বরূপ, আপনার কাছে ছাত্রদের নামের একটি তালিকা থাকতে পারে যা আপনি একটি তালিকা আকারে প্রকাশ করতে চান, অথবা আপনার কাছে একাধিক ব্লগ পোস্ট থাকতে পারে যা আপনি একটি তালিকা হিসাবে ফর্ম্যাট করতে চান৷

HTML-এ , একটি অন্তর্নির্মিত ফাংশন আছে যা আপনাকে তালিকা তৈরি করতে দেয়। এই টিউটোরিয়ালে, আমরা HTML কভার করব তালিকার ধরন এবং কীভাবে সেগুলিকে একটি ওয়েব পেজে প্রয়োগ করতে হয়।

HTML তালিকার প্রকারগুলি

HTML এ তিন ধরনের তালিকা রয়েছে , এবং প্রত্যেকের একটি নির্দিষ্ট উদ্দেশ্য এবং কোড আছে। এগুলি নিম্নরূপ:

• Ordered list :একটি নির্দিষ্ট ক্রমে আইটেমগুলির একটি তালিকা তৈরি করতে ব্যবহৃত হয়৷
• Unordered list :কোনো অর্ডার ছাড়াই আইটেমগুলির একটি তালিকা তৈরি করতে ব্যবহৃত হয়৷
• Description list :আইটেম এবং বিবরণের একটি তালিকা তৈরি করতে ব্যবহৃত হয়৷

তালিকাগুলি ওয়েবপৃষ্ঠার যে কোনও অংশে প্রদর্শিত হতে পারে, আপনি সেগুলিকে পাঠ্যের ভিতরে রাখুন, লাইন বিরতির পরে বা এমনকি একটি nested list তৈরি করতে অন্য তালিকার ভিতরেও রাখুন। . চলুন আপনি HTML-এ এই তিন ধরনের তালিকা কীভাবে তৈরি করতে পারেন তা ভেঙে দেওয়া যাক .

এইচটিএমএল তালিকা:অর্ডার করা হয়েছে

Ordered list HTML-এ ব্যবহৃত হয় যখন তালিকার ক্রম প্রয়োজনীয়। উদাহরণস্বরূপ, যদি আপনার কাছে নির্দেশাবলীর একটি সিরিজ থাকে যা একটি নির্দিষ্ট ক্রমে ঘটতে হবে, আপনি একটি আদেশকৃত তালিকা ব্যবহার করতে চান। Ordered list সংখ্যাযুক্ত তালিকা।

Ordered list <ol> ব্যবহার করুন ট্যাগ, এবং তালিকার প্রতিটি আইটেম একটি <li> ব্যবহার করে ট্যাগ এখানে অর্ডার করা তালিকার একটি উদাহরণ:

<ol>
	<li>Mix 100g plain flour, 2 eggs, 300ml milk, and 1tbsp sunflower oil in a bowl.</li>
	<li>Leave the mix to rest for 30 minutes.</li>
	<li>Set a medium-size frying pan over a medium heat and wipe it with oiled kitchen paper.</li>
	<li>Pour batter mixture into the pan and cook on each side for one minute.</li>
</ol>

উপরের উদাহরণে, আমরা প্যানকেকের জন্য একটি মৌলিক রেসিপি তৈরি করেছি। এই তালিকার প্রতিটি ধাপ ক্রমানুসারে ঘটতে হবে, তাই আমরা একটি আদেশকৃত তালিকা বেছে নিয়েছি। এখানে আমাদের কোডের আউটপুট:

81% অংশগ্রহণকারী বলেছেন যে তারা বুটক্যাম্পে যোগদানের পরে তাদের প্রযুক্তিগত কাজের সম্ভাবনা সম্পর্কে আরও আত্মবিশ্বাসী বোধ করেছেন। আজই একটি বুটক্যাম্পের সাথে মিলিত হন৷

গড় বুটক্যাম্প গ্র্যাড একটি বুটক্যাম্প শুরু করা থেকে শুরু করে তাদের প্রথম চাকরি খোঁজা পর্যন্ত ক্যারিয়ারের পরিবর্তনে ছয় মাসেরও কম সময় ব্যয় করেছে।

Ordered list এক নম্বর দিয়ে শুরু করুন এবং আরোহী ক্রমে যান। যাইহোক, আপনি যদি চান যে আপনার তালিকা একটি ভিন্ন নম্বরে শুরু হোক, আপনি start ব্যবহার করতে পারেন এইরকম বৈশিষ্ট্য:

<ol start="5">
	<li>Move the pancake onto a plate (repeat steps 2-4 if you are making multiple pancakes).</li>
	<li>Spread butter on your pancakes, maple syrup, lemon, or any other topping.</li>
	<li>Enjoy your pancakes!</li>
</ol>

আমাদের নতুন তালিকা নিম্নরূপ প্রদর্শিত হয়:

এইচটিএমএল তালিকা:ক্রমবিহীন

আপনি যদি আইটেমগুলির একটি তালিকা তৈরি করতে চান যেখানে তালিকার আইটেমগুলির ক্রম গুরুত্বপূর্ণ নয়, আপনি HTML unordered ব্যবহার করতে পারেন তালিকা ট্যাগ। আমরা Unordered list তৈরি করতে পারি <ul> ব্যবহার করে ট্যাগ, এবং প্রতিটি তালিকা আইটেম, যেমন আমাদের অর্ডার করা তালিকায়, <li> দিয়ে শুরু হয় ট্যাগ।

এখানে একটি Unordered list এর একটি উদাহরণ :

<ul>
	<li>Alex</li>
	<li>Carol</li>
	<li>Lucy</li>
	<li>Shawn</li>
</ul>

আমাদের তালিকা নিম্নরূপ প্রদর্শিত হয়:

HTML তালিকা:বর্ণনা তালিকা

আপনি যখন একটি তালিকা লিখছেন, আপনি আপনার তালিকায় প্রতিটি আইটেমের একটি বিবরণ অন্তর্ভুক্ত করতে চাইতে পারেন। উদাহরণস্বরূপ, যদি আপনার কাছে ছাত্রদের নামের তালিকা থাকে, তাহলে আপনি তাদের গ্রেড যোগ করতে চাইতে পারেন, কিন্তু মূল তালিকা পাঠ্যের অংশ হিসেবে নয়৷

এখানেই Description list প্রবেশ করুন। Description list প্রতিটি উপাদানের বিবরণ সহ আইটেমগুলির তালিকা। Description list <dl> ব্যবহার করে তৈরি করা হয়েছে ট্যাগ, তালিকার প্রধান উপাদানগুলি <dt> ব্যবহার করে ট্যাগ, এবং সংজ্ঞা <dd> ব্যবহার করে ট্যাগ।

এখানে একটি Description list এর একটি উদাহরণ HTML-এ :

<dl>
	<dt>Economy Class</dt>
	<dd>Standard seats, no meal service.</dd>
	<dt>First Class</dt>
	<dd>Luxury seats, catered meal service.</dd>
</dl>

আমাদের কোড নিম্নলিখিত তালিকা প্রদান করে:

আপনি দেখতে পাচ্ছেন, বিমান শ্রেণীর নামগুলি একটি তালিকা বিন্যাসে উপস্থিত হয় এবং সেই নামের বিবরণ প্রতিটি আইটেমের নীচে প্রদর্শিত হয়। প্রতিটি বিবরণও ইন্ডেন্ট করা হয়, যা এটিকে তালিকা আইটেম থেকে আলাদা করে।

উপসংহার

HTML-এ তালিকা একটি অপরিহার্য ট্যাগ , যা ডেভেলপারদের একটি ভাল-ফরম্যাটেড পদ্ধতিতে তথ্য উপস্থাপন করতে দেয়। তালিকাগুলি সাধারণত ব্যবহারকারীদের পড়তে আরও আরামদায়ক হয় এবং তালিকাগুলি ব্যবহার করা ডেভেলপারদের তথ্য কাঠামোর উপর আরও নিয়ন্ত্রণ দেয়৷

এই টিউটোরিয়ালে, আমরা HTML-এ তালিকা ভেঙেছি , এবং কিভাবে তিন ধরনের HTML তৈরি করতে হয় তালিকা:ordered (li ol tags), unordered (ul li ট্যাগ), এবং description (dt dd ট্যাগ)। এখন আপনি HTML-এ তালিকা তৈরি করতে চলেছেন একজন পেশাদারের মতো!