দৃশ্যকল্প-১ এর মত ফলাফল পাওয়ার জন্য HTML কোড লেখ। (প্রয়োগ)

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

এম্পটি ট্যাগ হলো এমন সব এইচটিএমএল (HTML) ট্যাগ যাদের কোনো কন্টেন্ট (content) থাকে না এবং তাই এদের কোনো ক্লোজিং ট্যাগও (closing tag) প্রয়োজন হয় না। এই ট্যাগগুলো সাধারণত কিছু নির্দিষ্ট কার্যকারিতা বা উপাদান যোগ করার জন্য ব্যবহৃত হয়।

এদের এম্পটি (empty) বলা হয় কারণ এগুলোর ওপেনিং ট্যাগ (opening tag) এবং ক্লোজিং ট্যাগের (closing tag) মধ্যে কোনো লেখা বা বিষয়বস্তু থাকে না। যেমন:
ট্যাগ লাইন ব্রেক (line break) তৈরি করে, ট্যাগ ছবি যুক্ত করে এবং

দৃশ্যকল্প-২ এ প্রদত্ত সারণি আকারে থাকা তথ্যকে দৃশ্যকল্প-৩ (যা দৃশ্যকল্প-১ এর মতো একটি তালিকা কাঠামো) এ রূপান্তর করা এখানে মূল কাজ। 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 ব্যবহার করে বিভিন্ন ডেটা কাঠামোকে প্রয়োজন অনুযায়ী ভিজ্যুয়ালি উপস্থাপন করা যায়, যা তথ্য ও যোগাযোগ প্রযুক্তি বিষয়ের একটি গুরুত্বপূর্ণ দক্ষতা।