Chapter 4 — Web Design & HTML

HTML Basics

এইচটিএমএল মৌলিক ধারণা

beginner#html#basics#web designUpdated: 2026-05-17

Fun with HTML — HSC ICT সম্পূর্ণ HTML কোর্স

Bangladesh Higher Secondary Certificate (HSC) — তথ্য ও যোগাযোগ প্রযুক্তি (ICT), HTML অধ্যায়।

এই কোর্সে যা শিখবে:

  • ✦ Technology ও Internet এর মূল ভিত্তি
  • ✦ Browser কীভাবে কাজ করে — DOM, Rendering, Parsing
  • ✦ HTML — Tag, Structure, Semantics সবকিছু
  • ✦ HSC Board Exam এর সম্পূর্ণ প্রস্তুতি
  • ✦ Real-world Engineering চিন্তাভাবনা
  • ✦ ভবিষ্যৎ Web Development Roadmap

"আমি শুধু Tag মুখস্থ করি না — আমি বুঝি Web কীভাবে কাজ করে।"

📋 সূচিপত্র (Table of Contents)

  • Module 1: Technology Fundamentals — প্রযুক্তির ভিত্তি
  • Module 2: Internet ও Web Fundamentals
  • Module 3: Browser Fundamentals — Browser কীভাবে কাজ করে
  • Module 4: Introduction to HTML
  • Module 5: HSC HTML Syllabus — সম্পূর্ণ Tag Reference
  • Module 6: HTML Visualization — DOM Tree ও Structure
  • Module 7: Practical Projects — হাতে-কলমে শিক্ষা
  • Module 8: HSC Exam Preparation — পরীক্ষার প্রস্তুতি
  • Module 9: Engineering Mindset — পেশাদার চিন্তা
  • Module 10: Future Roadmap — এরপর কোথায়?

শেখার আগে একটি কথা...

এই কোর্সে আমরা শুধু HTML tag মুখস্থ করব না। আমরা বুঝব — technology কেন তৈরি হলো, কীভাবে কাজ করে, এবং কোন problem solve করে। একজন ভালো engineer হতে হলে শুধু "কী" জানলে হবে না — "কেন" এবং "কীভাবে" জানতে হবে। তাই ধৈর্য ধরো, Module 1 থেকে শুরু করো। HTML tag আসবে, কিন্তু আগে foundation শক্ত করতে হবে।

Module 1: Technology Fundamentals — প্রযুক্তির ভিত্তি

1.1 Technology কী?

Technology শব্দটি Greek শব্দ "Techne" (শিল্প/দক্ষতা) এবং "Logos" (জ্ঞান) থেকে এসেছে। সহজ ভাষায়, technology হলো এমন কোনো tool, method, বা system যা মানুষের কোনো সমস্যা সমাধান করে বা জীবনকে সহজ করে।

🏠 Real-life Analogy: ধরো, তোমার বাবা দোকানে হিসাব রাখেন। আগে খাতায় লিখতেন — সেটাও একটা technology (কলম + খাতা)। এখন Mobile app এ হিসাব রাখেন — সেটা আরেকটা technology। দুটোই সমস্যা solve করছে, কিন্তু নতুনটা দ্রুত ও সুবিধাজনক।

Technology সবসময় কোনো না কোনো problem solve করার জন্য তৈরি হয়। এই কথাটা মনে রাখো — এটা পুরো course জুড়ে কাজে আসবে।

1.2 Computer কী?

Computer হলো একটি electronic device যা input নেয়, সেটা process করে, এবং output দেয়। এটাই Computer এর মূল কাজ — তিনটি step:

Input → Processing → Output

কিন্তু শুধু এটুকু জানলে হবে না। Computer কেন তৈরি হলো সেটা বুঝতে হবে।

সমস্যা: মানুষ অনেক হিসাব দ্রুত করতে পারত না। দ্বিতীয় বিশ্বযুদ্ধে military calculation দরকার ছিল — হাতে করতে মাস লাগত। Computer তৈরি হলো এই problem solve করতে।

আজকে Computer শুধু হিসাব করে না। এটা video চালায়, game খেলায়, internet চালায়, আর তোমার HSC exam এর preparation ও help করে!

💡 Tip: Computer এর মূল শক্তি হলো — এটা instruction অনুযায়ী কাজ করে, খুব দ্রুত এবং ভুল ছাড়া। এই instruction গুলোকে আমরা বলি Program বা Software।

1.3 Software কী?

Computer এর দুটি অংশ — Hardware (যেটা ধরা যায়: monitor, keyboard, CPU) এবং Software (যেটা ধরা যায় না: program, app, instruction)।

Software হলো instruction এর সমষ্টি যা Computer কে বলে দেয় — কী করতে হবে। যেমন:

  • Microsoft Word — লেখালেখি করার software
  • Calculator app — হিসাব করার software
  • Chrome Browser — internet browse করার software
  • Facebook app — social media ব্যবহারের software

Software দুই প্রকার:

ধরনবর্ণনাউদাহরণ
System SoftwareComputer চালানোর জন্য — OSWindows, Linux, Android
Application Softwareনির্দিষ্ট কাজের জন্যChrome, Word, Facebook

1.4 Operating System (OS) কী?

Operating System হলো Computer এর সবচেয়ে গুরুত্বপূর্ণ software। এটা Hardware আর Application Software এর মধ্যে সেতু (bridge) হিসেবে কাজ করে।

🏠 Real-life Analogy: তোমার স্কুলের Principal কে চিন্তা করো। Student রা (Application) কিছু চাইলে সরাসরি classroom (Hardware) এ যেতে পারে না — Principal (OS) manage করে কে কোন room পাবে, কখন পাবে। OS ঠিক এভাবেই Hardware resource গুলো manage করে।

User (তুমি)
   ↓
Application Software (Chrome, Word)
   ↓
Operating System (Windows/Linux/Android)
   ↓
Hardware (CPU, RAM, Screen)

OS যা যা করে:

  • Memory Management: কোন app কতটুকু RAM পাবে
  • Process Management: কোন program কখন চলবে
  • File System: file কোথায় save হবে
  • Device Management: printer, speaker কীভাবে কাজ করবে
  • User Interface: তুমি screen এ যা দেখো — icon, window, button

1.5 File কী?

File হলো তথ্য সংরক্ষণের একক। যেকোনো data যা storage এ save করা হয়, সেটা একটা file। প্রতিটা file এর একটা name আর একটা extension থাকে।

Extension দেখে OS বুঝে — কোন software দিয়ে file টা open করতে হবে:

ExtensionধরনSoftware
.txtText fileNotepad
.jpg, .pngImage filePhoto Viewer
.mp3Audio fileMusic Player
.mp4Video fileVideo Player
.htmlWeb page fileBrowser
.pdfDocument filePDF Reader

📝 HSC Exam Tip: .html extension দেখলে OS বুঝে এটা Browser দিয়ে open করতে হবে। এটা আমাদের course এর সবচেয়ে গুরুত্বপূর্ণ file type!

1.6 Application (App) কী?

Application বা App হলো এমন software যা তোমার নির্দিষ্ট কোনো কাজ সম্পন্ন করে। Mobile এ যেসব app ব্যবহার করো — Facebook, YouTube, bKash — সবই Application Software।

