How the Web Works — ওয়েব কীভাবে চলে বাংলায় | পর্ব ০১

এক নজরে · TL;DR

ওয়েব মানে দুই পক্ষের কথোপকথন। আপনার browser (client) চায়, দূরের server ফাইল পাঠায় — ভাষাটির নাম HTTP.
ঠিকানা থেকে পাতা: URL → DNS দিয়ে IP খোঁজা → নিরাপদ সংযোগ → HTTP request → response → ব্রাউজার পাতা আঁকে।
ব্রাউজারের ভেতরের কারখানা: HTML থেকে DOM, CSS থেকে CSSOM, দুটো মিলে render tree, তারপর layout, paint আর composite.
তিন ভাষা, তিন কাজ: HTML = বাড়ির কাঠামো, CSS = রং আর সাজসজ্জা, JavaScript = বিদ্যুৎ আর সুইচ।
এই কোর্সে: ৫৯টি পর্ব, ৮টি মডিউল, প্রতিটি পর্বে এমন কোড যা পাতাতেই বদলে সঙ্গে সঙ্গে ফল দেখা যায়।

এই পর্বে যা শিখবেন

একটি ঠিকানা লিখে Enter চাপার পর থেকে পাতা দেখা পর্যন্ত কী কী ঘটে
ব্রাউজার কীভাবে লেখা-ভরা একটি HTML ফাইলকে রঙিন, সাজানো পাতায় বদলে দেয়
HTML, CSS আর JavaScript — কোনটির দায়িত্ব কী, আর কেন তিনটি আলাদা
Static আর dynamic সাইটের পার্থক্য, আর ওয়েবের মানদণ্ড আজ কে ঠিক করে
এই কোর্স কীভাবে সাজানো, আর লাইভ এডিটর কীভাবে ব্যবহার করবেন

১ · স্বাগতম — এই কোর্স কার জন্য, কীভাবে পড়বেন

আপনি প্রতিদিন হয়তো কয়েক ডজন ওয়েব পেজ খোলেন — খবরের সাইট, বোর্ড পরীক্ষার ফল, অনলাইন দোকান, সরকারি ফর্ম, ইউটিউব। প্রতিটি পাতার পেছনে আছে তিনটি ভাষা: HTML, CSS আর JavaScript. এই কোর্সে আমরা প্রথম দুটি গভীরভাবে শিখব — যা দিয়ে পাতার কাঠামো আর চেহারা তৈরি হয়। JavaScript-এর জন্য এই সাইটে আলাদা একটি পূর্ণ কোর্স আছে।

কোর্সটি তিন ধরনের পাঠকের কথা ভেবে লেখা:

🌱 একদম নতুন

কখনো ওয়েব পেজ বানাননি? সমস্যা নেই। স্কুল-কলেজের শিক্ষার্থী, অফিসে কাজ করেন, ফ্রিল্যান্সিং শুরু করতে চান — সবার জন্য একদম শূন্য থেকে শুরু।

প্রতিটি শব্দ ব্যাখ্যা করা থাকবে

🔁 কিছুটা জানেন

পুরোনো পদ্ধতিতে HTML-CSS শিখেছেন — float দিয়ে লেআউট, সব জায়গায় div? আধুনিক, সঠিক পদ্ধতিটি এখানে পাবেন।

Flexbox, Grid, container query

🧠 অভিজ্ঞ ডেভেলপার

“আরও গভীরে” চিহ্নিত অংশে পাবেন ব্রাউজার আসলে কীভাবে কাজ করে, spec কী বলে, আর কোন ফিচার কতটা সব ব্রাউজারে চলে।

spec, অ্যাক্সেসিবিলিটি, পারফরম্যান্স

প্রতিটি পর্ব কীভাবে সাজানো

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

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

<h1>স্বাগতম!</h1>
<p>আমার নাম <strong>রাফি</strong>, আমি ওয়েব শিখছি।</p>
<p>আমার প্রিয় খাবার: খিচুড়ি আর ইলিশ ভাজা।</p>

প্রিভিউতে একটি বড় শিরোনাম আর দুটি অনুচ্ছেদ দেখছেন, “রাফি” মোটা অক্ষরে। এখানে কোনো রং বা নকশা দেওয়া হয়নি — যা দেখছেন তা ব্রাউজারের নিজস্ব (default) চেহারা। এবার করে দেখুন: “রাফি”-র জায়গায় নিজের নাম লিখুন। তারপর <h1> আর </h1> দুটিকেই h3 করে দিন — শিরোনাম ছোট হলো কেন, তা আমরা পর্ব ০৪-এ বুঝব।

প্রিভিউগুলো আপনার পাতার ভেতরে একটি আলাদা, সুরক্ষিত ছোট জানালায় (sandboxed iframe) চলে। আপনার কোড এই সাইটের কোনো কিছু নষ্ট করতে পারবে না, তাই নির্ভয়ে ভাঙুন, বদলান, পরীক্ষা করুন। “পড়েছি” বোতাম চেপে অগ্রগতি সেভ করতে চাইলে লগইন করতে হবে; না করলেও সব পর্ব পুরোপুরি পড়া যায়।

২ · Client আর server — ওয়েবের দুই পক্ষ

শুরুতেই দুটি শব্দ আলাদা করে নিই, যেগুলো প্রায়ই গুলিয়ে যায়। Internet হলো সারা পৃথিবীর কোটি কোটি কম্পিউটারকে জোড়া দেওয়া বিশাল নেটওয়ার্ক — তার, ফাইবার, মোবাইল টাওয়ার, রাউটার। আর World Wide Web (সংক্ষেপে ওয়েব) হলো সেই নেটওয়ার্কের ওপর চলা একটি ব্যবস্থা, যেখানে লিংক দিয়ে জোড়া পাতাগুলো ব্রাউজারে খোলা যায়। ইমেইল, WhatsApp কল বা অনলাইন গেমও Internet ব্যবহার করে, কিন্তু সেগুলো ওয়েব নয়।

Internet যদি দেশের সড়ক-রেল-নৌপথের পুরো যোগাযোগ ব্যবস্থা হয়, তবে ওয়েব হলো সেই পথে চলা একটি নির্দিষ্ট কুরিয়ার সার্ভিস। একই রাস্তায় বাস, ট্রাক, অ্যাম্বুলেন্সও চলে — ঠিক যেমন একই Internet-এ ওয়েব, ইমেইল, ভিডিও কল সব চলে।

ওয়েবের প্রতিটি কাজে দুটি পক্ষ থাকে। একজন চায়, আরেকজন দেয়। যে চায় তাকে বলে client — সাধারণত আপনার ফোন বা কম্পিউটারের ব্রাউজার (Chrome, Edge, Firefox, Safari). যে দেয় সে হলো server — কোনো ডেটা সেন্টারে সারাক্ষণ চালু থাকা একটি কম্পিউটার, যার কাজই হলো অনুরোধ এলে ফাইল বা তথ্য পাঠানো। এই সাজানোকে বলে client-server মডেল.

পাড়ার রেস্টুরেন্টের কথা ভাবুন। আপনি (client) মেনু দেখে অর্ডার দিলেন, “এক প্লেট কাচ্চি।” রান্নাঘর (server) অর্ডার পড়ে খাবার তৈরি করে পাঠাল। আপনি রান্নাঘরে ঢোকেন না, রান্নাঘরও আপনার টেবিলে আসে না — মাঝখানে অর্ডার আর খাবারের আদান-প্রদান হয় নির্দিষ্ট নিয়মে। ওয়েবে সেই নিয়মের নাম HTTP, অর্ডারের নাম request, আর পাঠানো খাবারের নাম response.

Client (ব্রাউজার)

ঠিকানা নেয়, request পাঠায়, উত্তরে আসা HTML-CSS-JavaScript পড়ে পাতা আঁকে, আপনার ক্লিক-টাইপ সামলায়।

আপনার ফোন বা ল্যাপটপে

Server

request শোনে, ঠিক ফাইলটি খুঁজে বা নতুন করে বানিয়ে response পাঠায়। একসাথে হাজার হাজার client-কে সামলাতে পারে।

ডেটা সেন্টারে, দিনরাত চালু

মূল ধারণা

ব্রাউজার যা পায় তা আসলে লেখা-ভরা ফাইল — HTML, CSS, JavaScript, সাথে ছবি ও ফন্ট। পাতাটা “আঁকে” ব্রাউজার নিজে, আপনার যন্ত্রে। তাই একই পাতা ফোনে এক রকম, বড় মনিটরে আরেক রকম দেখাতে পারে — আর সেটা সামলানোই একজন ওয়েব ডেভেলপারের বড় কাজ।

৩ · ঠিকানা লিখে Enter — URL, DNS আর HTTP-এর যাত্রা

ধরুন আপনি ব্রাউজারে লিখলেন https://www.example.com/shop/kantha.html আর Enter চাপলেন। এক সেকেন্ডেরও কম সময়ে পাতা চলে এলো। এই সময়ের ভেতরে আসলে অনেকগুলো ধাপ পার হয়। নিচের ডায়াগ্রামে “পরে” চেপে প্রতিটি ধাপ দেখুন। নেটওয়ার্কের খুঁটিনাটি (packet, router, TCP) জানতে চাইলে পড়ুন Internet কীভাবে কাজ করে — এখানে আমরা শুধু ওয়েব ডেভেলপারের যা জানা দরকার, সেটুকু দেখব।

URL ভাঙাhttps://…কোথায়, কী চাই
DNSনাম → IPফোনবুকে নম্বর খোঁজা
সংযোগTCP + TLSনিরাপদ লাইন তৈরি
RequestGETঅর্ডার পাঠানো
Response200 OKফাইল এলো
আরও requestCSS, JS, ছবিবাকি জিনিস আনা

