তথ্য ও যোগাযোগ প্রযুক্তি (HSC ICT)NCTB এইচএসসি আইসিটি (অধ্যায় ৪)CBSE Class 10/12 Web Applicationsটেবিল ও ফর্ম

এইচটিএমএল (HTML) কোড এডিটর ও রানার

এইচএসসি আইসিটি ৪র্থ অধ্যায়ের জন্য লাইভ HTML কোড এডিটর ও রানার। জটিল টেবিল (rowspan/colspan), ফর্ম ডিজাইন ও বোর্ড পরীক্ষার ভুল সংশোধনের রিয়েল-টাইম প্লেগ্রাউন্ড।

দ্রুত যান:⚡ ক্যালকুলেটর 📝 সমীকরণ ও প্রতিপাদন 🎯 বোর্ড উদাহরণ ⌨️ কাসিও ও শর্টকাট 🌐 বাস্তব প্রয়োগ ❓ প্রশ্নোত্তর

নমুনা কোড:

HTML / CSS EditorUTF-8 • Client-Side

<!DOCTYPE html>
<html>
<head>
  <style>
    body { font-family: sans-serif; padding: 20px; background: #f8fafc; }
    h2 { color: #0284c7; }
    table { width: 100%; max-width: 500px; border-collapse: collapse; margin-top: 15px; }
    th, td { border: 2px solid #334155; padding: 10px; text-align: center; }
    th { background-color: #0284c7; color: white; }
    .highlight { background-color: #e0f2fe; font-weight: bold; }
  </style>
</head>
<body>
  <h2>HSC Board Student Grade Sheet</h2>
  <table>
    <tr>
      <th rowspan="2">Roll</th>
      <th rowspan="2">Name</th>
      <th colspan="2">Marks</th>
      <th rowspan="2">GPA</th>
    </tr>
    <tr>
      <th>Theory</th>
      <th>Practical</th>
    </tr>
    <tr>
      <td>101</td>
      <td>Rahim Ahmed</td>
      <td>68</td>
      <td>24</td>
      <td class="highlight">5.00</td>
    </tr>
    <tr>
      <td>102</td>
      <td>Sumaiya Kabir</td>
      <td>72</td>
      <td>25</td>
      <td class="highlight">5.00</td>
    </tr>
    <tr>
      <td colspan="4">Total Students Evaluated</td>
      <td>2</td>
    </tr>
  </table>
</body>
</html>

লাইভ প্রিভিউ উইন্ডোDESKTOP MODE

http://localhost/hsc_ict_exam_preview.html

গাণিতিক ভিত্তি ও সমীকরণ প্রতিপাদন

তাত্ত্বিক ভিত্তি, একক বিশ্লেষণ ও সমীকরণের ভৌত সীমাবদ্ধতা

এইচটিএমএল টেবিল কাঠামো ও মার্জিং নিয়মাবলী

এইচএসসি বোর্ড পরীক্ষায় ৪র্থ অধ্যায় (ওয়েব ডিজাইন পরিচিতি এবং HTML) থেকে প্রতি বছর সৃজনশীল প্রশ্নে একটি জটিল টেবিলের দৃশ্যপট থাকে। টেবিল গঠনের মূল কাঠামো:

রো মার্জিং (Rowspan):

যখন কোনো একটি সেলের তথ্য নিচের রো-গুলোতেও একই থাকে, তখন প্রথম সেলে <td rowspan="n"> লিখতে হয় এবং নিচের রো-গুলো থেকে ওই সেলটি বাদ দিতে হয়।

কলাম মার্জিং (Colspan):

যখন একটি হেডার বা সেল পাশাপাশি একাধিক কলাম জুড়ে বিস্তৃত হয়, তখন <th colspan="n"> ব্যবহার করা হয় এবং একই রো-এর পরবর্তী সেলগুলোর সংখ্যা কমে যায়।

পাঠ্যবই ও বোর্ড পরীক্ষার ৩টি সমাধানকৃত উদাহরণ

পাঠ্যবই, অলিম্পিয়াড ও বিগত বোর্ড পরীক্ষার হুবহু সমাধানকৃত ৩টি মানসম্পন্ন অংক

সহজ / মৌলিক ধারণাbg-emerald-500/10 text-emerald-400 border border-emerald-500/20

একটি সাধারণ HTML ওয়েব পেজ তৈরি করো যাতে একটি প্রধান শিরোনাম <h1> এবং একটি অনুচ্ছেদ <p> থাকবে।

দেওয়া আছে (Given Data):

শিরোনাম: HSC ICT Class 2026
অনুচ্ছেদ: Welcome to Web Design Chapter

সমাধানের ধাপসমূহ:

<!DOCTYPE html> দিয়ে ডকুমেন্টের প্রকার নির্ধারণ করো।

<html> ও <head> ট্যাগের ভেতরে <title> পেজের নাম সেট করো।

<body> ট্যাগের ভেতরে <h1> ও <p> ট্যাগ ব্যবহার করো।

উত্তর:<h1>HSC ICT Class 2026</h1><p>Welcome to Web Design Chapter</p>

বোর্ড পরীক্ষা স্পেশাল (CQ গ/ঘ)bg-cyan-500/10 text-cyan-400 border border-cyan-500/20

একটি টেবিল তৈরি করো যাতে ৩টি কলাম থাকবে (Roll, Subject, Marks)। ২য় রো-তে Marks কলামটি অনুভূমিকভাবে ২টি কলাম (Theory, Practical) জুড়ে থাকবে।

দেওয়া আছে (Given Data):

কলাম সংখ্যা: ৩টি
প্রয়োজনীয় অ্যাট্রিবিউট: colspan="2"

সমাধানের ধাপসমূহ:

<table> ট্যাগ শুরু করে border="1" নির্ধারণ করো।

প্রথম রো-তে <th>Roll</th>, <th>Subject</th> এবং <th colspan="2">Marks</th> লেখো।

দ্বিতীয় রো-তে সাব-হেডার হিসেবে <th>Theory</th> ও <th>Practical</th> যোগ করো।

উত্তর:<th colspan="2">Marks</th> দিয়ে কলাম মার্জ সফলভাবে সম্পন্ন হয়।

ভর্তি পরীক্ষা ও বাস্তব প্রয়োগbg-purple-500/10 text-purple-400 border border-purple-500/20

একটি অনলাইন ছাত্র ভর্তি ফর্মের জন্য HTML কোড লিখো যাতে নাম নেওয়ার টেক্সট ফিল্ড ও সাইন্স/আর্টস নির্বাচনের রেডিও বাটন থাকবে।

দেওয়া আছে (Given Data):

ফর্ম ট্যাগ: <form>
ইনপুট টাইপ: text ও radio

সমাধানের ধাপসমূহ:

<form action="#" method="POST"> দিয়ে ফর্ম শুরু করো।

<input type="text" name="name"> দিয়ে নাম ফিল্ড তৈরি করো।

গ্রুপ নির্বাচনের জন্য একই name="group" দিয়ে দুটি radio বাটন তৈরি করো যাতে যেকোনো একটি সিলেক্ট করা যায়।

উত্তর:<input type="radio" name="group" value="science"> Science

বোর্ড পরীক্ষা ও ল্যাব চেকলিস্ট

✓ একক রূপান্তর (SI Units)গণনার পূর্বে সকল মানকে SI এককে নিয়ে নিন।

✓ সূত্র ও পক্ষান্তর উল্লেখখাতায় মূল সূত্র লিখে লক্ষ্য চলককে আলাদা করুন।

✓ তাৎপর্যপূর্ণ অঙ্ক ও রাউন্ডিংচূড়ান্ত ফলাফলে ২ বা ৩ দশমিক স্থান পর্যন্ত রাউন্ড করুন।

বাস্তব ও শিল্পক্ষেত্রে প্রয়োগ

শিল্প-কারখানা, ওষুধ প্রস্তুতি, প্রকৌশল ও আধুনিক গবেষণায় প্রয়োগ

HTML হলো পৃথিবীর সকল ওয়েবসাইট ও ওয়েব অ্যাপ্লিকেশনের ভিত্তিপ্রস্তর। আধুনিক যুগে শুধু ব্রাউজার ডিসপ্লে নয়, মোবাইল অ্যাপ্লিকেশন ডিজাইন (React Native, Capacitor), রেসপনসিভ ইমেইল মার্কেটিং এবং ডিজিটাল পাবলিশিংয়ে HTML5 ও CSS3 এর বিকল্প নেই। আমাদের এই ইন্টারেক্টিভ রানারে প্র্যাকটিস করে শিক্ষার্থীরা সরাসরি পরীক্ষার হলের জন্য নির্ভুল কোড লেখার দক্ষতা অর্জন করতে পারে।

বহুল জিজ্ঞাসিত প্রশ্নাবলী (FAQ)

শিক্ষার্থীদের সচরাচর ভুল ও গুরুত্বপূর্ণ প্রশ্নের একাডেমিক উত্তর

rowspan এবং colspan এর মধ্যে মূল পার্থক্য কী?▼

rowspan উল্লম্বভাবে (উপর-নিচ) একাধিক রো বা সারির সেল একত্রিত (merge) করতে ব্যবহৃত হয়। অপরদিকে colspan অনুভূমিকভাবে (পাশাপাশি) একাধিক কলামের সেল একত্রিত করতে ব্যবহৃত হয়।

HTML ট্যাগ এবং অ্যাট্রিবিউট এর মধ্যে তফাৎ কী?▼

ট্যাগ হলো HTML এলিমেন্টের নির্দেশক (যেমন <table>, <a>), আর অ্যাট্রিবিউট হলো ট্যাগের অতিরিক্ত বৈশিষ্ট্য বা মান (যেমন border="1", href="url")।

কন্টেইনার ট্যাগ এবং এম্পটি ট্যাগ কী?▼

যেসব ট্যাগের শুরুর (<tag>) এবং শেষের (</tag>) অংশ থাকে তাকে কন্টেইনার ট্যাগ বলে (যেমন <p>...</p>)। আর যেসব ট্যাগের কোনো শেষ ট্যাগ থাকে না তাদের এম্পটি ট্যাগ বলে (যেমন <br>, <img>, <hr>)।