Html এর সম্পূর্ণ ধারণা

নিচে লিখিত হয়েছে HTML টিউটোরিয়াল – গঠন ও ট্যাগ ব্যাখ্যা সহ। প্রতিটি অংশের সাথে কোড উদাহরণ থাকবে, যাতে আপনি সরাসরি অনুধাবন করতে পারেন। স্বীকৃতি রাখুন: HTML হচ্ছে ওয়েবপেজের “কঙ্কাল” বা “স্ট্রাকচার”। CSS ও JavaScript এতে স্টাইল ও ইন্টারেক্টিভিটি যোগ করে। এখানে আমরা HTML-এর মৌলিক থেকে সামান্য উন্নত বিষয়ও কভার করবো।

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

HTML ফাইল সাধারণত .html এক্সটেনশন নিয়ে থাকে। HTML পেজের বেসিক টেমপ্লেট দেখতে এরকম হয়:

<!DOCTYPE html>
<html lang="bn">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>আমার প্রথম ওয়েবপেজ</title>
    <!-- CSS ফাইল লিঙ্ক করতে: -->
    <!-- <link rel="stylesheet" href="styles.css"> -->
</head>
<body>
    <!-- আপনার কন্টেন্ট এখানে যাবে -->
    <h1>স্বাগতম!</h1>
    <p>এটি আমার প্রথম HTML পেজ।</p>
</body>
</html>

<!DOCTYPE html>: ডকুমেন্টের শীর্ষে লিখতে হয়। এটি ব্রাউজারকে বলে HTML5 ব্যবহার হচ্ছে।
<html lang="bn">: ডকুমেন্টের রুট ট্যাগ, এখানে lang="bn" দিয়ে ভাষা বাংলা সেট করেছি।
<head>: মেটাডেটা (metadata) যেমন পেজের টাইটেল, চ্যারসেট, স্টাইলশিট লিঙ্ক, স্ক্রিপ্ট লিঙ্ক ইত্যাদি থাকে।
<meta charset="UTF-8">: ক্যারেক্টার এনকোডিং ঠিক করে; বাংলা ঠিক দেখানোর জন্য UTF-8 দরকার।
<meta name="viewport" content="width=device-width, initial-scale=1.0">: রেসপন্সিভ ডিজাইনের জন্য প্রয়োজনীয়। মোবাইল ডিভাইসে ভালোভাবে স্কেল হবে।
<title>: ব্রাউজারের ট্যাব-এ পেজের নাম দেখায়।
<body>: পেজে দৃশ্যমান সব এলিমেন্ট এখানে থাকে। ইউজার যেটা দেখে, সব body এর মধ্যে থাকবে।

২. ব্লক-লেভেল vs ইনলাইন এলিমেন্ট

Block-level elements: সম্পূর্ণ লাইন জুড়ে বিস্তৃত হয়, নতুন লাইনে শুরু এবং শেষ হয়। উদাঃ <div>, <p>, <h1>–<h6>, <ul>, <ol>, <li>, <section>, <header>, <footer> ইত্যাদি।
Inline elements: শুধুমাত্র প্রয়োজনমতো জায়গা নেয়, সবার মধ্যে লাইনে থাকতে পারে। উদাঃ <a>, <span>, <img>, <strong>, <em>, <input> ইত্যাদি।

৩. মৌলিক ট্যাগ ও তাদের ব্যবহার

৩.১ হেডিংস (Headings)

<h1> থেকে <h6> পর্যন্ত, <h1> সবচেয়ে বড়, <h6> সবচেয়ে ছোট। SEO ও অ্যাক্সেসিবিলিটির জন্য উপযুক্ত হায়ারার্কি মেনে হেডিংস দিন।

<h1>প্রধান শিরোনাম</h1>
<h2>সেকশন শিরোনাম</h2>
<h3>উপ-শিরোনাম</h3>

৩.২ প্যারাগ্রাফ (Paragraph)

<p>: টেক্সট ব্লক তৈরি করে।

<p>এটি একটি প্যারাগ্রাফ। এখানে আপনি সাধারণ লেখালেখি রাখবেন।</p>

৩.৩ লিঙ্ক (Anchor)

<a href="URL">লিংকের টেক্সট</a>
href attribute-এ URL দিতে হয়।
যদি নতুন ট্যাবে খুলতে চান: <a href="https://example.com" target="_blank" rel="noopener noreferrer">Visit Example</a>
rel="noopener noreferrer" নিরাপত্তার জন্য ভালো প্র্যাকটিস যখন target="_blank" থাকে।

