ব্রাউজার (Browser)

১. ভূমিকা — রাফি একটা খবর পড়ছে

রাফি ফোনে Chrome খুলে prothomalo.com-এ একটা খবর পড়ছে — সুন্দর শিরোনাম, ছবি, লিংক, সব রঙিন।

রাফি জানে না — খবরটা যখন তার ফোনে এলো, তখন আসলে এসেছিল একগাদা সাদা-কালো লেখা (HTML code)। কোনো রঙ নেই, কোনো ছবি সাজানো নেই — শুধু চিহ্ন।

তাহলে রাফি যে এত সুন্দর পৃষ্ঠা দেখছে — সেটা বানাল কে?

উত্তর: Browser (ব্রাউজার)। Browser হলো সেই জাদুকর যে সাদামাটা code-কে সুন্দর পৃষ্ঠায় রূপান্তর করে।

২. সমস্যা — code মানুষ পড়তে পারে না

Server থেকে যা আসে তা এমন:

<h1>আজকের খবর</h1><p>ঢাকায় বৃষ্টি</p><img src="rain.jpg">

কোনো সাধারণ মানুষ এটা পড়ে বুঝবে না — কোনটা শিরোনাম, কোথায় ছবি বসবে, কী রঙ হবে।

আসল সমস্যা: এই code-কে এমন কিছুতে রূপান্তর করতে হবে যা মানুষ চোখে দেখে বুঝতে পারে — পড়তে, click করতে, scroll করতে পারে।

এই কাজটাই করে Browser। সে code পড়ে, বোঝে, এবং সুন্দর User Interface (ব্যবহারকারীর পর্দা) তৈরি করে।

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

   Server              Browser              তুমি
  ┌──────┐           ┌─────────┐         ┌──────┐
  │ HTML │ ── code → │ পড়ে,    │ ──দেখায়→│ সুন্দর │
  │ file │           │ বোঝে,   │         │ পৃষ্ঠা │
  │      │           │ আঁকে    │         │      │
  └──────┘           └─────────┘         └──────┘

Browser মাঝখানে দাঁড়িয়ে — একদিকে code নেয়, অন্যদিকে সুন্দর পৃষ্ঠা দেয়।

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

একজন রাঁধুনির সাথে তুলনা করো:

কাঁচা বাজার (চাল, ডাল, তেল)  =  HTML code
        ↓
রাঁধুনি রান্না করে            =  Browser
        ↓
সুস্বাদু খাবার প্লেটে          =  সুন্দর Web Page

রাঁধুনি যেমন কাঁচা উপকরণ থেকে খাবার বানায়, Browser তেমনি code থেকে পৃষ্ঠা বানায়। তুমি শুধু শেষ ফলটা ভোগ করো।

Module 1: সংজ্ঞা ও জনপ্রিয় Browser

Browser কী?

Browser (ব্রাউজার) হলো একটি Application Software (নির্দিষ্ট কাজের সফটওয়্যার) যা Web Page (HTML file) পড়ে, ব্যাখ্যা করে এবং পর্দায় সুন্দরভাবে প্রদর্শন করে। Web browse করার মূল হাতিয়ার এটি।

Browser	নির্মাতা
Google Chrome	Google
Mozilla Firefox	Mozilla
Microsoft Edge	Microsoft
Safari	Apple
Opera	Opera Software

Browser বনাম Search Engine — গুরুত্বপূর্ণ পার্থক্য

অনেকে গুলিয়ে ফেলে — এটা HSC পরীক্ষায় আসে।

বিষয়	Browser	Search Engine
কী?	Software	একটি Website/সেবা
কাজ	Web Page দেখায়	তথ্য খুঁজে দেয়
উদাহরণ	Chrome, Firefox	Google, Bing
তুলনা	টিভি সেট	টিভির চ্যানেল

মনে রাখো — Google Chrome একটি Browser, কিন্তু google.com একটি Search Engine।

Module 2: Browser-এর অভ্যন্তরীণ গঠন

Browser-এর ভেতরে অনেকগুলো অংশ (component) একসাথে কাজ করে:

┌─────────────────────────────────┐
│  User Interface (UI)            │ ← address bar, button
├─────────────────────────────────┤
│  Browser Engine                 │ ← UI ও Rendering-এর সেতু
├─────────────────────────────────┤
│  Rendering Engine               │ ← HTML+CSS → পর্দা (মূল অংশ)
├─────────────────────────────────┤
│  Networking                     │ ← HTTP request/response
├─────────────────────────────────┤
│  JavaScript Engine              │ ← JS code চালায় (Chrome: V8)
├─────────────────────────────────┤
│  Data Storage                   │ ← cookie, cache, history
└─────────────────────────────────┘

অংশ	কাজ
User Interface	address bar, back/forward, bookmark — তুমি যা দেখো
Browser Engine	UI ও Rendering Engine-এর মধ্যে সেতু
Rendering Engine	HTML ও CSS পড়ে পর্দায় UI আঁকে — সবচেয়ে গুরুত্বপূর্ণ
Networking	Server-এ request পাঠানো, response নেওয়া
JavaScript Engine	JavaScript code চালায় (Chrome-এর V8 Engine)
Data Storage	cookie, cache, local storage সংরক্ষণ

Module 3: Browser কীভাবে Web Page তৈরি করে — Rendering Pipeline

এটা পুরো অধ্যায়ের সবচেয়ে গুরুত্বপূর্ণ অংশ। Browser ধাপে ধাপে কাজ করে:

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

