অধ্যায় 4 · ওয়েব ডিজাইন ও HTML
● HSC · অধ্যায় 4

ওয়েব ডিজাইন পরিচিতি ও HTML

WWW, DNS, সাইট কাঠামো, ট্যাগ, টেবিল ও ফর্ম

8 পাঠ

পাঠসমূহ

৪.১

ওয়েবের মৌলিক ধারণা: WWW, ব্রাউজার, IP, DNS, URL

ইন্টারনেট হলো নেটওয়ার্কের নেটওয়ার্ক, WWW তার ওপরের একটি সেবা — ঠিকানার বাংলা DNS, ভাষার ভিন্ন URL।

5 সাবটপিক
3 ল্যাব
5 MCQ
৪.২

ওয়েবসাইটের কাঠামো ও সাইটম্যাপ

সাইটম্যাপ ঠিক করে পেজগুলো কীভাবে যুক্ত — নেভিগেশন সহজ করতে কাঠামো প্রকাশ্যে আঁকা উচিত।

4 সাবটপিক
2 ল্যাব
5 MCQ
৪.৩

HTML ডকুমেন্টের গঠন ও বেসিক ট্যাগ

HTML ডকুমেন্ট ট্যাগ দিয়ে গাথা — গঠন ঠিক থাকলে ব্রাউজার ঠিকভাবে রেন্ডার করে।

5 সাবটপিক
2 ল্যাব
5 MCQ
৪.৪

টেক্সট ফরম্যাটিং ট্যাগ

টেক্সট ফরম্যাটিং ট্যাগ কনটেন্টে গুরুত্ব ও অর্থ দেয় — strong অর্থপূর্ণ, b শুধু দৃশ্যমান।

4 সাবটপিক
5 ল্যাব
8 MCQ
৪.৫

হাইপারলিংক ও ইমেজ

লিঙ্কই ওয়েবের হৃদয়; ইমেজে alt টেক্সট অ্যাক্সেসিবিলিটি ও SEO দুটোর জন্যই জরুরি।

4 সাবটপিক
2 ল্যাব
12 MCQ
৪.৬

HTML টেবিল

টেবিল ডেটা সাজায়; colspan কলাম মিলিয়ে দেয়, rowspan রো মিলিয়ে দেয় — ল্যাবে মার্জ অ্যানিমেশন দেখো।

4 সাবটপিক
6 ল্যাব
6 MCQ
৪.৭

লিস্ট ও ফর্ম

লিস্ট তালিকা সাজায়, ফর্ম ইউজার ইনপুট নেয় — input টাইপ ঠিক করলে মোবাইলে সঠিক কিবোর্ড ও ভ্যালিডেশন পাওয়া যায়।

5 সাবটপিক
2 ল্যাব
6 MCQ
৪.৮

ডোমেইন, হোস্টিং, FTP ও SEO

সাইট লাইভ করতে ডোমেইন + হোস্টিং + আপলোড (FTP) লাগে; SEO করলে সার্চ ইঞ্জিন সহজে খুঁজে পায়।

5 সাবটপিক
2 ল্যাব
5 MCQ

এই অধ্যায়ের বোর্ড প্রশ্ন

মোট ১৬৫টি MCQ · ১টি সৃজনশীল — প্রথম সেট ফ্রি

দিনাজপুর বোর্ড ২০২৩ (সেট গ) · ৬টি MCQ ফ্রি
  1. ১. ওয়েবসাইট পাবলিশ করার জন্য এমন একটি সার্ভার কম্পিউটার রাখতে হয় যা— i. সর্বক্ষণ সচল থাকতে হয় ii. সার্বক্ষণিক ইন্টারনেটের সাথে যুক্ত থাকতে হয় iii. পাবলিক আইপি অ্যাড্রেস থাকতে হয় নিচের কোনটি সঠিক?

  2. ২. HTML এর লিংক ট্যাগ নিচের কোনটি?

  3. ৩. HTML কোড <P align = "center"> ICT </P> এ অ্যাট্রিবিউট ভ্যালু কোনটি?

  4. ৪. <table> ট্যাগের ব্যবহৃত অ্যাট্রিবিউট হলো—

  5. ৫. একটি ওয়েবসাইটে কয়টি অংশ থাকে?

  6. ৬. কোনটি সঠিক ট্যাগ?