<p><a href="https://www.google.com" target="_blank" rel="noopener noreferrer">Google-এ যান</a></p>

৩.৪ ইমেজ (Image)

<img src="path/to/image.jpg" alt="বিকল্প লেখ্য">
alt attribute-এ সংক্ষেপে বর্ণনা রাখুন; SEO ও অ্যাক্সেসিবিলিটির জন্য গুরুত্বপূর্ন।
Width/height attribute (প্রয়োজনমতো CSS দিয়ে স্টাইল করুন)।

<img src="images/photo.jpg" alt="প্রাকৃতিক দৃশ্য">

৩.৫ লিস্ট (Lists)

Unordered List: <ul> এবং ভেতরে <li>
Ordered List: <ol> এবং <li>

<ul>
    <li>ফল</li>
    <li>সবজি</li>
    <li>দুধ</li>
</ul>

<ol>
    <li>প্রথম ধাপ</li>
    <li>দ্বিতীয় ধাপ</li>
    <li>তৃতীয় ধাপ</li>
</ol>

৩.৬ টেবিল (Table)

<table>, <thead>, <tbody>, <tr>, <th>, <td> ইত্যাদি।

<table border="1">
    <thead>
        <tr>
            <th>নাম</th>
            <th>বয়স</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>রফিক</td>
            <td>২৫</td>
        </tr>
        <tr>
            <td>সাবিনা</td>
            <td>২৮</td>
        </tr>
    </tbody>
</table>

সাধারণত CSS দিয়ে borders, padding ইত্যাদি স্টাইল করি; এখানে সহজে বুঝানোর জন্য border="1" দিয়েছি।

৩.৭ ফর্ম (Form) – বেসিক

Form দিয়ে ইউজার ইনপুট পাঠানো হয় সার্ভারে।

<form action="/submit" method="POST">
    <label for="name">নাম:</label>
    <input type="text" id="name" name="name" placeholder="আপনার নাম লিখুন" required>
    <br>
    <label for="email">ইমেল:</label>
    <input type="email" id="email" name="email" placeholder="you@example.com" required>
    <br>
    <label for="password">পাসওয়ার্ড:</label>
    <input type="password" id="password" name="password" required>
    <br>
    <label>লিঙ্গ:</label>
    <input type="radio" id="male" name="gender" value="male">
    <label for="male">পুরুষ</label>
    <input type="radio" id="female" name="gender" value="female">
    <label for="female">মহিলা</label>
    <br>
    <label for="country">দেশ:</label>
    <select id="country" name="country">
        <option value="bd">বাংলাদেশ</option>
        <option value="in">ভারত</option>
        <option value="us">USA</option>
    </select>
    <br>
    <label for="bio">বায়ো:</label>
    <textarea id="bio" name="bio" rows="4" cols="30" placeholder="আপনার সম্পর্কে লিখুন"></textarea>
    <br>
    <button type="submit">জমা দিন</button>
</form>

<form action="..." method="GET/POST">: action হল কোথায় ডেটা যাবে, method GET বা POST ইত্যাদি।
<label for="...">: ইনপুটের সাথে সম্পর্কিত টেক্সট; accessibility এর জন্য দরকার। for attribute দিয়ে ইনপুটের id উল্লেখ করতে হয়।
Input টাইপ: text, email, password, radio, checkbox, number, date, file ইত্যাদি।
<select>, <option>: ড্রপডাউন।
<textarea>: বড় টেক্সট ইনপুটের জন্য।
<button type="submit">: সাবমিশন শুরুর বোতাম।

৩.৮ সেম্যানটিক ট্যাগ (Semantic Tags)

HTML5 এ অনেক সেম্যানটিক এলিমেন্ট এসেছে যা কোডের অর্থ স্পষ্ট করে দেয়:

<header>: পেজ বা সেকশনের হেডার।
<nav>: ন্যাভিগেশন লিঙ্কের গ্রুপ।
<main>: পেজের প্রধান কন্টেন্ট (প্রতি পেজে একটি মাত্র main থাকা উচিত)।
<section>: থিম্যাটিক সেকশন।
<article>: স্বয়ংসম্পূর্ণ কন্টেন্ট, যেমন ব্লগ পোস্ট।
<aside>: পাশের নোট বা সাইডবার।
<footer>: পেজ বা সেকশনের ফুটার।
<figure> এবং <figcaption>: ইমেজ বা ডায়াগ্রাম এর ক্যাপশনসহ গ্রুপিং।
<details> ও <summary>: এক্সপ্যান্ড/কল্যাপ্সযোগ্য কন্টেন্ট ব্লক।

