HTML টিউটোরিয়াল: ৭ম পর্ব (HTML List ট্যাগ)

This entry is part 6 of 15 in the series ওয়েব ডিজাইন

লিস্ট বা তালিকা এইচটিএমএল এর একটি গুরুপ্তপূর্ণ ইলিমেন্ট। ধরুন, আপনি কোন প্রোডাক্ট এর তালিকা আপনার ওয়েব পেজে উল্লেখ করবেন। এখন প্রোডাক্ট গুলো প্রকাশের জন্য আপনার তালিকা ব্যবহার করতে হবে। তালিকাটি হলে পারে 1, 2, 3, 4 অথবা a, b, c, d অথবা i, ii, iii, iv অথবা আপনার পছন্দ মতো কোন ইমেজ ইত্যাদি। এই লিস্ট স্টাইল গুলো আপনি চাইলেই এইচটিএমএল লিস্ট ট্যাগ ইউজ করেই আপনার প্রোডাক্ট এর তালিকা পেজে প্রদর্শন করা তে পারেন। জেনে রাখতে হবে এইচটিএমএল এ লিস্ট ৩ প্রকার। যেমন: ১. Unordered list, ২. Ordered list এবং ৩. Defination list. ব্যবহার কম থাকার কারণে Defination list সাধারণ লিস্ট হিসেবে প্রকাশ পায় না।

HTML ডকুমেন্ট এ লিস্ট লিখার নিয়ম:

<html>
          <body>
  <h4> An Unordered list: </h4>
                            <ul>
<li> List item A</li>
<li> List item B</li>
<li> List item C</li>
</ul>
<body>
</html>

Note: উপরের কোডটি লক্ষ করুন। <h4> An Unordered list: </h4> এই Header 4 ট্যাগটি আমরা শুধু মাত্র টাইটেল হিসেবে ব্যবহার করেছি। লিস্ট ট্যাগ এর সাথে এর কোন সম্পৃক্ততা নাই। পরের থেকে নিচের এটি হল Udordered list style tag. এর এর মাঝে <li> </li> এম্বেডেড ট্যাগ ইলিমেন্ট গুলো হল আপনার লিস্ট এর কন্টেন্ট। মনে রাখবেন, আপনি Odered list লিখেন অথবা Unordred list আপনাকে <li> </li> এই লিস্ট ট্যাগ এর কন্টেন্ট দ্বারাই লিস্ট ইলিমেন্ট প্রদর্শন করাতে হবে।

এবার দেখুন আপনি যদি অর্ডারেড লিস্ট ইউজ করতে চান তবে কয়েক ধরনের অর্ডারেড লিস্ট স্টাইল পারবেন নিচের মত:

Ordered Lists:

Order list: 1, 2, 3 আকারে (এটা অর্ডারেড লিস্টে বাই ডিফল্টই পাবেন)

<h4> An Order list with number: </h4>
<ol>
<li> List item A</li>
<li> List item B</li>
<li> List item C</li>
</ol>

Letters list: বড় হাতের A, B, C আকারে। শুধু অর্ডারেড লিস্ট স্টাইল টাইপ এর স্টার্টিং ট্যাগে অ্যাট্রিবিউট type=”A” লিখে দিতে হবে নিচের মত:

<h4> Letters lists: <h4>
<ol type=”A”>
<li> List item A</li>
<li> List item B</li>
<li> List item C</li>
</ol>

Lower case letters list: ছোট হাতের a, b, c আকারে। শুধু অর্ডারেড লিস্ট স্টাইল টাইপ এর স্টার্টিং ট্যাগে অ্যাট্রিবিউট type=”a” লিখে দিতে হবে নিচের মত: মনে রাখবেন পার্থক্য শুধু বড় হাতের এর ছোট হাতের এ্যালফাবেট।

<h4> Lower case letters lists: <h4>
<ol type=”A”>
<li> List item A</li>
<li> List item B</li>
<li> List item C</li>
</ol>

