ওয়েব ডিজাইন ও HTML — এইচএসসি আইসিটি ৪র্থ অধ্যায় নোটের ফিচার্ড ছবি

সংক্ষিপ্ত উত্তর: এইচএসসি আইসিটির ৪র্থ অধ্যায় “ওয়েব ডিজাইন পরিচিতি ও HTML” মূলত শেখায় — ওয়েবসাইট কীভাবে গঠিত হয়, HTML ডকুমেন্টের কাঠামো কেমন, আর নানা HTML ট্যাগ ও অ্যাট্রিবিউট দিয়ে ওয়েবপেজ কীভাবে তৈরি করতে হয়। এই অধ্যায় থেকে প্রতি বছর বহুনির্বাচনিতে ৮–১০টি প্রশ্ন এবং সৃজনশীলে অন্তত এক সেট প্রশ্ন আসে। HTML ট্যাগ, অ্যাট্রিবিউট আর ওয়েবসাইট পাবলিশিং অংশটা ভালো করে পড়লেই এখান থেকে পূর্ণ নম্বর তোলা সম্ভব।

সত্যি কথা বলি — আইসিটির অনেক ছাত্রছাত্রীর কাছে এই অধ্যায়টা একটু অদ্ভুত লাগে। সংখ্যা পদ্ধতির মতো অঙ্ক নেই, প্রোগ্রামিংয়ের মতো লজিকও নেই; শুধু ট্যাগ আর সংজ্ঞা। ফলে বেশিরভাগই এটাকে “মুখস্থের অধ্যায়” ভেবে এড়িয়ে যায়। আর এখানেই ভুলটা হয়। আমার অভিজ্ঞতায় দেখেছি, যারা ট্যাগগুলোর কাজ বুঝে পড়ে, তাদের কাছে এটা আইসিটির সবচেয়ে সহজে নম্বর তোলার অধ্যায় হয়ে যায় — কারণ প্রশ্ন প্রায় প্রতি বছর একই জায়গা থেকে ঘুরেফিরে আসে।

এই গাইডে আমি পুরো অধ্যায়টাকে পরীক্ষার দৃষ্টিকোণ থেকে সাজিয়েছি: প্রতিটা টপিকের সংক্ষিপ্ত নোট, পরীক্ষায় আসা গুরুত্বপূর্ণ ট্যাগের টেবিল, ব্যাখ্যাসহ ১০টি বোর্ড-ধাঁচের MCQ, একটা পূর্ণ সৃজনশীল প্রশ্নোত্তর, আর শেষে কমন ভুলগুলো। এর আগে আইসিটির তৃতীয় অধ্যায় সংখ্যা পদ্ধতির বিস্তারিত নোট প্রকাশ করেছি — ওটা পড়ে থাকলে এই অধ্যায়টা আরও সহজ লাগবে।

পড়ার আগে একটা কথা — মোবাইলে বসে অধ্যায়ভিত্তিক MCQ আর সৃজনশীল প্র্যাকটিস করতে চাইলে নিচের অ্যাপটা কাজে লাগবে। এতে এইচএসসি আইসিটির প্রতিটা অধ্যায়ের ব্যাখ্যা, MCQ ও CQ এক জায়গায় সাজানো আছে।

এইচএসসি আইসিটি গাইড অ্যাপ ডাউনলোড করো

Table of Contents

এইচএসসি আইসিটি ৪র্থ অধ্যায়ে কী কী টপিক আছে?

পুরো অধ্যায়টাকে পাঁচটা ভাগে ভাগ করে নিলে পড়তে সুবিধা হয়। নিচের টেবিলে দেখো কোন অংশ থেকে কী ধরনের প্রশ্ন আসে:

অংশমূল টপিকপরীক্ষায় গুরুত্ব
ওয়েবসাইটের ধারণাওয়েবসাইট, ওয়েবপেজ, হোমপেজ, ওয়েব পোর্টাল, ব্রাউজারMCQ-তে ২–৩টি
ওয়েবসাইটের কাঠামোফ্ল্যাট, হায়ারার্কিক্যাল, নেটওয়ার্ক কাঠামোMCQ-তে ১–২টি
HTML পরিচিতিHTML-এর সংজ্ঞা, বৈশিষ্ট্য, ডকুমেন্ট কাঠামোMCQ + সৃজনশীল (ক, খ)
ট্যাগ ও অ্যাট্রিবিউটকন্টেইনার/এম্পটি ট্যাগ, গুরুত্বপূর্ণ ট্যাগ, অ্যাট্রিবিউটসবচেয়ে বেশি — MCQ ও সৃজনশীল দুটোতেই
পাবলিশিংডোমেইন, হোস্টিং, ওয়েবসাইট প্রকাশের ধাপMCQ-তে ১–২টি, সৃজনশীলে (ঘ)

লক্ষ করো — চতুর্থ ভাগটাই এই অধ্যায়ের প্রাণ। ট্যাগ আর অ্যাট্রিবিউটের অংশটা যে ভালোভাবে আয়ত্ত করবে, সে মোটামুটি পুরো অধ্যায়ের নম্বরই পকেটে পুরে ফেলবে।

HTML কী? এটা কি প্রোগ্রামিং ভাষা?

