এক রাতের প্রস্তুতি

ট্যাগ লিখবে বাঁয়ে,
ফলাফল দেখবে ডানে।

এই সাইটের প্রতিটা কোড-বক্স জীবন্ত। লেখা বদলাও, ডান পাশের ব্রাউজারে সাথে সাথেই বদলে যাবে। HTML মুখস্থ করার জিনিস না — চোখে দেখার জিনিস।

প্রথম চেষ্টা
করো: নিচের লেখায় নিজের নাম বসাও। <h1>-কে <h3> বানিয়ে দেখো কী হয়।

রাত ফুরিয়ে আসছে? এই ক্রমে পড়ো: ০৩ → ০৪ → ০৫ → ০৬ (এখান থেকেই সৃজনশীলের কোড আসে) → তারপর ০১ (তত্ত্ব) → ১০ (কুইজ)।

০১ · তত্ত্ব

ওয়েব, ওয়েবপেজ, ওয়েবসাইট

কোড লেখার আগে জেনে নাও জিনিসটা কোথায় গিয়ে বসে, আর মানুষ সেটা কীভাবে দেখে।

শব্দমানে
ওয়েবপেজইন্টারনেটে প্রকাশিত একটি একক পাতা
ওয়েবসাইটসম্পর্কযুক্ত অনেকগুলো ওয়েবপেজের সমষ্টি
হোমপেজসাইটের প্রথম পাতা — ফাইলের নাম সাধারণত index.html
ওয়েব ব্রাউজারপেজ দেখার সফটওয়্যার (Chrome, Firefox, Edge)
ওয়েব সার্ভারযে কম্পিউটারে পেজগুলো জমা থাকে
সার্চ ইঞ্জিনখুঁজে দেওয়ার যন্ত্র (Google, Bing)

WWW-এর উদ্ভাবক Tim Berners-Lee, CERN-এ, ১৯৮৯–৯০ সালে। HTML-ও তাঁরই।

স্ট্যাটিক বনাম ডাইনামিক

বৈশিষ্ট্যস্ট্যাটিকডাইনামিক
কন্টেন্টসবার জন্য একব্যবহারকারী/সময়ভেদে বদলায়
ভাষাHTML, CSSPHP, ASP, JSP + HTML
ডেটাবেজলাগে নালাগে
লোড হওয়ার গতিদ্রুততুলনামূলক ধীর
খরচকমবেশি
উদাহরণছোট প্রতিষ্ঠানের সাইটFacebook, Amazon

মনে রাখার সূত্র: ডেটাবেজ আছে? তাহলে ডাইনামিক। শুধু HTML? স্ট্যাটিক।

ওয়েবসাইটের কাঠামো

লিনিয়ার হায়ারার্কিক্যাল নেটওয়ার্ক এক পথে, ধাপে ধাপে গাছের মতো শাখা যেকোনো পেজ থেকে যেকোনো পেজে

সবচেয়ে বেশি ব্যবহৃত কাঠামো — হায়ারার্কিক্যাল (ট্রি)। এদের মিশ্রণকে বলে হাইব্রিড।

ঠিকানার গল্প: IP → ডোমেইন → DNS

প্রতিটা কম্পিউটারের একটা সংখ্যার ঠিকানা আছে — IP অ্যাড্রেস। 142.250.190.78 মনে রাখা কঠিন, তাই আমরা লিখি google.com। এই নামকে আবার সংখ্যায় অনুবাদ করে দেয় DNS।

IPv4IPv6
বিট৩২ বিট১২৮ বিট
গঠন৪টি অকটেট, ডেসিমেল৮টি গ্রুপ, হেক্সাডেসিমেল
নমুনা192.168.0.12001:0db8::7334

ক্লাস A: ১–১২৬ · B: ১২৮–১৯১ · C: ১৯২–২২৩ · D: ২২৪–২৩৯ (মাল্টিকাস্ট) · E: ২৪০–২৫৫ (গবেষণা)। 127.x.x.x লুপব্যাক।

URL ভেঙে দেখা

https://www.dhakacollege.edu.bd/notice/ict.html
প্রোটোকল · ডোমেইন নেম · পাথ ও ফাইল

ওয়েবসাইট পাবলিশ করার ধাপ

১. সাইট তৈরি → ২. ডোমেইন নেম কেনা/রেজিস্ট্রেশন → ৩. হোস্টিং স্পেস ভাড়া → ৪. FTP দিয়ে ফাইল আপলোড → ৫. ব্রাউজারে পরীক্ষা।

