অধ্যায় - ৪: ওয়েব ডিজাইন পরিচিতি এবং এইচটিএমএল (HTML)

এইচএসসি আইসিটি: ৪র্থ অধ্যায় (সম্পূর্ণ নোট ও প্রশ্নব্যাংক)

ওয়েব ডিজাইন পরিচিতি এবং এইচটিএমএল (HTML) | HSC ICT Chapter 4 Lecture Notes & Guide

১. ওয়েব ডিজাইন ও ওয়েবসাইটের মৌলিক ধারণা

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

আইপি এড্রেস ও ডোমেইন নেম:

• IP Address: ইন্টারনেটে সংযুক্ত প্রতিটি কম্পিউটারের এক একটি নির্দিষ্ট অদ্বিতীয় গাণিতিক ঠিকানা থাকে। IPv4 হলো ৩২-বিটের এবং IPv6 হলো ১২৮-বিটের।
• Domain Name: আইপি এড্রেসের গাণিতিক রূপ মনে রাখা কঠিন বলে বর্ণ বা টেক্সটের মাধ্যমে দেওয়া ইউনিক নামকে ডোমেইন নেম বলে। ডোমেইন নামকে আইপি এড্রেসে রূপান্তর করে DNS (Domain Name System)।

ওয়েবসাইটের প্রকারভেদ (গঠন অনুযায়ী):

• স্ট্যাটিক ওয়েবসাইট (Static Website): নির্দিষ্ট HTML দিয়ে তৈরি, যেখানে ডেটা পরিবর্তন হয় না। কোনো ডেটাবেজ যুক্ত থাকে না এবং লোডিং দ্রুত হয়।
• ডাইনামিক ওয়েবসাইট (Dynamic Website): রিয়েল-টাইমে ব্যবহারকারীর ইনপুট অনুযায়ী ডেটা পরিবর্তিত হয় (যেমন: Facebook)। ডেটাবেজ (SQL, PHP) ব্যবহার করা হয়।

ওয়েবসাইট স্ট্রাকচার (Website Structure):

• লিনিয়ার / সিকুয়েন্সিয়াল: পেজগুলো একের পর এক সাজানো থাকে (১, ২, ৩...)।
• ট্রি / হাইরারকিক্যাল (Hierarchical): হোম পেজের অধীনে সাব-মেনু থাকে (সবচেয়ে জনপ্রিয় ও ব্যবহৃত)।
• ওয়েব লিঙ্কড / নেটওয়ার্ক: সব পেজ একটার সাথে আরেকটা লিঙ্ক করা থাকে।
• হাইব্রিড / কম্বিনেশন: একাধিক স্ট্রাকচারের মিশ্রণ।

২. এইচটিএমএল (HTML) মৌলিক ট্যাগ ও এট্রিবিউট

HTML এর পূর্ণরূপ হলো HyperText Markup Language। এর আবিষ্কারক **টিম বার্নার্স লি (Tim Berners-Lee)**।

ট্যাগ (Tag)	কাজ / বর্ণনা	উদাহরণ
<h1> থেকে <h6>	হেডিং বা শিরোনাম দিতে (h1 সবচেয়ে বড়, h6 সবচেয়ে ছোট)	<h1>প্রধান শিরোনাম</h1>
<p>	প্যারাগ্রাফ লেখার জন্য	<p>এটি প্যারাগ্রাফ</p>
<a>	হাইপারলিঙ্ক তৈরির জন্য (Attribute: href)	<a href="https://google.com">Google</a>
<img>	ছবি যুক্ত করার জন্য (Attribute: src, width, height)	<img src="pic.jpg" alt="ছবি">
<table>, <tr>, <td>	টেবিল, টেবিল রো ও টেবিল ডেটা তৈরির জন্য	colspan, rowspan এট্রিবিউট ব্যবহৃত হয়
<ol>, <ul>, <li>	ক্রমিক (Ordered) ও অক্রমিক (Unordered) লিস্ট	<ol type="1"><li>Item</li></ol>