সংক্ষিপ্ত উত্তর: HTML-এর পূর্ণরূপ Hyper Text Markup Language বা হাইপার টেক্সট মার্কআপ ল্যাঙ্গুয়েজ। এটি ওয়েবপেজ তৈরি ও সাজানোর জন্য ব্যবহৃত একটি মার্কআপ ভাষা — প্রোগ্রামিং ভাষা নয়। কারণ এতে কোনো লজিক, শর্ত বা লুপ চালানো যায় না; এটি শুধু বলে দেয় পেজের কোন অংশটা শিরোনাম, কোনটা অনুচ্ছেদ, কোনটা ছবি বা লিংক। ঢাকা বোর্ড ২০২৪-এ এই প্রশ্নটাই এসেছিল।

আমি যখন প্রথম HTML শিখেছিলাম, তখন আমারও একই ভুল ধারণা ছিল — “ভাষা” শুনেই ভেবেছিলাম এটা সি প্রোগ্রামিংয়ের মতো কিছু। পরে বুঝলাম, পার্থক্যটা আসলে খুব সহজ। প্রোগ্রামিং ভাষা কম্পিউটারকে কী করতে হবে তা বলে (হিসাব করো, সিদ্ধান্ত নাও, পুনরাবৃত্তি করো)। আর HTML শুধু বলে কীভাবে দেখাতে হবে — এই লেখাটা বড় করে দেখাও, ওই ছবিটা এখানে বসাও। একে বলে “মার্কআপ” — লেখার গায়ে চিহ্ন লাগিয়ে তার গঠন বুঝিয়ে দেওয়া।

HTML-এর কয়েকটা মৌলিক বৈশিষ্ট্য মনে রাখো, এগুলো MCQ-তে সরাসরি আসে:

  • HTML কেস সেনসিটিভ নয় — <P> আর <p> একই কাজ করে (রা. বোর্ড ২০২৩, চ. বোর্ড ২০২৩)।
  • HTML প্ল্যাটফর্ম নিরপেক্ষ — যেকোনো অপারেটিং সিস্টেমের ব্রাউজারে চলে।
  • HTML শেখা ও ব্যবহার করা সহজ — সাধারণ টেক্সট এডিটরেই (নোটপ্যাডেও) লেখা যায়।
  • HTML-এর সর্বশেষ সংস্করণ HTML5, যাতে অডিও-ভিডিওর মতো মাল্টিমিডিয়া সরাসরি সমর্থিত।

ওয়েবসাইট, ওয়েবপেজ, হোমপেজ ও ওয়েব পোর্টাল — পার্থক্য কোথায়?

সংক্ষিপ্ত উত্তর: ওয়েবসাইট হলো একই ডোমেইনের অধীনে পরস্পর-সম্পর্কিত অনেকগুলো ওয়েবপেজের সমষ্টি; ওয়েবপেজ হলো সেই সাইটের একেকটি পৃষ্ঠা; হোমপেজ হলো সাইটে ঢুকলে প্রথম যে পেজটা দেখা যায়; আর ওয়েব পোর্টাল হলো এমন সাইট যেখানে অনেক ধরনের সেবা এক জায়গায় পাওয়া যায় — যেমন বাংলাদেশের জাতীয় তথ্য বাতায়ন।

এই চারটা শব্দ পরীক্ষায় প্রায়ই গুলিয়ে দেওয়া হয়। নিচের টেবিলটা একবার দেখলেই পার্থক্য পরিষ্কার হয়ে যাবে:

শব্দসহজ সংজ্ঞাউদাহরণ
ওয়েবসাইটএকই ঠিকানার অধীন সম্পর্কিত পেজের সমষ্টিclassnotebd.com পুরো সাইটটা
ওয়েবপেজওয়েবসাইটের একেকটি পৃষ্ঠাসাইটের এই নোটের পেজটা
হোমপেজসাইটে ঢুকলে প্রথম যে পেজ দেখা যায়classnotebd.com-এ ঢুকলেই যেটা আসে
ওয়েব পোর্টালবহু সেবা এক ঠিকানায় দেওয়া সাইটবাংলাদেশ জাতীয় তথ্য বাতায়ন

এখানে আরেকটা জোড়া আছে যেটা নিয়ে শিক্ষার্থীরা সবচেয়ে বেশি দ্বিধায় পড়ে — ওয়েব ব্রাউজার বনাম সার্চ ইঞ্জিন। ব্রাউজার হলো সফটওয়্যার যেটা দিয়ে ওয়েবপেজ খোলা হয় (ক্রোম, ফায়ারফক্স, সাফারি)। আর সার্চ ইঞ্জিন হলো ওয়েবসাইট যেটা তথ্য খুঁজে দেয় (গুগল, বিং)। অর্থাৎ গুগল নিজে একটা ওয়েবসাইট, আর ক্রোম একটা ব্রাউজার — এই পার্থক্যটা MCQ-তে প্রায়ই আসে।

আরও দুটো সংজ্ঞা: URL (Uniform Resource Locator) হলো ওয়েবপেজের পূর্ণ ঠিকানা, আর ডোমেইন নেম হলো সাইটের স্বতন্ত্র নাম (যেমন classnotebd.com)। HTTP (Hyper Text Transfer Protocol) হলো ওয়েব সার্ভার ও ব্রাউজারের মধ্যে তথ্য আদান-প্রদানের নিয়ম।

ওয়েবসাইটের কাঠামো কত ধরনের?

