ওয়েবপেজ (Web Page)

১. ভূমিকা — তুমি কি কখনো একটা চিঠি পড়েছ?

ধরো ডাকপিয়ন তোমাকে একটা চিঠি দিল। তুমি খাম খুললে। ভেতরে এক টুকরো কাগজ — তাতে লেখা, ছবি, হয়তো একটা ফোন নম্বর।

এই এক টুকরো কাগজই একটা সম্পূর্ণ "পৃষ্ঠা"।

এখন ভাবো — তুমি browser-এ prothomalo.com খুললে। যা দেখলে — শিরোনাম, খবর, ছবি, লিংক — সেটাও এক টুকরো "ডিজিটাল কাগজ"।

এই ডিজিটাল কাগজের নাম Web Page (ওয়েব পেজ)।

কিন্তু একটা প্রশ্ন — browser তো একটা text file পায়, তাহলে এত সুন্দর পৃষ্ঠা সে বানায় কীভাবে?

২. সমস্যা — একটা text file কীভাবে সুন্দর পৃষ্ঠা হয়?

Server থেকে browser যা পায় তা আসলে শুধু লেখা — অক্ষরের সারি:

<h1>স্বাগতম</h1>
<p>আজকের খবর</p>
<img src="ছবি.jpg">

এটা তো সুন্দর কিছু নয় — শুধু কিছু চিহ্ন আর শব্দ।

আসল সমস্যা: এই সাধারণ text file-কে কীভাবে রঙিন, সাজানো, click-করা-যায় এমন একটা পৃষ্ঠায় রূপান্তর করা যায়?

এই সমস্যার সমাধান — browser-এর render (অঙ্কন) প্রক্রিয়া আর তিনটি প্রযুক্তি: HTML, CSS, JavaScript। এই অধ্যায়ে সেটাই বুঝব।

৩. চিত্রের মাধ্যমে বোঝো

একটি Web Page-এর সাধারণ গঠন:

┌─────────────────────────────┐
│        HEADER               │  ← লোগো, নাম
├─────────────────────────────┤
│  NAV (মেনু):  Home | About   │  ← নেভিগেশন
├──────────────┬──────────────┤
│              │              │
│   MAIN       │   SIDEBAR    │  ← মূল content
│  (মূল লেখা)   │  (পাশের তথ্য)  │
│              │              │
├──────────────┴──────────────┤
│        FOOTER               │  ← কপিরাইট, যোগাযোগ
└─────────────────────────────┘

প্রতিটি অংশ HTML দিয়ে তৈরি। সব মিলে একটি Web Page।

৪. বাস্তব জীবনের সাথে মিল

একটা বাড়ি তৈরির সাথে তুলনা করো:

বাড়ি তৈরি	Web Page তৈরি
ইট-সিমেন্টে কাঠামো	HTML — structure
রঙ করা, টাইলস বসানো	CSS — design
সুইচ টিপলে বাতি জ্বলা	JavaScript — interaction

তিনটা মিলে একটা সম্পূর্ণ বাড়ি — তেমনি তিনটা প্রযুক্তি মিলে একটা সম্পূর্ণ Web Page।

Module 1: সংজ্ঞা ও ধারণা

Web Page কী?

Web Page (ওয়েব পেজ) হলো একটি একক document যা HTML দিয়ে তৈরি এবং browser-এ একটি পৃষ্ঠা হিসেবে প্রদর্শিত হয়। প্রতিটি Web Page সাধারণত একটি .html file।

Web Page বনাম Website

বিষয়	Web Page	Website
কী?	একটি পৃষ্ঠা	অনেক পৃষ্ঠার সমষ্টি
file	একটি HTML file	অনেক HTML file
তুলনা	বইয়ের একটি পাতা	পুরো বই

Home Page কী?

একটি Website খুললে প্রথমে যে Web Page দেখা যায়, সেটি Home Page (হোম পেজ)। এটি Website-এর "প্রধান দরজা" বা সূচিপত্রের মতো।

