অধ্যায় ৪

ওয়েব ডিজাইন পরিচিতি ও এইচটিএমএল

এই অধ্যায়ে তুমি জানবে ওয়েবসাইট, ওয়েব পেজ, ব্রাউজার, সার্ভার, URL, ডোমেইন, হোস্টিং ও HTTP/HTTPS-এর ধারণা, এবং HTML দিয়ে কীভাবে একটি ওয়েব পেজের কাঠামো তৈরি করা যায়।

Website Webpage Homepage Web Browser Web Server URL Domain Name Hosting HTTP HTTPS সম্পূর্ণ প্রক্রিয়া HTML পরিচিতি মৌলিক গঠন ট্যাগ ও অ্যাট্রিবিউট সাধারণ ট্যাগ লিংক ও ইমেজ লিস্ট ও টেবিল সারাংশ যাচাই করো

১. Website (ওয়েবসাইট)

একটি Website হলো অনেকগুলো Webpage-এর সমষ্টি, যা একটি Domain Name-এর অধীনে থাকে।

সহজভাবে: একটি বই যেমন অনেক পৃষ্ঠা (Page) নিয়ে তৈরি, তেমনি একটি Website অনেক Webpage নিয়ে তৈরি।

উদাহরণ:

google.com
facebook.com
youtube.com
wikipedia.org

এগুলোর প্রতিটিই একটি Website।

২. Webpage (ওয়েবপেজ)

Website-এর একটি একক পৃষ্ঠাকে Webpage বলে।

উদাহরণ — Facebook-এর:

Login Page
Profile Page
Settings Page

এগুলো প্রত্যেকটি আলাদা Webpage।

আরেকটি উদাহরণ — Website: amazon.com

Webpages: Home, Products, Cart, Contact

৩. Homepage (হোমপেজ)

Website খোলার পর যে প্রথম পৃষ্ঠাটি দেখা যায়, সেটিই Homepage।

উদাহরণ: আপনি যদি youtube.com-এ যান, যে প্রথম পেজটি আসে সেটাই Homepage।

মনে রাখো

Website = পুরো বাড়ি, Homepage = বাড়ির মূল দরজা।

৪. Web Browser (ওয়েব ব্রাউজার)

যে সফটওয়্যার দিয়ে Website দেখা হয় তাকে Web Browser বলে।

Browser-এর কাজ:

Website খোলে
HTML পড়ে
ছবি দেখায়
ভিডিও চালায়
JavaScript চালায়

জনপ্রিয় Browser:

Google Chrome, Mozilla Firefox, Microsoft Edge, Safari, Opera

উদাহরণ: আপনি Chrome খুলে google.com লিখলেন — Chrome Google-এর Website খুলে দিল। এখানে Chrome হলো Browser।

৫. Web Server (ওয়েব সার্ভার)

যে কম্পিউটার Website-এর সব ফাইল সংরক্ষণ করে এবং ব্যবহারকারীদের কাছে পাঠায় তাকে Web Server বলে।

সহজ উদাহরণ — ধরুন আপনি YouTube খুললেন:

১. আপনার Browser
২. YouTube Server-এ Request পাঠাল
৩. Server ভিডিও পাঠিয়ে দিল
৪. Browser ভিডিও দেখাল

বাস্তব উদাহরণ: Google ও Facebook-এর হাজার হাজার Server রয়েছে।

৬. URL (Uniform Resource Locator)

ইন্টারনেটে কোনো নির্দিষ্ট Webpage-এর ঠিকানাকে URL বলে। যেমন — https://www.google.com

আরও উদাহরণ:

https://www.facebook.com/login
https://www.youtube.com/watch?v=123

URL-এর অংশ — https://www.google.com/search?q=html

https://

Protocol

google.com

Domain Name

/search

Path

?q=html

Query

৭. Domain Name

Website-এর মানুষের পড়ার উপযোগী নামকে Domain Name বলে। যেমন — google.com, youtube.com, facebook.com

কেন প্রয়োজন?

Computer আসলে IP Address বোঝে, যেমন 142.250.191.78 — এটা মনে রাখা কঠিন। তাই আমরা লিখি google.com, আর DNS এটাকে IP Address-এ রূপান্তর করে।

Domain-এর অংশ — google.com:

