HOME HTML ট্যাগ ও এলিমেন্ট

[দৃশ্যকল্প-১]:
<ul>
  <li>River
    <ul>
      <li>Padma</li>
      <li>Jamuna</li>
      <li>Meghna</li>
    </ul>
  </li>
  <li>Flower
    <ul>
      <li>Adenium</li>
      <li>Rose</li>
      <li>Lily</li>
    </ul>
  </li>
</ul>

[দৃশ্যকল্প-২]:
<html>
    <body>
        <table>
            <tr>
                <td>....</td>
            </tr>
        </table>
    </body>
</html>

[দৃশ্যকল্প-৩]:
RiverPadma
Jamuna
Meghna
FlowerAdenium
Rose
Lily
Jessore • 2025
ক) এলিমেন্ট কী?
খ) <br> কে এম্পটি ট্যাগ বলা হয় কেন?
গ) দৃশ্যকল্প-১ এর মতো ফলাফল পাওয়ার জন্য HTML কোড লিখ।
ঘ) দৃশ্যকল্প-২ এর সাহায্যে দৃশ্যকল্প-৩ বাস্তবায়ন করে দেখাও।
NEXT QUESTION

সমাধান (Solution)

ক) এলিমেন্ট কী?
HTML-এর শুরু ট্যাগ থেকে শেষ ট্যাগ পর্যন্ত সকল অংশকে একত্রে HTML এলিমেন্ট (Element) বলা হয়। যেমন: <h1> Hello World </h1> —এখানে পুরো লাইনটি একটি এলিমেন্ট।

খ) <br> কে এম্পটি ট্যাগ বলা হয় কেন?
যে সকল HTML ট্যাগের শুধুমাত্র শুরু আছে কিন্তু কোনো শেষ ট্যাগ (Closing tag) এবং কোনো কনটেন্ট থাকে না, তাদের এম্পটি ট্যাগ (Empty Tag) বলা হয়। <br> ট্যাগটি লাইনের মাঝে বিরতি বা লাইন ব্রেক তৈরি করতে ব্যবহৃত হয় এবং এর কোনো শেষ ট্যাগ নেই, তাই একে এম্পটি ট্যাগ বলা হয়।

গ) দৃশ্যকল্প-১ এর মতো ফলাফল পাওয়ার জন্য HTML কোড
দৃশ্যকল্প-১ এ একটি নেস্টেড আন-অর্ডারড লিস্ট (Nested Unordered List) দেখানো হয়েছে। এর সমতুল্য কোড নিচে দেওয়া হলো:

<!DOCTYPE html>
<html>
<head>
    <title>Nested List Example</title>
</head>
<body>
    <ul>
        <li>River
            <ul>
                <li>Padma</li>
                <li>Jamuna</li>
                <li>Meghna</li>
            </ul>
        </li>
        <li>Flower
            <ul>
                <li>Adenium</li>
                <li>Rose</li>
                <li>Lily</li>
            </ul>
        </li>
    </ul>
</body>
</html>
ঘ) দৃশ্যকল্প-২ এর সাহায্যে দৃশ্যকল্প-৩ বাস্তবায়ন
দৃশ্যকল্প-৩ এ একটি টেবিল দেখা যাচ্ছে যেখানে 'rowspan' অ্যাট্রিবিউট ব্যবহার করা হয়েছে। দৃশ্যকল্প-২ এর গঠন অনুসরণ করে এটি নিচে তৈরি করা হলো:

<!DOCTYPE html>
<html>
<head>
    <title>Table with Rowspan</title>
</head>
<body>
    <table border="1">
        <tr>
            <td rowspan="3">River</td>
            <td>Padma</td>
        </tr>
        <tr>
            <td>Jamuna</td>
        </tr>
        <tr>
            <td>Meghna</td>
        </tr>
        <tr>
            <td rowspan="3">Flower</td>
            <td>Adenium</td>
        </tr>
        <tr>
            <td>Rose</td>
        </tr>
        <tr>
            <td>Lily</td>
        </tr>
    </table>
</body>
</html>
ব্যাখ্যা:
দৃশ্যকল্প-৩ এর টেবিলে 'River' এবং 'Flower' শব্দ দুটি ৩টি করে সারি (Rows) জুড়ে অবস্থান করছে। এই ধরনের কাঠামো তৈরির জন্য rowspan="3" অ্যাট্রিবিউটটি ব্যবহার করা হয়েছে। প্রথম সারিতে rowspan নির্ধারণ করার পর পরবর্তী সারিগুলোতে শুধু ডানদিকের ডেটাগুলো যুক্ত করলেই কাঙ্ক্ষিত ফলাফল পাওয়া যায়।