Module 2: Web Page-এর প্রকারভেদ

Static Web Page (স্থির ওয়েব পেজ)

content নির্দিষ্ট — সব user একই জিনিস দেখে। শুধু HTML ও CSS দিয়ে তৈরি।

যত user-ই আসুক → একই অপরিবর্তিত পৃষ্ঠা

Dynamic Web Page (পরিবর্তনশীল ওয়েব পেজ)

content পরিস্থিতি বা user অনুযায়ী বদলায়। Server, Database ও JavaScript ব্যবহার হয়।

user, সময়, পছন্দ অনুযায়ী → ভিন্ন content

বিষয়	Static	Dynamic
Content	অপরিবর্তিত	বদলায়
প্রযুক্তি	HTML + CSS	HTML + CSS + JS + Server
উদাহরণ	পরিচিতি পাতা	Facebook feed

Module 3: কীভাবে কাজ করে — Browser-এর Render প্রক্রিয়া

Browser কীভাবে একটি text file-কে সুন্দর পৃষ্ঠায় রূপান্তর করে — ধাপে ধাপে:

HTML Code (text file)
        ↓  ১. Parsing — tag চিনে নেয়
   DOM Tree তৈরি
        ↓  ২. CSS পড়ে
   CSSOM Tree তৈরি
        ↓  ৩. দুটো মেলায়
   Render Tree
        ↓  ৪. Layout — কোথায় কী বসবে
   প্রতিটি element-এর জায়গা ঠিক
        ↓  ৫. Painting — রঙ আঁকা
   তুমি Web Page দেখো ✨

এই পুরো প্রক্রিয়া এক সেকেন্ডেরও কম সময়ে ঘটে!

DOM (Document Object Model): HTML code-এর একটি tree-আকৃতির রূপ, যা browser মেমরিতে তৈরি করে এবং কাজ করে।

Module 4: Web Page-এর তিন স্তম্ভ — HTML, CSS, JavaScript

প্রযুক্তি	কাজ	বাড়ির তুলনা
HTML	Structure — কী থাকবে	দেয়াল, দরজা, জানালা
CSS	Design — কেমন দেখাবে	রঙ, সাজসজ্জা
JavaScript	Interactivity — কী ঘটবে	সুইচ টিপলে বাতি

উদাহরণ — একটি button:

HTML       → button টা তৈরি করে (আছে)
CSS        → button টা নীল ও গোল করে (সুন্দর)
JavaScript → click করলে কিছু ঘটায় (কাজ করে)

HTML ছাড়া Web Page হয় না — এটাই ভিত্তি। CSS ও JavaScript ছাড়া Web Page চলে, কিন্তু সাদামাটা ও নিষ্ক্রিয় থাকে।

Module 5: একটি সাধারণ Web Page-এর কাঠামো

<!DOCTYPE html>
<html>
  <head>
    <title>আমার Web Page</title>
  </head>
  <body>
    <h1>স্বাগতম</h1>
    <p>এটা আমার প্রথম web page।</p>
  </body>
</html>

অংশ	কাজ
`<!DOCTYPE html>`	এটা HTML5 document — browser-কে জানায়
`<html>`	পুরো document-এর মূল (root)
`<head>`	meta তথ্য — title, link (user দেখে না)
`<title>`	browser tab-এ যে নাম দেখায়
`<body>`	user যা পর্দায় দেখে — সব content

Module 6: বাস্তব প্রয়োগ

তুমি যা দেখো	আসলে যা
Google-এর search box পাতা	একটি Web Page
Facebook-এর login পাতা	একটি Web Page
prothomalo-এর একটি খবরের পাতা	একটি Dynamic Web Page
একটি অনলাইন ফর্ম	একটি Web Page (form সহ)

Module 7: সাধারণ ভুল ও সতর্কতা

ভুল ১: Web Page আর Website গুলিয়ে ফেলা

Web Page = একটি পাতা। Website = অনেক পাতার সমষ্টি।

ভুল ২: HTML-কে programming language ভাবা