সমন্বিত (সকল বোর্ড) ২০২৬ — আংশিক (৫টি প্রশ্ন)

১টি MCQ · প্যাকেজ কিনলে খুলবে

লক · কিনুন

ঢাকা বোর্ড ২০২৫ (সেট গ)

৪টি MCQ · প্যাকেজ কিনলে খুলবে

লক · কিনুন

সিলেট বোর্ড ২০২৫ (সেট গ)

৫টি MCQ · প্যাকেজ কিনলে খুলবে

লক · কিনুন

দিনাজপুর বোর্ড ২০২৫ (সেট ক)

৩টি MCQ · প্যাকেজ কিনলে খুলবে

লক · কিনুন

রাজশাহী বোর্ড ২০২৫ (সেট গ)

৪টি MCQ · প্যাকেজ কিনলে খুলবে

লক · কিনুন

যশোর বোর্ড ২০২৫ (সেট ক)

৫টি MCQ · প্যাকেজ কিনলে খুলবে

লক · কিনুন

ময়মনসিংহ বোর্ড ২০২৫ (সেট ক)

৪টি MCQ · প্যাকেজ কিনলে খুলবে

লক · কিনুন

বরিশাল বোর্ড ২০২৫ (সেট খ)

৪টি MCQ · প্যাকেজ কিনলে খুলবে

লক · কিনুন

কুমিল্লা বোর্ড ২০২৫ (সেট খ)

৪টি MCQ · প্যাকেজ কিনলে খুলবে

লক · কিনুন

চট্টগ্রাম বোর্ড ২০২৫ (সেট ক)

১টি MCQ · প্যাকেজ কিনলে খুলবে

লক · কিনুন

ঢাকা বোর্ড ২০২৪ (সেট গ)

৪টি MCQ · প্যাকেজ কিনলে খুলবে

লক · কিনুন

যশোর বোর্ড ২০২৪ (সেট ঘ)

৫টি MCQ · প্যাকেজ কিনলে খুলবে

লক · কিনুন

রাজশাহী বোর্ড ২০২৪ (সেট গ)

৪টি MCQ · প্যাকেজ কিনলে খুলবে

লক · কিনুন

কুমিল্লা বোর্ড ২০২৪ (সেট ঘ)

৫টি MCQ · প্যাকেজ কিনলে খুলবে

লক · কিনুন

চট্টগ্রাম বোর্ড ২০২৪ (সেট ঘ)

৪টি MCQ · প্যাকেজ কিনলে খুলবে

লক · কিনুন

সিলেট বোর্ড ২০২৪

৫টি MCQ · প্যাকেজ কিনলে খুলবে

লক · কিনুন

দিনাজপুর বোর্ড ২০২৪

৫টি MCQ · প্যাকেজ কিনলে খুলবে

লক · কিনুন

ময়মনসিংহ বোর্ড ২০২৪

৫টি MCQ · প্যাকেজ কিনলে খুলবে

লক · কিনুন

ঢাকা বোর্ড ২০২৩ (সেট খ)

৩টি MCQ · প্যাকেজ কিনলে খুলবে

লক · কিনুন

যশোর বোর্ড ২০২৩ (সেট ক)

৩টি MCQ · প্যাকেজ কিনলে খুলবে

লক · কিনুন

চট্টগ্রাম বোর্ড ২০২৩ (সেট গ)

৪টি MCQ · প্যাকেজ কিনলে খুলবে

লক · কিনুন

রাজশাহী বোর্ড ২০২৩ (সেট গ)

৫টি MCQ · প্যাকেজ কিনলে খুলবে

লক · কিনুন

বরিশাল বোর্ড ২০২৩ (সেট গ)

৩টি MCQ · প্যাকেজ কিনলে খুলবে

লক · কিনুন

সিলেট বোর্ড ২০২৩ (সেট ক)

৪টি MCQ · প্যাকেজ কিনলে খুলবে