সংক্ষিপ্ত উত্তর: ওয়েবসাইটের কাঠামো মূলত তিন ধরনের — ফ্ল্যাট বা লিনিয়ার (এক পেজ থেকে পরের পেজে সরলরেখায় যাওয়া যায়), হায়ারার্কিক্যাল বা ট্রি (হোমপেজ থেকে শাখা-প্রশাখার মতো ছড়িয়ে যাওয়া — সবচেয়ে বেশি ব্যবহৃত), এবং নেটওয়ার্ক (যেকোনো পেজ থেকে যেকোনো পেজে যাওয়া যায়)।

একটা সহজ উপমা দিই। ফ্ল্যাট কাঠামো হলো বইয়ের পাতা ওল্টানোর মতো — একের পর এক। হায়ারার্কিক্যাল কাঠামো হলো গাছের মতো — গোড়া (হোমপেজ) থেকে ডালপালা (বিভাগ) আর সেখান থেকে পাতা (নির্দিষ্ট পেজ)। আর নেটওয়ার্ক কাঠামো হলো মাকড়সার জালের মতো — সব পেজ সবার সঙ্গে যুক্ত। বাস্তবে বেশিরভাগ বড় ওয়েবসাইট হায়ারার্কিক্যাল কাঠামো ব্যবহার করে, কারণ এতে তথ্য খুঁজে পাওয়া সবচেয়ে সহজ।

HTML ডকুমেন্টের মৌলিক কাঠামো কেমন?

সংক্ষিপ্ত উত্তর: প্রতিটা HTML ডকুমেন্ট <!DOCTYPE html> ঘোষণা দিয়ে শুরু হয়, তারপর <html> ট্যাগের ভেতরে দুটো অংশ থাকে — <head> (শিরোনাম ও মেটা তথ্য, যা পেজে দেখা যায় না) এবং <body> (যা কিছু ব্রাউজারে দেখা যায় — লেখা, ছবি, লিংক সব এখানে)।

নিচে একটা সম্পূর্ণ উদাহরণ দেখো। কোডটা মনোযোগ দিয়ে পড়ো — পরীক্ষায় এই কাঠামো থেকে “কোন অংশে কী লিখতে হয়” ধরনের প্রশ্ন আসে:

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>আমার প্রথম ওয়েবপেজ</title>
</head>
<body>
    <h1>স্বাগতম</h1>
    <p>এটি আমার প্রথম HTML পেজ।</p>
</body>
</html>

এবার প্রতিটা অংশের কাজ বুঝে নাও:

  • <!DOCTYPE html> — এটা আসলে ট্যাগ নয়, একটা ঘোষণা। ব্রাউজারকে জানায় “এটা HTML5 ডকুমেন্ট”। ঢাকা বোর্ড ২০২৩-এ প্রশ্ন এসেছিল — ডকুমেন্টের অংশ না হয়েও যেটা লেখা জরুরি, সেটা কী? উত্তর: এই ঘোষণাটাই।
  • <html> — পুরো ডকুমেন্টের মূল বা রুট ট্যাগ; সবকিছু এর ভেতরে থাকে।
  • <head> — পেজের মেটা তথ্য থাকে এখানে; এর ভেতরের লেখা ব্রাউজারে দেখা যায় না।
  • <title> — ব্রাউজারের ট্যাবে যে শিরোনাম দেখায়, সেটা এখানে লেখা হয়।
  • <body> — পেজে যা কিছু দেখা যায়, সব এখানে লেখা হয়।

HTML ট্যাগ কী? এলিমেন্ট ও অ্যাট্রিবিউটের সঙ্গে পার্থক্য কী?

সংক্ষিপ্ত উত্তর: ট্যাগ হলো < > চিহ্নের ভেতরে লেখা কীওয়ার্ড, যা ব্রাউজারকে বলে কনটেন্ট কীভাবে দেখাতে হবে। ওপেনিং ট্যাগ + কনটেন্ট + ক্লোজিং ট্যাগ মিলে তৈরি হয় এলিমেন্ট। আর অ্যাট্রিবিউট হলো ট্যাগের ভেতরে লেখা অতিরিক্ত তথ্য (যেমন href="..."), যা name="value" আকারে লেখা হয়।

এই তিনটা সংজ্ঞা পরীক্ষায় “জ্ঞানমূলক” (ক) প্রশ্ন হিসেবে সরাসরি আসে, তাই মুখস্থ নয় — বুঝে রাখো। একটা উদাহরণ দিই:

<a href="https://classnotebd.com">ক্লাস নোট বিডি</a>

এখানে <a> হলো ওপেনিং ট্যাগ, </a> হলো ক্লোজিং ট্যাগ, href="https://classnotebd.com" হলো অ্যাট্রিবিউট, আর পুরো লাইনটা মিলে একটা এলিমেন্ট।

ট্যাগ দুই প্রকার — এই পার্থক্যটা এই অধ্যায়ের সবচেয়ে কমন MCQ টপিকগুলোর একটা:

বিষয়কন্টেইনার ট্যাগএম্পটি ট্যাগ
সংজ্ঞাওপেনিং ও ক্লোজিং — দুটো ট্যাগই থাকে, মাঝে কনটেন্ট ধারণ করেক্লোজিং ট্যাগ নেই, কনটেন্ট ধারণ করে না
উদাহরণ<b>, <i>, <p>, <font>, <a><br>, <hr>, <img>, <link>
মনে রাখার কৌশল“কন্টেইনার” মানে পাত্র — ভেতরে জিনিস (কনটেন্ট) রাখে“এম্পটি” মানে খালি — ভেতরে কিছু রাখে না, তাই বন্ধ করারও দরকার নেই

পরীক্ষায় আসা গুরুত্বপূর্ণ HTML ট্যাগের তালিকা

সংক্ষিপ্ত উত্তর: পরীক্ষায় বারবার আসা ট্যাগগুলো হলো — লেখা সাজানোর জন্য <h1>–<h6>, <p>, <b>, <i>, <u>, <sub>, <sup>, <br>, <font>; লিংক ও ছবির জন্য <a>, <img>; আর তালিকা-টেবিলের জন্য <ul>, <ol>, <li>, <table>, <tr>, <td>। নিচের টেবিলটা পরীক্ষার আগের রাতে একবার চোখ বুলিয়ে নিলেই চলবে।

ট্যাগকাজউদাহরণ
<h1>–<h6>শিরোনাম — h1 সবচেয়ে বড়, h6 সবচেয়ে ছোট<h1>অধ্যায় ৪</h1>
<p>অনুচ্ছেদ (প্যারাগ্রাফ)<p>এটি একটি প্যারা।</p>
<b>লেখা মোটা (বোল্ড) করা<b>গুরুত্বপূর্ণ</b>
<i>লেখা বাঁকা (ইটালিক) করা<i>বাঁকা লেখা</i>
<u>লেখার নিচে দাগ (আন্ডারলাইন)<u>দাগ দেওয়া</u>
<sub>নিচে ছোট করে লেখা (সাবস্ক্রিপ্ট)H<sub>2</sub>O → H₂O
<sup>উপরে ছোট করে লেখা (সুপারস্ক্রিপ্ট)a<sup>2</sup>+b<sup>2</sup>
<br>লাইন ভাঙা (এম্পটি ট্যাগ)প্রথম লাইন<br>দ্বিতীয় লাইন
<hr>আড়াআড়ি দাগ টানা (এম্পটি ট্যাগ)দুই অংশের মাঝে বিভাজন রেখা
<font>লেখার ধরন, আকার, রং বদলানো<font color="red">লাল লেখা</font>
<marquee>লেখা চলমান (স্ক্রলিং) করাবিজ্ঞপ্তি বোর্ডের চলমান লেখা
<a>হাইপারলিংক তৈরি করা<a href="...">ক্লিক করো</a>
<img>ছবি যোগ করা (এম্পটি ট্যাগ)<img src="pic.jpg">

এখানে একটা সৎ কথা বলে রাখি, যেটা বইয়ে স্পষ্ট করে লেখা নেই। <font> ট্যাগটা HTML-এর পুরনো সংস্করণের জিনিস — আধুনিক ওয়েব ডিজাইনে লেখার রং-আকার বদলাতে এখন CSS ব্যবহার করা হয়। কিন্তু সিলেবাসে যেহেতু আছে, পরীক্ষায় প্রশ্ন আসবেই (রা. বোর্ড ২০১৭-তে এর অ্যাট্রিবিউট নিয়ে প্রশ্ন এসেছে)। তাই পরীক্ষার জন্য শিখে রাখো, আর বাস্তব কাজে CSS-এর কথা মনে রাখো — দুটো জ্ঞানই তোমার কাজে লাগবে।

HTML অ্যাট্রিবিউট কী? <font> ট্যাগে কোন কোন অ্যাট্রিবিউট আছে?

সংক্ষিপ্ত উত্তর: অ্যাট্রিবিউট হলো ট্যাগের ভেতরে লেখা অতিরিক্ত তথ্য, যা name="value" আকারে লেখা হয়। <font> ট্যাগের তিনটি অ্যাট্রিবিউট আছে — face (লেখার ধরন), size (আকার) ও color (রং)। রা. বোর্ড ২০১৭-তে এই তিনটার কথাই জিজ্ঞেস করা হয়েছিল।

<font face="Arial" size="4" color="blue">নীল রঙের লেখা</font>

অ্যাট্রিবিউট নিয়ে আরও কয়েকটা পরীক্ষা-উপযোগী তথ্য:

  • style অ্যাট্রিবিউট — যেকোনো ট্যাগের ভেতরে সরাসরি স্টাইল (রং, আকার) দেওয়া যায়; য. বোর্ড ২০২৪-এ এটা নিয়ে প্রশ্ন এসেছে। উদাহরণ: <p style="color:red">লাল প্যারা</p>
  • href — <a> ট্যাগে লিংকের ঠিকানা দেয়; এটা ছাড়া হাইপারলিংক তৈরি হয় না (সি. বোর্ড ২০১৯)।
  • src — <img> ট্যাগে ছবির উৎস দেয়; এটাও অপরিহার্য।
  • alt — ছবি লোড না হলে বিকল্প লেখা দেখায়।
  • target=”_blank” — লিংক নতুন ট্যাবে খুলতে ব্যবহার হয়।

হাইপারলিংক কী? <a> ট্যাগের ব্যাখ্যা দাও

