HTML চিটশিট

HTML (HyperText Markup Language) হলো ওয়েব পেজ তৈরির জন্য একটি মৌলিক ভাষা। এই চিটশিটটি আপনাকে HTML-এর গুরুত্বপূর্ণ ট্যাগ, গঠন এবং ব্যবহার বুঝতে সাহায্য করবে।

১. HTML-এর মৌলিক গঠন

<!DOCTYPE html>
<html lang="bn">
<head>
    <meta charset="UTF-8">
    <title>আমার ওয়েব পেজ</title>
</head>
<body>
    <p>এটি দৃশ্যমান কনটেন্ট।</p>
</body>
</html>

২. সমস্ত HTML ট্যাগ (বিভাগ অনুযায়ী)

২.১ ডকুমেন্ট এবং মেটাডেটা ট্যাগ

ট্যাগ	বর্ণনা
`<!DOCTYPE>`	ডকুমেন্টের ধরন ঘোষণা করে (HTML5)।
`<html>`	পুরো HTML ডকুমেন্টের রুট এলিমেন্ট।
`<head>`	মেটাডেটা এবং ডকুমেন্ট তথ্য ধারণ করে।
`<title>`	ওয়েব পেজের শিরোনাম নির্ধারণ করে।
`<meta>`	মেটাডেটা যোগ করে (যেমন charset, viewport)।
`<link>`	বাহ্যিক ফাইল (CSS) সংযোগ করে।
`<style>`	পেজের অভ্যন্তরীণ CSS স্টাইল নির্ধারণ করে।
`<base>`	সকল লিঙ্কের জন্য বেস URL নির্ধারণ করে।
`<script>`	জাভাস্ক্রিপ্ট কোড বা ফাইল যোগ করে।

উদাহরণ:

<meta charset="UTF-8">
<link rel="stylesheet" href="style.css">
<script src="script.js"></script>

২.২ কনটেন্ট স্ট্রাকচার ট্যাগ

ট্যাগ	বর্ণনা
`<body>`	ওয়েব পেজের দৃশ্যমান কনটেন্ট ধারণ করে।
`<header>`	পেজ বা সেকশনের শিরোনাম অংশ।
`<footer>`	পেজ বা সেকশনের পাদদেশ।
`<main>`	পেজের প্রধান কনটেন্ট।
`<section>`	একটি স্বাধীন বিভাগ।
`<article>`	একটি স্বয়ংসম্পূর্ণ লেখা বা কনটেন্ট।
`<aside>`	পাশের কনটেন্ট (যেমন সাইডবার)।
`<nav>`	নেভিগেশন লিঙ্কের জন্য।
`<div>`	ব্লক-লেভেল কনটেন্ট গ্রুপ করতে।
`<span>`	ইনলাইন কনটেন্ট গ্রুপ করতে।

উদাহরণ:

<header>
    <h1>শিরোনাম</h1>
</header>
<main>
    <section>
        <p>এটি একটি বিভাগ।</p>
    </section>
</main>

২.৩ টেক্সট ফরম্যাটিং ট্যাগ

ট্যাগ	বর্ণনা
`<h1>` - `<h6>`	শিরোনাম (১ থেকে ৬ পর্যন্ত লেভেল)।
`<p>`	প্যারাগ্রাফ।
`<br>`	লাইন ব্রেক।
`<hr>`	অনুভূমিক রেখা।
`<b>`	গাঢ় টেক্সট।
`<i>`	ইটালিক টেক্সট।
`<u>`	আন্ডারলাইন টেক্সট।
`<s>`	স্ট্রাইকথ্রু টেক্সট।
`<strong>`	গুরুত্বপূর্ণ গাঢ় টেক্সট।
`<em>`	জোর দেওয়া ইটালিক টেক্সট।
`<mark>`	হাইলাইট করা টেক্সট।
`<small>`	ছোট টেক্সট।
`<sub>`	সাবস্ক্রিপ্ট টেক্সট (নিচে)।
`<sup>`	সুপারস্ক্রিপ্ট টেক্সট (উপরে)।
`<blockquote>`	উদ্ধৃতি ব্লক।
`<q>`	ছোট উদ্ধৃতি।
`<cite>`	উদ্ধৃতির উৎস।
`<abbr>`	সংক্ষিপ্ত রূপ (যেমন HTML)।
`<address>`	যোগাযোগের তথ্য।
`<pre>`	প্রি-ফরম্যাটেড টেক্সট।
`<code>`	কোডের জন্য।
`<kbd>`	কীবোর্ড ইনপুট দেখাতে।
`<samp>`	প্রোগ্রাম আউটপুট দেখাতে।
`<var>`	ভেরিয়েবল দেখাতে।

উদাহরণ:

<h1>শিরোনাম ১</h1>
<p>এটি একটি <strong>গুরুত্বপূর্ণ</strong> প্যারাগ্রাফ।</p>
<pre>    এটি প্রি-ফরম্যাটেড    </pre>

২.৪ লিঙ্ক এবং মিডিয়া ট্যাগ