URL-এর অংশব্রাউজার প্রথমে ঠিকানাটি ভাঙে

https://www.example.com/shop/kantha.html?size=large#reviews

https              scheme   — কোন নিয়মে কথা হবে
www.example.com    host     — কোন সার্ভার
/shop/kantha.html  path     — সার্ভারের কোন পাতা
?size=large        query    — বাড়তি তথ্য
#reviews           fragment — পাতার কোন অংশে যাবে
(fragment সার্ভারে যায় না, ব্রাউজার নিজে ব্যবহার করে)

DNS lookupনাম দিয়ে নম্বর খোঁজা

ব্রাউজার: www.example.com-এর IP ঠিকানা কত?
  ১. ব্রাউজারের নিজের cache-এ আছে?      না
  ২. অপারেটিং সিস্টেমের cache-এ?        না
  ৩. ISP-র DNS resolver → root → .com → example.com-এর nameserver
উত্তর:  www.example.com → 203.0.113.25
(পরের বারের জন্য কিছুক্ষণ মনে রাখা হয়)

সংযোগ তৈরিকথা শুরুর আগে করমর্দন

TCP:  ব্রাউজার ── SYN ──────────▶ সার্ভার
      ব্রাউজার ◀─ SYN-ACK ─────── সার্ভার
      ব্রাউজার ── ACK ──────────▶ সার্ভার   (লাইন খোলা)
TLS:  সার্ভার তার certificate দেখায় → ব্রাউজার যাচাই করে
      দুই পক্ষ একটি গোপন চাবি ঠিক করে
      → এরপর সব কথা এনক্রিপ্টেড, মাঝখানে কেউ পড়তে পারবে না

HTTP requestব্রাউজার যা পাঠায় (সহজ রূপে)

GET /shop/kantha.html?size=large HTTP/1.1
Host: www.example.com
User-Agent: Mozilla/5.0 (Windows NT 10.0; …)
Accept: text/html
Accept-Language: bn,en;q=0.8
Cookie: cart=3

HTTP responseসার্ভার যা ফেরত পাঠায়

HTTP/1.1 200 OK
Content-Type: text/html; charset=utf-8
Content-Length: 4821
Cache-Control: max-age=3600

<!doctype html>
<html lang="bn">
<head> <link rel="stylesheet" href="/css/style.css"> …
… বাকি HTML …

DevTools → Networkএকটি পাতা = অনেকগুলো request

GET /shop/kantha.html    200  text/html         5 KB
GET /css/style.css       200  text/css         12 KB
GET /js/cart.js          200  text/javascript   8 KB
GET /img/kantha.webp     200  image/webp       85 KB
GET /favicon.ico         404  — পাওয়া যায়নি

ধাপ ১ — ঠিকানা ভাঙা। আপনি যা লিখলেন তা একটি URL (Uniform Resource Locator) — ইন্টারনেটে কোনো জিনিসের পূর্ণ ঠিকানা। ব্রাউজার এটিকে ভেঙে বোঝে কোন নিয়মে (https), কোন সার্ভারে (www.example.com), কোন পাতা (/shop/kantha.html) চাইতে হবে। ঠিক যেন চিঠির খামে জেলা, থানা, বাড়ির নম্বর আলাদা করে পড়া।
ধাপ ২ — DNS: নাম থেকে নম্বর। কম্পিউটার নাম চেনে না, চেনে নম্বর — IP ঠিকানা. www.example.com একটি domain name, মানুষের মনে রাখার সুবিধার জন্য। DNS ফোনের কন্টাক্ট লিস্টের মতো — “আম্মু” নামে চাপলে ফোন নিজেই নম্বরটি ডায়াল করে। একবার পাওয়া উত্তর কিছুক্ষণ cache-এ রাখা হয়, তাই পরের বার আরও দ্রুত।
ধাপ ৩ — নিরাপদ সংযোগ। ব্রাউজার সেই IP-র সার্ভারের সাথে একটি সংযোগ খোলে। ঠিকানা https দিয়ে শুরু হলে এর ওপর TLS নামে একটি এনক্রিপশনের স্তর বসে: সার্ভার তার পরিচয়পত্র (certificate) দেখায়, ব্রাউজার যাচাই করে। এজন্যই HTTPS সাইটে ঠিকানার পাশে তালার চিহ্ন দেখা যায়। আজকের প্রায় সব সাইটই HTTPS.
ধাপ ৪ — HTTP request. এবার আসল অর্ডার। প্রথম লাইনে GET মানে “এই জিনিসটা দাও।” নিচের লাইনগুলো (header) বাড়তি তথ্য: কোন সার্ভার, কোন ব্রাউজার, কোন ভাষা পছন্দ। আধুনিক ব্রাউজার আসলে HTTP/2 বা HTTP/3 ব্যবহার করে, যেখানে এই লেখা যন্ত্রের সুবিধামতো সংকুচিত আকারে যায় — কিন্তু অর্থ একই।
ধাপ ৫ — HTTP response. সার্ভার উত্তর দিল 200 OK — একটি status code, মানে “পেয়েছি, এই নাও।” Content-Type: text/html বলছে ফাইলটি HTML. একটি ফাঁকা লাইনের পর আসে আসল HTML লেখা। অন্য পরিচিত code: 404 (পাওয়া যায়নি), 301 (স্থায়ীভাবে অন্য ঠিকানায় সরে গেছে), 500 (সার্ভারের ভেতরে গোলমাল)।
ধাপ ৬ — আরও request. HTML পড়তে পড়তে ব্রাউজার দেখে, এই পাতার জন্য একটি CSS ফাইল, একটি JavaScript ফাইল আর একটি ছবিও লাগবে — প্রতিটির জন্য আলাদা request যায়। সাধারণ একটি পাতা খুলতেও কয়েক ডজন request হওয়া খুবই স্বাভাবিক। ব্রাউজারের DevTools-এর Network ট্যাবে এই তালিকা নিজের চোখে দেখা যায় — পর্ব ০২-এ দেখাব।

URL → DNS (নাম থেকে IP) → TCP + TLS (নিরাপদ লাইন)
→ HTTP request → HTTP response → আরও request → পাতা আঁকা

HTTPS-এর তালা মানে শুধু এটুকু যে আপনার আর সার্ভারের মাঝের কথা কেউ পড়তে বা বদলাতে পারছে না। এর মানে এই নয় যে সাইটটি সৎ। প্রতারক সাইটও সহজেই HTTPS পায়। তাই bKash বা ব্যাংকের নামে আসা লিংকে পিন দেওয়ার আগে domain name-এর বানান খুঁটিয়ে দেখুন।

৪ · ব্রাউজারের ভেতরে — HTML থেকে স্ক্রিনের পিক্সেল

Response-এ যা এলো, তা তো শুধু লেখা — <h1>, <p> জাতীয় চিহ্ন দেওয়া টেক্সট। এই লেখা থেকে রঙিন, সাজানো, ক্লিক করা যায় এমন পাতা বানানোর কাজটি করে ব্রাউজারের rendering engine. এটি অনেকটা একটি ছাপাখানার মতো: পাণ্ডুলিপি পড়ে, নকশার নির্দেশ মিলিয়ে, কোন লেখা কোথায় বসবে মাপজোখ করে, তারপর রঙ দিয়ে ছাপে।

নিচে একটি ছোট দোকানের পাতা দিয়ে পুরো পথটি দেখুন। HTML-এ আছে একটি শিরোনাম আর দুটি অনুচ্ছেদ; CSS-এ বলা আছে শিরোনাম সবুজ হবে, note নামের অনুচ্ছেদটি লুকানো থাকবে।

HTML → DOMparseলেখা থেকে গাছ
CSS → CSSOMrulesনিয়মের তালিকা
Render treeDOM + CSSOMযা দেখা যাবে
Layoutx, y, w, hমাপজোখ
Paintরং, লেখাআঁকার নির্দেশ
CompositeGPUস্তর জোড়া, স্ক্রিনে

DOM treeব্রাউজারের মেমরিতে পাতার কাঠামো

Document
└─ html
   ├─ head
   │  └─ link  (style.css আনতে বলছে)
   └─ body
      ├─ h1 ─ "রহিম স্টোর"
      ├─ p.note ─ "আজ দুপুরে বন্ধ"
      └─ p ─ "চাল, ডাল, তেল পাওয়া যায়"

CSSOMসব CSS নিয়ম এক জায়গায়

/* style.css থেকে */
h1    { color: green }
.note { display: none }
p     { font-size: 18px }
/* ব্রাউজারের নিজস্ব (default) নিয়ম থেকে */
h1    { display: block; font-size: 2em; font-weight: bold }
head  { display: none }

Render treeশুধু যা পর্দায় আঁকতে হবে

html
└─ body
   ├─ h1  [সবুজ, 2em, মোটা]  "রহিম স্টোর"
   └─ p   [18px]              "চাল, ডাল, তেল পাওয়া যায়"

বাদ গেল: head (দেখানোর কিছু নেই)
বাদ গেল: p.note (display: none)

Layoutপ্রতিটি বাক্সের অবস্থান ও মাপ (আনুমানিক)

বাক্স   x     y     প্রস্থ    উচ্চতা
body    8     8     1350px   112px
h1      8     29    1350px   37px
p       8     84    1350px   27px
স্ক্রিন সরু হলে (ফোনে) প্রস্থ কমবে, লেখা ভেঙে নতুন লাইনে যাবে

Paintআঁকার নির্দেশের তালিকা