Roman numbers list: বড় হাতের রোমান লেটার I, II, III, IV আকারে। শুধু অর্ডারেড লিস্ট স্টাইল টাইপ এর স্টার্টিং ট্যাগে অ্যাট্রিবিউট type=” I” লিখে দিতে হবে নিচের মত:

<h4> Roman number lists: <h4>
<ol type=”I”>
<li> List item A</li>
<li> List item B</li>
<li> List item C</li>
</ol>

Lower case Roman number list: ছোট হাতের রোমান লেটার I, ii, iii, iv আকারে। শুধু অর্ডারেড লিস্ট স্টাইল টাইপ এর স্টার্টিং ট্যাগে অ্যাট্রিবিউট type=”i” লিখে দিতে হবে নিচের মত: মনে রাখবেন পার্থক্য শুধু বড় হাতের এর ছোট হাতের এ্যালফাবেট।

<h4> Letters lists: <h4>
<ol type=”i”>
<li> List item A</li>
<li> List item B</li>
<li> List item C</li>
</ol>

এবার, উপরের কোড টুকুর আউটপুট ব্রাউজার এ প্রদর্শনের জন্য উইন্ডোজের Notepad অথবা Notepad++ সফটওয়্যারটি ওপেন করে কোডটুকু কপি-পেস্ট করুন। ফাইলের নাম দিন ollist.html বা আপনার পছন্দ মতো এবং Save as type নির্বাচন করুন .html। এবার Save করুন। নিচের মত দেখতে পারবেন…

Unordered lists:

Note: অর্ডারেড লিস্টের মতো Unordered list এর মতো করে অনুশীলন করুন:

Circle bullets lists: লিস্ট স্টাইলটি o (সার্কেল) এর মত চাইলে আন-অর্ডারেড লিস্ট স্টাইল টাইপ এর স্টার্টিং ট্যাগে অ্যাট্রিবিউট type=”circle” লিখে দিতে হবে নিচের মত

<h4> circle bullets lists: </h4>
<ul type=”circle”>
<li> List item A</li>
<li> List item B</li>
<li> List item C</li>
</ul>

Square bullets list: লিস্ট স্টাইলটি চতুর্ভুজ আকৃতির মত চাইলে আন-অর্ডারেড লিস্ট স্টাইল টাইপ এর স্টার্টিং ট্যাগে অ্যাট্রিবিউট type=”square” লিখে দিতে হবে নিচের মত

<h4> circle bullets lists: </h4>
<ul type=”square”>
<li> List item A</li>
<li> List item B</li>
<li> List item C</li>
</ul>

Disc bullets list: লিস্ট স্টাইলটি ডিস্ক আকৃতির মত চাইলে আন-অর্ডারেড লিস্ট স্টাইল টাইপ এর স্টার্টিং ট্যাগে অ্যাট্রিবিউট type=”disc” লিখে দিতে হবে নিচের মত

<h4> circle bullets lists: </h4>
<ul type=”disc”>
<li> List item A</li>
<li> List item B</li>
<li> List item C</li>
</ul>

নোটঃ Unordered List এ কাস্টম লিস্ট টাইপ নামে আরও একটি লিস্ট টাইপ আছে। যা বিভিন্ন ইমেজ এবং আইকন দিয়ে লিস্ট প্রকাশ করা যায়। এটি আমরা সিএসএস চ্যাপ্টারে দেখবো! 🙂

এবার, উপরের কোড টুকুর আউটপুট ব্রাউজার এ প্রদর্শনের জন্য উইন্ডোজের Notepad অথবা Notepad++ সফটওয়্যারটি ওপেন করে কোডটুকু কপি-পেস্ট করুন। ফাইলের নাম দিন ullist.html বা আপনার পছন্দ মতো এবং Save as type নির্বাচন করুন .html। এবার Save করুন। নিচের মত দেখতে পারবেন…