ধাপ	কাজ
Parsing	HTML code পড়ে tag চিনে নেয়
DOM Tree	tag গুলো থেকে tree structure তৈরি
CSSOM	CSS থেকে style-এর tree তৈরি
Render Tree	DOM + CSSOM মিলে — কী কেমন দেখাবে
Layout	প্রতিটি element-এর position ও size হিসাব
Painting	পর্দায় আসল রঙ ও pixel আঁকা

Module 4: DOM Tree কী?

DOM (Document Object Model): HTML document-এর একটি tree-আকৃতির রূপ, যা browser মেমরিতে তৈরি করে। প্রতিটি HTML tag একটি "node" (গিঁট) হয়।

নিচের HTML দেখো:

<html>
  <head>
    <title>আমার Page</title>
  </head>
  <body>
    <h1>স্বাগতম</h1>
    <p>এটা paragraph</p>
  </body>
</html>

এর DOM Tree:

html
├── head
│   └── title
│       └── "আমার Page"
└── body
    ├── h1
    │   └── "স্বাগতম"
    └── p
        └── "এটা paragraph"

<html> = root (মূল) node — সবার উপরে
<head> ও <body> = <html>-এর children (সন্তান)
একই parent-এর children কে বলে sibling (ভাই-বোন)

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

কাজ	Browser যা করে
YouTube ভিডিও দেখা	Networking দিয়ে ভিডিও আনে, Rendering দিয়ে দেখায়
Facebook scroll করা	JavaScript Engine নতুন post load করে
অনলাইন ফর্ম পূরণ	UI input নেয়, Networking submit করে
আগের পড়া page দ্রুত খোলা	Data Storage-এর cache ব্যবহার করে
bKash login	HTTPS দিয়ে নিরাপদ Networking

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

ভুল ১: Browser আর Search Engine একই মনে করা

Browser = software (Chrome)। Search Engine = সেবা (Google)। টিভি সেট আর চ্যানেলের পার্থক্য।

ভুল ২: Browser নিজে internet — এমন ভাবা

Browser শুধু একটি software। Internet সংযোগ না থাকলে Browser কিছুই দেখাতে পারবে না।

ভুল ৩: Rendering Engine ও JavaScript Engine গুলিয়ে ফেলা

Rendering Engine HTML/CSS আঁকে। JavaScript Engine শুধু JS code চালায়। দুটো আলাদা।

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

বিষয়	সুবিধা	অসুবিধা
Cache ব্যবহার	page দ্রুত খোলে	পুরনো content দেখাতে পারে
একাধিক tab	একসাথে অনেক page	বেশি RAM খরচ
Cookie সংরক্ষণ	login মনে রাখে	গোপনীয়তা ঝুঁকি
Extension যোগ	অতিরিক্ত সুবিধা	নিরাপত্তা ঝুঁকি

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

MCQ:

১. নিচের কোনটি একটি Browser?

ক) Mozilla Firefox ✓
খ) Google (google.com)
গ) Windows
ঘ) Facebook

২. Browser-এর কোন অংশ HTML ও CSS পড়ে পর্দায় আঁকে?

ক) Networking
খ) Rendering Engine ✓
গ) Data Storage
ঘ) User Interface

৩. HTML code থেকে browser কোনটি তৈরি করে?

ক) IP Address
খ) DOM Tree ✓
গ) Domain Name
ঘ) Search Engine

৪. Chrome-এর JavaScript Engine-এর নাম কী?

ক) Gecko
খ) V8 ✓
গ) WebKit
ঘ) Trident

৫. Google একটি —

ক) Browser
খ) Search Engine ✓
গ) Operating System
ঘ) Protocol

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

৬. Browser ও Search Engine-এর পার্থক্য উদাহরণসহ লেখো।

৭. Browser-এর Rendering pipeline-এর ধাপগুলো ক্রম অনুযায়ী লেখো।

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

১. Browser কী? এর অভ্যন্তরীণ গঠন (component) চিত্রসহ ব্যাখ্যা করো।

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

৩. নিচের HTML code-এর DOM Tree আঁকো:

<html><body><h1>স্কুল</h1><p>ঢাকা</p></body></html>

💡 পরীক্ষার টিপস: Rendering pipeline-এর ধাপগুলো (Parsing → DOM → CSSOM → Render Tree → Layout → Paint) ক্রম ঠিক রেখে মুখস্থ রাখো।

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

সহজ: তোমার ডিভাইসে কোন Browser আছে? এর address bar, back button, bookmark — কোন component-এর অংশ?

মাঝারি: Browser-এ একটি page দ্বিতীয়বার খুললে দ্রুত খোলে কেন? কোন component দায়ী?

কঠিন: যদি Browser-এর Rendering Engine কাজ না করে কিন্তু Networking কাজ করে — তাহলে কী ঘটবে? ব্যাখ্যা করো।

✅ সারাংশ

🎯 মনে রেখো:

Browser = Web Page পড়ে পর্দায় দেখানোর Application Software
Browser ≠ Search Engine → Chrome (browser, software) vs Google (search engine, সেবা)
অভ্যন্তরীণ অংশ: UI, Browser Engine, Rendering Engine, Networking, JavaScript Engine, Data Storage
Rendering Pipeline: Parsing → DOM → CSSOM → Render Tree → Layout → Paint
DOM Tree = HTML-এর tree রূপ; প্রতিটি tag একটি node; root হলো <html>
জনপ্রিয় Browser: Chrome, Firefox, Edge, Safari, Opera