google = নাম, .com = Extension (TLD)

আরও Extension: .com, .org, .net, .edu, .gov

৮. Hosting

Website-এর ফাইলগুলো Server-এ সংরক্ষণ করার সেবাকে Hosting বলে।

আপনার Website-এ থাকে HTML, CSS, JavaScript, ছবি, ভিডিও — এসব কোথাও রাখতে হবে। যে কোম্পানি এই জায়গা দেয়, সেটাই Hosting।

জনপ্রিয় Hosting:

Hostinger, GoDaddy, Namecheap, DigitalOcean, AWS

মনে রাখো

Domain = বাড়ির ঠিকানা, Hosting = বাড়ি, Website = বাড়ির ভিতরের জিনিস।

৯. HTTP

HTTP — পূর্ণরূপ: HyperText Transfer Protocol।

Browser এবং Server-এর মধ্যে তথ্য আদান-প্রদানের নিয়মকে HTTP বলে। যেমন — আপনি http://example.com লিখলে Browser, Server-এর কাছ থেকে Website নিয়ে দেখায়।

সমস্যা

HTTP-তে Data Encrypt হয় না, তাই Hacker মাঝপথে তথ্য দেখতে পারে।

১০. HTTPS

HTTPS — পূর্ণরূপ: HyperText Transfer Protocol Secure। এটি HTTP-এর নিরাপদ (Secure) সংস্করণ, যাতে SSL/TLS Encryption ব্যবহার করা হয়।

উদাহরণ: https://google.com, https://facebook.com

HTTPS-এর সুবিধা:

Data Encrypt হয়
Password নিরাপদ থাকে
Online Payment নিরাপদ হয়
Browser-এ 🔒 (তালা) চিহ্ন দেখা যায়
Google সাধারণত HTTPS সাইটকে বেশি বিশ্বাসযোগ্য মনে করে

HTTP ও HTTPS-এর পার্থক্য

HTTP

HTTPS

নিরাপদ নয়

নিরাপদ

Encryption নেই

Encryption আছে (SSL/TLS)

http:// দিয়ে শুরু

https:// দিয়ে শুরু

🔒 চিহ্ন থাকে না

🔒 চিহ্ন থাকে

Password চুরির ঝুঁকি বেশি

তথ্য সুরক্ষিত থাকে

১১. একসাথে পুরো প্রক্রিয়াটি বুঝুন

ধরুন আপনি ব্রাউজারে লিখলেন: https://www.youtube.com — তখন কী হয়?

Chrome (Web Browser) খুলে URL গ্রহণ করে।

URL-এর Domain Name (youtube.com) থেকে DNS সার্ভার IP Address খুঁজে বের করে।

Browser HTTPS Protocol ব্যবহার করে Web Server-এ অনুরোধ (Request) পাঠায়।

Web Server, Hosting-এ থাকা Website-এর প্রয়োজনীয় ফাইল (HTML, CSS, JavaScript, ছবি ইত্যাদি) Browser-এ পাঠায়।

Browser সেই ফাইলগুলো প্রসেস করে আপনার সামনে Homepage বা নির্দিষ্ট Webpage দেখায়।

এভাবে Website দেখার পুরো প্রক্রিয়ায় Website, Webpage, Homepage, Browser, Web Server, URL, Domain Name, Hosting এবং HTTP/HTTPS — সবগুলো একসঙ্গে কাজ করে।

১২. HTML পরিচিতি

HTML (HyperText Markup Language) হলো ওয়েব পেজ তৈরির একটি মার্কআপ ভাষা। এটি কোনো প্রোগ্রামিং ভাষা নয়, বরং পেজের কাঠামো (Structure) তৈরি করে — কোনটি শিরোনাম, কোনটি অনুচ্ছেদ, কোনটি ছবি বা লিংক তা নির্ধারণ করে দেয়। ১৯৯১ সালে Tim Berners-Lee HTML উদ্ভাবন করেন।

গুরুত্বপূর্ণ

একটি আধুনিক ওয়েব পেজ সাধারণত HTML দিয়ে কাঠামো, CSS দিয়ে সাজসজ্জা এবং JavaScript দিয়ে ইন্টারঅ্যাকশন তৈরি করে।

১৩. HTML ডকুমেন্টের মৌলিক গঠন

