HTML5: পেজের কাঠামো, ট্যাগ, অ্যাট্রিবিউট, টেবিল ও ফর্ম

HTML কী

HTML (HyperText Markup Language) ওয়েব পেজের কাঠামো ও বিষয়বস্তু বর্ণনা করে। এটি Markup language, প্রোগ্রামিং ভাষা নয়: এতে লুপ বা শর্ত নেই। HTML উদ্ভাবন করেন Tim Berners-Lee।

• ফাইলের এক্সটেনশন .html বা .htm।
• ট্যাগ লেখা হয় কোণ বন্ধনীতে: <p> শুরু, </p> শেষ।
• Element = শুরুর ট্যাগ + বিষয়বস্তু + শেষের ট্যাগ।
• Attribute শুরুর ট্যাগের ভেতরে অতিরিক্ত তথ্য দেয়: <a href="page.html">।
• HTML ট্যাগ case-insensitive, তবে ছোট হাতের অক্ষরে লেখাই নিয়ম।

HTML5 পেজের কাঠামো

<!DOCTYPE html>
<html lang="bn">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>আমার প্রথম পেজ</title>
  <link rel="stylesheet" href="style.css">
</head>
<body>
  <h1>স্বাগতম</h1>
  <p>এটি একটি অনুচ্ছেদ।</p>
</body>
</html>

• <!DOCTYPE html> ব্রাউজারকে জানায় এটি HTML5 ডকুমেন্ট।
• <head>-এর জিনিস পেজে সরাসরি দেখা যায় না; <title> দেখা যায় ব্রাউজারের ট্যাবে।
• বাংলা ঠিকমতো দেখাতে <meta charset="UTF-8"> দরকার।
• দৃশ্যমান সব বিষয়বস্তু থাকে <body>-এ।

জরুরি ট্যাগ

Link-এর অ্যাট্রিবিউট

• href: গন্তব্য। ইমেইলের জন্য href="mailto:info@example.com", ফোনের জন্য href="tel:..."।
• target="_blank": নতুন ট্যাবে খোলে।
• একই পেজের অংশে যেতে: <a href="#contact">, আর গন্তব্যে id="contact"।

Image-এর অ্যাট্রিবিউট

• src: ছবির পথ (আবশ্যক)।
• alt: ছবি না এলে বা স্ক্রিন রিডারের জন্য বিকল্প লেখা।
• width, height: মাপ।

Ordered list-এর ধরন

<ol type="A"> দিলে A, B, C; type="a" ছোট অক্ষর; type="I" রোমান; type="1" সংখ্যা (ডিফল্ট)। start="5" দিলে ৫ থেকে গোনা শুরু।

Void (খালি) এলিমেন্ট

যেসব ট্যাগের শেষের ট্যাগ নেই: <br>, <hr>, <img>, <input>, <meta>, <link>।

Block বনাম Inline

• Block: নতুন লাইনে শুরু হয়, পুরো প্রস্থ নেয়। <div>, <p>, <h1>, <ul>, <table>, <form>।
• Inline: লাইনের ভেতরে থাকে, শুধু দরকারি জায়গা নেয়। <span>, <a>, <img>, <strong>, <em>।

টেবিল

<table border="1">
  <caption>ফলাফল</caption>
  <tr>
    <th>নাম</th>
    <th colspan="2">নম্বর</th>
  </tr>
  <tr>
    <td rowspan="2">রহিম</td>
    <td>বাংলা</td>
    <td>78</td>
  </tr>
  <tr>
    <td>ইংরেজি</td>
    <td>81</td>
  </tr>
</table>

• <tr> সারি, <th> হেডার সেল (ডিফল্টে মোটা ও মাঝখানে), <td> সাধারণ সেল।
• colspan কয়েকটি কলাম জোড়া লাগায়, rowspan কয়েকটি সারি জোড়া লাগায়।
• বড় টেবিলে <thead>, <tbody>, <tfoot> দিয়ে ভাগ করা যায়।

ফর্ম

<form action="save.php" method="post">
  <label for="name">নাম</label>
  <input type="text" id="name" name="name" required>

  <input type="email" name="email" placeholder="you@example.com">
  <input type="password" name="pass">

  <input type="radio" name="gender" value="m"> পুরুষ
  <input type="radio" name="gender" value="f"> নারী

  <input type="checkbox" name="agree"> শর্তে রাজি

  <select name="district">
    <option>ঢাকা</option>
    <option>রাজশাহী</option>
  </select>

  <textarea name="address" rows="3"></textarea>
  <button type="submit">সাবমিট</button>
</form>

• action: ডেটা কোথায় যাবে, method: GET (ডেটা URL-এ দেখা যায়) বা POST (রিকোয়েস্টের body-তে যায়)।
• Radio: একই name-এর মধ্যে একটিই বাছা যায়। Checkbox: একাধিক বাছা যায়।
• name অ্যাট্রিবিউট না থাকলে সেই ঘরের মান সার্ভারে যায় না।
• HTML5-এর নতুন input type: email, number, date, color, range, url, tel, search।

HTML5 Semantic ট্যাগ

<header>, <nav>, <main>, <section>, <article>, <aside>, <footer>, <figure>, <figcaption>। এগুলো দেখতে <div>-এর মতো হলেও ট্যাগের নামেই অংশটির অর্থ বোঝা যায়, যা সার্চ ইঞ্জিন ও স্ক্রিন রিডারের কাজে লাগে।

মাল্টিমিডিয়া: <audio>, <video> (controls অ্যাট্রিবিউটসহ), আঁকার জন্য <canvas> (JavaScript দিয়ে আঁকা হয়) ও <svg>।

বাদ পড়া পুরনো ট্যাগ: <font>, <center>, <frame>, <marquee>; এগুলোর কাজ এখন CSS দিয়ে করা হয়।

Entity

পরীক্ষায় যা আসে

• সবচেয়ে বড় heading h1, সবচেয়ে ছোট h6।
• লিংকের ট্যাগ <a>, গন্তব্য href; নতুন ট্যাবে target="_blank"।
• ছবির বিকল্প লেখা alt।
• সেল জোড়া: কলাম colspan, সারি rowspan।
• HTML5 doctype: <!DOCTYPE html>।
• <title> থাকে <head>-এ, দেখা যায় ব্রাউজারের ট্যাবে।

পরীক্ষার ফাঁদ

• HTML প্রোগ্রামিং ভাষা নয়, Markup language।
• <link> দিয়ে CSS ফাইল যুক্ত হয়; পেজে ক্লিকযোগ্য লিংক বানায় <a>।
• <br>-এর কোনো </br> নেই।
• পাসওয়ার্ড ফর্ম GET দিয়ে পাঠালে পাসওয়ার্ড URL-এ দেখা যায়; এমন ফর্মে POST ব্যবহার করুন।