ফরম্যাটিং ট্যাগসমূহ:
<b> বা <strong> (বোল্ড করতে), <i> বা <em> (ইটালিক করতে), <u> (আন্ডারলাইন করতে), <sub> (সাবস্ক্রিপ্ট, যেমন: H₂O), <sup> (সুপারস্ক্রিপ্ট, যেমন: A²)।

৩. গুরুত্বপূর্ণ বহুনির্বাচনী প্রশ্নপত্র (MCQ)

১. HTML এর আবিষ্কারক কে?

(ক) স্টিভ জবস

(খ) টিম বার্নার্স লি

(গ) বিল গেটস

(ঘ) মার্ক জুকারবার্গ

সঠিক উত্তর: (খ) টিম বার্নার্স লি
ব্যাখ্যা: ১৯৯০ সালে সিইআরএন (CERN)-এ কাজ করার সময় তিনি HTML আবিষ্কার করেন।

২. IPv4 ঠিকানায় কয়টি বিট থাকে?

(ক) ১৬ বিট

(খ) ৩২ বিট

(গ) ৬৪ বিট

(ঘ) ১২৮ বিট

সঠিক উত্তর: (খ) ৩২ বিট
ব্যাখ্যা: IPv4Address ৩২-বিটের (৪টি অক্টেট) এবং IPv6 হলো ১২৮-বিটের।

৩. নিচের কোনটি এম্পটি ট্যাগ (Empty Tag)?

(ক) <p>

(খ) <br>

(গ) <h1>

(ঘ) <table>

সঠিক উত্তর: (খ) <br>
ব্যাখ্যা: যে ট্যাগের কোনো ক্লোজিং ট্যাগ বা কনটেন্ট থাকে না তাকে এম্পটি ট্যাগ বলে (যেমন: <br>, <img>, <hr>)।

৪. টেবিলের দুটি কলামকে একত্র করার জন্য কোন এট্রিবিউট ব্যবহৃত হয়?

(ক) rowspan

(খ) colspan

(গ) border

(ঘ) align

সঠিক উত্তর: (খ) colspan
ব্যাখ্যা: কলাম একত্র করতে colspan এবং রো একত্র করতে rowspan ব্যবহৃত হয়।

৫. হাইপারলিঙ্ক তৈরি করার সঠিক HTML ট্যাগ কোনটি?

(ক) <a href="url">Text</a>

(খ) <link src="url">Text</link>

(গ) <a src="url">Text</a>

(ঘ) <url href="link">Text</url>

সঠিক উত্তর: (ক) <a href="url">Text</a>
ব্যাখ্যা: Anchor tag (<a>) এর সাথে href (hypertext reference) এট্রিবিউট ব্যবহার করতে হয়।

৬. কোন সাইটে ব্যবহারকারীর ডাটা ইনপুটের সুযোগ থাকে এবং ডাটাবেজ যুক্ত থাকে?

(ক) স্ট্যাটিক ওয়েবসাইট

(খ) ডাইনামিক ওয়েবসাইট

(গ) অফলাইন ওয়েবসাইট

(ঘ) লোকাল ওয়েবসাইট

সঠিক উত্তর: (খ) ডাইনামিক ওয়েবসাইট
ব্যাখ্যা: ডাইনামিক সাইটে ডাটাবেজ যুক্ত থাকে এবং ইন্টারঅ্যাক্টিভ কনটেন্ট প্রদর্শন করে।

৭. সবচেয়ে ছোট আকারের হেডিং ট্যাগ কোনটি?

(ক) <h1>

(খ) <h3>

(গ) <h6>

(ঘ) <h7>

সঠিক উত্তর: (গ) <h6>
ব্যাখ্যা: HTML এ হেডিং h1 থেকে h6 পর্যন্ত হয়ে থাকে; h1 সবচেয়ে বড় এবং h6 সবচেয়ে ছোট।

৮. আন-অর্ডারড (Unordered) লিস্ট তৈরির ট্যাগ কোনটি?

(ক) <ol>

(খ) <ul>

(গ) <li>

(ঘ) <list>

সঠিক উত্তর: (খ) <ul>
ব্যাখ্যা: <ul> দিয়ে বুলেট সংবলিত আন-অর্ডারড লিস্ট তৈরি হয় এবং <ol> দিয়ে ক্রমিক নম্বরযুক্ত লিস্ট হয়।