HTML একটি Markup Language — এতে logic (if/else, loop) নেই। এটা শুধু structure দেয়।

ভুল ৩: CSS/JS ছাড়া Web Page হয় না — এটা ভুল ধারণা

শুধু HTML দিয়েও Web Page হয় (সাদামাটা)। HTML বাধ্যতামূলক, CSS/JS ঐচ্ছিক।

Module 8: সুবিধা-অসুবিধা

বিষয়	সুবিধা	অসুবিধা
Static Web Page	দ্রুত, সহজ	content বদলানো কঠিন
Dynamic Web Page	নমনীয়, আপডেটযোগ্য	জটিল, ধীর
শুধু HTML	শেখা সহজ, হালকা	দেখতে সাদামাটা
HTML+CSS+JS	সুন্দর ও সক্রিয়	বেশি শিখতে হয়

🔁 নিজে পরীক্ষা করো

MCQ:

১. একটি Web Page সাধারণত কোন ধরনের file?

ক) .txt
খ) .html ✓
গ) .mp3
ঘ) .exe

২. Website খুললে প্রথমে যে Web Page দেখা যায় —

ক) About Page
খ) Home Page ✓
গ) Contact Page
ঘ) Error Page

৩. Web Page-এর structure তৈরি করে কোনটি?

ক) HTML ✓
খ) CSS
গ) JavaScript
ঘ) DNS

৪. Browser HTML code থেকে কী তৈরি করে?

ক) IP Address
খ) DOM Tree ✓
গ) Domain
ঘ) Server

৫. user যা পর্দায় দেখে তা থাকে কোন tag-এর ভেতরে?

ক) <head>
খ) <title>
গ) <body> ✓
ঘ) <!DOCTYPE>

সংক্ষিপ্ত প্রশ্ন:

৬. HTML, CSS ও JavaScript-এর কাজ বাড়ির উপমা দিয়ে আলাদা করে লেখো।

৭. Browser কীভাবে একটি HTML file-কে সুন্দর Web Page-এ রূপান্তর করে — ধাপগুলো লেখো।

📝 HSC পরীক্ষার প্রস্তুতি

১. Web Page ও Website-এর পার্থক্য উদাহরণসহ লেখো।

২. Static ও Dynamic Web Page-এর মধ্যে পার্থক্য কী? প্রতিটির একটি উদাহরণ দাও।

৩. একটি Web Page-এর মূল কাঠামো (<!DOCTYPE>, <html>, <head>, <body>) চিত্রসহ ব্যাখ্যা করো।

💡 পরীক্ষার টিপস: HTML/CSS/JS-এর পার্থক্য — বাড়ির analogy দিয়ে লিখলে পরীক্ষক বেশি নম্বর দেন।

🎯 অনুশীলন প্রশ্ন

সহজ: তোমার প্রিয় ৩টি Web Page-এর নাম লেখো এবং প্রতিটিতে কী কী অংশ (header/menu/footer) দেখো বলো।

মাঝারি: শুধু HTML দিয়ে একটি Web Page বানালে সেটা দেখতে কেমন হবে? CSS যোগ করলে কী বদলাবে?

কঠিন: Browser-এর render প্রক্রিয়ার (Parsing → DOM → Render → Layout → Paint) যেকোনো একটি ধাপ বাদ পড়লে কী সমস্যা হবে — ব্যাখ্যা করো।

✅ সারাংশ

🎯 মনে রেখো:

Web Page = একটি একক HTML document, browser-এ একটি পৃষ্ঠা
Web Page = পাতা, Website = পুরো বই; প্রথম পাতা = Home Page
Static → অপরিবর্তিত content; Dynamic → বদলায় (Server+Database)
Browser render করে: Parsing → DOM → CSSOM → Render Tree → Layout → Paint
তিন স্তম্ভ: HTML (structure) + CSS (design) + JavaScript (interaction)
কাঠামো: <!DOCTYPE html> → <html> → <head> (meta) + <body> (দৃশ্যমান content)

Webpage