ফাঁদ: ফাইল আপলোডের প্রোটোকল FTP, HTTP নয়। HTTP দিয়ে পেজ দেখা হয়, আপলোড হয় না।

০২ · ভিত্তি

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

HTML প্রোগ্রামিং ভাষা নয় — এটা মার্কআপ ভাষা। মানে তুমি লেখাকে চিহ্ন দিয়ে বলে দাও, "এটা শিরোনাম", "এটা ছবি"। ব্রাউজার সেই নির্দেশ পড়ে সাজিয়ে দেখায়।

শব্দ তিনটা

<p align="center">আসসালামু আলাইকুম</p>

ট্যাগ = <p> আর </p>
এলিমেন্ট = শুরু ট্যাগ + ভেতরের লেখা + শেষ ট্যাগ, পুরোটা মিলিয়ে
অ্যাট্রিবিউট = align, এর ভ্যালু "center" — অ্যাট্রিবিউট সবসময় শুরু ট্যাগে বসে

জোড়া ট্যাগ বনাম একক ট্যাগ

বেশিরভাগ ট্যাগের শেষ ট্যাগ লাগে। কিছু ট্যাগের লাগে না — এদের বলে একক / এম্পটি ট্যাগ। নিচের নীলগুলোই একক:

<p></p><h1></h1><b></b> <table></table><a></a> <br><hr><img> <meta><input><link>

একটা পূর্ণ ডকুমেন্টের কঙ্কাল

কঙ্কাল
খেয়াল করো: <title>-এর লেখা পাতায় দেখা যাচ্ছে না — ওটা ব্রাউজারের ট্যাবে যায়। <head>-এর সব তথ্য অদৃশ্য।
ট্যাগকাজ
<!DOCTYPE html>ডকুমেন্টের ধরন ঘোষণা (HTML5)
<html>পুরো ডকুমেন্টের মূল বা root ট্যাগ
<head>অদৃশ্য তথ্য — title, meta, style
<title>ট্যাব/টাইটেল বারের নাম
<meta>charset, keywords, description, author
<body>দৃশ্যমান সব কিছু

<body>-এর অ্যাট্রিবিউট: bgcolor, background, text, link, vlink, alink।

সবচেয়ে বেশি নম্বর কাটা যায়: শেষ ট্যাগ বন্ধ না করলে, আর <title>-কে <body>-র ভেতরে লিখলে। title সবসময় head-এ।

০৩ · প্রতিদিনের ট্যাগ

লেখা সাজানোর ট্যাগ

শিরোনাম, প্যারা, মোটা, বাঁকা, রঙ। বোর্ডে যা লিখতে বলে তার অর্ধেক এখান থেকেই।

শিরোনাম ও প্যারাগ্রাফ

h1 থেকে h6
করো: align বদলে right করো। <hr>-এর size ৫ করো।
ট্যাগকাজ
<h1> … <h6>ছয় স্তরের শিরোনাম, h1 বড় → h6 ছোট
<p>প্যারাগ্রাফ
<br>লাইন ভাঙা (একক ট্যাগ)
<hr>অনুভূমিক রেখা — size, width, color, align, noshade
<pre>যেভাবে টাইপ করা, ঠিক সেভাবে দেখায়
<center>মাঝে আনা
<blockquote>উদ্ধৃতি, ভেতরে ঠেলে দেয়

মোটা, বাঁকা, নিচে দাগ

টেক্সট স্টাইল
মনে রাখো: sub নিচে নামে (H2O), sup উপরে ওঠে (x2)।

<font>-এর size ১ থেকে ৭ পর্যন্ত, ডিফল্ট ৩। color নামে বা হেক্স কোডে। HTML5-এ font, center, marquee বাদ (deprecated), কিন্তু বোর্ড বইয়ে আছে — তাই লিখতে হবে।

marquee — চলমান লেখা

marquee
করো: direction-এ right, up, down বসিয়ে দেখো।

০৪ · তালিকা

লিস্ট তিন রকম

ক্রমযুক্ত, ক্রমহীন, সংজ্ঞামূলক। প্রতিটার ভেতরের আইটেম সবসময় <li>।

ol · ul · dl
করো: type="1"-কে A, a, I, i বানাও। ul-এ circle আর square দেখো।
লিস্টট্যাগtype ভ্যালুডিফল্ট
অর্ডারড<ol><li>1, A, a, I, i1
আনঅর্ডারড<ul><li>disc, circle, squaredisc
ডেফিনিশন<dl><dt><dd>——