সংক্ষিপ্ত উত্তর: হাইপারলিংক হলো ওয়েবপেজের এমন লেখা বা ছবি, যাতে ক্লিক করলে অন্য পেজ বা ওয়েবসাইটে যাওয়া যায়। <a> (অ্যাঙ্কর) ট্যাগ দিয়ে হাইপারলিংক তৈরি করা হয়, আর href অ্যাট্রিবিউটে গন্তব্যের ঠিকানা লেখা হয় — href ছাড়া লিংক কাজ করে না।

<a href="https://classnotebd.com" target="_blank">ক্লাস নোট বিডি</a>

এই এক লাইনে তিনটা জিনিস ঘটছে: <a> বলছে “এটা একটা লিংক”, href বলছে “কোথায় যাবে”, আর target="_blank" বলছে “নতুন ট্যাবে খুলবে”। ঢা. বোর্ড ২০১৭-তে বলা হয়েছিল — বর্তমানে হাইপারলিংক ওয়েবপেজের একটি গুরুত্বপূর্ণ উপাদান। কেন? কারণ হাইপারলিংক ছাড়া ওয়েবপেজগুলো বিচ্ছিন্ন দ্বীপের মতো থাকত; লিংকই সেগুলোকে জুড়ে “ওয়েব” বা জাল তৈরি করে। কু. বোর্ড ২০২৪ ও দি. বোর্ড ২০২৩-এও <a> ট্যাগ নিয়ে প্রশ্ন এসেছে — বুঝতেই পারছো, এটা কতটা গুরুত্বপূর্ণ।

<img> ট্যাগ কী? এটা এম্পটি ট্যাগ কেন?

সংক্ষিপ্ত উত্তর: <img> ট্যাগ দিয়ে ওয়েবপেজে ছবি যোগ করা হয়। src অ্যাট্রিবিউটে ছবির ঠিকানা লেখা বাধ্যতামূলক। এটা এম্পটি ট্যাগ, কারণ এর কোনো ক্লোজিং ট্যাগ নেই এবং এটা কোনো কনটেন্ট ধারণ করে না — ছবিটা ট্যাগের ভেতরে নয়, src দিয়ে বাইরে থেকে আনা হয় (ব. বোর্ড ২০২৩)।

<img src="school.jpg" alt="আমার স্কুল" width="300" height="200">

এখানে alt-এর কাজটা অনেকে হালকাভাবে নেয়, কিন্তু এটা গুরুত্বপূর্ণ — ছবি কোনো কারণে লোড না হলে বা দৃষ্টিপ্রতিবন্ধী কেউ স্ক্রিন রিডার ব্যবহার করলে এই লেখাটাই ছবির বদলে কাজ করে। পরীক্ষায় “img ট্যাগে alt অ্যাট্রিবিউটের কাজ কী” — এমন প্রশ্ন আসতে পারে।

HTML-এ টেবিল ও তালিকা কীভাবে তৈরি করবো?

সংক্ষিপ্ত উত্তর: টেবিল বানাতে <table>-এর ভেতরে <tr> (সারি), আর প্রতি সারিতে <th> (শিরোনাম সেল) বা <td> (সাধারণ সেল) ব্যবহার করা হয়; উপরে <caption> দিলে টেবিলের শিরোনাম পাওয়া যায়। তালিকা দুই রকম — ক্রমিক (<ol>) ও বুলেট (<ul>), আর প্রতিটা আইটেম <li> ট্যাগে লেখা হয়।

<table border="1">
  <caption>পরীক্ষার রুটিন</caption>
  <tr>
    <th>তারিখ</th>
    <th>বিষয়</th>
  </tr>
  <tr>
    <td>১০ মে</td>
    <td>আইসিটি</td>
  </tr>
</table>

<ol>
  <li>প্রথম ধাপ</li>
  <li>দ্বিতীয় ধাপ</li>
</ol>

মনে রাখো — <th>-এর লেখা স্বয়ংক্রিয়ভাবে মোটা ও মাঝখানে সারিবদ্ধ হয়, আর <td>-এর লেখা সাধারণ থাকে। এই পার্থক্যটা MCQ-তে আসে।

ওয়েবপেজে বাংলা লেখা দেখাতে কী করতে হয়?

সংক্ষিপ্ত উত্তর: ওয়েবপেজে বাংলা (বা যেকোনো ইউনিকোড) লেখা সঠিকভাবে দেখাতে <head> অংশে <meta charset="UTF-8"> লিখতে হয়। এটা না লিখলে ব্রাউজার বাংলা অক্ষর চিনতে না পেরে ভাঙা বা অদ্ভুত চিহ্ন দেখাতে পারে। ব. বোর্ড ২০২৪-এ এই প্রশ্নটাই এসেছিল।

এটা আমার নিজের অভিজ্ঞতা থেকে বলছি — একবার আমি charset না দিয়ে একটা বাংলা পেজ বানিয়েছিলাম, আর ফোনের ব্রাউজারে সব লেখা প্রশ্নবোধক চিহ্নের মতো দেখাচ্ছিল। UTF-8 হলো এমন একটা কোডিং পদ্ধতি যাতে পৃথিবীর প্রায় সব ভাষার অক্ষর রাখা যায়। তাই বাংলা ওয়েবসাইটের জন্য এই এক লাইন বাধ্যতামূলক বললেই চলে।

ওয়েবসাইট পাবলিশিং ও হোস্টিং কী?

