আনঅর্ডার্ড লিস্ট

এইচটিএমএল এর <ul> ট্যাগটি  আনঅর্ডার্ড বা বুলেটেড লিস্ট ডিফাইন করে ।

আনঅর্ডার্ড এইচটিএমএল লিস্ট

আনঅর্ডার্ড  লিস্ট শুরু হয় <ul> ট্যাগ দিয়ে এবং এর প্রতিটি আইটিম শুরু হয় <li> ট্যাগ দিয়ে ।

লিস্ট আইটেম গুলো ডিফল্ট ভাবে বুলেটেড মার্কড হয় আনঅর্ডার্ড  লিস্ট  এর ক্ষেত্রে ।

উদাহরণ

<ul>
  <li>Computer</li>
  <li>Phone</li>
  <li>iPad</li>
</ul>

নিজে চেষ্টা করুন

একটি লিস্ট আইটেম অর্থাৎ <li> এর ভেতরে আপনি HTML এর যেকোন এলিমেন্ট যেমন ছবি, আর একটি অর্ডার্ড বা আন অর্ডার্ড লিস্ট কিংবা টেবিল নিতে পারেন ।

আনঅর্ডার্ড লিস্ট এর মার্ক বা চিহ্ন পরিবর্তন

list-style-type css property ব্যবহার করে Unorder List এর মার্ক বা বুলেট গুলো পরিবর্তন করা যায় । এটি নিচের যে কোন একটি ভেলু নেয় ।

ValueDescription
distএটি ডিফল্ট যে মার্কটি আসে সেটি ।
circleমার্কটি সার্কেল বা বৃত্ত করে দেয় ।
squareমার্ক টি স্কয়ার বা চারকোনা করে দেয় ।
noneবুলেট মার্কটি অপসারণ করে বা উঠিয়ে দেয় ।

list style type disc ব্যবহার করে লিস্ট আইটেম গুলোর বুলেট গুলো ডিস্ক বা ভরাট বৃত্তের মতো করা যায় ।

লিস্ট স্টাইল Disc এর উদাহরণ

<ul style="list-style-type:disc;">
   <li>Computer</li>
   <li>Phone</li>
   <li>iPad</li>
</ul>

নিজে চেষ্টা করুন

list style type circle ব্যবহার করে লিস্ট আইটেম গুলোর বুলেট গুলোকে সার্কেল বা বৃত্তের মতো করা যায় ।

লিস্ট স্টাইল Circle এর উদাহরণ

<ul style="list-style-type:circle;">
   <li>Computer</li>
   <li>Phone</li>
   <li>iPad</li>
</ul>

নিজে চেষ্টা করুন

Square ব্যবহার করে লিস্ট আইটেম গুলোর বুলেট গুলোকে স্কয়ার বা বর্গ এর মতো করা যায় ।

লিস্ট স্টাইল Square এর উদাহরণ

<ul style="list-style-type:square;">
   <li>Computer</li>
   <li>Phone</li>
   <li>iPad</li>
</ul>

নিজে চেষ্টা করুন

 

none ব্যবহার করে লিস্ট আইটেম গুলোর বুলেট উঠিয়ে ফেলা যায় ।

লিস্ট স্টাইল none এর উদাহরণ

<ul style="list-style-type:none;">
   <li>Computer</li>
   <li>Phone</li>
   <li>iPad</li>
</ul>

নিজে চেষ্টা করুন

Nested HTML Lists

একটি লিস্ট বা তালিকার ভেতরে আর একটি লিস্ট রাখলে সেটাকে নেস্টেড লিস্ট বলে ।

উদাহরণ

<ul>
  <li>Computer
    <ul> 
      <li>Laptop</li>
      <li>Desktop</li>
    </ul>
  </li>
  <li>Phone</li>
  <li>iPad</li>
</ul>

নিজে চেস্টা করুন

Horizontal List

আমরা এ পর্যন্ত যে আন অর্ডার্ড লিস্ট গুলো নিয়ে কাজ করলাম সেগুলো সবগুলোই  Vertical List বা উল্লম্ব তালিকা ।  কিন্তু আনুভুমিক তালিকা বা Horizontal list নিতে গেলে CSS ব্যবহার করা লাগবে । চলুন দেখি কেমন করে ।

উদাহরন

<!DOCTYPE html>
<html>
  <head>
    <title> Horizontal List </title>
    <style>
      ul {
        margin:0;
        padding:0;
        background: DarkCyan;
      }
      ul li {
        display:inline-block;
      }
      li a { 
        text-decoration:none;
        display:inline-block;
        color:white;
        line-height:40px;
        padding:0 15px; 
      }
      li a:hover {
        background:black;
        text-decoration:none;
      }
    </style>
  </head>
  <body>
    <h1> Horizontal List Style like menu</h1>
    <p>In this exaple, we have crated a navigation example using unorderd list and style them as well.</p>
    <ul>
       <li><a href="#home">Home</a></li>
       <li><a href="#about">About Us</a></li>
       <li><a href="#contact">Contact Us</a></li>
     </ul>
  </body>
</html>

নিজে চেষ্টা করুন

কমেন্ট করুন

Your email address will not be published. Required fields are marked *