উচ্চ মাধ্যমিক (এইচএসসি) পরীক্ষায় বিজ্ঞান, মানবিক ও ব্যবসায় শিক্ষা—সকল বিভাগের শিক্ষার্থীদের জন্যই আইসিটি (তথ্য ও যোগাযোগ প্রযুক্তি) একটি বাধ্যতামূলক এবং সর্বোচ্চ গ্রেড বা এ প্লাস (A+) নিশ্চিত করার জন্য অন্যতম সেরা স্কোরিং সাবজেক্ট। বিগত বছরগুলোর ঢাকা, রাজশাহী, চট্টগ্রাম, কুমিল্লা, দিনাজপুরসহ সকল শিক্ষা বোর্ডের প্রশ্নপত্র নিবিড়ভাবে বিশ্লেষণ করলে দেখা যায়, বোর্ড পরীক্ষার লিখিত 'গ' বিভাগ থেকে যে অধ্যায়টি থেকে প্রতি বছর ১০০% নিশ্চিত অন্তত ১টি এবং অধিকাংশ বছর ২টি পূর্ণাঙ্গ সৃজনশীল প্রশ্ন (১০ থেকে ২০ নম্বর) আসে, তা হলো ৪র্থ অধ্যায় 'ওয়েব ডিজাইন পরিচিতি এবং HTML' (Introduction to Web Design and HTML)। এছাড়া বহুনির্বাচনি (MCQ) অংশে ৪ থেকে ৫টি প্রশ্ন সরাসরি এই অধ্যায় থেকে থাকে।
অধ্যায়টি শিক্ষার্থীদের কাছে অত্যন্ত প্রিয় ও সহজ হওয়ার প্রধান কারণ হলো—এখানে কোনো জটিল অ্যালগরিদম বা গাণিতিক সমীকরণ নেই। কেবল HTML-এর মৌলিক ট্যাগগুলোর গঠন এবং বিশেষ করে table ট্যাগের colspan ও rowspan-এর নিয়মটি নিখুঁতভাবে বুঝতে পারলে পরীক্ষার খাতায় পুরো ১০ এ ১০ নম্বর নিশ্চিত করা যায়। তবে অনেক শিক্ষার্থীই টেবিলের সেল মার্জ করার সময় নিচের সারির ডেটা বাদ দিতে গিয়ে ভুল করে বসে। একজন সিনিয়র মেন্টর হিসেবে আজ আমি ২০২৬ সালের হালনাগাদ বোর্ড সিলেবাস ও নতুন মানবন্টন অনুযায়ী ওয়েবসাইট কাঠামোর প্রকারভেদ, এইচটিএমএল সিনট্যাক্স, হাইপারলিংক, লিস্ট এবং কোলস্প্যান ও রোস্প্যান সম্বলিত একটি পূর্ণাঙ্গ বোর্ড স্ট্যান্ডার্ড সৃজনশীল প্রশ্নের পুঙ্খানুপুঙ্খ কোড সমাধান নিচে সহজ ও প্রাঞ্জল ভাষায় বুঝিয়ে দিচ্ছি:
১. ওয়েবসাইটের কাঠামো (Website Structure) ও প্রকারভেদ
একটি ওয়েবসাইটের অন্তর্গত বিভিন্ন ওয়েবপেজগুলো পরস্পরের সাথে কীভাবে সংযুক্ত এবং বিন্যস্ত থাকে, তাকে ওয়েবসাইটের কাঠামো বা আর্কিটেকচার বলে। প্রধানত চার ধরণের ওয়েব কাঠামো পরীক্ষায় 'খ' এবং 'গ' নম্বরের প্রশ্নে চিত্রসহ ব্যাখ্যা করতে বলা হয়:
| কাঠামোর নাম | বৈশিষ্ট্য ও বিন্যাস | ব্যবহার ক্ষেত্র |
|---|---|---|
| হায়ারার্কিক্যাল / ট্রি কাঠামো (Hierarchical / Tree Structure) | সবচেয়ে জনপ্রিয় কাঠামো। এতে একটি মূল হোমপেজ (Root) থাকে এবং তা থেকে শাখা-প্রশাখার মতো সাব-পেজ বা ক্যাটাগরি পেজগুলো বিস্তৃত হয়। | স্কুল, কলেজ, বিশ্ববিদ্যালয়, সরকারি মন্ত্রণালয় ও কর্পোরেট প্রতিষ্ঠানের ওয়েবসাইট। |
| লিনিয়ার / সিকোয়েন্সিয়াল কাঠামো (Linear Structure) | পেজগুলো পরপর ক্রমানুসারে (Next, Previous) সাজানো থাকে। এক পেজ শেষ না করে অন্য পেজে যাওয়া যায় না। | অনলাইন কোর্স বা টিউটোরিয়াল, ট্রেইনিং ম্যানুয়াল, বই ও পরীক্ষার প্রশ্নপত্র। |
| ওয়েব লিংকড / নেটওয়ার্ক কাঠামো (Network Structure) | প্রত্যেকটি পেজ সরাসরি অন্য প্রতিটি পেজের সাথে লিংক বা সংযুক্ত থাকে। যেকোনো পেজ থেকে সরাসরি অন্য যেকোনো পেজে যাওয়া সম্ভব। | ছোট ব্যক্তিগত পোর্টফোলিও বা ফ্রেমভিত্তিক ওয়েবসাইট। |
| কম্বিনেশন / হাইব্রিড কাঠামো (Hybrid Structure) | একাধিক কাঠামোর (যেমন ট্রি ও লিনিয়ার) সমন্বয়ে গঠিত আধুনিক বহুস্তরীয় জটিল কাঠামো। | ই-কমার্স ওয়েবসাইট (যেমন দারাজ, অ্যামাজন) এবং বড় নিউজ পোর্টাল। |
২. HTML এর মৌলিক ট্যাগ ও টেক্সট ফরম্যাটিং
HTML (HyperText Markup Language) কোনো প্রোগ্রামিং ভাষা নয়, এটি একটি মার্কআপ ভাষা যা ওয়েবপেজের কঙ্কাল বা গঠন তৈরিতে ব্যবহৃত হয়। এইচটিএমএল কোডের মূল বেসিক স্ট্রাকচার নিম্নরূপ:
এইচটিএমএল মূল সিনট্যাক্স:
<!DOCTYPE html>
<html>
<head>
<title>ওয়েবপেজের শিরোনাম</title>
</head>
<body>
<h1>প্রধান শিরোনাম</h1>
<p>এটি একটি সাধারণ অনুচ্ছেদ বা প্যারাগ্রাফ।</p>
</body>
</html>
কন্টেইনার ট্যাগ বনাম এম্পটি ট্যাগ (বোর্ড পরীক্ষার জন্য অতি গুরুত্বপূর্ণ):
- কন্টেইনার ট্যাগ (Container Tag): যার শুরু ট্যাগ (Opening tag), বিষয়বস্তু (Content) এবং শেষ ট্যাগ (Closing tag) থাকে। যেমন:
<p>...</p>,<h1>...</h1>,<b>...</b>। - এম্পটি ট্যাগ (Empty Tag): যার শুরু ট্যাগ আছে কিন্তু কোনো শেষ ট্যাগ বা বিষয়বস্তু থাকে না। যেমন: লাইন ব্রেকের জন্য
<br>, অনুভূমিক রেখার জন্য<hr>, এবং ছবি যুক্ত করার জন্য<img>। - টেক্সট ফরম্যাটিং ট্যাগ: বোল্ড করতে
<b>বা<strong>, ইটালিক করতে<i>বা<em>, আন্ডারলাইন করতে<u>, সাবস্ক্রিপ্ট (পাদটীকা, যেমন $H_2O$) করতেH<sub>2</sub>Oএবং সুপারস্ক্রিপ্ট (সূচক, যেমন $(a+b)^2$) করতে(a+b)<sup>2</sup>ব্যবহৃত হয়।
৩. হাইপারলিংক (<a>) ও ইমেজ (<img>) ট্যাগের ব্যবহার
একটি ওয়েবপেজের সাথে অন্য ওয়েবপেজ বা ফাইলের সংযোগ স্থাপনকে হাইপারলিংক বলে। এর জন্য অ্যাংকর ট্যাগ <a> ব্যবহৃত হয়।
সিনট্যাক্স: <a href="https://www.dhakaeducationboard.gov.bd" target="_blank">ঢাকা শিক্ষা বোর্ড</a>
href(Hypertext Reference) হলো প্রধান অ্যাট্রিবিউট, যাতে গন্তব্য লিংকটি উল্লেখ থাকে।target="_blank"দিলে লিংকটি নতুন ট্যাবে ওপেন হয়।- ছবি যুক্ত করার সিনট্যাক্স:
<img src="logo.jpg" alt="কলেজ লোগো" width="200" height="150"> - ছবিকে লিংক বানানোর কৌশল:
<a href="https://example.com"><img src="pic.jpg" alt="ছবি"></a>
৪. লিস্ট ট্যাগ (Ordered ও Unordered List)
ওয়েবপেজে তথ্য সুবিন্যস্তভাবে প্রদর্শন করতে লিস্ট ব্যবহৃত হয়:
- অর্ডারড লিস্ট (<ol> - ক্রমানুসারী তালিকা): সংখ্যা বা অক্ষর দ্বারা চিহ্নিত। এর অ্যাট্রিবিউট
type="1","A","a","I"বা"i"হতে পারে। - আনঅর্ডারড লিস্ট (<ul> - অক্রমিক তালিকা): বুলেট পয়েন্ট দ্বারা চিহ্নিত। এর অ্যাট্রিবিউট
type="disc","circle"বা"square"হতে পারে। - প্রতিটি লিস্ট আইটেমকে
<li>...</li>ট্যাগের মধ্যে রাখা হয়।
৫. টেবিল ট্যাগ মাস্টারক্লাস: Colspan ও Rowspan-এর জাদু
বোর্ড পরীক্ষায় প্রতি বছর ৯৫% ক্ষেত্রেই সৃজনশীল প্রশ্নে টেবিল সংক্রান্ত উদ্দীপক দেওয়া হয়। টেবিল তৈরির মৌলিক ট্যাগসমূহ হলো:
<table border="1">: টেবিল শুরুর মূল ট্যাগ (বর্ডার না দিলে দাগ দেখা যায় না)।<caption>: টেবিলের শিরোনাম বা ক্যাপশন।<tr>(Table Row): প্রতিটি অনুভূমিক সারি নির্দেশ করে।<th>(Table Header): কলামের শিরোনাম নির্দেশ করে (স্বভাবতই লেখা বোল্ড ও সেন্টারে থাকে)।<td>(Table Data): সাধারণ সেলের ভেতরের তথ্য।
Colspan ও Rowspan চেনার সুপার টেকনিক:
- Colspan (Column Span): যখন একাধিক কলাম বা পাশাপাশি অবস্থিত সেল একত্রিত হয়ে একটি একক সেলে পরিণত হয়। উদাহরণ:
<td colspan="2">Student Info</td>। মনে রাখবেন, যে সারিতেcolspan="2"ব্যবহার করবেন, সেই সারিতে মোট<td>বা<th>সংখ্যা একটি কমে যাবে! - Rowspan (Row Span): যখন একাধিক সারি বা উপর-নিচের সেল একত্রিত হয়ে একটি একক সেলে পরিণত হয়। উদাহরণ:
<td rowspan="2">Science</td>। সবচেয়ে গুরুত্বপূর্ণ নিয়ম—যে সারিতেrowspan="2"লেখা হলো, তার পরবর্তী সারিতে (Next <tr>) গিয়ে ঐ কলামের জন্য কোনো<td>লেখা যাবে না; সরাসরি পরের কলামের ডেটা লিখতে হবে!
৬. পূর্ণাঙ্গ বোর্ড স্ট্যান্ডার্ড সৃজনশীল প্রশ্ন ও নির্ভুল কোড সমাধান
নিচে ঢাকা বোর্ড ও শীর্ষ কলেজের টেস্ট পরীক্ষার আদলে একটি আদর্শ ও বহুল প্রত্যাশিত সৃজনশীল প্রশ্ন সমাধানসহ উপস্থাপন করা হলো:
[উদ্দীপক]:
আরিফ তার কলেজের ওয়েবপেজের জন্য নিচের টেবিলটি তৈরি করার পরিকল্পনা করল:
| Student Info | Group | Result | |
|---|---|---|---|
| Roll | Name | ||
| 101 | Tanvir | Science | GPA 5.00 |
| 102 | Nabila | GPA 4.90 | |
এছাড়া টেবিলের নিচে কলেজের নোটিশ দেখার জন্য একটি লিংক রাখা হলো, যেখানে ক্লিক করলে ঢাকা শিক্ষা বোর্ডের অফিসিয়াল ওয়েবসাইট (www.dhakaeducationboard.gov.bd) নতুন ট্যাবে ওপেন হবে এবং পাশে কলেজের লোগো (logo.png, মাপ: 150x150) প্রদর্শিত হবে।
(ক) DNS কী? [১]
(খ) "ওয়েবপেজে ছবি যুক্ত করার ট্যাগ একটি এম্পটি ট্যাগ"—ব্যাখ্যা কর। [২]
(গ) উদ্দীপকের টেবিলের নিচের নোটিশ লিংক ও ছবি ওয়েবপেজে প্রদর্শনের জন্য প্রয়োজনীয় HTML কোড লিখ। [৩]
(ঘ) উদ্দীপকে প্রদর্শিত 'HSC Candidate List 2026' টেবিলটি হুবহু ওয়েবপেজে প্রদর্শনের জন্য সম্পূর্ণ HTML কোড লিখ। [৪]
সৃজনশীল প্রশ্নের সম্পূর্ণ আদর্শ সমাধান:
(ক) জ্ঞানমূলক উত্তর:
DNS (Domain Name System) হলো এমন একটি স্বয়ংক্রিয় অনুবাদক ব্যবস্থা, যা মানুষের সহজে মনে রাখার উপযোগী ডোমেন নামকে (যেমন: google.com) কম্পিউটারের বোঝার উপযোগী নিউমেরিক আইপি অ্যাড্রেসে (IP Address) রূপান্তর করে।
(খ) অনুধাবনমূলক উত্তর:
এইচটিএমএলে যেসকল ট্যাগের কেবল শুরু বা ওপেনিং ট্যাগ থাকে কিন্তু কোনো ক্লোজিং বা শেষ ট্যাগ এবং মধ্যকার কোনো টেক্সট কন্টেন্ট থাকে না, তাদেরকে এম্পটি ট্যাগ (Empty Tag) বলে।
ওয়েবপেজে ছবি যুক্ত করতে <img> ট্যাগ ব্যবহৃত হয়। এই ট্যাগে ছবির উৎস ও বৈশিষ্ট্য নির্ধারণের জন্য বিভিন্ন অ্যাট্রিবিউট (যেমন: src, alt, width ইত্যাদি) ব্যবহৃত হয়। কিন্তু এর কোনো পৃথক সমাপ্তি ট্যাগ (যেমন </img>) নেই এবং দুটি ট্যাগের মাঝে কোনো টেক্সট কন্টেন্ট রাখার সুযোগ নেই। তাই <img> একটি এম্পটি ট্যাগ।
(গ) প্রয়োগমূলক উত্তর:
উদ্দীপক অনুসারে নোটিশ লিংকটি নতুন ট্যাবে খোলার জন্য target="_blank" অ্যাট্রিবিউট এবং ছবি প্রদর্শনের জন্য <img> ট্যাগে দৈর্ঘ্য ও প্রস্থ যুক্ত করতে হবে। প্রয়োজনীয় HTML কোড নিচে দেওয়া হলো:
<!DOCTYPE html>
<html>
<head>
<title>Notice and Logo</title>
</head>
<body>
<!-- নোটিশের জন্য নতুন ট্যাবে খোলার হাইপারলিংক -->
<p>কলেজের সকল অফিশিয়াল নোটিশ দেখতে ক্লিক করুন:
<a href="https://www.dhakaeducationboard.gov.bd" target="_blank">ঢাকা শিক্ষা বোর্ড নোটিশ</a>
</p>
<!-- কলেজের নির্ধারিত সাইজের লোগো যুক্ত করার কোড -->
<p>কলেজ লোগো:<br>
<img src="logo.png" alt="College Logo" width="150" height="150">
</p>
</body>
</html>
(ঘ) উচ্চতর দক্ষতামূলক উত্তর:
উদ্দীপকে প্রদর্শিত টেবিলটিতে মোট ৪টি সারি (<tr>) রয়েছে। এখানে প্রথম সারিতে 'Student Info' সেলটি পাশাপাশি ২টি কলাম মার্জ করায় colspan="2" এবং 'Group' ও 'Result' সেল দুটি উপর-নিচ ২টি সারি মার্জ করায় rowspan="2" ব্যবহৃত হয়েছে।
পরবর্তীতে তানভীর ও নাবিলা উভয়ের গ্রুপ 'Science' হওয়ায় ৩য় সারিতে 'Science' সেলে rowspan="2" ব্যবহার করা হয়েছে এবং স্বাভাবিকভাবেই ৪র্থ সারিতে গ্রুপ কলামের জন্য কোনো <td> রাখা হয়নি।
টেবিলটি তৈরির সম্পূর্ণ ও নির্ভুল HTML কোড নিম্নরূপ:
<!DOCTYPE html>
<html>
<head>
<title>HSC Candidate Table</title>
</head>
<body>
<table border="1" cellpadding="8" cellspacing="0" style="border-collapse: collapse; text-align: center;">
<caption><strong>HSC Candidate List 2026</strong></caption>
<!-- ১ম সারি: হেডার অংশ -->
<tr>
<th colspan="2">Student Info</th>
<th rowspan="2">Group</th>
<th rowspan="2">Result</th>
</tr>
<!-- ২য় সারি: সাব-হেডার অংশ -->
<tr>
<th>Roll</th>
<th>Name</th>
</tr>
<!-- ৩য় সারি: ১ম শিক্ষার্থীর তথ্য -->
<tr>
<td>101</td>
<td>Tanvir</td>
<td rowspan="2">Science</td>
<td>GPA 5.00</td>
</tr>
<!-- ৪র্থ সারি: ২য় শিক্ষার্থীর তথ্য (যেহেতু সায়েন্স মার্জড, তাই ৩টি td হবে) -->
<tr>
<td>102</td>
<td>Nabila</td>
<td>GPA 4.90</td>
</tr>
</table>
</body>
</html>
৭. এইচএসসি আইসিটি ৪র্থ অধ্যায়ের সাধারণ ৫টি প্রশ্ন ও উত্তর (FAQ)
প্রশ্ন ১: স্ট্যাটিক ও ডাইনামিক ওয়েবপেজের মধ্যে মূল পার্থক্য কী?
উত্তর: স্ট্যাটিক ওয়েবপেজের কন্টেন্ট ব্রাউজারে লোড হওয়ার পর নির্দিষ্ট থাকে এবং কোনো ডাটাবেজ সংযোগ থাকে না; কেবল HTML ও CSS দিয়ে তৈরি হয়। অন্যদিকে ডাইনামিক ওয়েবপেজে ব্যবহারকারীর ইনপুট বা রিকোয়েস্ট অনুযায়ী কন্টেন্ট স্বয়ংক্রিয়ভাবে পরিবর্তিত হয় (যেমন: ফেসবুকের নিউজফিড, পরীক্ষার রেজাল্ট পোর্টাল) এবং এতে ডাটাবেজ (MySQL, MongoDB) ও ব্যাকএন্ড স্ক্রিপ্টিং (PHP, Python) যুক্ত থাকে।
প্রশ্ন ২: ওয়েব হোস্টিং (Web Hosting) বলতে কী বোঝায়?
উত্তর: ইন্টারনেটের সাথে সার্বক্ষণিক যুক্ত থাকা কোনো বিশেষায়িত শক্তিশালী কম্পিউটারে (ওয়েব সার্ভার) একটি ওয়েবসাইটের সকল ফাইল, ছবি ও ডাটা সংরক্ষণ করে রাখার প্রক্রিয়াকে ওয়েব হোস্টিং বলে। হোস্টিং না থাকলে বিশ্বজুড়ে ইন্টারনেটের মাধ্যমে ওয়েবসাইট দেখা সম্ভব হয় না।
প্রশ্ন ৩: HTML এ টেবিল তৈরির সময় border="1" না লিখলে কী ঘটবে?
উত্তর: যদি <table> ট্যাগে border অ্যাট্রিবিউট ব্যবহার না করা হয়, তবে ব্রাউজারে টেবিলের সেলগুলোর চারপাশের সীমানা রেখা বা গ্রিডলাইন প্রদর্শিত হবে না। তথ্যগুলো সাধারণ লেখার মতো সারিবদ্ধ দেখাবে কিন্তু কোনো দাগ দেখা যাবে না।
প্রশ্ন ৪: অ্যাবসোলিউট ইউআরএল (Absolute URL) ও রিলেটিভ ইউআরএল (Relative URL)-এর পার্থক্য কী?
উত্তর: যে লিংকে প্রোটোকল ও ডোমেন নামসহ সম্পূর্ণ ওয়েব ঠিকানা উল্লেখ থাকে (যেমন: https://www.google.com/about.html), তাকে অ্যাবসোলিউট ইউআরএল বলে। আর যখন একই ওয়েবসাইটের ভেতরের কোনো ফোল্ডারের ফাইল নির্দেশ করা হয় (যেমন: contact.html বা images/pic.jpg), তাকে রিলেটিভ ইউআরএল বলে।
প্রশ্ন ৫: টেবিলের সেলের মধ্যকার ফাঁকা জায়গা নিয়ন্ত্রণের ট্যাগ অ্যাট্রিবিউট কী?
উত্তর: টেবিলের দুটি পাশাপাশি সেলের মধ্যবর্তী দূরত্ব নিয়ন্ত্রণের জন্য cellspacing এবং সেলের বর্ডার থেকে ভেতরের টেক্সট বা তথ্যের মধ্যকার দূরত্ব নিয়ন্ত্রণের জন্য cellpadding অ্যাট্রিবিউট ব্যবহৃত হয়।
Post a Comment