বাংলাদেশের বাস্তব উদাহরণ:

  • Pathao / Uber: Ride sharing — যাতায়াতের সমস্যা solve করে
  • bKash / Nagad: Mobile banking — টাকা পাঠানোর সমস্যা solve করে
  • Foodpanda: Food delivery — খাবার order এর সমস্যা solve করে
  • Facebook: Social networking — যোগাযোগের সমস্যা solve করে
  • Google: Search engine — তথ্য খোঁজার সমস্যা solve করে

লক্ষ্য করো — প্রতিটি app একটা সমস্যা সমাধান করছে। Technology = Problem Solving!

📝 Module 1 — Quick Quiz

❓ Computer এর তিনটি মূল কাজ কী কী?

✅ Input গ্রহণ, Processing (প্রক্রিয়াকরণ), Output প্রদান

❓ Operating System কেন দরকার?

✅ Hardware ও Application Software এর মধ্যে সেতু হিসেবে কাজ করে, resource manage করে।

❓ .html extension এর file কোন software দিয়ে open হয়?

✅ Browser (Chrome, Firefox, Edge ইত্যাদি)

📝 HSC Exam Tip: Technology, Computer, Software, OS সম্পর্কে short question আসতে পারে। Definition মুখস্থ না করে concept বুঝে নিজের ভাষায় লেখো।

Module 2: Internet ও Web Fundamentals

2.1 Internet কী?

Internet হলো পৃথিবীজুড়ে connected computer গুলোর একটি বিশাল network। সহজ ভাষায়, যখন অনেক computer একসাথে তার (cable) বা wireless এর মাধ্যমে যুক্ত থাকে — সেটাই Internet।

🏠 Real-life Analogy: রাস্তা (road) চিন্তা করো। ঢাকা থেকে চট্টগ্রাম যেতে রাস্তা লাগে। Internet হলো digital রাস্তা — যেখান দিয়ে data (তথ্য) এক computer থেকে আরেক computer এ যায়। Submarine cable সমুদ্রের তলা দিয়ে বাংলাদেশকে পুরো পৃথিবীর সাথে যুক্ত করেছে।

Internet আর Web কিন্তু একই জিনিস না:

বিষয়InternetWorld Wide Web (WWW)
কী?Computer network — infrastructureInternet এর উপর চলা service
উদাহরণরাস্তা / highwayরাস্তায় চলা গাড়ি (website)
কবে?1969 (ARPANET)1991 (Tim Berners-Lee)

2.2 Client-Server Architecture

Internet এ দুটি প্রধান ভূমিকা আছে — Client আর Server।

Client: যে computer তথ্য চায় (request করে)। তোমার phone বা laptop হলো client।

Server: যে computer তথ্য দেয় (response করে)। Facebook এর data যেখানে stored আছে — সেটা server।

Client (তোমার Phone/Laptop)
   ↓  Request পাঠায়
Internet (Digital Highway)
   ↓
Server (Facebook/Google এর Computer)
   ↓  Response পাঠায়
Internet
   ↓
Client — তুমি দেখতে পাও!

🏠 Real-life Analogy: Restaurant এর কথা ভাবো। তুমি (Client) waiter কে order দাও (Request)। Waiter রান্নাঘরে (Server) যায়, খাবার বানিয়ে আনে (Response), তোমার table এ দেয়। Internet হলো সেই waiter — Client আর Server এর মধ্যে যোগাযোগ করায়।

2.3 Website, Domain ও Hosting

Website: একটি বা একাধিক web page এর সমষ্টি যা internet এ available। যেমন facebook.com একটি website।

Web Page: একটি single page — HTML দিয়ে তৈরি। Website এর প্রতিটি page একেকটি HTML file।

Hosting: Website এর file গুলো যে server computer এ রাখা হয়, সেটাকে hosting বলে। এটা 24 ঘন্টা চালু থাকে যাতে যেকোনো সময় website access করা যায়।

Domain Name: Website এর ঠিকানা বা নাম। যেমন google.com, facebook.com। মানুষ IP address (172.217.14.206) মনে রাখতে পারে না, তাই domain name ব্যবহার হয়।

2.4 DNS — Domain Name System

DNS হলো internet এর Phone Book। তুমি browser এ "google.com" লেখো, কিন্তু computer তো নাম বোঝে না — সে বোঝে number (IP Address)। DNS এই নামকে number এ convert করে।

তুমি লেখো: google.com
   ↓
DNS Server → খোঁজে: google.com = 172.217.14.206
   ↓
Browser → এই IP address এ request পাঠায়
   ↓
Google Server → response পাঠায়

🏠 Real-life Analogy: তোমার phone এ contact list এ "আব্বু" নামে save আছে, কিন্তু আসলে phone number আছে 01712xxxxxx। তুমি "আব্বু" tap করো, phone নম্বর বের করে call করে। DNS ও ঠিক তাই করে — নাম থেকে IP address বের করে।

2.5 Request-Response Lifecycle

যখন তুমি browser এ কোনো website open করো, পেছনে পুরো একটা প্রক্রিয়া চলে। এটাকে বলে Request-Response Lifecycle:

Step 1: তুমি browser এ URL লেখো (যেমন: www.google.com) এবং Enter চাপো।

Step 2: Browser DNS server এ যায় — domain name এর IP address খোঁজে।

Step 3: IP address পেলে browser সেই server এ HTTP Request পাঠায়।

Step 4: Server request গ্রহণ করে, তার কাছে থাকা HTML file (ও অন্যান্য file) খুঁজে বের করে।

Step 5: Server HTTP Response হিসেবে HTML file পাঠায়।

Step 6: Browser HTML file receive করে, parse করে, render করে — তুমি screen এ website দেখতে পাও!

User types URL
   ↓
Browser → DNS Lookup → IP Address পায়
   ↓
Browser → HTTP Request → Server
   ↓
Server → Finds HTML file
   ↓
Server → HTTP Response → Browser
   ↓
Browser → Parse → Render → Screen এ দেখায়! ✨

📝 HSC Exam Tip: Request-Response lifecycle HSC exam এ creative question হিসেবে আসতে পারে। Step by step diagram সহ উত্তর লিখলে বেশি marks পাবে।

2.6 HTTP ও HTTPS

HTTP (HyperText Transfer Protocol): Web এ data আদান-প্রদানের নিয়ম। Client আর Server কীভাবে কথা বলবে — সেটার protocol।

HTTPS: HTTP এর secure version। 'S' মানে Secure। এখানে data encrypted থাকে — মাঝখান থেকে কেউ পড়তে পারে না।

💡 Tip: Browser এ URL bar এ যদি 🔒 lock icon দেখো, মানে HTTPS চালু আছে। Bank বা bKash এর website এ এটা অবশ্যই থাকতে হবে।

📝 Module 2 — Quick Quiz

❓ Internet আর World Wide Web এর মধ্যে পার্থক্য কী?

✅ Internet হলো infrastructure/network, Web হলো Internet এর উপর চলা service।

❓ DNS কী কাজ করে?

✅ Domain name কে IP address এ convert করে — internet এর phone book।

❓ HTTP আর HTTPS এর পার্থক্য কী?

✅ HTTPS এ data encrypted থাকে, HTTP তে থাকে না।

Module 3: Browser Fundamentals — Browser কীভাবে কাজ করে

3.1 Browser কী?

Browser হলো এমন একটি Application Software যা web page (HTML file) পড়তে পারে এবং সেটাকে সুন্দরভাবে screen এ দেখাতে পারে। Chrome, Firefox, Edge, Safari — সবই browser।