সংক্ষিপ্ত উত্তর: ওয়েবসাইট পাবলিশিং মানে নিজের বানানো ওয়েবপেজগুলো ইন্টারনেটে সবার জন্য উন্মুক্ত করা। এর ধাপ তিনটা — ডোমেইন নেম রেজিস্ট্রেশন করা, হোস্টিং সার্ভারে জায়গা নেওয়া, আর ফাইলগুলো সার্ভারে আপলোড করা। হোস্টিং হলো এমন সেবা যেখানে সার্ভার কম্পিউটারে তোমার ওয়েবপেজের ফাইল সংরক্ষণ করা হয়, যাতে পৃথিবীর যেকেউ ব্রাউজার দিয়ে সেগুলো দেখতে পারে।

একটা সহজ উপমা দিই — ধরো তুমি একটা দোকান খুলতে চাও। ডোমেইন নেম হলো দোকানের নাম ও ঠিকানা, হোস্টিং হলো দোকানের জায়গা ভাড়া নেওয়া, আর ফাইল আপলোড হলো দোকানে মাল সাজানো। জায়গা ভাড়া না নিলে দোকান খুলবে কোথায়? ঠিক তেমনি হোস্টিং ছাড়া ওয়েবসাইট ইন্টারনেটে থাকবে কোথায়? ঢা., দি., য. ও সি. বোর্ড ২০১৮-তে “হোস্টিং কেন প্রয়োজন” — এই প্রশ্নটাই এসেছিল। আর সি. বোর্ড ২০২৩-এ এসেছিল ওয়েবসাইট পাবলিশিংয়ের ব্যাখ্যা।

বোর্ড MCQ অনুশীলন — ব্যাখ্যাসহ ১০টি প্রশ্ন

নিচের ১০টা প্রশ্ন বোর্ড পরীক্ষার ধাঁচে সাজানো। আগে নিজে উত্তর দেওয়ার চেষ্টা করো, তারপর ব্যাখ্যা মিলিয়ে নাও:

১. HTML-এর পূর্ণরূপ কী?
ক) Hyper Text Markup Language ✅
খ) High Text Machine Language
গ) Hyperlink Text Markup Language
ঘ) Home Tool Markup Language
ব্যাখ্যা: Hyper Text Markup Language — “Markup” শব্দটাই মনে রাখার চাবি, কারণ HTML মার্কআপ ভাষা।

২. HTML কোন ধরনের ভাষা?
ক) প্রোগ্রামিং ভাষা
খ) মার্কআপ ভাষা ✅
গ) স্ক্রিপ্টিং ভাষা
ঘ) মেশিন ভাষা
ব্যাখ্যা: HTML-এ কোনো লজিক বা হিসাব চলে না, এটা শুধু ওয়েবপেজের গঠন বর্ণনা করে — তাই মার্কআপ ভাষা (ঢা. বোর্ড ২০২৪)।

৩. HTML কি কেস সেনসিটিভ?
ক) হ্যাঁ
খ) না ✅
গ) কখনো কখনো
ঘ) শুধু ট্যাগের ক্ষেত্রে
ব্যাখ্যা: <P> আর <p> একই — HTML ছোট-বড় হাতের অক্ষরে পার্থক্য করে না (রা. বোর্ড ২০২৩, চ. বোর্ড ২০২৩)।

৪. CSS-এর পূর্ণরূপ কী?
ক) Computer Style Sheets
খ) Cascading Style Sheets ✅
গ) Creative Style System
ঘ) Colorful Style Sheets
ব্যাখ্যা: Cascading Style Sheets — ওয়েবপেজের সাজসজ্জার (রং, ফন্ট, লেআউট) জন্য ব্যবহৃত হয়।

৫. ওয়েবপেজে ছবি যোগ করার ট্যাগ কোনটি?
ক) <pic>
খ) <image>
গ) <img> ✅
ঘ) <src>
ব্যাখ্যা: <img> ট্যাগের src অ্যাট্রিবিউটে ছবির ঠিকানা দিতে হয়।

৬. x = a² + b² লিখতে কোন ট্যাগ ব্যবহার করবে?
ক) <sub>
খ) <sup> ✅
গ) <up>
ঘ) <small>
ব্যাখ্যা: ঘাত বা পাওয়ার উপরে ছোট করে লিখতে সুপারস্ক্রিপ্ট (<sup>) ট্যাগ লাগে; নিচে লিখতে <sub> (যেমন H₂O)।

৭. <img> ট্যাগ এম্পটি ট্যাগ কেন?
ক) এতে ছবি থাকে না বলে
খ) এর ক্লোজিং ট্যাগ নেই এবং এটা কনটেন্ট ধারণ করে না বলে ✅
গ) এটা ছোট ট্যাগ বলে
ঘ) এতে অ্যাট্রিবিউট নেই বলে
ব্যাখ্যা: এম্পটি ট্যাগের সংজ্ঞাই হলো — ক্লোজিং ট্যাগ নেই, ভেতরে কনটেন্ট রাখে না (ব. বোর্ড ২০২৩)।

৮. হাইপারলিংক তৈরিতে কোন অ্যাট্রিবিউট অপরিহার্য?
ক) src
খ) alt
গ) href ✅
ঘ) target
ব্যাখ্যা: href-এ গন্তব্যের ঠিকানা না লিখলে <a> ট্যাগ লিংক হিসেবে কাজ করে না (সি. বোর্ড ২০১৯)।

