কে এম্পটি ট্যাগ বলা হয় কেন? (অনুধাবন)

HTML এ, একটি এলিমেন্ট হলো স্টার্ট ট্যাগ, কন্টেন্ট এবং এন্ড ট্যাগের সমন্বয়ে গঠিত একটি সম্পূর্ণ অংশ যা ওয়েব পেজের কাঠামো ও বিষয়বস্তুকে সংজ্ঞায়িত করে।

দৃশ্যকল্প-১ এ প্রদর্শিত ফলাফলটি মূলত একটি নেস্টেড বা বহুস্তর বিশিষ্ট তালিকা (Nested List) নির্দেশ করে। HTML এর সাহায্যে বিভিন্ন প্রকার তালিকা তৈরি করা যায়, যার মধ্যে আনঅর্ডারড লিস্ট (Unordered List) অন্যতম। এই ধরনের তালিকা তৈরি করতে

(Unordered List) এবং
• (List Item) ট্যাগ ব্যবহৃত হয়।

  আনঅর্ডারড লিস্টের আইটেমগুলোর শুরুতে সাধারণত ডিস্ক (Disc) আকৃতির বুলেট থাকে। তবে, CSS এর list-style-type প্রপার্টি ব্যবহার করে এই বুলেটের ধরন পরিবর্তন করা যায়, যেমন - circle (বৃত্ত), square (বর্গ) অথবা none। দৃশ্যকল্প-১ এ মূল আইটেমগুলোর জন্য ডিস্ক, প্রথম স্তরের সাব-আইটেমগুলোর জন্য সার্কেল এবং দ্বিতীয় স্তরের সাব-আইটেমগুলোর জন্য স্কয়ার বুলেট ব্যবহার করা হয়েছে, যা নেস্টেড

  ট্যাগের স্টাইল পরিবর্তন করে অর্জন করা সম্ভব।

  দৃশ্যকল্প-১ এর মতো ফলাফল পাওয়ার জন্য প্রয়োজনীয় HTML কোড নিচে দেওয়া হলো:

    

    

      

  • River

          

            

    • Padma

            

    • Jamuna

            

    • Meghna

          

        

      

  • Flower

          

            

    • Adenium

            

    • Rose

            

    • Lily

          

        

    

দৃশ্যকল্প-২ এ প্রদত্ত সারণি আকারে থাকা তথ্যকে দৃশ্যকল্প-৩ (যা দৃশ্যকল্প-১ এর মতো একটি তালিকা কাঠামো) এ রূপান্তর করা এখানে মূল কাজ। HTML এর আনঅর্ডারড লিস্ট (Unordered List -

) ব্যবহার করে সারণির বিষয়বস্তুগুলোকে সুবিন্যস্ত ও শ্রেণিবদ্ধ তালিকা হিসেবে উপস্থাপন করা সম্ভব। এর মাধ্যমে তথ্যের একটি সুস্পষ্ট ভিজ্যুয়াল কাঠামো তৈরি করা যাবে, যা ব্যবহারকারীর কাছে সহজে বোধগম্য হবে।

দৃশ্যকল্প-২ এ "River" এবং "Flower" দুইটি প্রধান শ্রেণী হিসেবে উল্লিখিত আছে এবং প্রতিটি শ্রেণীর অধীনে একাধিক আইটেম রয়েছে। যেমন, "River" এর অধীনে পদ্মা, যমুনা, মেঘনা; এবং "Flower" এর অধীনে Adenium, Rose, Lily রয়েছে। দৃশ্যকল্প-১ এ এই ধরনের শ্রেণী ও উপ-শ্রেণীকে বিভিন্ন ধরনের বুলেট পয়েন্ট (যেমন, ভরা বৃত্ত, ফাঁপা বৃত্ত, বর্গক্ষেত্র) ব্যবহার করে দেখানো হয়েছে। HTML এ প্রধান শ্রেণীগুলোর জন্য মূল

ট্যাগের অধীনে
• ব্যবহার করা হয় এবং উপ-শ্রেণী বা আইটেমগুলোর জন্য প্রতিটি
• এর মধ্যে আবার নতুন করে নেস্টেড
  ট্যাগ ব্যবহার করা হয়। বুলেট পয়েন্টের ভিন্নতা প্রদর্শনের জন্য
  ট্যাগের "type" অ্যাট্রিবিউট ব্যবহার করা যেতে পারে।

  দৃশ্যকল্প-২ এর তথ্য ব্যবহার করে দৃশ্যকল্প-৩ এর মতো তালিকা কাঠামো বাস্তবায়নের জন্য নিচের HTML কোডটি ব্যবহার করা যেতে পারে:

      

      

          

  • River

                

                    

    • Padma

                    

    • Jamuna

                    

    • Meghna

                

            

          

  • Flower

                

                    

    • Adenium

                    

    • Rose

                    

    • Lily

                

            

      

  এই কোডে, প্রধান ক্যাটাগরি "River" এবং "Flower" কে

  ব্যবহার করে ভরা বৃত্ত (disc) স্টাইলে দেখানো হয়েছে। তাদের উপ-আইটেমগুলোকে "River" এর জন্য
  ব্যবহার করে ফাঁপা বৃত্ত (circle) এবং "Flower" এর জন্য
  ব্যবহার করে বর্গাকার (square) স্টাইলে নেস্টেড
  ট্যাগ ও "type" অ্যাট্রিবিউট ব্যবহার করে উপস্থাপন করা হয়েছে।

  উপরিউক্ত HTML কোডটি দৃশ্যকল্প-২ এর সারণিভিত্তিক তথ্যকে দৃশ্যকল্প-১ এর অনুরূপ একটি শ্রেণিবদ্ধ তালিকা হিসেবে সফলভাবে বাস্তবায়ন করে। এটি ওয়েবপেজে তথ্য প্রদর্শনের ক্ষেত্রে কাঠামোগত নমনীয়তা এবং ব্যবহারকারী-বান্ধব উপস্থাপনার গুরুত্ব তুলে ধরে। এভাবে HTML ব্যবহার করে বিভিন্ন ডেটা কাঠামোকে প্রয়োজন অনুযায়ী ভিজ্যুয়ালি উপস্থাপন করা যায়, যা তথ্য ও যোগাযোগ প্রযুক্তি বিষয়ের একটি গুরুত্বপূর্ণ দক্ষতা।