তথ্য ও যোগাযোগ প্রযুক্তি • ওয়েব ডিজাইন পরিচিতি এবং HTML

তথ্য ও যোগাযোগ প্রযুক্তি প্রশ্ন

রিয়া তার শ্রেণির পরীক্ষার ফলাফল ওয়েবপেজে সারণি আকারে দেখাতে চায়। সারণির উপরে "Result" নামে একটি শিরোনাম থাকবে। প্রথম সারিতে Name ঘরটি দুই সারি জুড়ে এবং Marks ঘরটি দুই কলাম জুড়ে থাকবে। দ্বিতীয় সারিতে Bangla ও English শিরোনাম থাকবে। এরপর ডেটা অংশে একটি সারিতে থাকবে Anik, 78, 82। সারণির সব ঘরে বর্ডার থাকবে এবং ঘরগুলো একটির সাথে আরেকটি লাগানো থাকবে। রিয়া শুরুতে শুধু table এলিমেন্টে border="1" দিয়ে দেখল, প্রতিটি ঘরের চারপাশে দুটি করে বর্ডার দেখা যাচ্ছে এবং ঘরের লেখা বর্ডার ঘেঁষে আছে।

  1. ক)

    tr এলিমেন্টের পূর্ণরূপ কী?

    (1)
  2. খ)

    সব টেবিলে thead ও tfoot অংশ না-ও থাকতে পারে কেন? ব্যাখ্যা করো।

    (2)
  3. গ)

    উদ্দীপকে বর্ণিত সারণিটি তৈরির জন্য এইচটিএমএল কোড লেখো।

    (3)
  4. ঘ)

    রিয়ার দেখা সমস্যা দুটি সমাধানের জন্য কোন কোন অ্যাট্রিবিউট কীভাবে ব্যবহার করতে হবে? অ্যাট্রিবিউটগুলোর ভূমিকা বিশ্লেষণ করে cellpadding-এর মান 10 ধরে সংশোধিত table ট্যাগটি লেখো।

    (4)

উত্তর ও ব্যাখ্যা

  1. ক)

    AI-তৈরি নমুনা উত্তর tr এলিমেন্টের পূর্ণরূপ table row। এটি টেবিলের একটি সারি তৈরি করতে ব্যবহৃত হয়।

  2. খ)

    AI-তৈরি নমুনা উত্তর টেবিলের একেবারে উপরের সারিকে হেডার এবং একেবারে নিচের সারিকে ফুটার সারি বলা হয়। এ দুটি অংশ টেবিলের ঐচ্ছিক উপাদান। টেবিলের মূল তথ্য থাকে tbody অংশে। কোনো টেবিলে শিরোনাম বা সারসংক্ষেপ সারির প্রয়োজন না হলে thead ও tfoot ছাড়াই তা তৈরি করা যায়। তাই সব টেবিলে এ দুটি অংশ থাকা বাধ্যতামূলক নয়।

  3. গ)

    AI-তৈরি নমুনা উত্তর উদ্দীপকের সারণিটি তৈরির কোড নিচে দেওয়া হলো—

    <!DOCTYPE html> <html> <head> <title>Result</title> </head> <body> <table border="1" cellspacing="0"> <caption>Result</caption> <thead> <tr><th rowspan="2">Name</th><th colspan="2">Marks</th></tr> <tr><th>Bangla</th><th>English</th></tr> </thead> <tbody> <tr><td>Anik</td><td>78</td><td>82</td></tr> </tbody> </table> </body> </html> এখানে caption এলিমেন্ট দিয়ে সারণির শিরোনাম, rowspan="2" দিয়ে Name ঘরটি দুই সারি জুড়ে এবং colspan="2" দিয়ে Marks ঘরটি দুই কলাম জুড়ে দেখানো হয়েছে। border="1" দ্বারা বর্ডার এবং cellspacing="0" দ্বারা ঘরগুলো একটির সাথে অন্যটি লাগানো হয়েছে। দ্বিতীয় সারির প্রথম th এলিমেন্টটি দ্বিতীয় কলামে বসবে, কারণ প্রথম কলামের দ্বিতীয় সারিটি Name ঘরের rowspan দ্বারা দখল হয়ে আছে।
  4. ঘ)

    AI-তৈরি নমুনা উত্তর রিয়ার সামনে দুটি সমস্যা দেখা দিয়েছে। প্রথমত, শুধু border="1" ব্যবহার করায় প্রতিটি সেলের আশেপাশে আলাদা বর্ডার তৈরি হয়ে প্রতি দুই ঘরের মাঝে দুটি বর্ডার দেখা যাচ্ছে। দ্বিতীয়ত, ঘরের লেখা বর্ডার ঘেঁষে থাকছে।
    প্রথম সমস্যার সমাধান: এখানে cellspacing অ্যাট্রিবিউট ব্যবহার করতে হবে। এটি দুটি সেলের মধ্যবর্তী দূরত্ব নিয়ন্ত্রণ করে। এর মান 0 দিলে সেলগুলো একটির সাথে অন্যটি একেবারে লেগে যায়, ফলে দুই বর্ডারের জায়গায় একটি বর্ডার দেখা যায়। মান যত বাড়ানো হয়, সেলগুলো তত পিক্সেল দূরে সরে যায়।
    দ্বিতীয় সমস্যার সমাধান: এখানে cellpadding অ্যাট্রিবিউট ব্যবহার করতে হবে। এটি সেলের বর্ডার থেকে সেলের ভেতরের লেখার দূরত্ব নিয়ন্ত্রণ করে। এর মান 10 দিলে প্রতিটি সেলে লেখার চারপাশে 10 পিক্সেল ফাঁকা জায়গা থাকবে এবং লেখা বর্ডার ঘেঁষে থাকবে না।
    এভাবে cellspacing সেলের বাইরের দূরত্ব এবং cellpadding সেলের ভেতরের দূরত্ব ঠিক করে, তাই দুটি আলাদা সমস্যার সমাধানে দুটি আলাদা অ্যাট্রিবিউট প্রয়োজন।
    সংশোধিত ট্যাগ: <table border="1" cellspacing="0" cellpadding="10">

আরও প্রশ্ন অনুশীলন করতে অ্যাপে যাও

অ্যাপ ডাউনলোড করোওয়েবে খুলো