কিন্তু ভেবে দেখো — তুমি যখন একটা website open করো, browser আসলে একটা text file (HTML) পায়। সেই text file থেকে সে সুন্দর UI (User Interface) তৈরি করে। এটা browser এর আসল ক্ষমতা!

3.2 Browser এর অভ্যন্তরীণ গঠন (Internal Architecture)

Browser এর ভেতরে অনেকগুলো component আছে:

  • User Interface (UI): Address bar, back/forward button, bookmark — তুমি যা দেখো
  • Browser Engine: UI আর Rendering Engine এর মধ্যে সেতু
  • Rendering Engine: HTML + CSS পড়ে screen এ UI তৈরি করে — সবচেয়ে গুরুত্বপূর্ণ অংশ
  • Networking: HTTP request পাঠানো ও response গ্রহণ
  • JavaScript Engine: JavaScript code চালায় (যেমন Chrome এর V8 Engine)
  • Data Storage: Cookie, cache, local storage — data সংরক্ষণ

3.3 Rendering Engine — Browser যেভাবে UI তৈরি করে

এটা পুরো course এর সবচেয়ে গুরুত্বপূর্ণ concept গুলোর একটি। Browser যখন server থেকে HTML file পায়, তখন step by step প্রক্রিয়া চলে:

Step 1 — HTML Parsing: Browser HTML code পড়ে, প্রতিটি tag চিনে নেয়।

Step 2 — DOM Tree তৈরি: HTML tag গুলো থেকে একটা tree structure তৈরি হয়। এটাকে বলে DOM (Document Object Model) Tree।

Step 3 — CSS Parsing (CSSOM): CSS code পড়ে style information বের করে।

Step 4 — Render Tree: DOM + CSSOM মিলে Render Tree তৈরি হয় — কোন element কোথায় কেমন দেখাবে।

Step 5 — Layout: প্রতিটি element এর position ও size calculate হয়।

Step 6 — Painting: Screen এ actual pixel আঁকা হয়!

HTML Code
   ↓ Parsing
DOM Tree তৈরি
   ↓
CSS Code → CSSOM Tree তৈরি
   ↓
DOM + CSSOM = Render Tree
   ↓
Layout (Position Calculate)
   ↓
Painting (Screen এ আঁকা)
   ↓
তুমি Website দেখতে পাও! ✨

3.4 DOM Tree কী?

DOM Tree হলো HTML document এর একটি tree-shaped representation। প্রতিটি HTML tag একটি "node" হয়ে যায়, এবং তারা parent-child সম্পর্কে থাকে। একটু পরে Module 6 এ আমরা DOM Tree বিস্তারিত visualize করব। এখন শুধু concept টা মাথায় রাখো।

3.5 Web Page এর তিনটি স্তম্ভ

একটি web page তিনটি technology দিয়ে তৈরি:

Technologyকাজবাস্তব তুলনা
HTMLStructure — কী থাকবেবাড়ির কাঠামো (দেয়াল, দরজা, জানালা)
CSSDesign — কেমন দেখাবেরঙ, decoration, furniture
JavaScriptInteractivity — কী হবেবিদ্যুৎ ব্যবস্থা, switch টিপলে light জ্বলা

🏠 Real-life Analogy: একটি বাড়ি তৈরির কথা ভাবো। HTML হলো ইট-সিমেন্ট দিয়ে দেয়াল, ছাদ, দরজা বানানো — structure। CSS হলো রঙ করা, টাইলস বসানো, সুন্দর করা — design। JavaScript হলো switch টিপলে লাইট জ্বলা, doorbell টিপলে শব্দ হওয়া — interaction। তিনটা মিলে একটা সম্পূর্ণ বাড়ি (website)!

⚠️ সতর্কতা: আমরা এই course এ শুধু HTML শিখব — অর্থাৎ "বাড়ির কাঠামো" বানাতে শিখব। CSS আর JavaScript পরে শিখবে।

📝 HSC Exam Tip: HTML, CSS, JavaScript এর পার্থক্য জিজ্ঞেস করা হয়। বাড়ির analogy ব্যবহার করে লিখলে চমৎকার marks পাবে।

Module 4: Introduction to HTML

4.1 HTML কী?

HTML মানে HyperText Markup Language। এটা কোনো programming language না — এটা একটা Markup Language। অর্থাৎ, এটা browser কে বলে দেয় — content কোনটা heading, কোনটা paragraph, কোনটা image, কোনটা link।

নামের প্রতিটি অংশ বুঝি:

  • HyperText: এমন text যেটাতে click করলে অন্য page এ যাওয়া যায় (link)। সাধারণ text এ এটা সম্ভব না — তাই "Hyper" (অতিরিক্ত ক্ষমতাসম্পন্ন)।
  • Markup: Text এ বিশেষ চিহ্ন (tag) দিয়ে mark করা — "এটা heading", "এটা paragraph"।
  • Language: নিয়ম-কানুনের সমষ্টি যা browser বোঝে।

4.2 HTML এর সংক্ষিপ্ত ইতিহাস

1991: Sir Tim Berners-Lee HTML তৈরি করেন CERN (Switzerland) এ। উদ্দেশ্য ছিল বিজ্ঞানীদের গবেষণাপত্র একে অপরের সাথে share করা। তখন মাত্র 18টি tag ছিল।

1995: HTML 2.0 — প্রথম standard version।

1997: HTML 3.2 ও HTML 4.0 — table, form যোগ হলো।

2014: HTML5 — বর্তমান version। Audio, video, semantic tag, canvas যোগ হলো। আমরা HTML5 শিখব।

📝 HSC Exam Tip: HTML এর পূর্ণরূপ, কে তৈরি করেছেন (Tim Berners-Lee), এবং এটা Markup Language (programming language না) — এই তিনটা must-know fact।

4.3 HTML কেন Markup Language, Programming Language না?

Programming Language (যেমন Python, Java, C) দিয়ে logic লেখা যায় — if/else, loop, calculation। HTML এ কোনো logic লেখা যায় না। HTML শুধু content কে structure দেয়।

বৈশিষ্ট্যMarkup Language (HTML)Programming Language (Python)
Logic (if/else)❌ না✅ হ্যাঁ
Loop❌ না✅ হ্যাঁ
Calculation❌ না✅ হ্যাঁ
Content Structure✅ হ্যাঁ❌ মূল কাজ না

4.4 HTML Tag কী?

Tag হলো HTML এর মূল building block। এটা angle bracket (< >) দিয়ে লেখা হয়। বেশিরভাগ tag এর একটা opening tag আর একটা closing tag থাকে।

<p>এটা একটা paragraph</p>

এখানে:

  • <p> = Opening tag
  • </p> = Closing tag (forward slash আছে)
  • মাঝের text = Content
  • পুরো জিনিসটা = Element

কিছু tag আছে যেগুলোর closing tag নেই — এদের বলে self-closing tag বা void element:

<br>     ← Line break
<hr>     ← Horizontal rule
<img>    ← Image

4.5 Attribute কী?

Attribute হলো tag এর অতিরিক্ত তথ্য। Opening tag এর ভেতরে লেখা হয়।

<img src="photo.jpg" alt="ছবি" width="300">

এখানে src, alt, width — সবই attribute। প্রতিটি attribute এর format: name="value"

4.6 HTML Document এর মূল কাঠামো