লক · কিনুন

ময়মনসিংহ বোর্ড ২০২৩ (সেট গ)

৫টি MCQ · প্যাকেজ কিনলে খুলবে

লক · কিনুন

কুমিল্লা বোর্ড ২০২৩ (সেট খ)

৪টি MCQ · প্যাকেজ কিনলে খুলবে

লক · কিনুন

ঢাকা বোর্ড ২০১৯ (সেট খ)

৪টি MCQ · প্যাকেজ কিনলে খুলবে

লক · কিনুন

রাজশাহী বোর্ড ২০১৯ (সেট ক)

৪টি MCQ · প্যাকেজ কিনলে খুলবে

লক · কিনুন

যশোর বোর্ড ২০১৯ (সেট গ)

৩টি MCQ · প্যাকেজ কিনলে খুলবে

লক · কিনুন

কুমিল্লা বোর্ড ২০১৯ (সেট ঘ)

৩টি MCQ · প্যাকেজ কিনলে খুলবে

লক · কিনুন

চট্টগ্রাম বোর্ড ২০১৯ (সেট খ)

৩টি MCQ · প্যাকেজ কিনলে খুলবে

লক · কিনুন

সিলেট বোর্ড ২০১৯ (সেট খ)

২টি MCQ · প্যাকেজ কিনলে খুলবে

লক · কিনুন

বরিশাল বোর্ড ২০১৯ (সেট ক)

৪টি MCQ · প্যাকেজ কিনলে খুলবে

লক · কিনুন

দিনাজপুর বোর্ড ২০১৯

৫টি MCQ · প্যাকেজ কিনলে খুলবে

লক · কিনুন

সকল বোর্ড ২০১৮ (সেট ঘ)

৪টি MCQ · প্যাকেজ কিনলে খুলবে

লক · কিনুন

ঢাকা বোর্ড ২০১৭

৩টি MCQ · প্যাকেজ কিনলে খুলবে

লক · কিনুন

রাজশাহী বোর্ড ২০১৭

৩টি MCQ · প্যাকেজ কিনলে খুলবে

লক · কিনুন

যশোর বোর্ড ২০১৭

২টি MCQ · প্যাকেজ কিনলে খুলবে

লক · কিনুন

চট্টগ্রাম বোর্ড ২০১৭

৪টি MCQ · প্যাকেজ কিনলে খুলবে

লক · কিনুন

কুমিল্লা বোর্ড ২০১৭

৩টি MCQ · প্যাকেজ কিনলে খুলবে

লক · কিনুন

দিনাজপুর বোর্ড ২০১৭

২টি MCQ · প্যাকেজ কিনলে খুলবে

লক · কিনুন

বরিশাল বোর্ড ২০১৭

৩টি MCQ · প্যাকেজ কিনলে খুলবে

লক · কিনুন

সিলেট বোর্ড ২০১৭

৪টি MCQ · প্যাকেজ কিনলে খুলবে

লক · কিনুন

সৃজনশীল প্রশ্ন

সমন্বিত (সকল) বোর্ড ২০২৬