৯. ব্রাউজারে ওয়েবসাইট খুললে প্রথম যে পেজ দেখা যায়, তাকে কী বলে?
ক) ওয়েব পোর্টাল
খ) হোমপেজ ✅
গ) সার্চ পেজ
ঘ) ল্যান্ডিং বোর্ড
ব্যাখ্যা: হোমপেজ হলো ওয়েবসাইটের প্রবেশদ্বার — এখান থেকেই অন্য পেজে যাওয়া যায়।

১০. ওয়েবপেজ সার্ভারে সংরক্ষণ করে ইন্টারনেটে প্রকাশ করাকে কী বলে?
ক) ডাউনলোডিং
খ) আপলোডিং
গ) হোস্টিং ✅
ঘ) ব্রাউজিং
ব্যাখ্যা: হোস্টিং সার্ভারে ফাইল রেখে সাইট সবার জন্য উন্মুক্ত করাই পাবলিশিংয়ের মূল ধাপ (সি. বোর্ড ২০২৩)।

সৃজনশীল প্রশ্নোত্তর (নমুনা)

উদ্দীপক: রাহাত তার স্কুলের জন্য একটি ওয়েবসাইট তৈরি করতে চায়। সে প্রথমে একটা হোমপেজ বানাল, যেখানে স্কুলের নাম বড় অক্ষরে, একটা ছবি, আর “ভর্তি তথ্য” লেখায় ক্লিক করলে ভর্তির পেজে যাওয়া যায়। তারপর সে ডোমেইন কিনে ফাইলগুলো একটি সার্ভারে আপলোড করল, যাতে সবাই ইন্টারনেটে সাইটটা দেখতে পারে।

ক) HTML কী? (১)
HTML-এর পূর্ণরূপ Hyper Text Markup Language। এটি ওয়েবপেজ তৈরি ও সাজানোর জন্য ব্যবহৃত একটি মার্কআপ ভাষা।

খ) “HTML প্রোগ্রামিং ভাষা নয়” — ব্যাখ্যা করো। (২)
প্রোগ্রামিং ভাষায় লজিক, শর্ত ও লুপের মাধ্যমে হিসাব-নিকাশ করা যায়। কিন্তু HTML-এ এসব কিছু নেই — এটা শুধু ট্যাগের মাধ্যমে বলে দেয় পেজের কোন অংশ কীভাবে প্রদর্শিত হবে। অর্থাৎ HTML কম্পিউটারকে “কী করতে হবে” তা নয়, “কীভাবে দেখাতে হবে” তা নির্দেশ করে। তাই HTML একটি মার্কআপ ভাষা, প্রোগ্রামিং ভাষা নয়।

গ) উদ্দীপকের হোমপেজের মূল HTML কাঠামোটি লেখো। (৩)

<!DOCTYPE html>
<html>
<head>
    <title>আমার স্কুল</title>
</head>
<body>
    <h1>মডেল হাই স্কুল</h1>
    <img src="school.jpg" alt="স্কুল ভবন">
    <a href="admission.html">ভর্তি তথ্য</a>
</body>
</html>

ঘ) “ওয়েবসাইট পাবলিশ করতে হোস্টিং অপরিহার্য” — বিশ্লেষণ করো। (৪)
উদ্দীপকে রাহাত শুধু HTML ফাইল বানিয়েই থেমে থাকেনি — সে ডোমেইন কিনে ফাইলগুলো সার্ভারে আপলোড করেছে। এটাই পাবলিশিং। নিজের কম্পিউটারে বানানো পেজ শুধু সে নিজেই দেখতে পেত; কিন্তু হোস্টিং সার্ভারে ফাইল রাখার ফলে সার্ভারটি ২৪ ঘণ্টা ইন্টারনেটে যুক্ত থেকে পৃথিবীর যেকোনো প্রান্তের ব্যবহারকারীর ব্রাউজারে পেজ সরবরাহ করতে পারছে। হোস্টিং ছাড়া ওয়েবসাইটের কোনো স্থায়ী অনলাইন ঠিকানা থাকে না — তাই ওয়েবসাইট পাবলিশ করতে হোস্টিং অপরিহার্য।

HTML অধ্যায়ে পরীক্ষার্থীদের ৫টি কমন ভুল

খাতা দেখার অভিজ্ঞতা থেকে বলছি — এই ভুলগুলো প্রতি বছর অসংখ্য শিক্ষার্থী করে:

  1. কন্টেইনার আর এম্পটি ট্যাগ উল্টে লেখা: <img>-কে কন্টেইনার আর <b>-কে এম্পটি লিখে আসে অনেকে। মনে রাখো — যেটার ক্লোজিং ট্যাগ আছে, সেটাই কন্টেইনার।
  2. href ছাড়া <a> ট্যাগ লেখা: শুধু <a>ক্লিক</a> লিখলে লিংক তৈরি হয় না — href অপরিহার্য।
  3. <!DOCTYPE html>-কে ট্যাগ ভাবা: এটা ট্যাগ নয়, ঘোষণা — এর কোনো ক্লোজিং নেই। “ডকুমেন্টের অংশ নয় কিন্তু লেখা জরুরি” — এই লাইনটা ঠিক এটার জন্যই।
  4. ট্যাগ আর অ্যাট্রিবিউট গুলিয়ে ফেলা: href, src, color — এগুলো ট্যাগ নয়, অ্যাট্রিবিউট। ট্যাগ সবসময় < >-এর ভেতরে থাকে।
  5. <sub> আর <sup> উল্টে যাওয়া: H₂O-তে sub (নিচে), a²-তে sup (উপরে)। পরীক্ষার চাপে এটা গুলিয়ে যায় — একবার হাতে লিখে প্র্যাকটিস করো।

