HTML কী?
HTML-এর পূর্ণরূপ HyperText Markup Language। এটি প্রোগ্রামিং ভাষা নয়; এটি ওয়েবপেজের গঠন তৈরি করার একটি markup language।
অধ্যায় ০ — শুরু করার আগে
HTML কী, কীভাবে ফাইল বানাবেন এবং কোড চালাবেন।
যা লাগবে
একটি browser (Chrome/Edge/Firefox) এবং একটি code editor (VS Code বা Notepad) হলেই শুরু করা যায়।
প্রথম ফাইল তৈরি
- একটি folder তৈরি করুন:
html-practice - এর ভিতরে
index.htmlনামের ফাইল বানান। - নিচের কোড লিখে Ctrl + S চাপুন।
- ফাইলটিতে double-click করে browser-এ খুলুন।
একদম প্রথম কোড
<!DOCTYPE html>
<html lang="bn">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>আমার প্রথম ওয়েবপেজ</title>
</head>
<body>
<h1>হ্যালো পৃথিবী!</h1>
<p>আমি HTML শেখা শুরু করেছি।</p>
</body>
</html>কী শিখলেন: Browser-এ “হ্যালো পৃথিবী!” শিরোনাম এবং একটি paragraph দেখা যাবে।
অধ্যায় ১ — HTML ডকুমেন্টের মূল কাঠামো
প্রতিটি HTML পেজের বাধ্যতামূলক অংশ।
মনে রাখুন:
<head> হলো পেজের তথ্য ও সেটিংস, আর <body> হলো ব্যবহারকারী যা দেখবে।মূল কাঠামোর কাজ
<!DOCTYPE html> <!-- Browser-কে বলে এটি HTML5 -->
<html lang="bn"> <!-- পুরো ডকুমেন্ট -->
<head> <!-- পেজের অদৃশ্য তথ্য -->
<meta charset="UTF-8">
<title>Page Title</title>
</head>
<body> <!-- দৃশ্যমান সব content -->
<h1>আমার ওয়েবসাইট</h1>
</body>
</html>কী শিখলেন: এই structure প্রতিটি HTML ফাইলের ভিত্তি।
অধ্যায় ২ — Element, Tag ও Attribute
Opening tag, closing tag, content এবং attribute বুঝুন।
Element
<p>আমি একটি paragraph</p>—পুরো অংশটি একটি element।
Attribute
<a href="https://example.com">-এ href হলো attribute। এটি ট্যাগকে অতিরিক্ত তথ্য দেয়।
Void element
<img>, <br>, <hr>, <input>, <meta> ইত্যাদির closing tag নেই।
Nesting
একটি element-এর ভিতরে আরেকটি element রাখা যায়। তবে যে ট্যাগ আগে খুলবেন, সেটি পরে বন্ধ করবেন।
Tag ও attribute
<p title="এটি একটি tooltip">Mouse এখানে আনুন</p>
<a href="https://example.com" target="_blank">নতুন tab-এ খুলুন</a>
<img src="photo.jpg" alt="একটি প্রকৃতির ছবি">কী শিখলেন:
title, href, target, src এবং alt হলো attribute।সঠিক nesting
<!-- সঠিক -->
<p>এটি <strong>গুরুত্বপূর্ণ</strong> লেখা।</p>
<!-- ভুল -->
<p>এটি <strong>ভুল nesting</p></strong>কী শিখলেন: ভেতরের
strong আগে বন্ধ হয়েছে, তাই প্রথমটি সঠিক।অধ্যায় ৩ — Heading, Paragraph ও Text
লেখা সাজানোর সবচেয়ে প্রয়োজনীয় ট্যাগ।
একটি পেজে সাধারণত একটি প্রধান <h1> রাখুন। এরপর বিষয় অনুযায়ী <h2>, তার ভেতরের উপবিষয়ে <h3> ব্যবহার করুন।
Text tags
<h1>প্রধান শিরোনাম</h1>
<h2>বিভাগের শিরোনাম</h2>
<h3>উপবিভাগ</h3>
<p>এটি একটি paragraph।</p>
<p>এটি <strong>খুব গুরুত্বপূর্ণ</strong> এবং এটি <em>জোর দিয়ে</em> বলা হয়েছে।</p>
<p>পানির সংকেত H<sub>2</sub>O এবং 2<sup>3</sup> = 8</p>
<p><mark>Highlight</mark>, <del>পুরোনো মূল্য</del>, <ins>নতুন মূল্য</ins></p>
<hr>
<p>প্রথম লাইন<br>দ্বিতীয় লাইন</p>কী শিখলেন: Heading, paragraph, emphasis, subscript, superscript, highlight এবং line break দেখা যাবে।
Preformatted code
<pre>
নাম: Rahim
বয়স: 20
</pre>
<p>HTML code লিখতে <code><h1></code> ব্যবহার করুন।</p>
<blockquote cite="https://example.com">
এটি একটি বড় উদ্ধৃতি।
</blockquote>
<p>তিনি বললেন, <q>আমি HTML শিখছি।</q></p>কী শিখলেন:
pre space ও line break ঠিক রাখে; code inline code দেখায়।অধ্যায় ৪ — Link ও File Path
অন্য পেজ, ওয়েবসাইট, ফোন ও ইমেইলে লিংক তৈরি।
Absolute path
সম্পূর্ণ URL: https://example.com/about
Relative path
নিজের project-এর ফাইল: about.html বা pages/about.html
সব ধরনের link
<a href="https://google.com">Google</a>
<a href="about.html">About Page</a>
<a href="#contact">Contact section-এ যান</a>
<a href="mailto:hello@example.com">Email করুন</a>
<a href="tel:+8801700000000">ফোন করুন</a>
<a href="document.pdf" download>PDF Download</a>কী শিখলেন: প্রতিটি link-এর কাজ
href অনুযায়ী আলাদা।নিরাপদ নতুন tab
<a href="https://example.com"
target="_blank"
rel="noopener noreferrer">
Website খুলুন
</a>কী শিখলেন: নতুন tab খুললে external link-এর সঙ্গে
rel="noopener noreferrer" ব্যবহার করা ভালো।অধ্যায় ৫ — Image ও Responsive Picture
ছবি দেখানো, alt text এবং responsive image।
খুব গুরুত্বপূর্ণ: প্রতিটি অর্থপূর্ণ ছবিতে সঠিক alt লিখুন। এটি ছবি না এলে এবং screen reader ব্যবহারকারীর জন্য দরকার।
সাধারণ image
<img src="images/profile.jpg"
alt="রহিমের profile photo"
width="300"
height="300"
loading="lazy">কী শিখলেন:
src ছবির path, alt বর্ণনা, আর loading="lazy" প্রয়োজনের সময় ছবি load করে।Figure ও picture
<figure>
<picture>
<source media="(max-width: 600px)" srcset="small.jpg">
<source media="(min-width: 601px)" srcset="large.jpg">
<img src="large.jpg" alt="সবুজ পাহাড়">
</picture>
<figcaption>বাংলাদেশের একটি সবুজ পাহাড়</figcaption>
</figure>কী শিখলেন: Screen size অনুযায়ী আলাদা ছবি ব্যবহার করা যায়।
অধ্যায় ৬ — List
Bullet, numbered এবং description list।
তিন ধরনের list
<h3>Unordered List</h3>
<ul>
<li>HTML</li>
<li>CSS</li>
</ul>
<h3>Ordered List</h3>
<ol>
<li>ফাইল তৈরি</li>
<li>কোড লেখা</li>
</ol>
<h3>Description List</h3>
<dl>
<dt>HTML</dt>
<dd>ওয়েবপেজের structure তৈরি করে।</dd>
<dt>CSS</dt>
<dd>ওয়েবপেজ design করে।</dd>
</dl>কী শিখলেন: Bullet, serial এবং term-description list তৈরি হবে।
অধ্যায় ৭ — Table
সারি-কলামের তথ্য সঠিকভাবে দেখানো।
Layout তৈরির জন্য table ব্যবহার করবেন না। Table কেবল tabular data-এর জন্য।
সম্পূর্ণ table
<table>
<caption>শিক্ষার্থীদের ফলাফল</caption>
<thead>
<tr>
<th scope="col">নাম</th>
<th scope="col">বিষয়</th>
<th scope="col">নম্বর</th>
</tr>
</thead>
<tbody>
<tr>
<td>Rahim</td>
<td>HTML</td>
<td>90</td>
</tr>
<tr>
<td>Karim</td>
<td>HTML</td>
<td>85</td>
</tr>
</tbody>
<tfoot>
<tr>
<th colspan="2" scope="row">গড়</th>
<td>87.5</td>
</tr>
</tfoot>
</table>কী শিখলেন: caption, header, body ও footer-সহ accessible table।
অধ্যায় ৮ — Form সম্পূর্ণ
Login, registration, contact ও data collection form।
<label>-এর for এবং <input>-এর id একই রাখুন। এতে label-এ click করলেও input select হয়।
সম্পূর্ণ registration form
<form action="/register" method="post">
<fieldset>
<legend>Account Information</legend>
<label for="name">পূর্ণ নাম</label>
<input type="text" id="name" name="name" required minlength="3">
<label for="email">ইমেইল</label>
<input type="email" id="email" name="email" required autocomplete="email">
<label for="password">Password</label>
<input type="password" id="password" name="password" required minlength="8">
<label for="birthdate">জন্মতারিখ</label>
<input type="date" id="birthdate" name="birthdate">
<label for="country">দেশ</label>
<select id="country" name="country">
<option value="">একটি দেশ নির্বাচন করুন</option>
<option value="bd">Bangladesh</option>
<option value="in">India</option>
</select>
<p>লিঙ্গ</p>
<label><input type="radio" name="gender" value="male"> পুরুষ</label>
<label><input type="radio" name="gender" value="female"> নারী</label>
<label>
<input type="checkbox" name="terms" required>
আমি শর্তাবলি মেনে নিচ্ছি
</label>
<label for="message">নিজের সম্পর্কে</label>
<textarea id="message" name="message" rows="4"></textarea>
<button type="submit">Register</button>
<button type="reset">Reset</button>
</fieldset>
</form>কী শিখলেন: Browser built-in validation-সহ একটি পূর্ণ form।
গুরুত্বপূর্ণ input type
<input type="text">
<input type="email">
<input type="password">
<input type="number" min="1" max="100">
<input type="date">
<input type="time">
<input type="color">
<input type="range" min="0" max="100">
<input type="file" accept="image/*">
<input type="search">
<input type="url">
<input type="tel">
<input type="hidden" name="token" value="abc123">কী শিখলেন: Input-এর type অনুযায়ী browser আলাদা control ও validation দেয়।
অধ্যায় ৯ — Semantic Layout
অর্থপূর্ণভাবে ওয়েবপেজের structure তৈরি।
<header><nav><main><section><article><aside><footer>Professional page layout
<body>
<header>
<h1>My Website</h1>
<nav aria-label="Main navigation">
<a href="/">Home</a>
<a href="/about">About</a>
</nav>
</header>
<main>
<section aria-labelledby="services-title">
<h2 id="services-title">Services</h2>
<article>
<h3>Web Design</h3>
<p>Service details...</p>
</article>
</section>
<aside>
<h2>Related links</h2>
</aside>
</main>
<footer>
<p>© 2026 My Website</p>
</footer>
</body>কী শিখলেন: Semantic tag search engine ও screen reader-কে page structure বুঝতে সাহায্য করে।
অধ্যায় ১০ — Audio, Video ও Iframe
মাল্টিমিডিয়া এবং অন্য পেজ embed করা।
Audio ও video
<audio controls preload="metadata">
<source src="audio/song.mp3" type="audio/mpeg">
আপনার browser audio support করে না।
</audio>
<video controls width="640" poster="poster.jpg" preload="metadata">
<source src="video/movie.mp4" type="video/mp4">
<track src="subtitles-bn.vtt" kind="subtitles" srclang="bn" label="বাংলা">
আপনার browser video support করে না।
</video>কী শিখলেন: Controls, poster ও subtitle-সহ media player।
Iframe
<iframe
src="https://example.com"
title="Example website preview"
width="600"
height="400"
loading="lazy"
sandbox="allow-scripts">
</iframe>কী শিখলেন: Iframe-এ অন্য page embed করা যায়; সব website embedding অনুমতি দেয় না।
অধ্যায় ১১ — Interactive HTML Elements
details, summary, dialog, progress ও meter।
Interactive elements
<details>
<summary>উত্তর দেখতে click করুন</summary>
<p>HTML ওয়েবপেজের structure তৈরি করে।</p>
</details>
<label for="course-progress">Course progress</label>
<progress id="course-progress" value="70" max="100">70%</progress>
<label for="score">Score</label>
<meter id="score" min="0" max="100" low="40" high="80" optimum="100" value="85">85</meter>
<dialog id="infoDialog">
<p>এটি একটি dialog box।</p>
<button onclick="infoDialog.close()">Close</button>
</dialog>
<button onclick="infoDialog.showModal()">Dialog খুলুন</button>কী শিখলেন: JavaScript কম ব্যবহার করেও কিছু interactive UI তৈরি করা যায়।
অধ্যায় ১২ — Head, Meta ও SEO
Browser, search engine ও social sharing-এর প্রয়োজনীয় তথ্য।
Professional head
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>বাংলা HTML কোর্স | Zero to Pro</title>
<meta name="description" content="শুরু থেকে HTML শেখার সম্পূর্ণ বাংলা কোর্স।">
<meta name="author" content="Your Name">
<meta name="robots" content="index, follow">
<link rel="canonical" href="https://example.com/html-course">
<link rel="icon" href="favicon.ico">
<link rel="stylesheet" href="style.css">
<meta property="og:title" content="বাংলা HTML কোর্স">
<meta property="og:description" content="Zero থেকে HTML শিখুন">
<meta property="og:image" content="https://example.com/cover.jpg">
<meta property="og:url" content="https://example.com/html-course">
<meta property="og:type" content="website">
</head>কী শিখলেন: SEO, social sharing, favicon এবং responsive setup।
অধ্যায় ১৩ — Accessibility
সবার জন্য ব্যবহারযোগ্য HTML লেখা।
Accessible HTML
<html lang="bn">
<body>
<a href="#main-content" class="skip-link">মূল content-এ যান</a>
<header>
<nav aria-label="প্রধান navigation">...</nav>
</header>
<main id="main-content">
<h1>একটি পরিষ্কার প্রধান শিরোনাম</h1>
<img src="chart.png" alt="২০২৬ সালের বিক্রয় ২৫ শতাংশ বেড়েছে">
<label for="search">খুঁজুন</label>
<input id="search" type="search" name="q">
<button type="button" aria-label="Menu বন্ধ করুন">×</button>
</main>
</body>
</html>কী শিখলেন: ভাষা, heading order, alt, label, landmark ও accessible name ঠিক রাখা হয়েছে।
অধ্যায় ১৪ — Professional Best Practices
Clean code, validation, performance ও security basics।
ভালো বনাম খারাপ HTML
<!-- ভালো -->
<button type="button">Save</button>
<img src="product.jpg" alt="কালো leather bag" width="600" height="400">
<h2>Product Details</h2>
<!-- খারাপ -->
<div onclick="save()">Save</div>
<img src="product.jpg">
<h4>Product Details</h4>কী শিখলেন: Native element, alt text এবং সঠিক heading hierarchy ব্যবহার করুন।
Project folder
my-website/
├── index.html
├── about.html
├── contact.html
├── css/
│ └── style.css
├── js/
│ └── app.js
├── images/
│ ├── logo.png
│ └── hero.jpg
└── files/
└── brochure.pdfকী শিখলেন: বড় project-এ file type অনুযায়ী folder সাজান।
অধ্যায় ১৫ — Mini Projects
নিজে হাতে তৈরি করে শেখা নিশ্চিত করুন।
Project 1 — Personal profile
<!DOCTYPE html>
<html lang="bn">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>আমার Profile</title>
</head>
<body>
<header>
<h1>রহিম ইসলাম</h1>
<p>Beginner Web Developer</p>
<nav aria-label="Page sections">
<a href="#about">About</a>
<a href="#skills">Skills</a>
<a href="#contact">Contact</a>
</nav>
</header>
<main>
<section id="about">
<h2>আমার সম্পর্কে</h2>
<img src="profile.jpg" alt="রহিম ইসলামের ছবি" width="200">
<p>আমি HTML শিখছি এবং ওয়েবসাইট তৈরি করতে ভালোবাসি।</p>
</section>
<section id="skills">
<h2>দক্ষতা</h2>
<ul>
<li>HTML</li>
<li>Basic CSS</li>
</ul>
</section>
<section id="contact">
<h2>যোগাযোগ</h2>
<form>
<label for="visitor-name">আপনার নাম</label>
<input id="visitor-name" name="name" required>
<label for="visitor-message">Message</label>
<textarea id="visitor-message" name="message" required></textarea>
<button type="submit">Send</button>
</form>
</section>
</main>
<footer><p>© 2026 রহিম ইসলাম</p></footer>
</body>
</html>কী শিখলেন: এই project নিজে না দেখে আবার লিখুন।
আরও project challenge
1. একটি Restaurant Menu page
2. একটি School Result table
3. একটি Registration form
4. একটি News article page
5. একটি Product details page
6. তিন পেজের website: Home, About, Contactকী শিখলেন: প্রতিটি project-এ semantic layout, accessible form এবং সঠিক heading ব্যবহার করুন।
অনুশীলন checklist
HTML Tag Reference
আধুনিক HTML-এর গুরুত্বপূর্ণ ট্যাগ এক নজরে।
| বিভাগ | ট্যাগসমূহ | ব্যবহার |
|---|---|---|
| ডকুমেন্ট | <html> <head> <body> <title> <meta> <link> <style> <script> <noscript> <base> | Page setup ও resource |
| লেখা | <h1–h6> <p> <br> <hr> <strong> <em> <b> <i> <u> <mark> <small> <del> <ins> <sub> <sup> <pre> <code> <blockquote> <q> <cite> <abbr> <address> <time> <data> <kbd> <samp> <var> <bdi> <bdo> <wbr> | Text content ও meaning |
| Structure | <header> <nav> <main> <section> <article> <aside> <footer> <div> <span> | Page layout ও semantic sections |
| Link ও Media | <a> <img> <picture> <source> <figure> <figcaption> <audio> <video> <track> <iframe> <embed> <object> <map> <area> <canvas> <svg> | Navigation, image ও multimedia |
| List | <ul> <ol> <li> <dl> <dt> <dd> <menu> | তালিকা |
| Table | <table> <caption> <colgroup> <col> <thead> <tbody> <tfoot> <tr> <th> <td> | সারি-কলামের data |
| Form | <form> <label> <input> <textarea> <select> <option> <optgroup> <button> <fieldset> <legend> <datalist> <output> | User input সংগ্রহ |
| Interactive | <details> <summary> <dialog> <progress> <meter> <template> <slot> | Built-in interactive UI |
নোট: কিছু পুরোনো tag—যেমন
<center>, <font>, <marquee>—obsolete। এগুলোর বদলে CSS ব্যবহার করুন।Final Quiz
নিজের শেখা যাচাই করুন।
1. ব্যবহারকারী যা দেখে, তা কোন অংশে থাকে?
2. লিংক তৈরির ট্যাগ কোনটি?
3. ছবির বিকল্প বর্ণনা কোন attribute-এ লেখা হয়?
4. Form field-এর নাম বোঝাতে কোন tag সবচেয়ে সঠিক?
5. মূল content-এর জন্য কোন semantic tag?
6. Table-এর একটি row কোন tag?
7. একটি পেজের প্রধান heading সাধারণত কোনটি?
8. নতুন tab-এ link খোলার attribute value কোনটি?
কখন বলবেন HTML সম্পূর্ণ হয়েছে?
শুধু পড়া নয়—নিজে তৈরি করতে পারলেই শেখা সম্পূর্ণ।
এই কোর্স শেষ করার মানদণ্ড: কোনো tutorial না দেখে semantic structure, links, images, lists, table, accessible form, audio/video এবং professional head metadata-সহ ৩ পেজের website তৈরি করতে পারা। HTML-এর পরে design-এর জন্য CSS এবং interaction-এর জন্য JavaScript শিখবেন।