প্রতিটি HTML document এর একটি নির্দিষ্ট structure আছে:

<!DOCTYPE html>
<html>
  <head>
    <title>আমার প্রথম Web Page</title>
  </head>
  <body>
    <h1>স্বাগতম!</h1>
    <p>এটা আমার প্রথম web page।</p>
  </body>
</html>

প্রতিটি অংশ বুঝি:

  • <!DOCTYPE html>: Browser কে বলে এটা HTML5 document। এটা tag না — এটা declaration।
  • <html>: পুরো document এর root element। সব কিছু এর ভেতরে।
  • <head>: Document এর meta information — title, CSS link ইত্যাদি। User সরাসরি দেখে না।
  • <title>: Browser tab এ যে নাম দেখা যায়।
  • <body>: User যা screen এ দেখে — সব content এখানে।

Browser Internally যা করে:

  1. <!DOCTYPE html> দেখে বুঝে — HTML5 mode এ parse করতে হবে।
  2. <html> tag থেকে DOM Tree এর root node তৈরি হয়।
  3. <head> আর <body> — দুটি child node তৈরি হয়।
  4. প্রতিটি nested tag আরেকটি child node হয়ে tree তে যুক্ত হয়।
  5. সবশেষে Render Tree → Layout → Paint — screen এ দেখায়!

📝 HSC Exam Tip: HTML document structure — <!DOCTYPE html>, <html>, <head>, <title>, <body> — HSC exam এ প্রায় প্রতি বছর আসে। এটা perfectly মনে রাখো।

Module 5: HSC HTML Syllabus — সম্পূর্ণ Tag Reference

এই module এ HSC ICT syllabus এর সব HTML tag ও concept বিস্তারিত শিখব। প্রতিটি tag এর জন্য আমরা বুঝব: এটা কী, কেন ব্যবহার হয়, browser কী করে, এবং কোথায় ব্যবহার হয়।

5.1 Heading Tags (h1 — h6)

এটা কী: Heading tag দিয়ে শিরোনাম লেখা হয়। h1 সবচেয়ে বড় (most important), h6 সবচেয়ে ছোট।

কেন ব্যবহার হয়: যেকোনো document এ শিরোনাম থাকে — পত্রিকার headline, বইয়ের chapter name। Web page এও heading দরকার content organize করতে।

<h1>সবচেয়ে বড় Heading</h1>
<h2>দ্বিতীয় স্তর</h2>
<h3>তৃতীয় স্তর</h3>
<h4>চতুর্থ স্তর</h4>
<h5>পঞ্চম স্তর</h5>
<h6>সবচেয়ে ছোট Heading</h6>

Browser যা করে: h1 tag দেখলে browser বুঝে এটা সবচেয়ে গুরুত্বপূর্ণ heading — বড় font, bold, উপর-নিচে space দেয়। h6 সবচেয়ে ছোট।

⚠️ Common Mistake: অনেকে font size বড় করতে heading tag ব্যবহার করে। এটা ভুল! Heading শুধু semantic importance বোঝাতে ব্যবহার হয়, size পরিবর্তনে CSS ব্যবহার করো।

5.2 Paragraph Tag (p)

এটা কী: <p> tag দিয়ে paragraph (অনুচ্ছেদ) লেখা হয়। এটা HTML এর সবচেয়ে বেশি ব্যবহৃত tag।

কেন ব্যবহার হয়: যেকোনো সাধারণ text content paragraph এ লেখা হয়। Browser paragraph এর উপরে-নিচে automatically margin দেয়।

<p>আমার নাম রাহাত। আমি ঢাকায় থাকি।</p>
<p>আমি HSC পরীক্ষার্থী। ICT আমার প্রিয় বিষয়।</p>

💡 Tip: HTML এ code এ যতই Enter চাপো, browser extra space দেখায় না। নতুন paragraph করতে হলে <p> tag ব্যবহার করতে হবে।

5.3 Line Break (br) ও Horizontal Rule (hr)

<br> (Line Break): নতুন লাইনে যেতে ব্যবহার হয়। এটা self-closing tag — closing tag নেই।

<hr> (Horizontal Rule): একটি horizontal line তৈরি করে যা content কে আলাদা করে। এটাও self-closing।

<p>প্রথম লাইন<br>দ্বিতীয় লাইন</p>
<hr>
<p>এটা নতুন section।</p>

5.4 Text Formatting Tags

HTML এ text কে বিভিন্নভাবে format করা যায়:

Tagকাজউদাহরণ Code
<b>Bold (মোটা) — visual only<b>মোটা text</b>
<strong>Bold + গুরুত্বপূর্ণ (semantic)<strong>জরুরি!</strong>
<i>Italic (তির্যক) — visual only<i>তির্যক text</i>
<em>Italic + emphasis (semantic)<em>জোর</em>
<u>Underline (নিম্নরেখা)<u>underline</u>
<sub>Subscript (নিচে)H<sub>2</sub>O
<sup>Superscript (উপরে)x<sup>2</sup>

<b> vs <strong> — পার্থক্য কী?

দুটোই text কে bold করে। কিন্তু <strong> browser ও search engine কে বলে "এই text গুরুত্বপূর্ণ"। Screen reader (অন্ধদের জন্য software) <strong> text জোর দিয়ে পড়ে। <b> শুধু visual bold — কোনো extra meaning নেই। একইভাবে <em> (emphasis) vs <i> (italic)।

📝 HSC Exam Tip: <b> vs <strong> এবং <i> vs <em> এর পার্থক্য HSC exam favorite question! Semantic vs visual — এই concept বুঝে লিখো।

5.5 HTML Comment

এটা কী: Comment হলো HTML code এ মানুষের জন্য note। Browser comment কে screen এ দেখায় না — এটা শুধু developer এর জন্য।

<!-- এটা একটা comment। Browser এটা দেখাবে না। -->

কেন ব্যবহার হয়: Code এ note রাখতে — কোন section কেন লেখা হয়েছে, কী পরিবর্তন করা হয়েছে। Team এ কাজ করলে খুব কাজে লাগে।

5.6 Hyperlinks (a tag)

এটা কী: <a> (anchor) tag দিয়ে hyperlink তৈরি হয়। Link এ click করলে অন্য page এ যাওয়া যায়। এটাই "HyperText" এর মূল concept!

কেন ব্যবহার হয়: Web page গুলো একে অপরের সাথে link করতে। এটাই web কে "web" বানিয়েছে — মাকড়সার জালের মতো সবকিছু connected।

<a href="https://www.google.com">Google এ যাও</a>

<a href="about.html">About Page</a>

<a href="https://www.google.com" target="_blank">
  নতুন tab এ খুলবে
</a>

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

  • href: Link এর destination URL — কোথায় যাবে
  • target="_blank": নতুন tab এ open হবে

Browser যা করে: <a> tag দেখলে browser text কে blue করে, underline দেয়, cursor pointer হয়, এবং click করলে href এর URL এ HTTP request পাঠায়।

5.7 Images (img tag)

এটা কী: <img> tag দিয়ে web page এ image (ছবি) যোগ করা হয়। এটা self-closing tag।

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

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

  • src: Image file এর path বা URL
  • alt: Image load না হলে বা screen reader ব্যবহার করলে যে text দেখায়
  • width, height: Image এর আকার (pixel এ)