৯. ডোমেইন নেমকে IP Address-এ রূপান্তর করে কোনটি?

(ক) HTTP

(খ) FTP

(গ) DNS

(ঘ) URL

সঠিক উত্তর: (গ) DNS
ব্যাখ্যা: DNS (Domain Name System) মানুষ বোধগম্য ডোমেইন নামকে কম্পিউটারের আইপি ঠিকানায় অনুবাদ করে।

১০. ছবি যুক্ত করার জন্য <img> ট্যাগের সাথে আবশ্যকীয় এট্রিবিউট কোনটি?

(ক) href

(খ) link

(গ) src

(ঘ) alt

সঠিক উত্তর: (গ) src
ব্যাখ্যা: src (Source) এট্রিবিউটে ছবির সোর্স ফাইল বা পাথ উল্লেখ করা হয়।

৪. নমুনা সৃজনশীল প্রশ্নপত্র (CQ) ও সমাধান

সৃজনশীল প্রশ্ন ১:
‘ঢাকা কলেজ’ তাদের কলেজের জন্য একটি নতুন ওয়েবসাইট চালু করেছে। ওয়েবসাইটটির হোম পেজে ক্লিক করলে বিভিন্ন বিভাগের তালিকা এবং 'Notice.html' পেজের লিঙ্ক পাওয়া যায়। এছাড়া ওয়েবপেজে কলেজের একটি লোগো (logo.jpg) এবং একটি টেবিল প্রদর্শন করা হয়েছে যাতে রোল, নাম ও জিপিএ তথ্য সাজানো আছে।

(ক) ডোমেইন নেম (Domain Name) কী? মান: ১

(খ) “স্ট্যাটিক ওয়েবসাইটের চেয়ে ডাইনামিক ওয়েবসাইট অধিক সুবিধাজনক”— বুঝিয়ে লেখ। মান: ২

(গ) উদ্দীপকে উল্লেখিত ছবি (logo.jpg) এবং 'Notice.html' হাইপারলিঙ্ক যুক্ত করার HTML কোড লেখ। মান: ৩

(ঘ) উদ্দীপকের আলোকে ৩ জন শিক্ষার্থীর তথ্য (রোল, নাম, জিপিএ) সম্বলিত বর্ডারসহ একটি টেবিল তৈরির HTML কোড লেখ। মান: ৪

(ক) উত্তর: ইন্টারনেটে আইপি এড্রেসকে সহজে চেনার জন্য যে বর্ণভিত্তিক অদ্বিতীয় নাম ব্যবহার করা হয় তাকে ডোমেইন নেম বলে (যেমন: www.dhakacollege.edu.bd)।

(খ) উত্তর: ডাইনামিক ওয়েবসাইটে ব্যবহারকারীর ইনপুট অনুযায়ী রিয়েল-টাইমে তথ্য পরিবর্তন হয়, ডাটাবেজ যুক্ত থাকায় বিপুল পরিমাণ তথ্য অনুসন্ধান ও সংরক্ষণ সহজ হয়। এছাড়া ব্যবহারকারী ইন্টারঅ্যাক্ট বা লগইন করতে পারে, যা স্ট্যাটিক ওয়েবসাইটে সম্ভব নয়। তাই ডাইনামিক সাইট অধিক সুবিধাজনক।

(গ) উত্তর:
HTML কোড:

<!-- ছবি যুক্ত করার কোড -->
<img src="logo.jpg" alt="College Logo" width="200" height="150">

<!-- হাইপারলিঙ্ক যুক্ত করার কোড -->
<a href="Notice.html">নোটিশ দেখতে এখানে ক্লিক করুন</a>

(ঘ) উত্তর: ৩ জন শিক্ষার্থীর তথ্য দিয়ে বর্ডারসহ টেবিল তৈরির HTML কোড নিচে দেওয়া হলো:

<!DOCTYPE html>
<html>
<head>
    <title>Student Table</title>