<body>
    <header>
        <h1>আমার ওয়েবসাইট</h1>
        <nav>
            <ul>
                <li><a href="index.html">হোম</a></li>
                <li><a href="about.html">আমাদের সম্পর্কে</a></li>
                <li><a href="contact.html">যোগাযোগ</a></li>
            </ul>
        </nav>
    </header>

    <main>
        <article>
            <h2>ব্লগ পোস্টের শিরোনাম</h2>
            <p>এখানে পোস্টের কন্টেন্ট থাকবে...</p>
        </article>
        <aside>
            <h3>সাধারণ তথ্য</h3>
            <p>সাইডবারে প্রদর্শিত হবে...</p>
        </aside>
    </main>

    <footer>
        <p>&copy; 2025 আমার ওয়েবসাইট</p>
    </footer>
</body>

৩.৯ কমেন্ট (Comments)

HTML এ মন্তব্য দিতে  ব্যবহার করা হয়।

<!-- এই লাইনটি শুধুমাত্র কোডে মেমো রাখার জন্য; ব্রাউজারে দেখাবে না -->

৪. অ্যাট্রিবিউট (Attributes) ব্যাখ্যা

প্রায় প্রতিটি ট্যাগে বিভিন্ন অ্যাট্রিবিউট থাকতে পারে, যেমন:

Universal attributes: id, class, style, title, data-* (custom data attributes)
- id: ইউনিক ওয়ান-পার-পেজ; JavaScript/CSS সিলেকশন অথবা anchor link এর জন্য উপযোগী।
- class: CSS/JS সিলেকশন বা বহুল ব্যবহারের স্টাইলের জন্য।
- data-*: কাস্টম ডেটা স্টোর করতে; JS-এ access via element.dataset।
- style: inline CSS (কম ব্যবহারই ভালো, কারণ maintainability কমে)।
- title: hover করলে টুলটিপ হিসেবে দেখায়।
Specific attributes: যেমন <a>-তে href, <img>-এ src ও alt, <form>-এ action/method, <input>-এ type, name, placeholder, required, ইত্যাদি।

উদাহরণ:

<p id="intro" class="text-muted" title="ভূমিকা">এটি ভূমিকার প্যারাগ্রাফ।</p>

৫. ফাইল স্ট্রাকচার ও বেস্ট প্র্যাকটিস

ফোল্ডার স্ট্রাকচার:
- index.html
- css/ ফোল্ডারে CSS ফাইল: css/styles.css
- js/ ফোল্ডারে JS ফাইল: js/main.js
- images/ ফোল্ডারে ছবি
- fonts/ প্রয়োজন হলে
External CSS ও JS লিঙ্ক:
```

<link rel="stylesheet" href="css/styles.css">


<script src="js/main.js"></script>
```
এর ফলে HTML ক্লিন থাকে, CSS ও JS আলাদা ফাইলে থাকে, maintain করা সহজ হয়।
Indentation ও Formatting:
- ভালোভাবে indent করুন, যাতে কোড রিডেবল হয়।
- প্রতিটি nested ট্যাগ ২ বা ৪ স্পেস ইন্ডেন্ট করুন।
- ব্রাউজারে DevTools-এ Inspect করে structure বুঝতে পারেন এবং সমস্যা সনাক্ত করতে পারেন।
Accessibility (A11y):
- alt attribute ইমেজে দিতে ভুলবেন না।
- ফর্মে label for দিন।
- সেম্যানটিক ট্যাগ ব্যবহার করুন: screen reader ভালোভাবে বুঝতে পারে।
- ARIA attributes প্রয়োজনে (advanced পর্যায়ে আপনি শিখবেন)।
- কালার কনট্রাস্ট ঠিক রাখুন (CSS-এ): viz., কালার ব্লাইন্ড থেকে সুবিধা রাখতে।
Responsive Design এর প্রস্তুতি:
- <meta name="viewport" content="width=device-width, initial-scale=1.0"> রাখতে হবে।
- CSS media queries পরে শেখবেন; তবে HTML-এ structure রাখুন যেটা ফ্লেক্সিবল।
- সেম্যানটিক ও লজিক্যাল লেআউট (যেমন <header>, <main>, <footer>) দিয়ে রেসপন্সিভ ডিজাইন সহজ হয়।

৬. প্র্যাকটিস এক্সারসাইজ