⚠️ Common Mistake: alt attribute ভুলে যাওয়া। alt অবশ্যই দিতে হবে — এটা accessibility এর জন্য জরুরি। HSC exam এও alt ছাড়া marks কাটা যেতে পারে।

5.8 Lists — Ordered, Unordered, Nested

HTML এ তিন ধরনের list আছে:

Unordered List (Bullet List):

<ul>
  <li>ভাত</li>
  <li>মাছ</li>
  <li>ডাল</li>
</ul>

<ul> = Unordered List, <li> = List Item। প্রতিটি item এর আগে bullet (●) দেখায়।

Ordered List (Number List):

<ol>
  <li>প্রথমে পানি ফুটাও</li>
  <li>চা পাতা দাও</li>
  <li>চিনি মেশাও</li>
</ol>

<ol> = Ordered List। item গুলো automatically 1, 2, 3... numbering পায়। যেখানে ক্রম (sequence) গুরুত্বপূর্ণ, সেখানে ordered list।

Nested List (List এর ভেতরে List):

<ul>
  <li>ফল
    <ul>
      <li>আম</li>
      <li>কাঁঠাল</li>
    </ul>
  </li>
  <li>সবজি
    <ul>
      <li>আলু</li>
      <li>পটল</li>
    </ul>
  </li>
</ul>

5.9 Tables

এটা কী: <table> tag দিয়ে tabular data (সারি-কলামে সাজানো তথ্য) দেখানো হয়।

কেন ব্যবহার হয়: Result sheet, সময়সূচী, তুলনামূলক তথ্য — যেখানে data row এবং column এ সাজানো।

<table border="1">
  <tr>
    <th>নাম</th>
    <th>বিষয়</th>
    <th>নম্বর</th>
  </tr>
  <tr>
    <td>রাহাত</td>
    <td>ICT</td>
    <td>85</td>
  </tr>
  <tr>
    <td>নিশাত</td>
    <td>ICT</td>
    <td>90</td>
  </tr>
</table>

Tag গুলো বুঝি:

  • <table>: পুরো table শুরু
  • <tr>: Table Row — একটি সারি
  • <th>: Table Header — heading cell (bold ও center হয়)
  • <td>: Table Data — সাধারণ data cell
  • border attribute: table এর border দেখাতে

colspan ও rowspan:

<td colspan="2">এটা ২ column জুড়ে</td>
<td rowspan="3">এটা ৩ row জুড়ে</td>

colspan দিয়ে cell কে পাশাপাশি একাধিক column জুড়ে extend করা যায়। rowspan দিয়ে উপর-নিচে একাধিক row জুড়ে extend করা যায়।

📝 HSC Exam Tip: Table, colspan, rowspan — HSC practical exam এ প্রায় সবসময় আসে। Table structure ভালো করে practice করো।

5.10 Forms

এটা কী: <form> tag দিয়ে user থেকে তথ্য (data) নেওয়া হয়। Login page, registration, survey — সবখানে form আছে।

কেন ব্যবহার হয়: User interaction এর জন্য — user তথ্য দেবে, server সেটা process করবে।

<form action="submit.php" method="POST">

  <label>নাম:</label>
  <input type="text" name="name" placeholder="তোমার নাম">
  <br><br>

  <label>Email:</label>
  <input type="email" name="email">
  <br><br>

  <label>Password:</label>
  <input type="password" name="pass">
  <br><br>

  <label>লিঙ্গ:</label>
  <input type="radio" name="gender" value="male"> পুরুষ
  <input type="radio" name="gender" value="female"> মহিলা
  <br><br>

  <label>শখ:</label>
  <input type="checkbox" name="hobby" value="reading"> পড়া
  <input type="checkbox" name="hobby" value="sports"> খেলা
  <br><br>

  <label>বার্তা:</label>
  <textarea name="message" rows="4" cols="30"></textarea>
  <br><br>

  <label>জেলা:</label>
  <select name="district">
    <option value="dhaka">ঢাকা</option>
    <option value="chittagong">চট্টগ্রাম</option>
    <option value="sylhet">সিলেট</option>
  </select>
  <br><br>

  <input type="submit" value="জমা দাও">
  <input type="reset" value="মুছে ফেলো">

</form>

Form এর গুরুত্বপূর্ণ Element:

Element / Typeকাজ
<form>Form container — action ও method define করে
input type="text"Text লেখার ঘর
input type="email"Email input (validation সহ)
input type="password"Password — text দেখা যায় না
input type="radio"একটি option select (group থেকে একটাই)
input type="checkbox"একাধিক option select করা যায়
input type="submit"Form submit button
input type="reset"Form reset (সব মুছে দেয়)
<textarea>বড় text area — একাধিক লাইন
<select> + <option>Dropdown list
<label>Input field এর label/নাম

Form Attribute:

  • action: Form submit হলে data কোথায় যাবে (server URL)
  • method: GET (URL এ data দেখায়) বা POST (data লুকানো থাকে)
  • name: প্রতিটি input field এর নাম — server এ data identify করতে
  • placeholder: Input field ফাঁকা থাকলে hint text দেখায়

📝 HSC Exam Tip: Form tag ও বিভিন্ন input type — HSC exam এর most important topic! বিশেষত radio, checkbox, select, textarea — এগুলো ভালো করে practice করো।

5.11 Multimedia — Audio ও Video

HTML5 এ directly audio ও video যোগ করা যায়:

<!-- Audio -->
<audio controls>
  <source src="song.mp3" type="audio/mpeg">
  তোমার browser audio support করে না।
</audio>

<!-- Video -->
<video width="400" controls>
  <source src="video.mp4" type="video/mp4">
  তোমার browser video support করে না।
</video>

controls attribute দিলে play, pause, volume button দেখায়। <source> tag এ file path ও type দিতে হয়।

5.12 Semantic HTML Tags (HTML5)

Semantic মানে অর্থবহ। Semantic tag গুলো browser ও developer কে বলে — content এর অর্থ কী।

<header>  → page এর উপরের অংশ (logo, navigation)
<nav>     → navigation menu
<main>    → page এর মূল content
<section> → একটি section/অংশ
<article> → একটি স্বতন্ত্র content (blog post, news)
<aside>   → পাশের content (sidebar)
<footer>  → page এর নিচের অংশ (copyright, contact)

<div> vs Semantic Tags: <div> দিয়েও সবকিছু করা যায়, কিন্তু <div> এর কোনো অর্থ নেই — এটা generic container। Semantic tags ব্যবহার করলে code বোঝা সহজ, SEO ভালো হয়, এবং accessibility বাড়ে।

Module 6: HTML Visualization — DOM Tree ও Structure

6.1 DOM Tree Visualization

যেকোনো HTML code কে tree হিসেবে কল্পনা করা যায়। নিচের HTML code টা দেখো:

<html>
  <head>
    <title>আমার Page</title>
  </head>
  <body>
    <h1>স্বাগতম</h1>
    <p>এটা paragraph</p>
    <img src="pic.jpg" alt="ছবি">
  </body>
</html>

এটার DOM Tree হবে:

html
├── head
│   └── title
│       └── "আমার Page"
└── body
    ├── h1
    │   └── "স্বাগতম"
    ├── p
    │   └── "এটা paragraph"
    └── img (src="pic.jpg")

6.2 Parent-Child Relationship