</head>
<body>
    <table border="1" style="border-collapse: collapse; width: 80%;">
        <tr style="background-color: #f2f2f2;">
            <th>রোল</th>
            <th>নাম</th>
            <th>জিপিএ</th>
        </tr>
        <tr>
            <td>১০১</td>
            <td>রহিম</td>
            <td>৫.০০</td>
        </tr>
        <tr>
            <td>১০২</td>
            <td>করিম</td>
            <td>৪.৮০</td>
        </tr>
        <tr>
            <td>১০৩</td>
            <td>সালাহ</td>
            <td>৪.৯০</td>
        </tr>
    </table>
</body>
</html>

সৃজনশীল প্রশ্ন ২:
আইসিটি শিক্ষক ক্লাসে বোর্ডের মাধ্যমে একটি ওয়েব স্ট্রাকচার আঁকলেন যার মূল হোম পেজের নিচে কয়েকটি সাব-পেজ শাখা-প্রশাখার মতো যুক্ত। এরপর তিনি ছাত্রদের একটি কেমিক্যাল ইকুয়েশন $H_2SO_4$ এবং একটি ম্যাথ ইকুয়েশন $(a+b)^2 = a^2 + 2ab + b^2$ ওয়েব পেজে প্রদর্শনের কোড লিখতে বললেন।

(ক) ওয়েব ব্রাউজার কী? মান: ১

(খ) HTML এ <br> ট্যাগকে কেন এম্পটি ট্যাগ বলা হয়? মান: ২

(গ) শিক্ষক প্রদর্শিত ওয়েবসাইট স্ট্রাকচারটি ব্যাখ্যা করো। মান: ৩

(ঘ) শিক্ষকদের দেওয়া সমীকরণ দুটি ওয়েব পেজে দেখানোর জন্য প্রয়োজনীয় HTML কোড তৈরি করো। মান: ৪

(ক) উত্তর: ওয়েব ব্রাউজার হলো এমন একটি সফটওয়্যার অ্যাপ্লিকেশন যার মাধ্যমে ইন্টারনেটে থাকা বিভিন্ন ওয়েব পেজ বা ওয়েবসাইট প্রদর্শন ও ব্রাউজ করা যায় (যেমন: Chrome, Firefox)।

(খ) উত্তর: HTML-এ যেসব ট্যাগের শুধুমাত্র ওপেনিং ট্যাগ থাকে কিন্তু কোনো ক্লোজিং ট্যাগ বা বিষয়বস্তু (Content) থাকে না, সেগুলোকে এম্পটি ট্যাগ বলে। <br> ট্যাগ দিয়ে লাইন ব্রেক বা পরবর্তী লাইনে যাওয়া নির্দেশ করা হয়, এর কোনো শেষ ট্যাগ নেই বলে এটি একটি এম্পটি ট্যাগ।

(গ) উত্তর: উদ্দীপকে বর্ণিত শাখা-প্রশাখাযুক্ত ওয়েব স্ট্রাকচারটি হলো **ট্রি বা হাইরারকিক্যাল (Tree/Hierarchical) স্ট্রাকচার**।
এই কাঠামোতে একটি মূল হোম পেজ থাকে, সেখান থেকে প্রধান শাখা বা ক্যাটাগরি পেজে যাওয়া যায় এবং ক্যাটাগরি পেজ থেকে সাব-পেজে লিংক করা থাকে। এটি সবচেয়ে সহজ ও বহুল ব্যবহৃত ওয়েবসাইট স্ট্রাকচার (যেমন: কলেজ, স্কুল বা ই-কমার্স ওয়েবসাইট)।

(ঘ) উত্তর: সমীকরণ দুটি সাবস্ক্রিপ্ট (<sub>) এবং সুপারস্ক্রিপ্ট (<sup>) ট্যাগের সাহায্যে ওয়েবপেজে দেখানোর HTML কোড নিচে দেওয়া হলো:

<!DOCTYPE html>
<html>
<head>
    <title>Equations</title>
</head>
<body>
    <h3>রাসায়নিক সমীকরণ:</h3>
    <p>H<sub>2</sub>SO<sub>4</sub></p>

    <h3>গাণিতিক সমীকরণ:</h3>
    <p>(a+b)<sup>2</sup> = a<sup>2</sup> + 2ab + b<sup>2</sup></p>
</body>
</html>