দৃশ্যকল্প-১ : জনাব রহিম HTML ও CSS ব্যবহার করে তার প্রতিষ্ঠানের জন্য একটি ওয়েবসাইট তৈরির পরিকল্পনা করলেন। তিনি তার কম্পিউটারে পেজগুলো ডিজাইন করে প্রতিষ্ঠান প্রধানকে ব্রাউজারে ফলাফল দেখালেন এবং মতামত চাইলেন। প্রতিষ্ঠান প্রধান নিজের মোবাইলে ইন্টারনেট ব্যবহার করে সাইটটি দেখতে চাইলে রহিম জানালেন "এখনই অন্য কোন ডিভাইস ব্যবহার করে সাইটটি দেখা সম্ভব নয়।" দৃশ্যকল্প-২ : (নিচের ছবির টেবিল)

  1. ক. হাইপারটেক্সট কী?

    যে লেখায় লিংক থাকে এবং সেখানে ক্লিক করলে অন্য পেজ বা অংশে যাওয়া যায়, তাকে হাইপারটেক্সট বলে।

  2. খ. ডাইনামিক ওয়েবসাইটে ব্যবহারকারী ও ওয়েবসাইটের মধ্যকার দ্বিমুখী যোগাযোগ তৈরি হয়- ব্যাখ্যা কর।

    ডাইনামিক ওয়েবসাইটে ব্যবহারকারী তথ্য পাঠাতে পারে (যেমন লগইন, ফর্ম পূরণ, সার্চ, মন্তব্য)।

    সার্ভার সেই তথ্য ডেটাবেজে মিলিয়ে নতুন ফল তৈরি করে ফেরত পাঠায়।

    ফলে একেক ব্যবহারকারী একেক রকম পেজ দেখে (যেমন ফলাফল দেখার সাইট)।

    সুতরাং: ব্যবহারকারী → সাইট এবং সাইট → ব্যবহারকারী, দুই দিকেই তথ্য চলে বলে একে দ্বিমুখী যোগাযোগ বলে।

  3. গ. উদ্দীপকের দৃশ্যকল্প-২ এর টেবিলটি ওয়েবপেইজে প্রদর্শনের জন্য প্রয়োজনীয় HTML কোড লেখ।

    টেবিলটা ভেঙে দেখি

    সারি ১: একটাই ঘর, পুরো ৩ কলাম জুড়ে — colspan="3"

    সারি ২: বাঁয়ের ছবির ঘর নিচের সারি পর্যন্ত লম্বা — rowspan="2"; ডানে log ঘর ২ কলাম জুড়ে — colspan="2"

    সারি ৩: বাঁয়ের ঘর আগেই নেওয়া, তাই শুধু ২টি ঘর — ICT IS FUN আর একটি খালি ঘর

    b নিচে লিখতে <sub>, c উপরে লিখতে <sup>, লাইন ভাঙতে <br>, ছবির মাপ দিতে width ও height।

    <!DOCTYPE html>
    <html>
    <body>
    <table border="1">
      <tr>
        <td colspan="3" align="center">HSC Exam-2026</td>
      </tr>
      <tr>
        <td rowspan="2">
          <img src="logo.jpg" width="200" height="300"><br>
          logo.jpg 200×300 Px
        </td>
        <td colspan="2">log<sub>b</sub>a<sup>c</sup></td>
      </tr>
      <tr>
        <td>ICT<br>IS<br>FUN</td>
        <td></td>
      </tr>
    </table>
    </body>
    </html>
  4. ঘ. দৃশ্যকল্প-১ এ উল্লিখিত সাইটটি সর্বসাধারণের ব্যবহার উপযোগী করা সম্ভব কিনা - প্রয়োজনীয় ধাপ উল্লেখপূর্বক বিশ্লেষণ কর।

    রহিমের সাইটটি এখন শুধু তার নিজের কম্পিউটারে (লোকাল) আছে, তাই অন্য ডিভাইস থেকে দেখা যায় না।

    সাইটটি ওয়েবে পাবলিশ করলে সবাই দেখতে পারবে — তাই হ্যাঁ, সম্ভব।

    প্রয়োজনীয় ধাপ

    ১. ডোমেইন নাম নিবন্ধন: যেমন www.rahimprotishthan.com নাম কেনা।

    ২. ওয়েব হোস্টিং কেনা: সাইটের ফাইল রাখার জন্য সবসময় চালু থাকা সার্ভারে জায়গা নেওয়া।

    ৩. ডোমেইন ও হোস্টিং যুক্ত করা: DNS সেটিংয়ে ডোমেইনকে হোস্টিং সার্ভারের সাথে যুক্ত করা।

    ৪. ফাইল আপলোড: FTP বা হোস্টিংয়ের ফাইল ম্যানেজার দিয়ে HTML, CSS, ছবি সার্ভারে পাঠানো।

    ৫. পরীক্ষা করা: মোবাইল ও অন্য কম্পিউটার থেকে ব্রাউজারে ঠিকানা লিখে দেখা; মোবাইলে ঠিকমতো দেখাতে CSS-এ রেসপন্সিভ ডিজাইন রাখা।

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