DOM Tree তে প্রতিটি element এর একটি parent আছে এবং এক বা একাধিক child থাকতে পারে:

  • <html> হলো root element — সবার parent
  • <head> আর <body> হলো <html> এর children
  • <h1>, <p>, <img> হলো <body> এর children
  • <title> হলো <head> এর child

Sibling: একই parent এর children কে sibling বলে। যেমন <h1>, <p>, <img> তিনটি sibling — তাদের parent <body>।

6.3 Nesting — Element এর ভেতরে Element

HTML tag এর ভেতরে আরেকটি tag রাখাকে nesting বলে। Nesting সঠিকভাবে করতে হয় — যে tag আগে open হবে, সে পরে close হবে:

✅ সঠিক: <b><i>Bold Italic</i></b>
❌ ভুল:  <b><i>Bold Italic</b></i>

⚠️ সতর্কতা: Nesting ভুল করলে browser confused হয় এবং ভুল render করতে পারে। সবসময় LIFO (Last In, First Out) — যেটা শেষে open, সেটা আগে close।

6.4 একটি সম্পূর্ণ Page এর DOM Tree

<html>
  <body>
    <h1>আমার স্কুল</h1>
    <ul>
      <li>বাংলা</li>
      <li>English</li>
      <li>ICT</li>
    </ul>
    <table>
      <tr>
        <td>রাহাত</td>
        <td>90</td>
      </tr>
    </table>
  </body>
</html>

html
└── body
    ├── h1 → "আমার স্কুল"
    ├── ul
    │   ├── li → "বাংলা"
    │   ├── li → "English"
    │   └── li → "ICT"
    └── table
        └── tr
            ├── td → "রাহাত"
            └── td → "90"

📝 HSC Exam Tip: HTML code থেকে DOM Tree আঁকতে বলতে পারে, অথবা DOM Tree থেকে HTML code লিখতে বলতে পারে। দুটোই practice করো!

Module 7: Practical Projects — হাতে-কলমে শিক্ষা

শুধু theory পড়লে হবে না — হাতে-কলমে code লিখতে হবে। নিচে কিছু HSC-friendly project দেওয়া হলো। প্রতিটি project Notepad এ লিখে .html extension দিয়ে save করো এবং browser এ open করো।

Project 1: Personal Biodata Page

একটি সুন্দর biodata page তৈরি করো যেখানে তোমার নাম, ছবি, শিক্ষা, শখ ইত্যাদি থাকবে।

<!DOCTYPE html>
<html>
<head>
  <title>আমার জীবনবৃত্তান্ত</title>
</head>
<body>
  <h1>মোঃ রাহাতুল ইসলাম</h1>
  <img src="photo.jpg" alt="আমার ছবি" width="200">
  <hr>

  <h2>ব্যক্তিগত তথ্য</h2>
  <p><strong>পিতার নাম:</strong> মোঃ করিম</p>
  <p><strong>মাতার নাম:</strong> মোসাঃ ফাতেমা</p>
  <p><strong>ঠিকানা:</strong> মিরপুর, ঢাকা</p>

  <h2>শিক্ষাগত যোগ্যতা</h2>
  <table border="1">
    <tr>
      <th>পরীক্ষা</th>
      <th>প্রতিষ্ঠান</th>
      <th>ফলাফল</th>
    </tr>
    <tr>
      <td>SSC</td>
      <td>মিরপুর বিদ্যালয়</td>
      <td>GPA 5.00</td>
    </tr>
  </table>

  <h2>শখ</h2>
  <ul>
    <li>বই পড়া</li>
    <li>ক্রিকেট খেলা</li>
    <li>কম্পিউটার শেখা</li>
  </ul>
</body>
</html>

Project 2: School Website Homepage

তোমার স্কুলের জন্য একটি homepage তৈরি করো:

<!DOCTYPE html>
<html>
<head>
  <title>মিরপুর আদর্শ বিদ্যালয়</title>
</head>
<body>
  <h1>মিরপুর আদর্শ বিদ্যালয় ও কলেজ</h1>
  <p><em>জ্ঞানই শক্তি</em></p>
  <hr>

  <h2>আমাদের সম্পর্কে</h2>
  <p>মিরপুর আদর্শ বিদ্যালয় ১৯৮৫ সালে প্রতিষ্ঠিত।
  এটি ঢাকার অন্যতম সেরা শিক্ষা প্রতিষ্ঠান।</p>

  <h2>বিভাগসমূহ</h2>
  <ol>
    <li>বিজ্ঞান বিভাগ</li>
    <li>ব্যবসায় শিক্ষা বিভাগ</li>
    <li>মানবিক বিভাগ</li>
  </ol>

  <h2>যোগাযোগ</h2>
  <p>ঠিকানা: মিরপুর-১০, ঢাকা-১২১৬</p>
  <p>Email: <a href="mailto:info@mirpurschool.edu.bd">
    info@mirpurschool.edu.bd</a></p>
</body>
</html>

Project 3: Result Sheet Table (colspan/rowspan)

<!DOCTYPE html>
<html>
<head>
  <title>পরীক্ষার ফলাফল</title>
</head>
<body>
  <h1>বার্ষিক পরীক্ষার ফলাফল — ২০২৫</h1>

  <table border="1">
    <tr>
      <th colspan="4">ফলাফল পত্র</th>
    </tr>
    <tr>
      <th>ক্রমিক</th>
      <th>নাম</th>
      <th>বিষয়</th>
      <th>নম্বর</th>
    </tr>
    <tr>
      <td rowspan="2">১</td>
      <td rowspan="2">রাহাত</td>
      <td>ICT</td>
      <td>85</td>
    </tr>
    <tr>
      <td>বাংলা</td>
      <td>78</td>
    </tr>
    <tr>
      <td rowspan="2">২</td>
      <td rowspan="2">নিশাত</td>
      <td>ICT</td>
      <td>90</td>
    </tr>
    <tr>
      <td>বাংলা</td>
      <td>82</td>
    </tr>
  </table>
</body>
</html>

Project 4: Admission Form

<!DOCTYPE html>
<html>
<head><title>ভর্তি ফরম</title></head>
<body>
  <h1>অনলাইন ভর্তি ফরম</h1>
  <hr>
  <form action="submit.php" method="POST">
    <p>
      <label>নাম:</label><br>
      <input type="text" name="name" placeholder="পুরো নাম লিখো">
    </p>
    <p>
      <label>জন্ম তারিখ:</label><br>
      <input type="date" name="dob">
    </p>
    <p>
      <label>লিঙ্গ:</label><br>
      <input type="radio" name="gender" value="male"> পুরুষ
      <input type="radio" name="gender" value="female"> মহিলা
    </p>
    <p>
      <label>বিভাগ:</label><br>
      <select name="dept">
        <option>বিজ্ঞান</option>
        <option>ব্যবসায় শিক্ষা</option>
        <option>মানবিক</option>
      </select>
    </p>
    <p>
      <label>ঠিকানা:</label><br>
      <textarea name="address" rows="3" cols="40"></textarea>
    </p>
    <p>
      <input type="submit" value="ফরম জমা দিন">
      <input type="reset" value="পুনরায় লিখুন">
    </p>
  </form>
</body>
</html>

Project 5: Restaurant Menu Page

