How the Web Works: Browsers, Servers & HTML's Role
ওয়েব কীভাবে কাজ করে — ব্রাউজার, সার্ভার ও HTML-এর ভূমিকা
1. Before We Begin — What Happens When You Visit a Website?
Every time you type a web address and press Enter, a small conversation happens between your browser and a server somewhere in the world — often thousands of kilometers away — and it all happens in a fraction of a second. Understanding this conversation is the foundation for everything else in this course.
By the end of this module, you will understand exactly what a browser, a server, and HTML each do — and why HTML is the one language every single website on Earth shares.
2. A Short History of the Web
In 1989, at CERN, a scientist named Tim Berners-Lee proposed a system for linking documents together over the internet so researchers could share information easily. By 1991 he had built the first website. That system — pages linked by hyperlinks — is still exactly how the web works today.
3. Client vs Server — The Request/Response Conversation
Your browser is the client. When you visit a URL, it sends a request to a server — a computer built to answer that request. The server sends back a response: usually an HTML file. Your browser then reads that HTML and draws it on the screen as the page you see.
4. Your First HTML Page — Run It Live 🚀
Below is a complete, tiny HTML page. Click Run ▶ to render it right here in your browser — this is exactly what any browser on Earth does with this file.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>My First Page</title>
</head>
<body>
<h1>Hello, Bangladesh!</h1>
<p>হ্যালো বাংলাদেশ! This is my first HTML page.</p>
</body>
</html>| Piece | Meaning | বাংলায় |
|---|---|---|
<!DOCTYPE html> | Tells the browser this is a modern HTML5 document. | ব্রাউজারকে জানায় এটি একটি আধুনিক HTML5 ডকুমেন্ট। |
<html lang="en"> | The root element; lang helps screen readers & search engines. | মূল এলিমেন্ট; lang স্ক্রিন রিডার ও সার্চ ইঞ্জিনকে সাহায্য করে। |
<head> | Metadata — not shown directly on the page. | মেটাডেটা — সরাসরি পেজে দেখা যায় না। |
<title> | Text shown in the browser tab. | ব্রাউজার ট্যাবে দেখানো টেক্সট। |
<body> | Everything visible on the page lives here. | পেজে যা কিছু দেখা যায়, সব এখানেই থাকে। |
5. Where HTML & CSS Skills Are Used (কোথায় ব্যবহৃত হয়)
প্রতিটি ওয়েবসাইটের ভিত্তি HTML ও CSS।
Gmail, Facebook — সব React/Vue app-এর নিচেও HTML/CSS।
প্রতিটি HTML ইমেইল টেমপ্লেট দিয়ে বানানো।
Docs সাইট, ব্লগ, help center সব একই ভিত্তির ওপর দাঁড়িয়ে।
ল্যান্ডিং পেজ ও পোর্টফোলিও তৈরি করে আয়ের সুযোগ।
React, Vue, Angular — সবাই শেষমেশ HTML/CSS-ই তৈরি করে।
6. HTML Alone vs HTML + CSS
HTML Alone (শুধু HTML)
- Structured, readable content
- Works in any browser instantly
- No visual design — plain black text on white
- Great for accessibility & SEO by default
✅ HTML + CSS (HTML + CSS একসাথে)
- Everything HTML gives you, plus:
- Colors, spacing, fonts, layout
- Responsive across every device
- Looks like a real, modern product
HTML আপনার কনটেন্টকে অর্থ ও গঠন দেয়। CSS তাকে রূপ ও লেআউট দেয়। সবসময় আগে HTML লাগবে — কারণ HTML না থাকলে CSS স্টাইল করার মতো কিছুই পায় না।
7. Glossary (শব্দকোষ)
| Term | Meaning | বাংলায় |
|---|---|---|
| Browser | The program you use to view websites (Chrome, Firefox, Safari). | ওয়েবসাইট দেখার জন্য ব্যবহৃত প্রোগ্রাম (Chrome, Firefox, Safari)। |
| Server | A computer that stores a website and answers requests for it. | যে কম্পিউটার একটি ওয়েবসাইট সংরক্ষণ করে ও অনুরোধের উত্তর দেয়। |
| HTTP | The protocol (language) browsers and servers use to talk. | যে প্রোটোকল (ভাষা) দিয়ে ব্রাউজার ও সার্ভার কথা বলে। |
| Tag / Element | A piece of HTML like <p> that marks up content. | <p>-এর মতো একটি HTML অংশ, যা কনটেন্ট চিহ্নিত করে। |
| Attribute | Extra info on a tag, e.g. href in <a href="...">. | একটি ট্যাগের অতিরিক্ত তথ্য, যেমন <a href="...">-এর href। |
| DOCTYPE | A declaration telling the browser which HTML version to expect. | ব্রাউজারকে জানানো হয় কোন HTML ভার্সন আশা করা উচিত। |
8. Practice Problems
Every problem has a Show Answer button. The answer contains real HTML that you can render right here. Try the problem yourself first, then check.
-
Write a minimal HTML page whose title bar says "My Portfolio" and whose body shows one heading with your name.এমন একটি ন্যূনতম HTML পেজ লিখুন যার title বার-এ "My Portfolio" লেখা থাকবে এবং body-তে আপনার নাম দিয়ে একটি heading দেখাবে।
✨ Show Answer (উত্তর দেখুন)
ans1.html<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>My Portfolio</title> </head> <body> <h1>Arif Hossain</h1> </body> </html> -
Add a second paragraph below the heading describing yourself in one sentence.Heading-এর নিচে একটি দ্বিতীয় paragraph যোগ করুন, যেখানে এক বাক্যে নিজের পরিচয় দিন।
✨ Show Answer (উত্তর দেখুন)
ans2.html<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>My Portfolio</title> </head> <body> <h1>Arif Hossain</h1> <p>I am a student learning web development in Bangla.</p> </body> </html> -
In two sentences, explain the difference between a browser and a server.দুই বাক্যে ব্যাখ্যা করুন, browser ও server-এর মধ্যে পার্থক্য কী।
✨ Show Answer (উত্তর দেখুন)
Answer: A browser is the program on your device that requests and displays web pages. A server is a remote computer that stores those pages and sends them back when requested.
Browser হলো আপনার ডিভাইসে থাকা প্রোগ্রাম, যা ওয়েব পেজ অনুরোধ করে ও দেখায়। Server হলো দূরবর্তী একটি কম্পিউটার, যা সেই পেজগুলো সংরক্ষণ করে এবং অনুরোধ পেলে ফেরত পাঠায়।
-
Write an HTML page with three separate paragraphs, each wrapped in its own <p> tag.তিনটি আলাদা paragraph লিখুন, প্রতিটি তার নিজস্ব <p> ট্যাগে মোড়ানো।
✨ Show Answer (উত্তর দেখুন)
ans4.html<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><title>Three Paragraphs</title></head> <body> <p>First paragraph.</p> <p>Second paragraph.</p> <p>Third paragraph.</p> </body> </html> -
In one paragraph, explain who Tim Berners-Lee was and why he matters.একটি অনুচ্ছেদে ব্যাখ্যা করুন — Tim Berners-Lee কে ছিলেন এবং তাঁর অবদান কেন গুরুত্বপূর্ণ।
✨ Show Answer (উত্তর দেখুন)
Answer: Tim Berners-Lee is a British scientist who, while working at CERN in 1989, invented the World Wide Web — a system of linked hypertext documents accessible over the internet. In 1991 he published the first website. His invention turned the internet, which already existed as a network, into the readable, browsable web we use every day.
Tim Berners-Lee একজন ব্রিটিশ বিজ্ঞানী, যিনি ১৯৮৯ সালে CERN-এ কাজ করার সময় World Wide Web আবিষ্কার করেন — ইন্টারনেটের মাধ্যমে সংযুক্ত hypertext ডকুমেন্টের একটি সিস্টেম। ১৯৯১ সালে তিনি প্রথম ওয়েবসাইট প্রকাশ করেন। তাঁর আবিষ্কার আগে থেকে থাকা ইন্টারনেট নেটওয়ার্ককে আমাদের প্রতিদিন ব্যবহৃত পঠনযোগ্য, ব্রাউজযোগ্য ওয়েবে রূপান্তরিত করে।
Summary — Module 01
The web works through a request/response conversation between your browser (the client) and a server. The server sends back HTML, which the browser reads and renders as a page. HTML gives content structure and meaning — CSS, which you'll meet starting in Phase 4, gives it appearance. Every website, app, and framework on Earth is, underneath, built on this same foundation.