এক্সারসাইজ ১: বেসিক পেজ তৈরি

একটি HTML ফাইল (index.html) তৈরি করুন।
<head>-এ UTF-8 charset, viewport, title রাখুন।
<body>-এ:
- একটি <header> যেখানে <h1> এবং একটি <nav> থাকবে, ২-৩টি লিংক সহ।
- একটি <main> যেখানে:
  - একটি <article>: শিরোনাম <h2> এবং কয়েকটি <p> টেক্সট।
  - একটি <aside>: একটি ছোট নোট বা বক্স ( or )।
- একটি <footer>: কপিরাইট বা যোগাযোগ লিংক।
ফাইল ব্রাউজারে খুলে দেখুন।

এক্সারসাইজ ২: ফর্ম তৈরি

একটি contact.html ফাইল তৈরি করুন।
<form>-এ: নাম, ইমেল, ফোন নম্বর (type="tel"), বার্তা (textarea), এবং সাবমিট বোতাম।
প্রতিটি ইনপুটের সাথে <label> দিন।
ব্রাউজারে Required validation দেখুন (required attribute ব্যবহার করে)।

এক্সারসাইজ ৩: লিস্ট ও টেবিল

একটি ordered list (ol) তৈরি করে ৫টি আপনার পছন্দের কাজ বা টপিক লিস্ট করুন।
একটি টেবিল তৈরি করুন যেটাতে ৩ কলাম (উদাহরণ: Product, Price, Quantity) এবং ৩-৪টি রো আপনার পছন্দমত ডামি ডেটা দিয়ে দেখুন।

এক্সারসাইজ ৪: ইমেজ ও লিঙ্ক

images/ ফোল্ডারে কয়েকটি ছবি রাখুন (আপনার নিজের বা placeholder)।
HTML-এ <img> দিয়ে দেখান, alt attribute ঠিক ভাবে দিন।
যেকোনো ভিন্ন পেজে (e.g., about.html) লিংক দিন <a> দিয়ে।
external লিঙ্ক (যেমন Wikipedia) target="_blank" দিয়ে খুলুন।

প্রাকটিস শেষে DevTools (Chrome/Firefox) ওপেন করে Elements ট্যাবে Structure দেখুন, Console-এ কোন error আছে কিনা (যেমন missing alt, broken image path) চেক করুন।

৭. Next Steps

আজ এই HTML ফান্ডামেন্টাল ভালোভাবে প্র্যাকটিস করুন।
পরবর্তী অধ্যায়ে CSS শেখা হবে: ডিজাইন ও লেআউট।
CSS-এ Box Model, Flexbox, Grid ইত্যাদি শিখে HTML এর structure-এ স্টাইল প্রয়োগ করবেন।
আপনি চাইলে CSS শুরু করার আগে HTML প্র্যাকটিসে কোনো প্রশ্ন থাকলে জানান, আমি সাহায্য করবো।

শিখন চেকলিস্ট (আজকের পরের দিন যাচাই করতে)

HTML ডকুমেন্টের বেসিক টেমপ্লেট বোঝা।
মৌলিক ট্যাগ ব্যবহার (h1-h6, p, a, img, ul/ol/li, table, form) অনুশীলন।
সেম্যানটিক ট্যাগ (header, nav, main, section, article, aside, footer) ব্যবহারে স্বাচ্ছন্দ্য।
Attributes (href, src, alt, id, class, etc.) সঠিকভাবে প্রয়োগ।
DevTools-এ structure দেখার অভ্যাস।

আপনার মন্তব্য / প্রশ্ন:

যদি HTML কোড নিয়ে কোনো জটিলতা (কোনো ট্যাগ ঠিক কাজ না করছে, path সমস্যা, validation error) অনুভব করেন, সেগুলো এখানে শেয়ার করুন। আমি দেখবো।
CSS শিখতে আগ্রহ আছে? থাকলে CSS টিউটোরিয়াল শুরু করার জন্য প্রস্তুত থাকুন—আগামী পোস্টে আমরা CSS Box Model, selectors, প্রাথমিক স্টাইল নিয়ে যাবো।

আপনি আজকের HTML অংশে প্রস্তুত? কোনো সমস্যা বা প্রশ্ন থাকলে বলুন। নয়তো CSS টিউটোরিয়াল শুরু করার জন্য আমাদের ওয়েবসাইট টি ফলি রাখুন ।

Html এর সম্পূর্ণ ধারণা - Html Full Tutorial in Bengali