<!DOCTYPE html>
<html>
<head><title>স্টার রেস্তোরাঁ — মেনু</title></head>
<body>
  <h1>⭐ স্টার রেস্তোরাঁ</h1>
  <p><em>সেরা বাংলাদেশি খাবার</em></p>
  <hr>

  <h2>আমাদের মেনু</h2>

  <h3>প্রধান খাবার</h3>
  <table border="1">
    <tr>
      <th>খাবার</th>
      <th>বিবরণ</th>
      <th>দাম</th>
    </tr>
    <tr>
      <td>কাচ্চি বিরিয়ানি</td>
      <td>ঐতিহ্যবাহী ঢাকাই কাচ্চি</td>
      <td>৳ 350</td>
    </tr>
    <tr>
      <td>ইলিশ ভাজা</td>
      <td>তাজা পদ্মার ইলিশ</td>
      <td>৳ 500</td>
    </tr>
    <tr>
      <td>খিচুড়ি</td>
      <td>ডাল খিচুড়ি সবজি সহ</td>
      <td>৳ 180</td>
    </tr>
  </table>

  <h3>পানীয়</h3>
  <ul>
    <li>বোরহানি — ৳ 60</li>
    <li>লাচ্ছি — ৳ 80</li>
    <li>চা — ৳ 30</li>
  </ul>

  <p>অর্ডার করতে: <a href="tel:01712345678">01712-345678</a></p>
</body>
</html>

Project 6: CV Page

একটি professional CV তৈরি করো — heading, table, list, link সব ব্যবহার করে। Project 1 (Biodata) এর মতো কিন্তু আরো বিস্তারিত: objective section, skill list, reference, এবং social media link যোগ করো।

Project 7: Islamic Reminder Page

একটি simple page তৈরি করো যেখানে নামাজের সময়সূচী (table), দোয়া সমূহ (ordered list), এবং গুরুত্বপূর্ণ আয়াত (paragraph + strong tag) থাকবে।

💡 Tip: এই project গুলো নিজে হাতে type করে practice করো। Copy-paste না করে type করলে ভালো শিখবে। প্রতিটি project এ নতুন কিছু যোগ করে experiment করো!

Module 8: HSC Exam Preparation — পরীক্ষার প্রস্তুতি

8.1 গুরুত্বপূর্ণ Board Questions ও Model Answer

প্রশ্ন ১: HTML কী? HTML কে Markup Language বলা হয় কেন?

Model Answer: HTML এর পূর্ণরূপ HyperText Markup Language। এটি web page তৈরির ভাষা। HTML কে Markup Language বলা হয় কারণ এটি বিভিন্ন tag ব্যবহার করে content কে mark up বা চিহ্নিত করে — কোনটি heading, কোনটি paragraph, কোনটি image ইত্যাদি নির্দেশ করে। এটি Programming Language নয় কারণ এতে কোনো logic (if/else, loop) লেখা সম্ভব নয়।

প্রশ্ন ২: HTML, CSS এবং JavaScript এর মধ্যে পার্থক্য লেখো।

বৈশিষ্ট্যHTMLCSSJavaScript
কাজStructureDesign/StyleInteractivity
ধরনMarkup LanguageStyle Sheet Lang.Programming Lang.
তুলনাবাড়ির কাঠামোরঙ ও সজ্জাবিদ্যুৎ ব্যবস্থা
Logic❌❌✅

প্রশ্ন ৩: <b> ও <strong> tag এর মধ্যে পার্থক্য কী?

Model Answer: <b> tag শুধু visually text কে bold করে — এর কোনো অতিরিক্ত অর্থ নেই। অন্যদিকে <strong> tag text কে bold করার পাশাপাশি semantically গুরুত্বপূর্ণ (important) বোঝায়। Search engine এবং screen reader <strong> tag এর content কে বিশেষ গুরুত্ব দেয়।

প্রশ্ন ৪: Ordered ও Unordered List এর মধ্যে পার্থক্য কী?

Model Answer: Ordered List (<ol>) এ items সংখ্যা দিয়ে (1, 2, 3...) সাজানো থাকে — যেখানে ক্রম গুরুত্বপূর্ণ (যেমন recipe)। Unordered List (<ul>) এ items bullet (●) দিয়ে সাজানো থাকে — যেখানে ক্রম গুরুত্বপূর্ণ নয় (যেমন কেনাকাটার তালিকা)।

প্রশ্ন ৫: colspan ও rowspan বলতে কী বোঝায়?

Model Answer: colspan attribute ব্যবহার করে একটি cell কে পাশাপাশি একাধিক column জুড়ে বিস্তৃত করা যায় (যেমন colspan="3" মানে ৩টি column জুড়ে)। rowspan attribute দিয়ে একটি cell কে উপর-নিচে একাধিক row জুড়ে বিস্তৃত করা যায় (যেমন rowspan="2" মানে ২টি row জুড়ে)।

প্রশ্ন ৬: <form> tag এ action ও method attribute এর কাজ কী?

Model Answer: action attribute নির্দেশ করে form এর data কোথায় (কোন URL) submit হবে। method attribute নির্দেশ করে data কীভাবে পাঠানো হবে — GET method এ data URL এ দেখা যায় (কম secure), POST method এ data লুকানো থাকে (বেশি secure)।

প্রশ্ন ৭: Hyperlink কী? কীভাবে তৈরি করা হয়?

Model Answer: Hyperlink হলো web page এর এমন text বা element যেটাতে click করলে অন্য page এ যাওয়া যায়। HTML এ <a> (anchor) tag দিয়ে hyperlink তৈরি হয়। href attribute এ destination URL দিতে হয়। যেমন: <a href="https://google.com">Google</a>

প্রশ্ন ৮: radio button ও checkbox এর মধ্যে পার্থক্য কী?

Model Answer: Radio button (input type="radio") এ একই group (same name attribute) থেকে শুধুমাত্র একটি option select করা যায়। Checkbox (input type="checkbox") এ একাধিক option select করা যায়। Radio button গোলাকার, checkbox বর্গাকার দেখায়।

8.2 Practical Question Pattern

HSC practical exam এ সাধারণত বলা হয়:

  • একটি biodata/CV page তৈরি করো
  • একটি table তৈরি করো (colspan/rowspan সহ)
  • একটি form তৈরি করো (বিভিন্ন input type সহ)
  • image, link সহ একটি web page তৈরি করো

8.3 Exam Hall Tips

  • প্রতিটি code <!DOCTYPE html> দিয়ে শুরু করো
  • <html>, <head>, <title>, <body> structure সবসময় লেখো
  • Tag close করতে ভুলো না — </p>, </table>, </form>
  • img tag এ alt attribute অবশ্যই দাও
  • Code পরিষ্কার করে indent দিয়ে লেখো — marks বাড়বে
  • Table এ <th> আর <td> গুলিয়ে ফেলো না
  • Form এ প্রতিটি input এ name attribute দাও
  • সময় ভাগ করো — code লেখার আগে ১-২ মিনিট plan করো

8.4 Quick Tag Memorization Table

CategoryTagsমনে রাখো
Structurehtml, head, title, bodyপ্রতিটি page এ থাকবে
Texth1-h6, p, br, hrHeading, Paragraph, Break, Line
Formattingb, strong, i, em, u, sub, supBold, Italic, Under, Up, Down
Link & Imagea (href), img (src, alt)Anchor ও Image
Listul, ol, liUnordered, Ordered, Item
Tabletable, tr, th, tdTable, Row, Header, Data
Formform, input, textarea, select, option, labelসবচেয়ে বেশি attribute
Multimediaaudio, video, sourceHTML5 এ যোগ হয়েছে
Semanticheader, nav, main, section, article, aside, footerঅর্থবহ tag
Others<!-- --> (comment), <!DOCTYPE>Browser দেখায় না

