যা জানবো...

একটি ওয়েবপেজে লিষ্ট বা তালিকাকে সুন্দরভাবে প্রকাশ করার জন্য যে এইচটিএমএল কোড ব্যবহার করা হয়, তার সৃজনশীল পদ্ধতি নিয়ে এখানে আলোচনা করা হয়েছে।

লেখক সম্পর্কে

লেখকঃ অসীম কুমার
তিনি ইলেকট্রিক্যাল ইঞ্জিনিয়ারিং এ লেখাপড়া করছেন। টিউটোরিয়ালবিডি ও বিজ্ঞানপ্রযুক্তি ব্লগে তিনি ইলেক্ট্রনিক্স সহ বিভিন্ন টেকনোলজি বিষয়ে লিখে থাকেন।

এইচটিএমএল লিষ্ট

একটা ওয়েব পেজকে সুন্দর করে সাজানো এবং তথ্য উপস্থাপনার অন্যতম পদ্ধতি লিষ্ট । HTML এর মাধ্যমে দুই ধরণের লিষ্ট তৈরি করা যায়, একটি হচ্ছে অর্ডার লিষ্ট এবং অপরটি হচ্ছে আনঅর্ডার লিষ্ট । অর্ডার লিষ্টে বিভিন্ন তথ্যকে পর্যায়ক্রমিকভাবে সাজিয়ে উপস্থাপন করা হয় এবং প্রতিটা লাইনের শুরুতে ক্রমিক সংখ্যা থাকে। অন্যদিকে আন অর্ডার লিষ্টে প্রতিটা লাইনের সামনে ছোট বৃত্তাকার বা বর্গাকার চিহ্ন থাকে। HTML এর মাধ্যমে আন অর্ডার লিষ্ট তৈরি করার জন্য <ul></ul> এবং অর্ডার লিষ্ট তৈরি করার জন্য <ol></ol> ট্যাগ ব্যবহার করা হয়।

 


উদাহরণ প্রোগ্রাম

<html>
<head>
<title> www.tutohost.com</title>
</head>
<body bgcolor=" #00CC99" style="text-align:center">

<h4>Disc Type list</h4>
<ul type="disc">
<li>Home</li>
<li>About Us</li>
<li>Contact Us</li>
</ul>
<h4>Circle Type list</h4>
<ul type="circle">
<li>HTML</li>
<li>CSS</li>
<li>PHP</li>
</ul><h4>Square Type list</h4>
<ul type="square">
<li>Pragaph</li>
<li>Table</li>
<li>List</li>
</ul>

</body>
</html>

একটা নোটপ্যাড open করে উপরের code টুকু লিখে file মেনু থেকে Save as এ ক্লিক করে File name: index.html , Save as type : All files, দিয়ে save করে index.html ফাইলটি Mozilla Firefox দিয়ে open করলে পাশে প্রদর্শিত ছবির মত দেখাবে।


উদাহরণ প্রোগ্রাম

<html>
<head>
<title> www.tutohost.com</title>
</head>
<body bgcolor=" #00CC99" style="text-align:center">

<h3>Alphabet Type list</h3>
<ol type="A">
<li>Home</li>
<li>About Us</li>
<li>Contact Us</li>
</ol>
<h3>Number Type list</h3>
<ol type="1">
<li>HTML</li>
<li>CSS</li>
<li>PHP</li>
</ol>
<h3>Roman Number Type list</h3>
<ol type="I">
<li>Pragaph</li>
<li>Table</li>
<li>List</li>
</ol>

</body>
</html>

একটা নোটপ্যাড open করে উপরের code টুকু লিখে file মেনু থেকে Save as এ ক্লিক করে File name: index.html , Save as type : All files, দিয়ে save করে index.html ফাইলটি Mozilla Firefox দিয়ে open করলে পাশে প্রদর্শিত ছবির মত দেখাবে।



.
.