প্রতিটি HTML ডকুমেন্ট কয়েকটি নির্দিষ্ট অংশ নিয়ে গঠিত —

<!DOCTYPE html> — ব্রাউজারকে জানায় এটি একটি HTML5 ডকুমেন্ট।
<html> — পুরো ডকুমেন্টকে ধারণ করে।
<head> — পেজের তথ্য (টাইটেল ইত্যাদি) থাকে, সরাসরি পেজে দেখা যায় না।
<body> — পেজের দৃশ্যমান সব কনটেন্ট এখানে থাকে।

উদাহরণ — একটি সম্পূর্ণ HTML পেজ:

<!DOCTYPE html>
<html>
  <head>
    <title>আমার প্রথম পেজ</title>
  </head>
  <body>
    <h1>স্বাগতম!</h1>
    <p>এটি আমার প্রথম ওয়েব পেজ।</p>
  </body>
</html>

১৪. ট্যাগ, এলিমেন্ট ও অ্যাট্রিবিউট

HTML-এ কোণ বন্ধনী দিয়ে লেখা নির্দেশনাকে ট্যাগ বলে (যেমন <p>)। ওপেনিং ট্যাগ, কনটেন্ট ও ক্লোজিং ট্যাগ মিলিয়ে তৈরি হয় একটি এলিমেন্ট। আর ওপেনিং ট্যাগের ভেতরে অতিরিক্ত তথ্য দিতে ব্যবহৃত হয় অ্যাট্রিবিউট (নাম="মান" আকারে)।

<p class="intro">এটি একটি অনুচ্ছেদ।</p>

এখানে p ট্যাগ, class="intro" অ্যাট্রিবিউট, আর মাঝের লেখাটি কনটেন্ট।

<br>, <hr>, <img>-এর মতো কিছু ট্যাগের ক্লোজিং ট্যাগ প্রয়োজন হয় না, এদের বলা হয় সেল্‌ফ-ক্লোজিং ট্যাগ।

১৫. সচরাচর ব্যবহৃত HTML ট্যাগ

নিচে কিছু গুরুত্বপূর্ণ ও পরীক্ষার জন্য দরকারি HTML ট্যাগের তালিকা দেওয়া হলো —

<html>

পুরো ডকুমেন্টের মূল (root) এলিমেন্ট

<head>

পেজের তথ্য, ব্রাউজারে দেখা যায় না

<title>

ব্রাউজার ট্যাবে দেখানো পেজের নাম

<body>

পেজের সব দৃশ্যমান কনটেন্ট

<h1>–<h6>

শিরোনাম — h1 সবচেয়ে বড়/গুরুত্বপূর্ণ

<p>

অনুচ্ছেদ (paragraph)

<a>

হাইপারলিংক তৈরি করে

<img>

ছবি সংযুক্ত করে (সেল্‌ফ-ক্লোজিং)

<ul>/<ol>/<li>

তালিকা (unordered/ordered)

<table>

সারণি (table) তৈরি করে

<div>/<span>

কনটেন্ট গ্রুপ করার ব্লক/ইনলাইন কন্টেইনার

<br>/<hr>

লাইন ব্রেক / অনুভূমিক রেখা

১৬. লিংক ও ইমেজ

ওয়েব পেজে অন্য পেজ বা সাইটে যাওয়ার জন্য <a> ট্যাগ ব্যবহার করা হয়, যার href অ্যাট্রিবিউটে ঠিকানা দিতে হয়। ছবি দেখাতে ব্যবহৃত হয় <img> ট্যাগ, যার src অ্যাট্রিবিউটে ছবির ফাইলের ঠিকানা এবং alt-এ ছবির বিকল্প বর্ণনা দেওয়া হয়।

<a href="https://example.com">আমাদের ওয়েবসাইট</a>

<img src="photo.jpg" alt="আমার ছবি" width="200">

১৭. লিস্ট ও টেবিল

তালিকা তৈরির জন্য <ul> (বুলেট তালিকা) বা <ol> (ক্রমিক তালিকা) ব্যবহার করা হয়, আর প্রতিটি আইটেম লেখা হয় <li> দিয়ে।

<ul>
  <li>HTML</li>
  <li>CSS</li>
  <li>JavaScript</li>
</ul>

