বেসিক এইচটিএমএল(HTML)শিখুন টিউটোরিয়াল [পর্ব-৮] : এইচটিএমএল তালিকা [List] ও লাইন ব্রেক (Line Break)

বেসিক এইচটিএমএল (HTML) টিউটোরিয়ালের ৮ম পর্ব শুরু করছি। গত পর্বে এইচটিএমএল এর ইমেজ নিয়ে আলোচণা করেছিলাম, আজ এইচটিএমএল তালিকা [List] ও লাইন ব্রেক (Line Break)।

একটা ওয়েব পেজে সুন্দর করে সাজিয়ে তালিকা বা লিস্ট প্রদর্শন এবং তথ্য উপস্থাপনার অন্যতম পদ্ধতি লিস্ট ।। এইচটিএমএল (HTML) এ দুই ধরণের লিষ্ট তৈরি করার ট্যাগ আছে, প্রয়োজনমত যেকোন একটি ব্যবহার করা হয়।

আনঅর্ডার লিস্ট (Unordered List) :

প্রফেশনালি এটিই সবচেয়ে বেশি ব্যবহৃত হয় । Unordered List এ প্রথমে <ul></ul>এই দুটি ট্যাগ নিতে হবে।এর ভিতরে রাখতে হবে <li></li> এবং এই এলিমেন্টের ভেতর একটা একটা করে আইটেম রাখতে হবে। তালিকা আকারে দেখাবে কিন্তু কোন ক্রমিক সংখ্যা থাকবেনা। ডিফল্টভাবে প্রতিটি আইটেমর বামদিকে ছোট বৃত্তাকার চিহ্ন থাকে। যেমনঃ

নিচের কোড টুকু আপনার এডিটরে কপি পেস্ট করুনঃ

<!DOCTYPE HTML>

<html>

<head>

<title> HTML TUTORIAL</title>

</head>

<h4>Exaample of Unordered list</h4>

<ul>

<li>About Us</li>

<li>Contact Us</li>

</ul>

<ul>

</ul>

</body>

</html>

এরপর সেভ করে ব্রাউজারে ওপেন করলে নিচে প্রদর্শিত ছবির মত দেখাবে।

ইচ্ছে করলে সিএসএস দিয়ে গোল চিহ্নের পরিবর্তে অন্য চিহ্নও দেওয়া যায়। এগুলি সিএসএস এ আলোচনা করা হবে।

অর্ডার লিস্ট (Ordered List):

এইচটিএমএল এ অর্ডার লিস্টের প্রতিটা লাইনের শুরুতে ক্রমিক সংখ্যা থাকে তাই বিভিন্ন তথ্যকে পর্যায়ক্রমিকভাবে সাজিয়ে উপস্থাপন করা যায়। অর্ডার লিষ্ট তৈরি করার জন্য <ol></ol> ট্যাগ ব্যবহার করা হয়। নিচের কোড টুকু আপনার এডিটরে কপি পেস্ট করুনঃ

<!DOCTYPE HTML>

<html>

<head>

<title> HTML TUTORIAL</title>

</head>

<h4>Exaample of Ordered list</h4>

<ol>

<li>About Us</li>

<li>Contact Us</li>

</ol>

<ol>

</ol>

</body>

</html>

এরপর সেভ করে ব্রাউজারে ওপেন করলে নিচে প্রদর্শিত ছবির মত দেখাবে।

ol এলিমেন্টে start নামে একটা এট্রিবিউট ব্যবহার করা যায়।এটি ব্যাবহার করে তালিকা বা লিস্টটি কত থেকে শুরু হবে এটা ঠিক করা যায় । যেমন উপরের লিস্ট টি যদি 5 থেকে দেখাতে চান তাহলে নিচের মতো করে কোডটি এডিটরে লিখতে হবে –

<!DOCTYPE HTML>

<html>

<head>

<title> HTML TUTORIAL</title>

</head>

<h4>Exaample of list</h4>

<li>About Us</li>

<li>Contact Us</li>

</ol>

</ol>

</body>

</htm>

এরপর সেভ করে ব্রাউজারে ওপেন করলে নিচে প্রদর্শিত ছবির মত দেখাবে।

লাইন ব্রেক (Line Break)

এইচটিএমএল <br/> এটা হচ্ছে লাইন ব্রেক (ভাঙ্গার জন্য) এর জন্য একটি ট্যাগ। এটি একটা সিঙ্গেল ট্যাগ। এইচটিএমএল এলিমেন্টের ভিতর এটা ব্যবহার করে যেকোন জায়গায় লাইন ভেঙ্গে নিচের লাইনে নিয়ে যাওয়া হয়। সাধারনত ঠিকানা ইত্যাদি লেখার সময় <p></p> এর ভিতর এটা ব্যবহার করা হয়। এছাড়াও ওয়েবপেজের লেখাগুলোকে বিভিন্ন প্যারাগ্রাফ এ ভাগ করার জন্য ব্যাবহার করা হয়। নিচের কোড টুকু আপনার এডিটরে কপি পেস্ট করুনঃ

<!DOCTYPE HTML>

<html>

<head>

<title> This is Site Title </title>

</head>

<body>

Hello I am Athena,I am working with sourcetune.com. Hello I am Athena,I am working with sourcetune.com. Hello I am Athena,I am working with sourcetune.com <br/>

</body>

</html>

এরপর সেভ করে ব্রাউজারে ওপেন করলে নিচে প্রদর্শিত ছবির মত দেখাবে।