সচরাচর জিজ্ঞাসিত প্রশ্ন (FAQ)

প্রশ্ন: HTML শিখতে কতদিন লাগে?
মৌলিক ট্যাগগুলো শিখতে ৭–১০ দিনের নিয়মিত প্র্যাকটিসই যথেষ্ট। তবে শুধু পড়ে নয় — নিজে কোড লিখে ব্রাউজারে দেখতে হবে, তবেই ট্যাগগুলো মনে থাকবে।

প্রশ্ন: HTML আর HTML5-এর পার্থক্য কী?
HTML5 হলো HTML-এর সর্বশেষ সংস্করণ। এতে <audio>, <video>-এর মতো নতুন ট্যাগ যোগ হয়েছে, আর <font>-এর মতো পুরনো ট্যাগ বাদ দেওয়া হয়েছে। পরীক্ষায় দুটোর কথাই আসতে পারে।

প্রশ্ন: মোবাইল দিয়ে কি HTML প্র্যাকটিস করা যায়?
হ্যাঁ, যায়। প্লে স্টোরে অনেক ফ্রি HTML এডিটর অ্যাপ আছে যেখানে কোড লিখে সঙ্গে সঙ্গে ফলাফল দেখা যায়। তবে পরীক্ষার খাতায় হাতে কোড লেখার অভ্যাসটাও রাখো — কারণ পরীক্ষায় হাতেই লিখতে হবে।

প্রশ্ন: ৪র্থ অধ্যায় থেকে সৃজনশীলে কত নম্বর আসে?
সাধারণত এক সেট (১০ নম্বর) সৃজনশীল প্রশ্ন এই অধ্যায় থেকে আসে, আর MCQ-তে ৮–১০টা। অর্থাৎ এই এক অধ্যায় থেকেই ১৮–২০ নম্বর তোলা সম্ভব।

প্রশ্ন: <font> ট্যাগ তো পুরনো, তাহলে এখনো শিখবো কেন?
কারণ এটা তোমার সিলেবাসে আছে এবং বোর্ড পরীক্ষায় এখান থেকে প্রশ্ন আসে। বাস্তব ওয়েব ডিজাইনে এখন CSS ব্যবহার হয় — পরীক্ষার জন্য <font> শেখো, ক্যারিয়ারের জন্য CSS।

প্রশ্ন: শুধু HTML দিয়ে কি পূর্ণাঙ্গ ওয়েবসাইট বানানো যায়?
মৌলিক কাঠামো বানানো যায়, কিন্তু সুন্দর ডিজাইনের জন্য CSS আর ইন্টার‌্যাক্টিভিটির জন্য জাভাস্ক্রিপ্ট দরকার হয়। তবে HSC সিলেবাসের জন্য HTML-ই যথেষ্ট।

প্রশ্ন: এই অধ্যায়ের সবচেয়ে গুরুত্বপূর্ণ ৩টা টপিক কী?
এক — কন্টেইনার বনাম এম্পটি ট্যাগের পার্থক্য; দুই — <a>, <img>, <font> ট্যাগ ও এদের অ্যাট্রিবিউট; তিন — ওয়েবসাইট পাবলিশিং ও হোস্টিং। এই তিনটা আয়ত্ত করলেই অধ্যায়ের ৮০% নম্বর নিশ্চিত।

শেষ কথা

এইচএসসি আইসিটির ৪র্থ অধ্যায়টা আসলে “কম পরিশ্রমে বেশি নম্বর”-এর অধ্যায়। ট্যাগগুলোর কাজ বুঝে পড়ো, উপরের ১০টা MCQ নিজে সমাধান করে দেখো, আর সৃজনশীলের কাঠামোটা একবার হাতে লিখে প্র্যাকটিস করো — দেখবে পরীক্ষার হলে এই অধ্যায় থেকে কোনো প্রশ্নই আর কঠিন লাগছে না।

আইসিটির পরের প্রস্তুতির জন্য পড়ো: এইচএসসি আইসিটি ৩য় অধ্যায়: সংখ্যা পদ্ধতি নোট ও সৃজনশীল গাইড — ওখানে বাইনারি-অক্টাল-হেক্সাডেসিমেল রূপান্তরের সহজ নিয়ম দেওয়া আছে।

তথ্যসূত্র: জাতীয় শিক্ষাক্রম ও পাঠ্যপুস্তক বোর্ড (NCTB)-এর এইচএসসি তথ্য ও যোগাযোগ প্রযুক্তি পাঠ্যবই এবং বিভিন্ন শিক্ষা বোর্ডের বিগত বছরের প্রশ্নপত্র। অফিশিয়াল পাঠ্যবইয়ের জন্য দেখো: nctb.gov.bd।

শেয়ার করো: Facebook Telegram WhatsApp