সারণি তৈরির জন্য <table>, প্রতিটি সারির জন্য <tr> এবং কলামের জন্য <td> (হেডার হলে <th>) ব্যবহৃত হয়।

<table>
  <tr>
    <th>নাম</th>
    <th>নম্বর</th>
  </tr>
  <tr>
    <td>করিম</td>
    <td>৮৫</td>
  </tr>
</table>

সারাংশ

Website = অনেক Webpage-এর সমষ্টি; Homepage হলো প্রথম পাতা।
Browser Website দেখায় (Chrome, Firefox); Server ফাইল সংরক্ষণ করে ও পাঠায়।
URL = Webpage-এর ঠিকানা, যা Protocol + Domain + Path + Query দিয়ে গঠিত।
Domain Name মানুষের জন্য সহজ নাম, DNS সেটাকে IP Address-এ রূপান্তর করে; Hosting সেই ফাইল রাখার জায়গা।
HTTP অনিরাপদ, HTTPS SSL/TLS দিয়ে ডেটা Encrypt করে নিরাপদ রাখে।
HTML একটি মার্কআপ ভাষা, যা দিয়ে <html>, <head>, <body> কাঠামোয় ওয়েব পেজ তৈরি হয়।
ট্যাগ + কনটেন্ট + ক্লোজিং ট্যাগ মিলে এলিমেন্ট তৈরি হয়; <a>, <img>, <ul>/<ol>, <table> — গুরুত্বপূর্ণ ট্যাগ।

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

১. HTML এর পূর্ণরূপ কী?

ক) Hyper Trainer Marking Language খ) HyperText Markup Language গ) Home Tool Markup Language ঘ) HyperText Markdown Language

উত্তর: খ) HyperText Markup Language — HTML = HyperText Markup Language, ওয়েব পেজের কাঠামো তৈরির মার্কআপ ভাষা।

২. একটি HTML ডকুমেন্টের সবচেয়ে বড়/গুরুত্বপূর্ণ শিরোনাম ট্যাগ কোনটি?

ক) <h6> খ) <head> গ) <h1> ঘ) <title>

উত্তর: গ) <h1>

৩. ছবি সংযুক্ত করার জন্য কোন ট্যাগ ব্যবহার করা হয়?

ক) <pic> খ) <image> গ) <img> ঘ) <src>

উত্তর: গ) <img> — <img> ট্যাগের src অ্যাট্রিবিউটে ছবির ঠিকানা দেওয়া হয়।

৪. নিচের কোন ট্যাগের ক্লোজিং ট্যাগ প্রয়োজন হয় না (সেল্‌ফ-ক্লোজিং)?

ক) <p> খ) <div> গ) <a> ঘ) <br>

উত্তর: ঘ) <br>

৫. HTML উদ্ভাবন করেন কে?

ক) Bill Gates খ) Tim Berners-Lee গ) Steve Jobs ঘ) Mark Zuckerberg

উত্তর: খ) Tim Berners-Lee

৬. "https://www.google.com/search?q=html" — এই URL-এ 'search' অংশটি কী নির্দেশ করে?

ক) Protocol খ) Domain গ) Path ঘ) Query

উত্তর: গ) Path

৭. IP Address-কে মনে রাখার সহজ নামে রূপান্তর করে কোনটি?

ক) HTTP খ) DNS গ) Hosting ঘ) Browser

উত্তর: খ) DNS — DNS (Domain Name System) ডোমেইন নামকে IP Address-এ রূপান্তর করে।

৮. Website-এর ফাইল সংরক্ষণ করে রাখার সেবাকে কী বলে?

ক) Domain খ) URL গ) Hosting ঘ) Browser

উত্তর: গ) Hosting

৯. HTTPS-এ ব্যবহৃত নিরাপত্তা প্রযুক্তির নাম কী?

ক) DNS খ) SSL/TLS গ) HTML ঘ) FTP

উত্তর: খ) SSL/TLS

১০. নিচের কোনটি একটি Domain Extension (TLD)?

ক) .html খ) .exe গ) .com ঘ) .zip

উত্তর: গ) .com

পরবর্তী অধ্যায়

অধ্যায় ৫: প্রোগ্রামিং ভাষা (শীঘ্রই আসছে)

হোমে ফিরুন