ওয়েব পেজে লিস্ট বা তালিকা
আকারে কোন কিছু প্রদর্শন করানোর জন্য লিস্ট ট্যাগ ব্যাবহার করা হয়ে থাকে।এইচটিএমএল
এ ৩ ধরনের লিস্ট আছে।
Unordered List Ordered List Description List
এর মধ্যে Unordered List প্রফেশনালি
ব্যাবহার করা হয়।এটা <ul> </ul> শুরু এবং শেষ। এর মাঝে <li> </li> ট্যাগ ব্যাবহার করে লিস্ট তৈরি করতে হয়।
<!DOCTYPE html>
<html>
<body>
<h2>Unordered List with Default Bullets</h2>
<ul>
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ul>
</body>
</html>
দেখুন উপরের কোড লিখে আপনি এইচটিএমএল ফাইল save করলে
নিচের ছবির মতো দেখাবে।এখানে বাই ডিফল্ট একটা গোল চিহ্ন প্রতিটি আইটেমের বাপাশে হয়ে
গেছে।
আপনি চাইলে এটা সিএসএস এর style ব্যাবহার করে গোল চিহ্ন সরিয়ে অন্য কিছুও দেয়া
যায়।
<!DOCTYPE html>
<html>
<body>
<h2>Unordered List with Circle Bullets</h2>
<ul
style="list-style-type:circle">
<li>Dhaka</li>
<li>Barisal</li>
<li>Chittagong</li>
</ul>
</body>
</html>
দেখুন এখানে list-style-type:circle ব্যাবহার করে লিস্টের বামে circle চিহ্ন দেয়া হয়েছে।
আবার আপনি চাইলে square দিয়ে দিতে পারেন। এর জন্য আপনাকে শুধু list-style-type:square লিখতে হবে।
<!DOCTYPE html>
<html>
<body>
<h2>Unordered List with Square Bullets</h2>
<ul
style="list-style-type:square">
<li>Dhaka</li>
<li>Barisal</li>
<li>Chittagong</li>
</ul>
</body>
</html>
উপরের কোড লিখলে নিচের ছবির মতো দেখাবে।
যদি আপনি চান যে লিস্টের বাম পাশে কোন কিছুই
থাকবেনা। শুধু লিস্ট আইটেমগুলো থাকবে তাহলে none ব্যাবহার করতে
হবে।নিচে একটা নমুনা দেখানো হল।
<!DOCTYPE html>
<html>
<body>
<h2>Unordered List without Bullets</h2>
<ul
style="list-style-type:none">
<li>Dhaka</li>
<li>Barisal</li>
<li>Chittagong</li>
</ul>
</body>
</html>
নোটপ্যাড
open করে উপরের code টুকু
লিখে file মেনু থেকে Save as এ ক্লিক করে File name: anything.html ,
Save as type : All files, দিয়ে save করে html ফাইলটি browser দিয়ে open করলে এভাবে
দেখাবে।
Ordered List
কখনও নাম্বার দিয়ে বা ছোট হাতের ও বড়
হাতের অক্ষর দিয়ে এমনকি রোমান সংখ্যা দিয়ে
লিস্ট তৈরি করার প্রয়োজন হয়।তখন Ordered List ব্যাবহার করা হয়। <ol></ol> এর ভিতরে li ট্যাগ দিয়ে Ordered List বানাতে হবে।যেমন
<!DOCTYPE html>
<html>
<body>
<h2>Ordered List with Numbers</h2>
<ol type="1">
<li>Dhaka</li>
<li>Barisal</li>
<li>Chittagong</li>
</ol>
</body>
</html>
যদি A,B,C,D ব্যাবহার করতে চান তাহলে
<!DOCTYPE html>
<html>
<body>
<h2>Ordered List with Letters</h2>
<ol
type="A">
<li>Dhaka</li>
<li>Barisal</li>
<li>Chittagong</li>
</ol>
</body>
</html>
ছোট হাতের a,b,c,d এর জন্য
<!DOCTYPE html>
<html>
<body>
<h2>Ordered List with Lowercase Letters</h2>
<ol
type="a">
<li>Dhaka</li>
<li>Barisal</li>
<li>Chittagong</li>
</ol>
</body>
</html>
আপনি চাইলে একই ভাবে রোমান সংখ্যাও ব্যাবহার
করতে পারবেন।শুধু type এর জায়গাতে
রোমান ছোট বা বড় সংখ্যা বসিয়ে দিবেন।
<!DOCTYPE html>
<html>
<body>
<h2>Ordered List with Roman Numbers</h2>
<ol
type="I">
<li>Dhaka</li>
<li>Barisal</li>
<li>Chittagong</li>
</ol>
</body>
</html>
ol এলিমেন্টে start নামে একটা এট্রিবিউট ব্যবহার করে কত থেকে শুরু হবে এটা ঠিক করে দেয়া যায় যেমন একটি লিস্ট যদি ১২ থেকে দেখাতে চান
তাহলে
<!DOCTYPE html>
<html>
<body>
<ol
start="12">
<li>Dhaka</li>
<li>Barisal</li>
<li>Chittagong</li>
</ol>
</body>
</html>
আবার li তে value নামের একটা এট্রিবিউট ব্যবহার করে যেকোন
আইটেমের নাম্বার পরিবর্তন করে দেয়া যায় যেমন
<!DOCTYPE html>
<html>
<body>
<ol>
<li value="3">Dhaka</li>
<li value="6">Barisal</li>
<li value="9">MacBook Air</li>
</ol>
</body>
</html>
Description List
এই লিস্ট শুরু হয় <dl> দিয়ে আর শেষ হয় </dl> দিয়ে। <dl> </dl> এর মাঝে আবার কিছু ট্যাগ ব্যাবহার করে লিস্ট
তৈরি করা হয়ে থাকে।
<dt></dt> ট্যাগ ব্যাবহার করে নাম দেয়া হয় এবং <dd> </dd> ব্যাবহার করে বর্ণনা লেখা হয়।
<!DOCTYPE html>
<html>
<body>
<h2>A Description List</h2>
<dl>
<dt>Coffee</dt>
<dd>- black hot drink</dd>
<dt>Milk</dt>
<dd>- white cold drink</dd>
</dl>
</body>
</html>
কোন মন্তব্য নেই:
একটি মন্তব্য পোস্ট করুন