নেস্টেড লিস্ট: একটা <li>-এর ভেতরে নতুন <ul> খোলো, <li>-এর বাইরে নয়। উপরের কোডে "জাম"-এর ভেতরটা দেখো।

<dt> = definition term (শব্দ), <dd> = definition description (মানে)।

০৫ · সবচেয়ে বেশি নম্বর

টেবিল, আর colspan / rowspan

সৃজনশীলে টেবিল আঁকতে দেওয়া হয় প্রায় প্রতি বছর। ঘর জোড়া লাগানোটাই আসল খেলা।

মূল কাঠামো

ভাবো টেবিল = সারির স্তূপ। প্রতিটা সারি <tr>, তার ভেতরে ঘরগুলো <td>। শিরোনামের ঘর হলে <th> — নিজে থেকেই বোল্ড ও মাঝ বরাবর হয়।

সাধারণ টেবিল
করো: border="1" মুছে দাও — দাগ উধাও। cellpadding ২০ করো।
অ্যাট্রিবিউটকাজ
borderবর্ডারের পুরুত্ব
cellpaddingঘরের ভেতরে লেখা ও বর্ডারের ফাঁক
cellspacingদুই ঘরের মাঝের ফাঁক
colspanডানদিকে কয়টা কলাম গিলে ফেলবে
rowspanনিচের দিকে কয়টা সারি গিলে ফেলবে
align / valignঅনুভূমিক / উলম্ব অবস্থান
bgcolorঘরের রঙ

colspan — পাশাপাশি জোড়া

colspan
নিয়ম: colspan="2" মানে ঐ সারিতে ওই ঘরটা ২টার জায়গা নেবে — তাই ঐ সারিতে একটা <td> কম লিখবে।

rowspan — উপর-নিচে জোড়া

rowspan
নিয়ম: rowspan="2" দিলে পরের সারিতে ঐ ঘরটা আর লিখবে না — জায়গা আগেই দখল হয়ে গেছে।

বোর্ডের চেহারার টেবিল

এই টেবিলটাই ঘুরিয়ে-ফিরিয়ে আসে — উপরে জোড়া শিরোনাম, বাঁয়ে জোড়া কলাম।

দুটোই একসাথে
পরীক্ষায় কৌশল: আগে পেন্সিলে গ্রিড এঁকে গুনে নাও কোন ঘর কয়টা কলাম/সারি খাচ্ছে। তারপর কোড লেখো।

০৬ · ছবি ও লিংক

img এবং a

HyperText-এর "hyper" মানেই লিংক। ওয়েবের গোটা ব্যাপারটা দাঁড়িয়ে আছে <a> ট্যাগের উপর।

ছবি

img
খেয়াল করো: দ্বিতীয় ছবির ফাইল নেই, তাই alt-এর লেখাটা দেখা যাচ্ছে। এটাই alt-এর কাজ।
অ্যাট্রিবিউটকাজ
srcছবির ঠিকানা — আবশ্যক
altছবি না এলে যে লেখা দেখাবে
width / heightআকার
align, border, titleঅবস্থান, কিনারা, টুলটিপ

<img> একক ট্যাগ, শেষ ট্যাগ নেই। ব্যাকগ্রাউন্ডে ছবি: <body background="bg.jpg">

হাইপারলিংক

a ট্যাগের পাঁচ রূপ
মনে রাখো: href = কোথায় যাবে। target="_blank" = নতুন ট্যাবে।
ধরনকোড
এক্সটার্নাল<a href="https://...">
ইন্টারনাল / লোকাল<a href="about.html">
বুকমার্ক (একই পেজে)<a href="#id"> ↔ <h2 id="id">
ইমেইল<a href="mailto:x@y.com">
ইমেজ লিংক<a href="..."><img src="..."></a>

target-এর ভ্যালু: _blank (নতুন ট্যাব), _self (একই ট্যাব), _top, _parent।

লিংকের রঙ: সাধারণ নীল, ভিজিট করা বেগুনি, ক্লিক করার মুহূর্তে লাল।

০৭ · ফর্ম

তথ্য নেওয়ার ফর্ম

রেজিস্ট্রেশন, লগইন, সার্চ — সব একই <form> ট্যাগ। শুধু type বদলায়।