Module 9: Engineering Mindset — পেশাদার চিন্তা

9.1 Semantic HTML কেন গুরুত্বপূর্ণ?

Professional developer রা শুধু code লেখে না — তারা meaningful code লেখে। Semantic HTML মানে সঠিক tag সঠিক জায়গায় ব্যবহার করা।

❌ ভুল পদ্ধতি:
<div>এটা heading</div>  (div এর কোনো অর্থ নেই)
<div>এটা paragraph</div>

✅ সঠিক পদ্ধতি:
<h1>এটা heading</h1>    (browser + search engine বোঝে)
<p>এটা paragraph</p>

9.2 Accessibility — সবার জন্য Web

পৃথিবীতে অনেক মানুষ দৃষ্টি প্রতিবন্ধী — তারা Screen Reader ব্যবহার করে web browse করে। Screen Reader HTML tag পড়ে content শোনায়। তাই:

  • img tag এ সবসময় alt attribute দাও — screen reader এটা পড়ে শোনায়
  • Heading tag সঠিক hierarchy তে ব্যবহার করো (h1 → h2 → h3)
  • Form field এ label ব্যবহার করো
  • Semantic tag ব্যবহার করো (<nav>, <main>, <footer>)

9.3 SEO — Search Engine Optimization

Google যখন তোমার website crawl করে, সে HTML tag পড়ে বোঝে — page এ কী আছে। ভালো SEO এর জন্য:

  • প্রতিটি page এ meaningful <title> দাও
  • সঠিক heading hierarchy ব্যবহার করো
  • img এ descriptive alt text দাও
  • Semantic HTML ব্যবহার করো

9.4 Clean Code Mindset

Professional developer দের কিছু অভ্যাস যা তোমার এখন থেকে শুরু করা উচিত:

  • Indentation: Nested tag গুলো indent করো — code পড়া সহজ হয়
  • Comments: Code এ comment রাখো — পরে বুঝতে সুবিধা
  • Plan before code: কী বানাবে আগে plan করো, তারপর code লেখো
  • Meaningful names: File, image এর নাম meaningful রাখো (photo.jpg না, profile-pic.jpg)

9.5 কেন মুখস্থ করা উচিত না

Industry তে কোনো developer সব tag মুখস্থ রাখে না। তারা concept বোঝে এবং প্রয়োজনে documentation দেখে। তুমি যদি বুঝো যে <table> tag tabular data দেখানোর জন্য, তাহলে এর ভেতরের <tr>, <td> তুমি logic দিয়ে বুঝতে পারবে। মুখস্থ করলে ভুলে যাবে, কিন্তু বুঝলে সারাজীবন মনে থাকবে।

💡 Tip: HSC exam এর জন্য basic tag structure মনে রাখতে হবে, কিন্তু concept বুঝলে code লেখা অনেক সহজ হয়ে যায়। দুটোর balance রাখো।

Module 10: Future Roadmap — এরপর কোথায়?

তুমি এতক্ষণে HTML শিখে ফেলেছো — অভিনন্দন! 🎉 কিন্তু এটা শুধু শুরু। Web Development এর পুরো journey টা অনেক বড় এবং exciting!

10.1 Step-by-Step Learning Path

Step 1: HTML ✅ (তুমি এখানে!)
   ↓
Step 2: CSS — Design ও Styling শেখো
   ↓
Step 3: JavaScript — Interactivity যোগ করো
   ↓
Step 4: Responsive Design — Mobile-friendly site
   ↓
Step 5: Git / GitHub — Code manage করা
   ↓
Step 6: React / Vue — Modern Framework
   ↓
Step 7: Backend (Node.js / Python) — Server-side
   ↓
Step 8: Database (MySQL / MongoDB) — Data store
   ↓
Step 9: Full Stack Developer! 🚀

10.2 প্রতিটি Step সংক্ষেপে

CSS (Cascading Style Sheets)

HTML দিয়ে structure তৈরি করেছো, এখন CSS দিয়ে সুন্দর করতে শিখবে — color, font, layout, animation। আমাদের বাড়ির analogy মনে আছে? CSS হলো রঙ ও decoration!

JavaScript

Programming language যেটা browser এ চলে। Button click করলে কিছু হওয়া, form validate করা, animation — সব JavaScript দিয়ে হয়। এটা শিখলে তুমি actual programming করতে পারবে।

Responsive Design

বাংলাদেশে বেশিরভাগ মানুষ mobile দিয়ে internet ব্যবহার করে। তাই website কে mobile-friendly বানানো জরুরি। CSS Media Query দিয়ে এটা করা হয়।

React / Vue / Angular

Modern web development framework। Facebook (React), Google (Angular) এগুলো তৈরি করেছে। বড় বড় application (Facebook, Netflix, Pathao) এগুলো দিয়ে তৈরি। Industry তে সবচেয়ে বেশি demand!

Backend Development

Server-side programming — Node.js (JavaScript), Python (Django/Flask), PHP। User registration, login, data save — এসব backend এ হয়। এখানে database ও শিখতে হবে।

Full Stack Developer

Frontend (HTML, CSS, JS, React) + Backend (Node.js, Database) — দুটো মিলিয়ে Full Stack Developer। বাংলাদেশে এবং বিদেশে এদের অনেক demand!

10.3 Career Opportunities

Web development শিখে তুমি অনেক কিছু করতে পারো:

  • Job: Software company তে Frontend/Backend/Full Stack Developer
  • Freelancing: Upwork, Fiverr, Toptal — বিদেশী client এর কাজ করে dollar income
  • Startup: নিজের idea নিয়ে app/website তৈরি করে ব্যবসা
  • Remote Work: বাংলাদেশে বসে বিদেশের company তে কাজ
  • Teaching: অন্যদের শেখানো — YouTube, course তৈরি

বাংলাদেশে ICT sector দ্রুত বাড়ছে। তুমি এখন যে foundation তৈরি করলে, সেটা তোমার ভবিষ্যৎ career এর ভিত্তি হবে।

🎓 শেষ কথা

এই course এ তুমি শিখেছো — technology কেন তৈরি হলো, internet কীভাবে কাজ করে, browser কীভাবে HTML কে সুন্দর page এ রূপান্তর করে, এবং HTML এর সব গুরুত্বপূর্ণ tag ও concept।

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

মনে রাখো:

  • HTML হলো শুরু, শেষ নয়
  • মুখস্থ না করে বুঝো
  • Practice ছাড়া কিছুই শেখা যায় না
  • প্রতিদিন একটু একটু করে শেখো — consistency সবচেয়ে গুরুত্বপূর্ণ
  • ভুল করো, ভুল থেকে শেখো — এটাই engineering mindset

"আমি এখন শুধু HTML tag মুখস্থ করি না — আমি actually Web কীভাবে কাজ করে সেটা বুঝি।"

তোমার journey শুরু হয়ে গেছে। চালিয়ে যাও! 🚀

Fun with HTML — HSC ICT Complete Course Material। সম্পূর্ণ বাংলায় রচিত ● Technical terms ইংরেজিতে। Bangladesh Higher Secondary Certificate (HSC) — তথ্য ও যোগাযোগ প্রযুক্তি।

← PreviousURL