ট্যাগ	বর্ণনা
`<a>`	হাইপারলিঙ্ক তৈরি করে।
`<img>`	ছবি যোগ করে।
`<audio>`	অডিও ফাইল যোগ করে।
`<video>`	ভিডিও ফাইল যোগ করে।
`<source>`	মিডিয়ার উৎস নির্দিষ্ট করে।
`<track>`	ভিডিও/অডিওর জন্য সাবটাইটেল।
`<embed>`	বাহ্যিক কনটেন্ট এম্বেড করে।
`<object>`	বাহ্যিক অবজেক্ট (PDF, Flash) যোগ করে।
`<iframe>`	অন্য পেজ এম্বেড করে।

উদাহরণ:

<a href="https://example.com">লিঙ্ক</a>
<img src="image.jpg" alt="ছবি">
<video controls>
    <source src="video.mp4" type="video/mp4">
</video>

২.৫ তালিকা (Lists)

ট্যাগ	বর্ণনা
`<ul>`	আনঅর্ডারড লিস্ট (বুলেট পয়েন্ট)।
`<ol>`	অর্ডারড লিস্ট (সংখ্যা)।
`<li>`	তালিকার আইটেম।
`<dl>`	ডেসক্রিপশন লিস্ট।
`<dt>`	ডেসক্রিপশন টার্ম।
`<dd>`	ডেসক্রিপশন বিবরণ।

উদাহরণ:

<ul>
    <li>আইটেম ১</li>
    <li>আইটেম ২</li>
</ul>
<dl>
    <dt>HTML</dt>
    <dd>ওয়েব পেজ তৈরির ভাষা</dd>
</dl>

২.৬ টেবিল (Tables)

ট্যাগ	বর্ণনা
`<table>`	টেবিল তৈরি করে।
`<tr>`	টেবিলের সারি।
`<th>`	টেবিলের হেডার।
`<td>`	টেবিলের ডেটা।
`<thead>`	টেবিলের হেডার গ্রুপ।
`<tbody>`	টেবিলের বডি গ্রুপ।
`<tfoot>`	টেবিলের ফুটার গ্রুপ।
`<caption>`	টেবিলের ক্যাপশন।
`<colgroup>`	কলাম গ্রুপ।
`<col>`	কলামের বৈশিষ্ট্য নির্ধারণ।

উদাহরণ:

<table>
    <caption>আমার টেবিল</caption>
    <tr>
        <th>নাম</th>
        <th>বয়স</th>
    </tr>
    <tr>
        <td>আনিস</td>
        <td>২৫</td>
    </tr>
</table>

২.৭ ফর্ম (Forms)

ট্যাগ	বর্ণনা
`<form>`	ফর্ম তৈরি করে।
`<input>`	ইনপুট ফিল্ড।
`<textarea>`	বড় টেক্সট এরিয়া।
`<button>`	বাটন।
`<select>`	ড্রপডাউন মেনু।
`<option>`	ড্রপডাউনের অপশন।
`<optgroup>`	অপশন গ্রুপ।
`<label>`	ইনপুটের লেবেল।
`<fieldset>`	ফর্মের গ্রুপ।
`<legend>`	ফিল্ডসেটের শিরোনাম।
`<datalist>`	ইনপুটের জন্য প্রি-ডিফাইন্ড অপশন।
`<output>`	ফর্মের আউটপুট।

উদাহরণ:

<form>
    <label for="name">নাম:</label>
    <input type="text" id="name" name="name">
    <button type="submit">জমা দিন</button>
</form>

২.৮ ইন্টারেক্টিভ ট্যাগ

ট্যাগ	বর্ণনা
`<details>`	ড্রপডাউন বিস্তারিত তথ্য।
`<summary>`	ডিটেইলসের শিরোনাম।
`<dialog>`	ডায়ালগ বক্স।
`<menu>`	মেনু তৈরি করে।
`<menuitem>`	মেনুর আইটেম।

উদাহরণ:

<details>
    <summary>বিস্তারিত দেখুন</summary>
    <p>এটি লুকানো তথ্য।</p>
</details>

২.৯ অন্যান্য ট্যাগ

ট্যাগ	বর্ণনা
`<figure>`	ছবি বা ডায়াগ্রামের গ্রুপ।
`<figcaption>`	ফিগারের ক্যাপশন।
`<time>`	সময় বা তারিখ নির্দেশ করে।
`<data>`	মেশিন-রিডেবল ডেটা।
`<meter>`	পরিমাপ দেখায় (যেমন ০-১০০)।
`<progress>`	কাজের অগ্রগতি দেখায়।
`<canvas>`	গ্রাফিক্স আঁকার জন্য।
`<svg>`	ভেক্টর গ্রাফিক্স।
`<noscript>`	স্ক্রিপ্ট না চললে বিকল্প কনটেন্ট।

উদাহরণ:

<progress value="50" max="100"></progress>

৩. গ্লোবাল অ্যাট্রিবিউট

সব ট্যাগে ব্যবহারযোগ্য:

id: অনন্য আইডি।
class: গ্রুপ আইডি।
style: সরাসরি স্টাইল।
title: টুলটিপ।
lang: ভাষা (যেমন bn)।
data-*: কাস্টম ডেটা।

উদাহরণ:

<p id="para1" class="text" style="color: red;">লাল টেক্সট</p>

৪. কমেন্ট

<!-- এটি একটি কমেন্ট -->

On this page