form
খেয়াল করো: দুই রেডিও বাটনের name একই — তাই একটা বাছলে অন্যটা ছেড়ে দেয়। চেকবক্সে সেটা হয় না।
ট্যাগ / টাইপকাজ
<form action method>action = কোথায় যাবে, method = get বা post
type="text"সাধারণ লেখার ঘর
type="password"লেখা লুকায়
type="radio"অনেকের মধ্যে একটি বাছাই
type="checkbox"একাধিক বাছাই
type="submit" / "reset"জমা / মুছে ফেলা
<select> + <option>ড্রপডাউন
<textarea rows cols>বড় লেখার বাক্স

get বনাম post: get-এ তথ্য URL-এ দেখা যায় (কম নিরাপদ), post-এ লুকানো থাকে।

০৮ · রঙ

কালার কোড

রঙ তিন ভাবে লেখা যায়: নামে, হেক্সে, RGB-তে। হেক্সটাই পরীক্ষায় আসে।

# FF0000

প্রথম জোড়া লাল, দ্বিতীয় সবুজ, তৃতীয় নীল। প্রতিটার মান 00 থেকে FF, মানে ০ থেকে ২৫৫।

রঙ বদলে দেখো
করো: #FF0000-এর জায়গায় #00FF00 বসাও।
রঙহেক্সRGB
সাদা#FFFFFFrgb(255,255,255)
কালো#000000rgb(0,0,0)
লাল#FF0000rgb(255,0,0)
সবুজ#00FF00rgb(0,255,0)
নীল#0000FFrgb(0,0,255)
হলুদ#FFFF00rgb(255,255,0)

০৯ · খোলা মাঠ

নিজে লেখো

যা ইচ্ছা লেখো। ভুল হলে কিছু হবে না — "আগের অবস্থায়" চাপলেই ফিরে আসবে। বোর্ডের পুরো প্রশ্নটা এখানে টাইপ করে মিলিয়ে নাও।

খাতা
পুরো পেজের নমুনা — শিরোনাম, লিস্ট, টেবিল, লিংক সবই আছে।

বাড়িতে করতে চাইলে: Notepad খোলো → কোড লেখো → page.html নামে Save করো (Save as type: All Files) → ফাইলে ডাবল ক্লিক। ব্রাউজারে খুলে যাবে। PHP লাগবে না, XAMPP লাগবে না।

১০ · যাচাই

২০টা MCQ

উত্তরে চাপ দাও, সাথে সাথে ঠিক-ভুল দেখাবে। ভুলগুলো নোট করে ওই পাতায় ফিরে যাও।

স্কোর0 / 20

১১ · শেষ মুহূর্ত

এক পাতার চিরকুট

পরীক্ষার হলে ঢোকার ঠিক আগে যা চোখ বুলিয়ে যাবে।

ভুলে যাওয়া যাবে না

HTML-এর জনকTim Berners-Lee
HTML মানেHyperText Markup Language
নিয়ন্ত্রক সংস্থাW3C
সর্বশেষ সংস্করণHTML5
এক্সটেনশন.html বা .htm
হোমপেজের নামindex.html
একক ট্যাগbr, hr, img, meta, input, link
title থাকেhead-এর ভেতর
font size রেঞ্জ১ – ৭ (ডিফল্ট ৩)
ol ডিফল্ট type1
ul ডিফল্ট typedisc
কলাম জোড়াcolspan
সারি জোড়াrowspan
নতুন ট্যাবে লিংকtarget="_blank"
ফাইল আপলোড প্রোটোকলFTP
ডোমেইন → IPDNS
IPv4 / IPv6৩২ বিট / ১২৮ বিট
বেশি ব্যবহৃত কাঠামোহায়ারার্কিক্যাল (ট্রি)

সৃজনশীলে যা আসে

১. স্ট্যাটিক–ডাইনামিক তুলনা · ২. ওয়েবসাইট কাঠামো ব্যাখ্যা + চিত্র · ৩. দেওয়া টেবিলের HTML কোড (colspan/rowspan) · ৪. আউটপুট দেখে কোড লেখা · ৫. হাইপারলিংক যোগ · ৬. লিস্ট তৈরি · ৭. পাবলিশিং ধাপ · ৮. IP ও ডোমেইনের প্রয়োজনীয়তা।

কোড লেখার সময় তিনটা অভ্যাস

এক · ট্যাগ খুললেই সাথে সাথে বন্ধ করো, তারপর ভেতরে লেখো।
দুই · টেবিল আঁকতে বলা হলে আগে পেন্সিলে গ্রিড এঁকে ঘর গুনে নাও।
তিন · <!DOCTYPE html>, <html>, <head>, <title>, <body> — প্রশ্নে না চাইলেও লিখে দাও, নম্বর কাটবে না।