১. পুরো পাতায় সাদা পটভূমি আঁকো
২. (8, 29)-এ "রহিম স্টোর" লেখো — সবুজ, মোটা, 32px
৩. (8, 84)-এ "চাল, ডাল, তেল পাওয়া যায়" লেখো — কালো, 18px

Compositeস্তর জোড়া দিয়ে চূড়ান্ত ছবি

স্তর ১: পাতার সাধারণ লেখা আর রং
স্তর ২: (যদি থাকে) স্থির মেনু, অ্যানিমেশন, ভিডিও
        ↓
GPU সব স্তর একসাথে জুড়ে → স্ক্রিনের পিক্সেল
স্ক্রল করলে অনেক সময় শুধু এই ধাপটিই আবার হয় — তাই মসৃণ

ধাপ ১ — HTML থেকে DOM. ব্রাউজার HTML লেখা অক্ষরে অক্ষরে পড়ে ট্যাগ চেনে — একে বলে parsing. ফল হলো একটি গাছের মতো কাঠামো: DOM (Document Object Model). বংশতালিকার মতো — html হলো দাদা, তার দুই সন্তান head আর body, body-র তিন সন্তান। গাছের প্রতিটি অংশ একটি element.
ধাপ ২ — CSS থেকে CSSOM. <link> দেখে ব্রাউজার CSS ফাইলটি আনে, সব নিয়ম পড়ে সাজিয়ে রাখে CSSOM-এ। খেয়াল করুন, আপনি CSS না লিখলেও ব্রাউজারের নিজের একটি default স্টাইল আছে — সেজন্যই h1 এমনিতেই বড় আর মোটা দেখায়।
ধাপ ৩ — Render tree. DOM আর CSSOM মিলিয়ে ব্রাউজার ঠিক করে কোন element পর্দায় দেখা যাবে, আর প্রতিটির চূড়ান্ত স্টাইল কী। head আর display: none দেওয়া অনুচ্ছেদটি render tree-এ নেই — DOM-এ আছে, কিন্তু আঁকার তালিকায় নেই।
ধাপ ৪ — Layout. এবার মাপজোখ: স্ক্রিন কত চওড়া, প্রতিটি বাক্স কোথা থেকে শুরু, কত বড়। ব্রাউজারের চোখে প্রতিটি element একটি আয়তাকার বাক্স — এই ধারণাই পর্ব ১৯-এর box model-এর ভিত্তি। এই ধাপকে layout (কখনো reflow) বলে।
ধাপ ৫ — Paint. কোন বাক্সে কী রং, কোন লেখা কোন ফন্টে, কোথায় ছায়া বা বর্ডার — ব্রাউজার আঁকার নির্দেশের একটি তালিকা বানায় এবং সেই অনুযায়ী আঁকে। একে বলে paint.
ধাপ ৬ — Composite. পাতার কিছু অংশ আলাদা স্তরে (layer) আঁকা হয় — যেমন সবসময় ওপরে থাকা মেনু বা চলমান অ্যানিমেশন। শেষে ছবি-প্রক্রিয়াকরণের চিপ (GPU) সব স্তর একসাথে জুড়ে পর্দায় দেখায়। একে বলে compositing. পুরো কাজটি সাধারণত চোখের পলকের চেয়েও কম সময়ে হয়।

এই পথটি একবার চলেই থেমে যায় না। JavaScript দিয়ে কিছু বদলালে বা স্ক্রিন ঘোরালে ব্রাউজার আবার দরকারি ধাপগুলো চালায়। শুধু রং বদলালে layout লাগে না, শুধু paint. কিন্তু প্রস্থ বদলালে layout থেকে আবার শুরু — যা বেশি খরচের। এই হিসাব থেকেই পারফরম্যান্সের অনেক নিয়ম এসেছে, যা পর্ব ৩৮ (transition) আর পর্ব ৪৯ (পারফরম্যান্স)-এ কাজে লাগবে।

ব্রাউজার ভুল ক্ষমা করে — কিন্তু নিজের নিয়মে

একটি মজার ব্যাপার পরীক্ষা করে দেখি। নিচের কোডে HTML ইচ্ছা করে একটু অগোছালো লেখা — প্রথম দুটি <p> বন্ধ করা হয়নি। “চালিয়ে দেখুন” চাপলে একটি ছোট JavaScript ব্রাউজারের বানানো DOM পরীক্ষা করে জানাবে কয়টি অনুচ্ছেদ তৈরি হয়েছে:

// ব্রাউজার যে DOM বানিয়েছে, সেটি পরীক্ষা করি
const paras = document.querySelectorAll('p');
console.log('p element আছে: ' + paras.length + 'টি');

paras.forEach((p, i) => {
  console.log((i + 1) + ') ' + p.textContent);
});

// একটি p কি আরেকটির ভেতরে ঢুকে গেছে?
console.log('প্রথম p-এর ভেতরে অন্য p: ' + paras[0].querySelectorAll('p').length + 'টি');
console.log('মূল element: ' + document.documentElement.tagName);

ফল আসে তিনটি আলাদা p, কেউ কারও ভেতরে নয়। কারণ HTML-এর নিয়মে নতুন <p> শুরু হলে আগের খোলা <p> নিজে থেকেই বন্ধ হয়ে যায়। আর মূল element HTML — আপনি না লিখলেও ব্রাউজার html, head, body নিজেই বানিয়ে নেয়। এবার forEach-এর লাইনে p.textContent-কে p.outerHTML করে চালান — দেখবেন ব্রাউজার প্রতিটি অনুচ্ছেদে নিজেই </p> বসিয়েছে।

আরও গভীরে: HTML-এর Living Standard শুধু ঠিক HTML-এর নিয়ম বলে না, ভুল HTML-কে কীভাবে পড়তে হবে, তার প্রতিটি পরিস্থিতিও নির্দিষ্ট করে দেয় (tokenizer-এর অবস্থা আর “tree construction”-এর নিয়ম)। তাই আজ Chrome, Firefox, Safari একই অগোছালো HTML থেকে হুবহু একই DOM বানায় — HTML5-এর আগে এটা নিশ্চিত ছিল না। আরও একটি সূক্ষ্ম কথা: সাধারণ <script> ট্যাগ পেলে parser থেমে যায়, কারণ script DOM বদলে দিতে পারে; আর CSS না আসা পর্যন্ত ব্রাউজার সাধারণত পাতা আঁকে না, যাতে স্টাইলহীন পাতা ঝলক না দেয়। এই দুটি কারণেই defer আর ছোট CSS পারফরম্যান্সের এত বড় বিষয়। আধুনিক Chrome-এর ভেতরের নকশায় (RenderingNG) “render tree” নামটি আর হুবহু নেই — layout tree, fragment tree, paint property tree আছে — কিন্তু শেখার জন্য ছয় ধাপের এই ছবিটিই নির্ভরযোগ্য।

৫ · তিন ভাষা, তিন দায়িত্ব — কাঠামো, সাজসজ্জা আর আচরণ

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

🧱 HTML — কাঠামো

পাতায় কী কী আছে আর কোনটা কী: এটি শিরোনাম, এটি অনুচ্ছেদ, এটি লিংক, এটি বোতাম। HTML একটি markup ভাষা — লেখার গায়ে tag দিয়ে অর্থের লেবেল লাগানো।

বাড়ির ভিত, দেয়াল, ঘর

🎨 CSS — সাজসজ্জা

কোনটা দেখতে কেমন: রং, ফন্ট, ফাঁকা জায়গা, কোনটা কার পাশে বসবে, ফোনে কেমন দেখাবে।

রং, টাইলস, আসবাবের সাজানো

⚡ JavaScript — আচরণ

কিছু চাপলে বা লিখলে কী ঘটবে: কার্টে যোগ, ফর্ম যাচাই, নতুন তথ্য এনে দেখানো।

বিদ্যুৎ, সুইচ, পাখা

কথাটা হাতে-কলমে দেখি। একটি অনলাইন দোকানের পণ্যের কার্ড — প্রথমে শুধু HTML, কোনো সাজসজ্জা ছাড়া:

<article>
  <h2>নকশিকাঁথা — হাতে সেলাই</h2>
  <p>রাজশাহীর কারিগরের তৈরি, খাঁটি সুতি কাপড়ে।</p>
  <p>দাম: <strong>৳ ২,৪৫০</strong></p>
  <button type="button">কার্টে যোগ করুন</button>
</article>

সাদামাটা, কিন্তু অর্থপূর্ণ: শিরোনাম বড়, দাম মোটা, বোতামটি বোতামের মতো। সব কিছু একটির নিচে আরেকটি — এটাই ব্রাউজারের default চেহারা। বোতাম চাপলে কিছুই হয় না, কারণ আচরণ (JavaScript) এখনো দেওয়া হয়নি। করে দেখুন: <h2>-এর পরে একটি নতুন লাইন যোগ করুন — <p>মাপ: ৭ ফুট × ৫ ফুট</p>. কাঠামোয় নতুন তথ্য যোগ করা মানেই HTML লেখা।

এবার একই HTML রেখে শুধু CSS যোগ করি। নিচের এডিটরে আপনি শুধু CSS লিখছেন; HTML ওপরেরটিই, অপরিবর্তিত:

article {
  max-width: 280px;
  padding: 16px;
  border: 1px solid #ddd;
  border-radius: 12px;
  font-family: system-ui, sans-serif;
  box-shadow: 0 4px 12px rgb(0 0 0 / 0.12);
}
h2 { margin: 0 0 8px; color: #8a1c3c; font-size: 1.25rem; }
strong { color: #0a7d32; font-size: 1.3rem; }
button {
  width: 100%;
  padding: 10px;
  border: 0;
  border-radius: 8px;
  background: #0a7d32;
  color: white;
  font: inherit;
}

একই কাঠামো, কিন্তু এখন সত্যিকারের দোকানের কার্ডের মতো: গোল কোণ, হালকা ছায়া, রঙিন দাম, পুরো চওড়া সবুজ বোতাম। HTML-এর একটি অক্ষরও বদলায়নি! করে দেখুন: background: #0a7d32;-কে background: #e2136e; করুন (bKash-এর মতো গোলাপি)। তারপর max-width 280px থেকে 400px করুন — কার্ড চওড়া হলো, লেখা নতুন করে সাজল। এটাই সেই layout ধাপ।

শেষ স্তর — বিদ্যুৎ আর সুইচ। এখানে একটি পূর্ণ ছোট পাতা, যেখানে <style>-এর ভেতরে CSS আর <script>-এর ভেতরে JavaScript একসাথে আছে:

<style>
  body { font-family: system-ui, sans-serif; }
  button { padding: 8px 14px; border: 0; border-radius: 8px;
           background: #0a7d32; color: white; font: inherit; }
  output { font-weight: bold; color: #0a7d32; }
</style>

<h2>নকশিকাঁথা</h2>
<p>কার্টে আছে: <output id="count">0</output> টি</p>
<button type="button" id="add">কার্টে যোগ করুন</button>

<script>
  const countBox = document.querySelector('#count');
  let items = 0;
  document.querySelector('#add').addEventListener('click', () => {
    items = items + 1;
    countBox.textContent = items;
    console.log('কার্টে এখন ' + items + 'টি পণ্য');
  });
</script>

প্রিভিউতে বোতামটি কয়েকবার চাপুন — সংখ্যা বাড়ছে, আর প্রিভিউয়ের নিচে প্রতিবার একটি বার্তা দেখা যাচ্ছে (console.log). JavaScript DOM-এর একটি অংশ (#count) বদলাচ্ছে, আর ব্রাউজার শুধু সেই অংশটুকু আবার আঁকছে। করে দেখুন: items + 1-কে items + 2 করুন। তারপর <style> অংশটি পুরো মুছে দিন — বোতাম আগের মতোই কাজ করবে, শুধু দেখতে সাদামাটা হবে। কারণ তিনটি স্তর একে অপরের থেকে আলাদা।

মূল ধারণা

এই আলাদা রাখার নীতিকে বলে separation of concerns — প্রতিটি ভাষা নিজের কাজ করবে, অন্যের কাজে নাক গলাবে না। ফল: একই HTML-কে শুধু CSS বদলে পুরো নতুন চেহারা দেওয়া যায়; চোখে দেখতে পান না এমন মানুষ screen reader দিয়ে HTML-এর অর্থ শুনে পাতা ব্যবহার করতে পারেন; আর JavaScript বন্ধ থাকলেও মূল তথ্য পড়া যায়। সবার জন্য ব্যবহারযোগ্য ওয়েব বানানোর এই চর্চার নাম accessibility — পর্ব ১২-তে বিস্তারিত।

৬ · Static আর dynamic সাইট

সার্ভার response-এ যে HTML পাঠায়, তা কোথা থেকে আসে? দুটি মৌলিক উপায় আছে।

Static সাইট-এ প্রতিটি পাতা আগে থেকেই একটি তৈরি HTML ফাইল হিসেবে সার্ভারে রাখা থাকে। Request এলে সার্ভার ফাইলটি হুবহু পাঠিয়ে দেয় — সবাই একই পাতা পায়। ঠিক যেন ছাপানো লিফলেট: যে-ই চায়, একই কপি পায়। আপনি এখন যে পাতাটি পড়ছেন, সেটিও একটি static HTML ফাইল।

Dynamic সাইট-এ সার্ভারে একটি প্রোগ্রাম (PHP, Node.js, Python ইত্যাদিতে লেখা) প্রতিটি request-এর সময় ডেটাবেস থেকে তথ্য নিয়ে নতুন করে HTML বানায়। Facebook-এ আপনার নিউজফিড আর আপনার বন্ধুর নিউজফিড আলাদা; অনলাইন দোকানে আপনার কার্ট শুধু আপনার। ঠিক যেন অর্ডার অনুযায়ী রান্না: একই রান্নাঘর, কিন্তু প্রতিটি প্লেট আলাদা।

বিষয়	Static	Dynamic
HTML কখন তৈরি	আগেই, একবার	প্রতিটি request-এ, সার্ভারে
সবাই কি একই পাতা পায়?	হ্যাঁ	না — ব্যবহারকারী অনুযায়ী আলাদা
গতি ও খরচ	খুব দ্রুত, হোস্টিং সস্তা বা ফ্রি	সার্ভারে বেশি কাজ, বেশি খরচ
নিরাপত্তার ঝুঁকি	কম — চলমান কোড নেই	বেশি — ডেটাবেস, লগইন সামলাতে হয়
উদাহরণ	পোর্টফোলিও, ডকুমেন্টেশন, ব্লগ, কোর্সের পাতা	সোশ্যাল মিডিয়া, ব্যাংকিং, অনলাইন দোকানের কার্ট

তৃতীয় একটি পথও খুব প্রচলিত: সার্ভার একটি প্রায় খালি HTML পাঠায়, তারপর ব্রাউজারের ভেতরেই JavaScript তথ্য এনে পাতা সাজায় (client-side rendering). নিচে ছোট একটি উদাহরণ — HTML-এ মেনুর তালিকাটি খালি, JavaScript একটি ডেটা-তালিকা থেকে আইটেমগুলো বসাচ্ছে:

<h2>আজকের মেনু — টং দোকান</h2>
<ul id="menu"></ul>

<script>
  const products = [
    { name: 'লাল চা', price: 10 },
    { name: 'সিঙ্গারা', price: 15 },
    { name: 'ডিম-পরোটা', price: 40 }
  ];
  const menuList = document.querySelector('#menu');
  for (const item of products) {
    const li = document.createElement('li');
    li.textContent = item.name + ' — ' + item.price + ' টাকা';
    menuList.append(li);
  }
</script>

প্রিভিউতে তিনটি আইটেমের তালিকা দেখছেন, যদিও HTML-এর <ul> খালি। তালিকাটি তৈরি হয়েছে ব্রাউজারে, JavaScript চলার পর। করে দেখুন: products-এ নতুন একটি লাইন যোগ করুন — { name: 'পুরি', price: 5 }, — তালিকায় চতুর্থ আইটেম চলে আসবে। বাস্তবে এই ডেটা আসে সার্ভার থেকে; আর এজন্যই কোনো সাইটের “View Source” (মূল HTML) আর DevTools-এর Elements (বর্তমান DOM) অনেক সময় আলাদা দেখায়।

HTML আর CSS শেখার জন্য সাইট static না dynamic, তাতে কিছু যায় আসে না। Dynamic সাইটের সার্ভার-প্রোগ্রাম আর client-side JavaScript — দুটোই শেষ পর্যন্ত ব্রাউজারে HTML আর CSS-ই দেয়। তাই এই কোর্সে যা শিখবেন, তা WordPress, React বা যেকোনো framework-এর নিচেও একইভাবে কাজে লাগবে।

৭ · ওয়েবের সংক্ষিপ্ত ইতিহাস — এক প্রস্তাব থেকে Living Standard

আজকের HTML আর CSS-এর অনেক নিয়ম অদ্ভুত লাগতে পারে — কেন এটা এভাবে, ওটা ওভাবে? উত্তর প্রায়ই লুকিয়ে আছে ইতিহাসে। ওয়েব কখনো নতুন করে শুরু করা যায়নি, কারণ ত্রিশ বছর আগের পাতাও আজকের ব্রাউজারে খোলার কথা। নিচে ছয়টি ধাপে গল্পটি দেখুন:

জন্ম১৯৮৯–৯১CERN-এ একটি প্রস্তাব
সবার জন্য১৯৯৩–৯৫ছবি আর JavaScript
CSS১৯৯৪–৯৬সাজসজ্জা আলাদা হলো
ব্রাউজার যুদ্ধ১৯৯৫–২০০৪নিজস্ব ট্যাগের হট্টগোল
HTML5২০০৪–২০১৪WHATWG-এর পুনর্গঠন
Living Standard২০১৯–আজএকটিই চলমান মানদণ্ড

প্রথম ওয়েবসাইটের ধাঁচinfo.cern.ch — সংক্ষেপিত

<TITLE>The World Wide Web project</TITLE>
<H1>World Wide Web</H1>
The WorldWideWeb (W3) is a wide-area
<A HREF="WhatIs.html">hypermedia</A> information retrieval initiative …
← বড় হাতের ট্যাগ, হাতে গোনা কয়েকটি element, কোনো স্টাইল নেই

নতুন ক্ষমতাপাতা আর শুধু লেখা নয়

<img src="logo.gif">        ← Mosaic জনপ্রিয় করল (১৯৯৩)
<script>
  document.write("Hello!");  ← JavaScript, Netscape (১৯৯৫)
</script>

CSS level 1নকশার নিয়ম আলাদা ভাষায়

h1 { color: navy; font-size: 24pt }
p  { text-align: justify }
/* একই নিয়ম পুরো সাইটের সব পাতায় — একবার লিখে বারবার */

সেই যুগের কোডআজ এভাবে লিখবেন না

<center><font face="Arial" color="red" size="5">
  <marquee>বিশেষ ছাড়!</marquee>
</font></center>
<table> … পুরো পাতার লেআউট টেবিল দিয়ে … </table>
<!-- "Best viewed in … browser, 800x600" -->

HTML5-এর উপহারঅর্থবহ ট্যাগ, মিডিয়া, ফর্ম

<!doctype html>
<header>…</header> <nav>…</nav> <main>…</main>
<video src="class.mp4" controls></video>   ← plugin ছাড়া ভিডিও
<input type="email" required>              ← নিজে থেকেই যাচাই

আজকের ভাষাসংস্করণ নয়, ফিচার ধরে কথা

html.spec.whatwg.org — "Living Standard"
Baseline Widely available  — সব প্রধান ব্রাউজারে বহুদিন ধরে
Baseline Newly available   — সব প্রধান ব্রাউজারের নতুন সংস্করণে
Not yet Baseline           — এখনো সব জায়গায় নয়, fallback দিন

১৯৮৯–৯১ — জন্ম। ১৯৮৯ সালের মার্চে সুইজারল্যান্ডের গবেষণাগার CERN-এ Tim Berners-Lee বিজ্ঞানীদের নথি ভাগাভাগির জন্য একটি প্রস্তাব লেখেন। ১৯৯০ সালের শেষ নাগাদ তিনি তৈরি করেন প্রথম ব্রাউজার, প্রথম ওয়েব সার্ভার, HTTP আর HTML-এর প্রথম রূপ। ১৯৯১ সালে ওয়েব CERN-এর বাইরের সবার জন্য খুলে দেওয়া হয়। মূল ধারণা ছিল hypertext — লেখার ভেতরে লিংক, যা চাপলে অন্য নথিতে যাওয়া যায়।
১৯৯৩–৯৫ — সবার জন্য। ১৯৯৩ সালে CERN ওয়েবের সফটওয়্যার বিনামূল্যে সবার ব্যবহারের জন্য উন্মুক্ত করে, আর একই বছর Mosaic ব্রাউজার লেখার পাশে ছবি দেখানো জনপ্রিয় করে। এরপর আসে Netscape Navigator. ১৯৯৫ সালে Netscape-এ Brendan Eich মাত্র কয়েক দিনে JavaScript-এর প্রথম রূপ বানান — পাতা প্রথমবার “সাড়া” দিতে শিখল। ১৯৯৪ সালে Berners-Lee ওয়েবের মানদণ্ড ঠিক করার সংস্থা W3C প্রতিষ্ঠা করেন।
১৯৯৪–৯৬ — CSS. শুরুতে HTML-এর ভেতরেই চেহারার নির্দেশ ঢুকে যাচ্ছিল। CERN-এ কাজ করা নরওয়ের Håkon Wium Lie ১৯৯৪ সালে “Cascading Style Sheets”-এর প্রস্তাব দেন; পরে Bert Bos যোগ দেন। ১৯৯৬ সালের ডিসেম্বরে CSS level 1 W3C-র সুপারিশ (Recommendation) হয়। নামের “cascading” অংশটি — একাধিক নিয়মের মধ্যে কোনটি জিতবে — পর্ব ১৮-এর মূল বিষয়।
১৯৯৫–২০০৪ — ব্রাউজার যুদ্ধ। Netscape আর Microsoft-এর Internet Explorer বাজার দখলের লড়াইয়ে নিজস্ব ট্যাগ বানাতে থাকে — <blink>, <marquee>. ডেভেলপাররা একই সাইট দুই ব্রাউজারের জন্য দুইভাবে লিখতেন। Windows-এর সাথে আসায় Internet Explorer জয়ী হয়, তারপর বহু বছর প্রায় থমকে থাকে। পাতার লেআউট হতো টেবিল দিয়ে, রং দেওয়া হতো <font> দিয়ে — যা আজ পুরোপুরি বাতিল।
২০০৪–২০১৪ — WHATWG ও HTML5. W3C তখন HTML ছেড়ে কড়া নিয়মের XHTML 2-এর দিকে যাচ্ছিল, যা পুরোনো পাতার সাথে মেলে না। ২০০৪ সালে Apple, Mozilla আর Opera মিলে গঠন করে WHATWG, যারা বাস্তবের ওয়েব মেনে HTML-কে নতুন করে লেখে — ভুল HTML পড়ার নিয়মসহ। এই কাজই পরিচিত হয় HTML5 নামে; W3C ২০১৪ সালে একে Recommendation ঘোষণা করে। ভিডিও, অডিও, অর্থবহ ট্যাগ, নতুন ফর্ম ইনপুট — সব plugin ছাড়াই।
২০১৯–আজ — একটিই মানদণ্ড। ২০১৯ সালে W3C আর WHATWG চুক্তি করে: HTML আর DOM-এর একমাত্র মানদণ্ড হবে WHATWG-এর Living Standard — কোনো সংস্করণ নম্বর নেই, নিয়মিত হালনাগাদ হয়। CSS-ও আর একটিমাত্র “CSS3” নয়, বরং অনেকগুলো আলাদা module (Flexbox, Grid, Color…) নিজের গতিতে এগোয়। কোন ফিচার কতটা নিরাপদে ব্যবহার করা যায়, তা বোঝাতে ২০২৩ সাল থেকে ব্রাউজার-নির্মাতারা মিলে Baseline লেবেল ব্যবহার করেন — এই কোর্সে নতুন প্রতিটি ফিচারের পাশে সেটি উল্লেখ থাকবে।

আজ বড় rendering engine মাত্র তিনটি: Chrome, Edge, Opera, Samsung Internet-এর ভেতরে Blink; Safari-তে WebKit; Firefox-এ Gecko. Microsoft Edge নিজস্ব engine ছেড়ে ২০২০ সালে Chromium-ভিত্তিক হয়। তাই “আমার ব্রাউজারে ঠিক আছে” বলার আগে অন্তত দুটি ভিন্ন engine-এ পরীক্ষা করা পেশাদার অভ্যাস — বিস্তারিত পর্ব ৪৮-এ।

৮ · ওয়েব ডেভেলপার কী করেন — আর এই কোর্সের রোডম্যাপ

“ওয়েব ডেভেলপার” একটি বড় ছাতার মতো শব্দ। এর নিচে কয়েক ধরনের কাজ আছে, আর বাংলাদেশে চাকরি ও ফ্রিল্যান্সিং — দুই জায়গাতেই এগুলোর চাহিদা বহু বছর ধরে চলছে:

ভূমিকা	মূল কাজ	প্রধান টুল ও ভাষা
UI/UX ডিজাইনার	ব্যবহারকারী কী চান বোঝা, পাতার নকশা ও প্রবাহ ঠিক করা	Figma, ব্যবহারকারী-গবেষণা
Front-end ডেভেলপার	নকশাকে ব্রাউজারে সত্যিকারের, দ্রুত, সবার জন্য ব্যবহারযোগ্য পাতায় রূপ দেওয়া	HTML, CSS, JavaScript, React ইত্যাদি
Back-end ডেভেলপার	সার্ভার, ডেটাবেস, লগইন, পেমেন্ট	PHP, Node.js, Python, SQL
Full-stack ডেভেলপার	দুই দিকেই কাজ	উপরের সবকিছুর মিশ্রণ
WordPress বা Shopify ডেভেলপার	তৈরি প্ল্যাটফর্মে থিম সাজানো ও বদলানো	HTML, CSS, অল্প PHP (WordPress), Liquid (Shopify) বা JavaScript

খেয়াল করুন, প্রায় প্রতিটি সারিতে HTML আর CSS আছে। Back-end ডেভেলপারও শেষ পর্যন্ত HTML পাঠান, ডিজাইনারকেও জানতে হয় ব্রাউজারে কী সম্ভব। তাই এই কোর্স যে দিকেই যান, তার ভিত্তি।

এই কোর্সের ৮টি মডিউল

মডিউল	পর্ব	যা শিখবেন
১ · ওয়েব ও HTML-এর ভিত্তি	০১–০৭	ওয়েব কীভাবে চলে, টুল আর DevTools, প্রথম পাতা, লেখা, লিংক, ছবি-ভিডিও, তালিকা-টেবিল
২ · গঠন, ফর্ম ও অ্যাক্সেসিবিলিটি	০৮–১৫	ফর্ম ও validation, semantic layout, details-dialog-popover, অ্যাক্সেসিবিলিটি, SEO, ওয়েবে বাংলা; শেষে একটি মাইলস্টোন সাইট
৩ · CSS-এর ভিত্তি	১৬–২২	selector, cascade ও specificity, box model, একক ও রং, টাইপোগ্রাফি, ব্যাকগ্রাউন্ড-ছায়া
৪ · লেআউট	২৩–২৯	normal flow, position, Flexbox, Grid আর প্রচলিত লেআউট প্যাটার্ন
৫ · রেসপন্সিভ ও আধুনিক CSS	৩০–৩৭	মোবাইল-ফার্স্ট, media ও container query, CSS variable, `:has()`, nesting, dark mode, একেবারে নতুন ফিচার
৬ · মোশন, ইফেক্ট ও পলিশ	৩৮–৪৫	transition, animation, transform, ইফেক্ট, স্ক্রল, ফর্ম স্টাইলিং, SVG, অ্যাক্সেসিবল CSS
৭ · পেশাদার কাজের ধারা	৪৬–৫৪	CSS architecture, debugging, ব্রাউজার সাপোর্ট, পারফরম্যান্স, Sass, Tailwind, Git দিয়ে প্রকাশ; শেষে ক্যাপস্টোন পোর্টফোলিও
৮ · পরীক্ষা ও ইন্টারভিউ প্রস্তুতি	৫৫–৫৯	রেন্ডার অনুমান, MCQ, লিখিত-ভাইভা, ইন্টারভিউর প্রশ্ন আর লাইভ কোডিং চ্যালেঞ্জ

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

পরীক্ষা ও ইন্টারভিউতে: বিশ্ববিদ্যালয়, চাকরি বা ফ্রন্ট-এন্ড ইন্টারভিউর পরীক্ষায় এ ধরনের প্রশ্ন প্রায়ই আসে —

Internet আর Web-এর পার্থক্য কী? Internet হলো কম্পিউটারের বিশ্বজোড়া নেটওয়ার্ক; Web তার ওপর চলা লিংক-যুক্ত পাতার ব্যবস্থা, যা HTTP ব্যবহার করে।
ব্রাউজারে URL লিখে Enter চাপলে কী হয়? DNS দিয়ে IP খোঁজা, TCP ও TLS সংযোগ, HTTP request ও response, তারপর parse করে DOM-CSSOM, layout, paint.
HTML, CSS আর JavaScript-এর ভূমিকা কী? যথাক্রমে কাঠামো ও অর্থ, চেহারা ও লেআউট, আর আচরণ।
DOM কী? HTML থেকে ব্রাউজারের বানানো গাছের মতো কাঠামো, যা JavaScript পড়তে ও বদলাতে পারে।
Static আর dynamic সাইটের পার্থক্য? Static-এ আগেই তৈরি ফাইল হুবহু যায়; dynamic-এ সার্ভার প্রতিটি request-এ নতুন HTML বানায়।

৯ · AI-এর যুগে ওয়েব শেখা

আজ ChatGPT, Gemini বা Claude-কে বললেই কয়েক সেকেন্ডে একটি পুরো ওয়েব পেজের কোড পাওয়া যায়। তাহলে HTML-CSS শিখে কী হবে? উত্তরটি সহজ — AI-এর লেখা কোড প্রায়ই দেখতে ঠিক লাগে, কিন্তু ভেতরে অনেক সমস্যা লুকিয়ে থাকে। আর সেগুলো ধরতে পারেন কেবল তিনিই, যিনি ব্রাউজার কীভাবে ভাবে তা জানেন।

AI দ্রুত লেখে, আপনি যাচাই করেন।
যাচাই করতে জানলে AI আপনার সবচেয়ে কাজের সহকারী।

AI সাধারণত যেসব HTML-CSS ভুল করে

AI-এর ভুল	কেন সমস্যা	কোথায় শিখবেন
সবকিছু `<div>` দিয়ে (“div-soup”), বোতামের জায়গায় ক্লিক-করা `div`	screen reader আর কীবোর্ড ব্যবহারকারী পাতা ব্যবহার করতে পারেন না	পর্ব ১০, ১২
ছবিতে `alt` নেই, ইনপুটে `label` নেই	অ্যাক্সেসিবিলিটি নষ্ট, SEO-ও ক্ষতিগ্রস্ত	পর্ব ০৬, ০৮
পুরোনো পদ্ধতি — `float` লেআউট, অপ্রয়োজনীয় `-webkit-` prefix	অকারণ জটিল, ভাঙার ঝুঁকি	পর্ব ২৫, ২৭, ৪৮
নতুন ফিচার, কিন্তু fallback ছাড়া	কিছু ব্রাউজারে পাতা ভেঙে যায়	পর্ব ৩৭, ৪৮
বানানো CSS property বা ভুল মান	ব্রাউজার চুপচাপ উপেক্ষা করে — কোনো error দেখায় না	পর্ব ১৬, ৪৭

শেষ সারিটি বিশেষভাবে মনে রাখুন। C বা Java-র compiler ভুল পেলে থেমে যায়, কিন্তু ব্রাউজার ভুল CSS বা HTML পেলে নীরবে উপেক্ষা করে বা নিজের মতো ঠিক করে নেয় (অংশ ৪-এর পরীক্ষাটি মনে করুন)। তাই “পাতা তো খুলছে” দেখে নিশ্চিন্ত হওয়ার উপায় নেই।

AI-কে দিয়ে কোড লেখালে প্রশ্নটি এমনভাবে করুন যাতে সে আধুনিক ও সঠিক পদ্ধতিতে লিখতে বাধ্য হয়, আর নিজের সিদ্ধান্তও ব্যাখ্যা করে:

আমি HTML ও CSS শিখছি। একটি অনলাইন দোকানের পণ্য-কার্ড বানাতে চাই: ছবি, নাম, দাম আর "কার্টে যোগ করুন" বোতাম। শর্ত: ১. semantic HTML ব্যবহার করবে — article, h2, button; ক্লিক করার জিনিস div দিয়ে বানাবে না। ২. ছবিতে অর্থবহ alt থাকবে। ৩. লেআউটে float বা table নয়; দরকার হলে Flexbox বা Grid. ৪. কোনো CSS ফিচার যদি "Baseline Widely available" না হয়, সেটি আলাদা করে বলবে আর fallback দেবে। ৫. প্রতিটি অংশ কেন এভাবে লিখলে, সহজ বাংলায় ২-৩ লাইনে ব্যাখ্যা দাও।

AI-এর লেখা HTML-CSS হাতে পেলে — যাচাইয়ের চেকলিস্ট

validator.w3.org-এ HTML পরীক্ষা করেছি — কোনো error নেই
DevTools-এ (F12) Elements আর Console দেখেছি — লাল কোনো বার্তা নেই, কাটা দাগ দেওয়া (অকার্যকর) CSS নিয়ম নেই
শুধু মাউস নয়, কীবোর্ডের Tab দিয়েও পুরো পাতা ব্যবহার করে দেখেছি
অচেনা প্রতিটি ট্যাগ বা property MDN-এ মিলিয়েছি, আর নতুন ফিচারের সাপোর্ট Can I use-এ দেখেছি
Lighthouse (DevTools-এর ভেতরে) দিয়ে অ্যাক্সেসিবিলিটি আর পারফরম্যান্স স্কোর দেখেছি, আর ফোনের মাপে পাতাটি খুলে দেখেছি

ভাবনার প্রশ্ন

প্রতিটি প্রশ্ন নিয়ে নিজে কিছুক্ষণ ভাবুন — তারপর “→ উত্তর” চাপুন। এগুলো আপনাকে ট্যাগ-মুখস্থকারী থেকে ওয়েব-চিন্তক বানাবে।

প্র ০১Internet আর Web কি একই জিনিস? না হলে Web আসার আগে Internet-এ মানুষ কী করত?

না, একই নয় — এবং পার্থক্যটা ইতিহাসেই স্পষ্ট। Internet-এর শিকড় ১৯৬৯ সালের মার্কিন গবেষণা-নেটওয়ার্ক ARPANET-এ। ১৯৮৩ সালে এই নেটওয়ার্ক TCP/IP নামের সাধারণ নিয়মে চলতে শুরু করে, যা আজও Internet-এর ভিত্তি। অর্থাৎ ওয়েব আসার প্রায় দুই দশক আগেই Internet ছিল।

তখন মানুষ Internet-এ কী করত? ইমেইল পাঠাত, FTP দিয়ে ফাইল আদান-প্রদান করত, Telnet দিয়ে দূরের কম্পিউটারে কাজ করত, Usenet-এর আলোচনা-গ্রুপে লিখত। সমস্যা ছিল, প্রতিটি কাজের জন্য আলাদা প্রোগ্রাম আর আলাদা কমান্ড শিখতে হতো, আর তথ্যগুলো একে অপরের সাথে জোড়া ছিল না।

Tim Berners-Lee-র অবদান ছিল তিনটি সরল ধারণা একসাথে জোড়া: প্রতিটি নথির একটি সর্বজনীন ঠিকানা (URL), নথি আনার একটি সহজ নিয়ম (HTTP), আর লিংকসহ নথি লেখার একটি ভাষা (HTML). এর কোনোটিই একেবারে নতুন আবিষ্কার ছিল না — hypertext-এর ধারণা আগেও ছিল — কিন্তু Internet-এর ওপর এগুলো বসিয়ে বিনামূল্যে সবার জন্য খুলে দেওয়াই ছিল বিপ্লব।

আজ ব্যাপারটা আরও মিশে গেছে। আপনার ফোনের bKash বা ব্যাংকিং অ্যাপ ওয়েব পেজ না দেখালেও ভেতরে প্রায়ই HTTP দিয়েই সার্ভারের সাথে কথা বলে। আবার ভিডিও কল বা অনলাইন গেম অনেক সময় HTTP ছাড়াই সরাসরি Internet-এর নিচের স্তর ব্যবহার করে।

মূল উপলব্ধি: Internet হলো রাস্তা, Web হলো সেই রাস্তায় চলা অনেক সেবার একটি — সবচেয়ে জনপ্রিয়টি। স্তর আলাদা করে ভাবতে পারলে সমস্যাও আলাদা করে খোঁজা যায়: “নেট নেই” আর “সাইট খুলছে না” এক জিনিস নয়।

প্র ০২C compiler একটি সেমিকোলন বাদ পড়লেই থেমে যায়, অথচ ব্রাউজার ভুলে ভরা HTML-ও দেখিয়ে দেয়। কোনটি ভালো নকশা?

দুটোই সচেতন সিদ্ধান্ত, আর প্রতিটির পেছনে একটি দাম আছে। Compiler কড়া, কারণ তার ভুল ধরার সুযোগ আছে প্রোগ্রাম চালানোর আগে, আর ভুলটা ঠিক করবেন সেই প্রোগ্রামারই, যিনি সামনে বসে আছেন। কিন্তু ব্রাউজারের সামনে বসে আছেন একজন সাধারণ পাঠক — যিনি কোড লেখেননি, ঠিকও করতে পারবেন না। লেখক বন্ধ করে দিয়ে “এই পাতায় ভুল আছে” দেখালে শাস্তি পান নিরপরাধ পাঠক।

শুরুর দিকের ব্রাউজাররা তাই ক্ষমাশীল ছিল — “যা পাও, যতটা পারো দেখাও।” এটি Internet-জগতের একটি পুরোনো নীতির সাথে মেলে: “যা পাঠাও তাতে কড়া হও, যা নাও তাতে উদার হও” (Jon Postel-এর নামে পরিচিত robustness principle). কিন্তু সমস্যা দেখা দিল — প্রতিটি ব্রাউজার নিজের মতো করে ক্ষমা করত। একই ভুল HTML এক ব্রাউজারে ঠিক, আরেকটিতে ভাঙা।

W3C একসময় উল্টো পথে যেতে চেয়েছিল: XHTML, যেখানে XML-এর মতো একটি ভুল পেলেই পাতা দেখানো বন্ধ। কড়া মোডে পরিবেশন করা XHTML পাতায় সামান্য ভুলে পাঠক দেখতেন শুধু একটি error বার্তা। বাস্তবে প্রায় কেউই এই ঝুঁকি নিতে চায়নি, বিশেষ করে যখন পাতার অংশ আসে বিজ্ঞাপন বা ব্যবহারকারীর মন্তব্য থেকে।

WHATWG-এর সমাধানটি ছিল মাঝামাঝি এবং চতুর: ক্ষমাশীলতা থাকবে, কিন্তু কীভাবে ক্ষমা করা হবে, তা মানদণ্ডে অক্ষরে অক্ষরে লেখা থাকবে। ফলে আজ সব ব্রাউজার একই ভুল HTML থেকে একই DOM বানায়। CSS-ও একই দর্শনে চলে — না বোঝা নিয়ম বাদ দিয়ে বাকিটা চালিয়ে যায়, আর এজন্যই নতুন CSS ফিচার পুরোনো ব্রাউজারে পাতা পুরো ভাঙে না।

মূল উপলব্ধি: ক্ষমাশীলতা পাঠকের জন্য আশীর্বাদ, লেখকের জন্য ফাঁদ — ভুল চোখে পড়ে না। তাই ডেভেলপারকে নিজেই কড়া হতে হয়: validator, DevTools আর পরীক্ষা হলো আপনার নিজের “compiler”.

প্র ০৩সব কিছু একটি ভাষায় করলেই তো সহজ হতো — HTML, CSS, JavaScript তিনটি আলাদা ভাষা কেন?

ইতিহাস আসলে উল্টো দিক থেকে এই প্রশ্নের উত্তর দিয়েছে। ১৯৯০-এর দশকের মাঝামাঝি চেহারার নির্দেশ HTML-এর ভেতরেই থাকত — <font color="red">, <center>, টেবিল দিয়ে লেআউট। একটি সাইটের শিরোনামের রং বদলাতে হলে শত শত পাতার প্রতিটিতে হাত দিতে হতো। পাতা ভারী হতো, আর screen reader বুঝতে পারত না কোন টেবিল তথ্যের, কোনটা শুধু সাজানোর।

CSS এলো ঠিক এই সমস্যার সমাধান হিসেবে: অর্থ থাকবে HTML-এ, চেহারা থাকবে আলাদা ফাইলে। এর শক্তি সবচেয়ে সুন্দরভাবে দেখিয়েছিল ২০০৩ সালে Dave Shea-র “CSS Zen Garden” — একটিই HTML ফাইল, কিন্তু শুধু CSS বদলে শত শত সম্পূর্ণ ভিন্ন নকশা। আলাদা CSS ফাইল ব্রাউজার একবার নামিয়ে cache-এ রাখে, তাই পরের পাতাগুলো দ্রুত খোলে।

আলাদা রাখার আরও লাভ: HTML অর্থবহ হলে সার্চ ইঞ্জিন, screen reader, অনুবাদ টুল, এমনকি AI সবাই পাতা ভালো বোঝে। JavaScript বন্ধ থাকলে বা লোড হতে দেরি হলেও মূল তথ্য দেখা যায় — এই নীতিকে বলে progressive enhancement. প্রতিটি ভাষা নিজের কাজে বিশেষজ্ঞও: CSS ঘোষণামূলক (“এটা এমন দেখাবে”), তাই ব্রাউজার নিজেই সবচেয়ে কার্যকর উপায়ে আঁকতে পারে।

তবে বাস্তবে সীমারেখা সবসময় এত পরিষ্কার নয়। React-এর মতো framework-এ HTML-এর মতো লেখা JavaScript-এর ভেতরে থাকে; Tailwind CSS-এ স্টাইল সরাসরি HTML-এর class-এ লেখা হয়। এগুলো ফাইল-স্তরে মেশায়, কিন্তু চূড়ান্ত ফলে ব্রাউজার আবার সেই তিন আলাদা জিনিসই পায় — DOM, CSS নিয়ম আর script.

মূল উপলব্ধি: “আলাদা ভাষা” আসলে “আলাদা দায়িত্ব”-এর নকশা। কোড কোন ফাইলে থাকবে তা নিয়ে মত ভিন্ন হতে পারে, কিন্তু অর্থ, চেহারা আর আচরণকে মনে মনে আলাদা রাখা — এটাই ভালো ওয়েব ডেভেলপারের চিন্তার ধরন।

প্র ০৪সব সফটওয়্যারের সংস্করণ থাকে — তাহলে HTML কেন “Living Standard”, HTML6 কেন আসে না?

কারণ সংস্করণ নম্বর একটি মিথ্যা নিরাপত্তা দিত। HTML 4.01 বা XHTML 1.0 যখন “চূড়ান্ত” ছিল, তখনো কোনো ব্রাউজার সেগুলো পুরোপুরি মানত না, আবার এমন অনেক জিনিস মানত যা কাগজে ছিলই না। ডেভেলপাররা আসলে সংস্করণ দেখে কোড লিখতেন না — দেখতেন “কোন ব্রাউজারে কোনটা চলে।”

WHATWG তাই একটি বাস্তববাদী সিদ্ধান্ত নেয়: মানদণ্ড হবে চলমান নথি। নতুন ফিচার তখনই যোগ হয়, যখন অন্তত দুটি ব্রাউজার-নির্মাতা সেটি বানাতে আগ্রহী; ভুল ধরা পড়লে সঙ্গে সঙ্গে ঠিক হয়। “HTML5” নামটি টিকে গিয়েছিল মূলত প্রচারের শব্দ হিসেবে — ২০১০-এর দিকে Flash-এর বদলে ভিডিও, ক্যানভাস, নতুন API সবকিছুকেই “HTML5” বলা হতো। W3C কিছুদিন আলাদা সংস্করণ (5.1, 5.2) প্রকাশ করলেও ২০১৯ সালের চুক্তির পর সেটি বন্ধ হয়।

তাহলে একজন ডেভেলপার কীভাবে বুঝবেন কোনটা নিরাপদে ব্যবহার করা যায়? এখানেই আসে Baseline. কোনো ফিচার সব প্রধান ব্রাউজারের (Chrome, Edge, Firefox, Safari) সর্বশেষ সংস্করণে চলতে শুরু করলে সেটি “Newly available”; তার প্রায় আড়াই বছর (৩০ মাস) পরে “Widely available” — অর্থাৎ প্রায় সবার ব্রাউজার ততদিনে হালনাগাদ হয়ে গেছে। MDN আর Can I use-এ এই লেবেল দেখা যায়।

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

মূল উপলব্ধি: ওয়েব একটি জীবন্ত প্ল্যাটফর্ম, যা কখনো “শেষ” হয় না। তাই এক দিনের মুখস্থ নয়, নিয়মিত যাচাইয়ের অভ্যাস — MDN, Can I use, Baseline — আধুনিক ওয়েব ডেভেলপারের আসল দক্ষতা।

প্র ০৫প্রায় সব ব্রাউজার আজ Blink, WebKit বা Gecko-র কোনো একটিতে চলে। এত কম engine থাকা কি বিপদ?

ইতিহাস বলে — হ্যাঁ, ঝুঁকি আছে। ২০০০-এর দশকের শুরুতে Internet Explorer 6 বাজারের বিশাল অংশ দখল করে নেয়, আর প্রতিযোগিতা না থাকায় বছরের পর বছর তেমন উন্নতি হয়নি। ডেভেলপাররা IE-র ভুলগুলোকেই “নিয়ম” ধরে কোড লিখতেন; সরকারি ও ব্যাংকের অনেক সাইট শুধু IE-তে চলত। সেই জট খুলতে প্রায় এক দশক লেগেছিল।

আজ Chromium (যার engine Blink) প্রকল্পের ওপর তৈরি Chrome, Edge, Opera, Brave, Samsung Internet সহ বহু ব্রাউজার। ২০১৩ সালে Opera নিজস্ব engine ছেড়ে Blink নেয়, ২০২০ সালে Microsoft Edge-ও। ফলে “Chrome-এ চলে” অনেক সময় “সবখানে চলে” বলে ভুল ধারণা জন্মায়, আর কোনো এক কোম্পানির সিদ্ধান্ত পুরো ওয়েবের দিক ঠিক করে দিতে পারে।

তবে আজকের পরিস্থিতি IE-যুগের মতো নয়। মানদণ্ড এখন প্রকাশ্যে, সব নির্মাতা মিলে লেখেন; প্রতিটি ফিচারের হাজার হাজার স্বয়ংক্রিয় পরীক্ষা (web-platform-tests) সবার জন্য উন্মুক্ত; আর ২০২২ সাল থেকে প্রতি বছর “Interop” নামে একটি যৌথ প্রকল্পে ব্রাউজার-নির্মাতারা ঠিক করেন কোন ক্ষেত্রগুলোতে সবাই মিলে অমিল দূর করবেন। Safari-র WebKit আর Firefox-এর Gecko স্বাধীন থাকায় একটি সত্যিকারের বিকল্পও আছে।

ডেভেলপার হিসেবে আপনার করণীয়: মানদণ্ড মেনে কোড লেখা, কোনো এক ব্রাউজারের বিশেষ আচরণের ওপর ভরসা না করা, আর অন্তত দুটি ভিন্ন engine-এ — যেমন Chrome আর Firefox, সম্ভব হলে iPhone-এর Safari — পাতা পরীক্ষা করা।

মূল উপলব্ধি: ওয়েবের শক্তি হলো এটি কারও একার মালিকানায় নয়। একাধিক স্বাধীন engine সেই উন্মুক্ততার পাহারাদার — আর মানদণ্ড মেনে লেখা প্রতিটি পাতা সেই পাহারায় আপনার ছোট্ট অবদান।

অনুশীলন

প্রথম তিনটিতে কোড লিখতে হবে না — দেখা আর ভাবাই আসল কাজ। শেষটিতে ছোট একটি পাতা বানাবেন।

Request-গুলো নিজের চোখে দেখুন: কম্পিউটারে যেকোনো একটি খবরের সাইট খুলুন। F12 চেপে DevTools খুলে Network ট্যাবে যান, তারপর পাতাটি reload করুন (F5). তালিকার প্রথম সারিটির status code আর type কী? মোট কয়টি request হলো?

প্রথম সারিটি সাধারণত পাতার মূল HTML ডকুমেন্ট — status 200, type document. কখনো আগে একটি 301 বা 302 দেখতে পারেন, যেমন http থেকে https-এ পাঠানোর জন্য। মোট request সংখ্যা খবরের সাইটে প্রায়ই একশোর বেশি হয় — CSS, JavaScript, ছবি, ফন্ট, বিজ্ঞাপন, পরিসংখ্যানের script. নিচের সারাংশ লাইনে মোট আকার আর সময়ও দেখা যায়। এটিই ধাপ ৬-এর “আরও request”.
View Source বনাম Elements: এই পাতাতেই Ctrl+U চেপে মূল HTML (View Source) খুলুন এবং lx-side লেখাটি খুঁজুন। তারপর DevTools-এর Elements ট্যাবে একই element দেখুন। পার্থক্য কী, আর কেন?

View Source-এ <aside class="lx-side" id="lx-side"></aside> একদম খালি। কিন্তু Elements-এ এর ভেতরে পুরো কোর্সের সূচিপত্র — মডিউল, পর্বের তালিকা, অগ্রগতি। কারণ সার্ভার যে static HTML পাঠিয়েছে তাতে সূচিপত্র নেই; পাতা খোলার পর JavaScript (course-data.js থেকে তথ্য নিয়ে) DOM-এ সেটি বসিয়েছে। View Source দেখায় সার্ভারের পাঠানো লেখা, Elements দেখায় এই মুহূর্তের DOM.
Static না dynamic? ভাগ করুন: (ক) একটি রেস্টুরেন্টের মেনুর পাতা, যা মাসে একবার বদলায় (খ) Facebook-এর নিউজফিড (গ) কোনো ডেভেলপারের পোর্টফোলিও (ঘ) অনলাইন দোকানের “আমার অর্ডার” পাতা (ঙ) বোর্ড পরীক্ষার ফল দেখার পাতা।

Static: (ক) আর (গ) — সবাই একই পাতা দেখে, বদল হয় কালেভদ্রে; তৈরি ফাইল রাখলেই চলে।

Dynamic: (খ), (ঘ), (ঙ) — প্রতিটি ব্যবহারকারী বা প্রতিটি রোল নম্বরের জন্য আলাদা উত্তর, তাই সার্ভারকে ডেটাবেস থেকে তথ্য নিয়ে প্রতিবার পাতা বানাতে হয়। (ঙ)-এ ফল প্রকাশের দিন একসাথে লক্ষ লক্ষ request আসে, তাই এ ধরনের সাইট অনেক সময় ধীর হয়ে যায় — dynamic সাইটের সার্ভারকে প্রতিটি request-এ কাজ করতে হয় বলেই।
নিজের তিন-স্তরের পাতা: একটি ছোট পরিচিতি-কার্ড বানান — HTML-এ আপনার নাম (শিরোনাম) আর এক লাইনের পরিচয়; <style>-এ শিরোনামের রং আর পটভূমির রং; আর একটি বোতাম, যা চাপলে পরিচয়ের লেখাটি বদলে যায়।
একটি সম্ভাব্য সমাধান — নিচের এডিটরে নিজের মতো বদলে দেখুন:
```
<style>
  body { font-family: system-ui, sans-serif; background: #f3f7f4; }
  h1 { color: #0a7d32; margin-bottom: 4px; }
  button { padding: 6px 12px; font: inherit; }
</style>

<h1>নুসরাত জাহান</h1>
<p id="bio">খুলনা থেকে, ওয়েব ডেভেলপমেন্ট শিখছি।</p>
<button type="button" id="more">আরও জানুন</button>

<script>
  document.querySelector('#more').addEventListener('click', () => {
    document.querySelector('#bio').textContent = 'লক্ষ্য: নিজের পোর্টফোলিও সাইট প্রকাশ করা!';
  });
</script>
```
বোতাম চাপলে অনুচ্ছেদের লেখা বদলে যায়। তিন স্তর আলাদা: <style> মুছলে চেহারা যায়, <script> মুছলে বোতাম অকেজো হয়, কিন্তু নাম আর পরিচয় (HTML) থেকে যায়। করে দেখুন: background-এর রং বদলান, অথবা বোতামের লেখা “আরও জানুন”-এর বদলে অন্য কিছু দিন।

নিজেকে যাচাই করুন

ভুল হলে কারণসহ ব্যাখ্যা পাবেন, আবার চেষ্টাও করতে পারবেন।

ক্রমব্রাউজারে URL লিখে Enter চাপার পর ঘটনাগুলো সঠিক ক্রমে সাজান (▲▼ চেপে সরান)

📒 DNS থেকে domain name-এর IP ঠিকানা জানা
🔒 সার্ভারের সাথে TCP সংযোগ আর TLS যাচাই
📨 HTTP request পাঠানো (GET)
📦 HTTP response-এ HTML আসা (200 OK)
🌳 HTML parse করে DOM তৈরি
🖌️ Layout আর paint করে পাতা দেখানো

একটি ওয়েব পেজের কাঠামো ও অর্থ — কোনটি শিরোনাম, কোনটি অনুচ্ছেদ, কোনটি বোতাম — কোন ভাষা ঠিক করে?

CSS
HTML
JavaScript
HTTP

ব্রাউজার www.example.com-এর মতো domain name থেকে সার্ভারের IP ঠিকানা জানতে কোন ব্যবস্থা ব্যবহার করে?

HTML
TLS
DNS
CSSOM

সার্ভার একটি HTTP response-এ status code 404 পাঠাল। এর অর্থ কী?

চাওয়া পাতা বা ফাইলটি সার্ভারে পাওয়া যায়নি
সব ঠিক আছে, পাতা পাঠানো হলো
সার্ভারের ভেতরে প্রোগ্রাম ভেঙে গেছে
পাতাটি স্থায়ীভাবে নতুন ঠিকানায় সরে গেছে

একটি <p> element-এ CSS দিয়ে display: none দেওয়া আছে। ব্রাউজারের ভেতরে এর অবস্থা কী?

DOM থেকেই মুছে যায়
Render tree-তে থাকে, শুধু রং স্বচ্ছ হয়ে যায়
ব্রাউজার নিয়মটি উপেক্ষা করে, element দেখা যায়
DOM-এ থাকে, কিন্তু render tree-তে থাকে না

World Wide Web-এর প্রথম প্রস্তাব কে, কোথায় দিয়েছিলেন?

Brendan Eich, Netscape-এ
Tim Berners-Lee, CERN-এ
Håkon Wium Lie, CERN-এ
ARPANET-এর প্রকৌশলীরা

বর্তমানে HTML-এর আনুষ্ঠানিক মানদণ্ড কোনটি?

W3C-র HTML 4.01
XHTML 2.0
WHATWG-এর HTML Living Standard
প্রতিটি ব্রাউজারের নিজস্ব নিয়ম

শব্দকোষ

লেখার মধ্যে ডটেড দাগ দেওয়া শব্দে মাউস রাখুন বা চাপুন — অর্থ দেখাবে। এই পর্বের সব নতুন শব্দ এখানে একসাথে:

মনে রাখুন

Internet হলো নেটওয়ার্ক, Web তার ওপর চলা লিংক-জোড়া পাতার ব্যবস্থা; ব্রাউজার (client) চায়, server দেয়, ভাষা HTTP.
যাত্রাপথ: URL → DNS → TCP + TLS → request → response → আরও request.
ব্রাউজারের কারখানা: DOM + CSSOM → render tree → layout → paint → composite.
HTML = কাঠামো, CSS = সাজসজ্জা, JavaScript = আচরণ — আলাদা রাখলে নকশা বদলানো, অ্যাক্সেসিবিলিটি আর রক্ষণাবেক্ষণ সহজ।
HTML-এর মানদণ্ড WHATWG-এর Living Standard; নতুন ফিচার ব্যবহারের আগে Baseline দেখুন, আর AI-এর কোড সবসময় নিজে যাচাই করুন।

পরের পর্বে: কাজের টুল গুছিয়ে নেব — VS Code ইনস্টল ও সাজানো, দরকারি extension, আর ব্রাউজারের DevTools: Elements, Console আর Network ট্যাব দিয়ে যেকোনো সাইটের ভেতরটা দেখা।

ওয়েব কীভাবে চলে — ব্রাউজার, সার্ভার আর HTML-CSS-JS-এর ভূমিকা