বেসিক এইচটিএমএল (HTML) টিউটোরিয়ালের ৮ম পর্ব শুরু করছি। গত পর্বে এইচটিএমএল এর ইমেজ নিয়ে আলোচণা করেছিলাম, আজ এইচটিএমএল তালিকা [List] ও লাইন ব্রেক (Line Break)।
একটা ওয়েব পেজে সুন্দর করে সাজিয়ে তালিকা বা লিস্ট প্রদর্শন এবং তথ্য উপস্থাপনার অন্যতম পদ্ধতি লিস্ট ।। এইচটিএমএল (HTML) এ দুই ধরণের লিষ্ট তৈরি করার ট্যাগ আছে, প্রয়োজনমত যেকোন একটি ব্যবহার করা হয়।
আনঅর্ডার লিস্ট (Unordered List) :
প্রফেশনালি এটিই সবচেয়ে বেশি ব্যবহৃত হয় । Unordered List এ প্রথমে <ul></ul>এই দুটি ট্যাগ নিতে হবে।এর ভিতরে রাখতে হবে <li></li> এবং এই এলিমেন্টের ভেতর একটা একটা করে আইটেম রাখতে হবে। তালিকা আকারে দেখাবে কিন্তু কোন ক্রমিক সংখ্যা থাকবেনা। ডিফল্টভাবে প্রতিটি আইটেমর বামদিকে ছোট বৃত্তাকার চিহ্ন থাকে। যেমনঃ
নিচের কোড টুকু আপনার এডিটরে কপি পেস্ট করুনঃ
<!DOCTYPE HTML>
<html>
<head>
<title> HTML TUTORIAL</title>
</head>
<body bgcolor=” #00CC99″>
<h4>Exaample of Unordered list</h4>
<ul>
<li>Home</li>
<li>About Us</li>
<li>Contact Us</li>
</ul>
<ul>
<li>HTML</li>
<li>CSS</li>
<li>PHP</li>
</ul>
</body>
</html>
এরপর সেভ করে ব্রাউজারে ওপেন করলে নিচে প্রদর্শিত ছবির মত দেখাবে।
ইচ্ছে করলে সিএসএস দিয়ে গোল চিহ্নের পরিবর্তে অন্য চিহ্নও দেওয়া যায়। এগুলি সিএসএস এ আলোচনা করা হবে।
অর্ডার লিস্ট (Ordered List):
এইচটিএমএল এ অর্ডার লিস্টের প্রতিটা লাইনের শুরুতে ক্রমিক সংখ্যা থাকে তাই বিভিন্ন তথ্যকে পর্যায়ক্রমিকভাবে সাজিয়ে উপস্থাপন করা যায়। অর্ডার লিষ্ট তৈরি করার জন্য <ol></ol> ট্যাগ ব্যবহার করা হয়। নিচের কোড টুকু আপনার এডিটরে কপি পেস্ট করুনঃ
<!DOCTYPE HTML>
<html>
<head>
<title> HTML TUTORIAL</title>
</head>
<body bgcolor=” #00CC99″>
<h4>Exaample of Ordered list</h4>
<ol>
<li>Home</li>
<li>About Us</li>
<li>Contact Us</li>
</ol>
<ol>
<li>HTML</li>
<li>CSS</li>
<li>PHP</li>
</ol>
</body>
</html>
এরপর সেভ করে ব্রাউজারে ওপেন করলে নিচে প্রদর্শিত ছবির মত দেখাবে।
ol এলিমেন্টে start নামে একটা এট্রিবিউট ব্যবহার করা যায়।এটি ব্যাবহার করে তালিকা বা লিস্টটি কত থেকে শুরু হবে এটা ঠিক করা যায় । যেমন উপরের লিস্ট টি যদি 5 থেকে দেখাতে চান তাহলে নিচের মতো করে কোডটি এডিটরে লিখতে হবে –
<!DOCTYPE HTML>
<html>
<head>
<title> HTML TUTORIAL</title>
</head>
<body bgcolor=” #00CC99″>
<h4>Exaample of list</h4>
<ol start=”5″>
<li>Home</li>
<li>About Us</li>
<li>Contact Us</li>
</ol>
<ol start=”5″>
<li>HTML</li>
<li>CSS</li>
<li>PHP</li>
</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/>
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/>
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>
এরপর সেভ করে ব্রাউজারে ওপেন করলে নিচে প্রদর্শিত ছবির মত দেখাবে।
আশা করি আর্টিকেলটি ভালী লেগেছে। আজকের পর্ব এখানেই শেষ করছি। আগামী পর্ব দেখার আমন্ত্রন জানিয়ে এখানেই শেষ করছি ।
আরো পোস্ট দেখুন
কাকে বিশ্বাস করবেন আর কাকে করবেন না জেনে নিন ৬টি কৌশলে
বিল গেটস এর সফলতার গল্প
সঠিক জায়গায় সঠিক লেন্সের ব্যবহার
পুরনো সেই দিনের কথা ফেসবুকে
সংগ্রহে রাখুন এসইও(SEO) শেখার সবচেয়ে বেশী Informative Web লিংক
গরমে ম্যাঙ্গো আইসক্রিম
মাত্র ১১মিঃ ১০ সেকেন্ডের একটি ভিডিও আপনার জীবনকে সাফল্যের দ্বারপ্রান্তে নিয়ে যেতে পারে
চুলের ঘনত্ব বৃদ্ধিতে কিছু ছোট্ট টিপস
ঘুরে আসুন পাহাড়ী ঝর্ণাধারা আর সবুজের সমাহারপূর্ণ খাগড়াছড়ি থেকে
অ্যান্ড্রয়েড এম নিউজ, রিলিজ ডেট এবং ফিচার
দ্রুত চুল বৃদ্ধিতে সহায়ক দারুণ কার্যকরী ২ টি পদ্ধতি জেনে নিন
খাবারে লবণ বেশি? অতিরিক্ত লবণ কমানোর কার্যকরী ১০ কৌশল
শিগ্রই আসছে মাইক্রোসফট সার্ফেস প্রো ৪
আপনি জানেন কি? শীতে ত্বকের যত্ন করবেন কিভাবে?
একজন মেয়ের মাঝে যে “খারাপ” দিকগুলো থাকা প্রয়োজন
বিকালের নাস্তা হালিম
বাংলাদেশের প্রেক্ষাপটে ই-কমার্স
পৃথিবীর ১৫টি আশ্চার্যকর জবস যেগুলো হয়তো আপনি জানেন না
 টিউটোরিয়ালের ৮ম পর্ব শুরু করছি। গত পর্বে এইচটিএমএল এর ইমেজ নিয়ে আলোচণা করেছিলাম, আজ এইচটিএমএল তালিকা [List] ও লাইন ব্রেক (Line Break)। একটা ওয়েব…){kind=link}