HTML-এ লিংক, ছবি, টেবিল আর ফর্ম

১ · “হাইপার” মানে লিংক — পাতা থেকে জাল

পর্ব ৩৬-এ আপনি প্রথম ওয়েব পেজ বানিয়েছেন — শিরোনাম, অনুচ্ছেদ, তালিকা। কিন্তু সেই পাতা একা। সে অন্য কোনো পাতার কথা জানে না, কোনো ছবি দেখায় না, আর দর্শক তাকে কিছু বলতেও পারেন না। একটি বইয়ের ছেঁড়া পাতার মতো।

HTML-এর পুরো নাম HyperText Markup Language. এখানে “HyperText” শব্দটিই আসল। সাধারণ লেখা পড়তে হয় শুরু থেকে শেষ, ক্রমানুসারে। হাইপারটেক্সটে লেখার ভেতরে বসানো থাকে লিংক — একটি শব্দে ক্লিক করলেই অন্য পাতায়, অন্য দেশের অন্য সার্ভারে চলে যাওয়া যায়। কোটি কোটি পাতা এভাবে একে অপরের সাথে সুতোয় বাঁধা — মাকড়সার জালের মতো। এ কারণেই নাম World Wide Web.

একটি ছোট শব্দের হিসাব আগে মনে করিয়ে দিই। <a href="about.html">-এ a হলো ট্যাগ, আর href="about.html" হলো একটি attribute — শুরুর ট্যাগের ভেতরে নাম="মান" আকারে লেখা বাড়তি তথ্য, যা বলে ট্যাগটি ঠিক কী করবে। এই পর্বের প্রায় সব কাজ attribute-নির্ভর।

২ · লিংক — <a href>, ঠিকানার ধরন আর লিংকের প্রকারভেদ

লিংক বানায় <a> (anchor) ট্যাগ। href (hypertext reference) attribute-এ লেখা থাকে গন্তব্য, আর শুরু ও শেষ ট্যাগের মাঝের লেখাটি পাতায় নীল, দাগ-টানা হয়ে দেখায়:

<!-- বাইরের সাইট: পূর্ণ ঠিকানা (absolute URL) -->
<a href="https://www.wikipedia.org/">উইকিপিডিয়া</a>

<!-- নিজের সাইটের ভেতরে: বর্তমান পাতা থেকে গোনা (relative URL) -->
<a href="about.html">আমাদের সম্পর্কে</a>
<a href="../index.html">হোম পেজে ফিরুন</a>

<!-- নতুন ট্যাবে খুলবে -->
<a href="https://www.wikipedia.org/" target="_blank" rel="noopener">উইকিপিডিয়া (নতুন ট্যাবে)</a>

<!-- একই পাতার একটি অংশে (bookmark) -->
<a href="#routine">ক্লাস রুটিন দেখুন</a>
...
<h2 id="routine">ক্লাস রুটিন</h2>

<!-- ইমেইল, ফোন আর ডাউনলোড -->
<a href="mailto:office@school.example">অফিসে ইমেইল করুন</a>
<a href="tel:+8801700000000">ফোন করুন</a>
<a href="files/admission-form.pdf" download>ভর্তির ফর্ম (PDF)</a>

Absolute আর relative ঠিকানা

একটি URL-এর তিন অংশ পর্ব ১৩-এ দেখেছেন — protocol (https://), ডোমেইন (school.example), আর path (/site/pages/about.html). লিংকের ঠিকানা লেখার দুই পথ:

• Absolute URL: সব অংশসহ পূর্ণ ঠিকানা। যে পাতা থেকেই লেখা হোক, একই জায়গা বোঝায়। অন্য সাইটে লিংক দিতে এটিই লাগে।
• Relative URL: শুধু পথের অংশ, বর্তমান পাতার অবস্থান থেকে গোনা। ব্রাউজার বর্তমান পাতার ফোল্ডারের সাথে জুড়ে পূর্ণ ঠিকানা বানায়। নিজের সাইটের ভেতরে এটিই ভালো — সাইট অন্য ডোমেইনে সরালেও লিংক ভাঙে না, আর নিজের কম্পিউটারে ফাইল খুলেও পরীক্ষা করা যায়।

পর্ব ২৯-এ কমান্ড লাইনে relative path দেখেছেন — নিয়ম হুবহু এক। ফাঁকা নাম বা ./ মানে “এই ফোল্ডারেই”, ../ মানে “এক ফোল্ডার ওপরে”, আর / দিয়ে শুরু হলে মানে “সাইটের একেবারে গোড়া থেকে” (root-relative). একটি উদাহরণে চার ধরনের ঠিকানা মেলাই:

নতুন ট্যাবে খোলা — target আর rel

target="_blank" লিংকটি নতুন ট্যাবে খোলে। বাইরের সাইটে এমন লিংকে rel="noopener" যোগ করা পুরোনো নিরাপত্তা-অভ্যাস: এটি না থাকলে নতুন পাতাটি জাভাস্ক্রিপ্ট দিয়ে আপনার পুরোনো ট্যাবটিকে চুপিচুপি একটি নকল লগইন পাতায় বদলে দিতে পারত (phishing-এর একটি কৌশল)। আধুনিক ব্রাউজার এখন _blank-এ নিজেই noopener ধরে নেয়, তবু লিখে রাখা ভালো। আর সব লিংক নতুন ট্যাবে খোলাবেন না — দর্শক নিজেই ঠিক করতে চান; নতুন ট্যাব মূলত বাইরের সাইট বা ফর্ম পূরণের মাঝে সাহায্যের পাতার জন্য।

লিংকের প্রকারভেদ — পাঠ্যবইয়ের ভাষায়

Bookmark লিংকে #-এর পরের অংশকে বলে fragment. পাতার কোনো উপাদানে id="routine" দিলেই সেটি গন্তব্য হয়ে যায় — এই পর্বের পাশের সূচিপত্রের প্রতিটি লিংক ঠিক এভাবে কাজ করে (#s1, #s2 …). পুরোনো HTML-এ এর জন্য <a name="..."> লেখা হতো; এখন যেকোনো উপাদানের id-ই যথেষ্ট। mailto: লিংক সুবিধাজনক, তবে ঠিকানাটি পাতায় খোলা থাকে বলে স্প্যাম-প্রোগ্রাম তা সংগ্রহ করতে পারে; অনেক প্রতিষ্ঠান তাই যোগাযোগের ফর্ম ব্যবহার করে। download attribute শুধু নিজের সাইটের ফাইলে কাজ করে — ব্রাউজার ফাইলটি খোলার বদলে নামিয়ে নেয়।

৩ · ছবি — <img>, alt লেখা আর figure

ছবি বসায় <img> ট্যাগ. এর শেষ ট্যাগ নেই — ভেতরে লেখার কিছু নেই, সব তথ্য attribute-এ:

<img src="img/sports-day.jpg"
     alt="বার্ষিক ক্রীড়ায় ১০০ মিটার দৌড়ের শুরু, ছয়জন শিক্ষার্থী"
     width="800" height="450" loading="lazy">

<!-- ছবির সাথে পাতায় দেখানো ক্যাপশন -->
<figure>
  <img src="img/library.jpg" alt="নতুন পাঠাগারের তাকভর্তি বই, জানালার পাশে পড়ার টেবিল" width="800" height="533">
  <figcaption>২০২৬ সালে চালু হওয়া স্কুল পাঠাগার</figcaption>
</figure>

<!-- ছবিই লিংক: লোগোতে চাপলে হোম পেজ -->
<a href="index.html"><img src="img/logo.png" alt="আদর্শ উচ্চ বিদ্যালয় — হোম পেজ" width="120" height="40"></a>

কোন ফরম্যাট কখন

পর্ব ২৮-এ দেখেছেন ছবি কীভাবে pixel আর compression হয়। ওয়েবে সংক্ষেপে: আলোকচিত্রে JPEG (বা নতুন WebP/AVIF — একই মানের ছবিতে আরও ছোট ফাইল); লোগো, স্ক্রিনশট আর স্বচ্ছ পটভূমিতে PNG; আইকন আর রেখাচিত্রে SVG, যা যত বড়ই করুন ঝাপসা হয় না; ছোট নড়াচড়া দেখাতে GIF চলে, তবে ছোট ভিডিও প্রায়ই অনেক হালকা। ফোনে তোলা ৪০০০ পিক্সেল চওড়া ৫ MB-এর ছবি সরাসরি তুলবেন না — ৮০০–১৬০০ পিক্সেলে ছোট করে নিন; গ্রামের দুর্বল মোবাইল নেটে এই পার্থক্য পাতা খোলা আর না খোলার পার্থক্য।

ভালো alt লেখা — accessibility আর SEO

alt লেখা তিন জায়গায় কাজে লাগে। এক, দৃষ্টিপ্রতিবন্ধী দর্শকের screen reader ছবির জায়গায় এটি পড়ে শোনায় — এটাই ওয়েবের accessibility-এর প্রথম নিয়ম। দুই, ছবি না নামলে (ভুল ঠিকানা, ধীর নেট) তার জায়গায় লেখাটি দেখা যায়। তিন, সার্চ ইঞ্জিন ছবি “দেখে” না, alt পড়ে বোঝে। ভালো alt ছোট, নির্দিষ্ট, আর ছবির উদ্দেশ্য বলে:

• খারাপ: alt="image1", alt="ছবি", বা ফাইলের নাম — কিছুই বলে না।
• ভালো: alt="বিজ্ঞান মেলায় সৌরচালিত পানির পাম্পের মডেল দেখাচ্ছে দুই শিক্ষার্থী".
• লিংক-ছবি: alt বলবে গন্তব্য — লোগো-লিংকে “… — হোম পেজ”।
• শুধু সাজসজ্জার ছবি: alt="" (ফাঁকা) — screen reader তখন এড়িয়ে যায়। alt একেবারে বাদ দিলে অনেক screen reader ফাইলের নাম পড়ে ফেলে।

<figure> আর <figcaption> ছবি আর তার ক্যাপশনকে একটি একক হিসেবে বাঁধে — পত্রিকার ছবির নিচের লেখার মতো। ক্যাপশন সবাই দেখেন; alt ছবির বর্ণনা, ক্যাপশন ছবির প্রসঙ্গ — দুটি আলাদা কাজ। আর এক লাইনে responsive image: CSS-এ img { max-width: 100%; height: auto; } দিলে ছবি ফোনের পর্দার বাইরে যায় না; চাইলে srcset দিয়ে ফোনে ছোট আর বড় পর্দায় বড় ফাইল পাঠানো যায়।

৪ · টেবিল — সারি, কলাম আর জোড়া ঘর

পরীক্ষার ফল, ট্রেনের সময়সূচি, পণ্যের দামের তালিকা — যেখানে তথ্য স্বভাবতই সারি আর কলামে থাকে, সেখানে HTML table. গঠন চার স্তরের:

• <table> — পুরো টেবিল; ভেতরে প্রথমে ঐচ্ছিক <caption>, টেবিলের শিরোনাম।
• <tr> (table row) — একটি সারি।
• <th> (table header) — শিরোনামের ঘর; <td> (table data) — সাধারণ ঘর।
• <thead>, <tbody>, <tfoot> — সারিগুলোকে শিরোনাম, মূল অংশ আর সারসংক্ষেপ (যেমন “মোট”) ভাগে বাঁধে। লম্বা টেবিল ছাপলে অনেক ব্রাউজার প্রতি পাতায় thead আবার ছাপে।

<th scope="col"> বলে এটি কলামের শিরোনাম, scope="row" বলে সারির। দেখতে কোনো পার্থক্য নেই, কিন্তু screen reader তখন প্রতিটি ঘরের সাথে পড়ে — “সোমবার, ১০টা: ICT”. শুধু মোটা লেখার জন্য th ব্যবহার করবেন না, আর শিরোনামকে td-তে <b> দিয়ে মোটা করেও কাজ সারবেন না।

border, cellpadding, cellspacing — পাঠ্যবই বনাম আজকের CSS

HSC-র পাঠ্যবই আর পুরোনো অনেক উদাহরণে টেবিলের চেহারা ঠিক করা হয় attribute দিয়ে। পরীক্ষার জন্য এগুলো জানতে হবে, আর জানতে হবে আজকের বিকল্পও:

<!-- পুরোনো ধাঁচ (পাঠ্যবই ও পরীক্ষায় দেখবেন) -->
<table border="1" cellpadding="8" cellspacing="0">
  <caption>অর্ধবার্ষিক পরীক্ষার ফল</caption>
  <tr><th>রোল</th><th>নাম</th><th>ICT</th></tr>
  <tr><td>1</td><td>তানিয়া</td><td>92</td></tr>
</table>

<!-- আজকের ধাঁচ: একই চেহারা CSS দিয়ে -->
<style>
  table { border-collapse: collapse; }        /* cellspacing="0"-এর কাজ */
  th, td { border: 1px solid #555;            /* border="1"-এর কাজ */
           padding: 8px; }                    /* cellpadding="8"-এর কাজ */
</style>

• border: টেবিল আর ঘরের চারপাশে দাগ; border="0" বা না দিলে দাগ নেই।
• cellpadding: ঘরের দেয়াল থেকে ভেতরের লেখার দূরত্ব — বাক্সের ভেতরের ফাঁক। CSS-এ padding.
• cellspacing: দুটি ঘরের দেয়ালের মাঝের ফাঁক — বাক্সে বাক্সে দূরত্ব। CSS-এ border-spacing, আর একেবারে জোড়া দাগ চাইলে border-collapse: collapse.

মনে রাখার কৌশল: padding = ভেতরে (লেখা আর দেয়াল), spacing = বাইরে (ঘর আর ঘর)। cellpadding আর cellspacing HTML5-এ বাতিল (obsolete) — ব্রাউজার এখনো বোঝে, কিন্তু নতুন পাতায় CSS ব্যবহার করুন।

colspan আর rowspan — ক্লাস রুটিনের জোড়া ঘর

স্কুলের রুটিনে প্রায়ই দেখবেন, ব্যবহারিক ক্লাস দুই পিরিয়ড জুড়ে, আর টিফিনের ঘর সব দিনের জন্য একটিই — ওপর থেকে নিচ পর্যন্ত লম্বা। Word বা Excel-এর টেবিলে একে বলে “Merge Cells” (পর্ব ০৯)। HTML-এ:

• colspan="2" — ঘরটি পাশাপাশি দুই কলাম জুড়ে (আড়াআড়ি জোড়া)। ওই সারিতে একটি ঘর কম লিখতে হয়।
• rowspan="3" — ঘরটি ওপর-নিচে তিন সারি জুড়ে (খাড়া জোড়া)। নিচের দুই সারিতে ওই কলামের ঘরটি আর লিখতে হয় না।

ব্রাউজার টেবিলটিকে একটি খালি গ্রিড হিসেবে ভাবে, আর প্রতিটি সারির ঘরগুলো বাঁ থেকে ডানে প্রথম খালি জায়গায় বসায়। আগের কোনো rowspan যে জায়গা দখল করে রেখেছে, তা এড়িয়ে যায়। চার সারি আর পাঁচ কলামের একটি রুটিন ঘর-ঘর করে ভরাট হতে দেখুন:

নিজে চালিয়ে দেখুন — রুটিন আর লিংকের তালিকা

নিচের কোডের ওপরে যে HTML বসানো, তা Run চাপলে আসল পাতার মতো দেখা যাবে: ওপরের রুটিনটি, আর তার নিচে ছয়টি লিংক। ছোট স্ক্রিপ্টটি টেবিলের প্রতিটি সারির ঘর গোনে, আর প্রতিটি লিংকের href ধরে নেয় যে পাতাটি school.example/site/pages/about.html-এ আছে — তারপর পূর্ণ ঠিকানা বের করে, ঠিক যেমন ব্রাউজার করে।

const page = 'https://school.example/site/pages/about.html'; // ধরা যাক পাতাটি এখানে
const tbl = document.getElementById('routine');
let cells = 0, slots = 0;
for (const row of tbl.rows) {
  const list = [...row.cells];
  cells += list.length;
  slots += list.reduce((sum, c) => sum + c.colSpan * c.rowSpan, 0);
  console.log(`row ${row.rowIndex}: ${list.length} cells | ` + list.map(c => c.textContent).join(' | '));
}
console.log(`rows: ${tbl.rows.length}, cells written: ${cells}, grid slots filled: ${slots} (4 x 5 = 20)`);
console.log('---- links ----');
for (const a of document.querySelectorAll('#links a')) {
  const href = a.getAttribute('href');                  // যা লেখা আছে
  console.log(href.padEnd(28), '->', new URL(href, page).href); // যেখানে যাবে
}
document.addEventListener('click', (e) => {             // প্রিভিউতে লিংক চাপলে কোথাও যাবে না
  if (e.target.closest('a')) e.preventDefault();
});

৫ · ফর্ম — দর্শক যখন কথা বলেন

এ পর্যন্ত সব তথ্য গেছে এক দিকে — সার্ভার থেকে দর্শকের কাছে। ফর্ম উল্টো পথ খোলে। <form> ট্যাগের দুটি মূল attribute:

• action: জমা দিলে তথ্য কোন ঠিকানায় যাবে — সার্ভারের যে প্রোগ্রাম তথ্যটি গ্রহণ করবে, যেমন action="/register".
• method: পাঠানোর ধরন — get (না দিলে এটিই) বা post. পর্ব ৩৩-এর HTTP method এরাই।

GET আর POST — খোলা পোস্টকার্ড বনাম খামে ভরা চিঠি

ফর্মের উপাদান

প্রায় সব ঘরই <input> — শুধু type বদলায়। মোবাইলে type অনুযায়ী কিবোর্ডও বদলায়: email-এ @ চিহ্ন, number-এ সংখ্যার প্যাড।

এর বাইরে তিনটি উপাদান: <select> আর তার ভেতরের <option> — ড্রপডাউন তালিকা (জেলা বাছাই); <textarea> — কয়েক লাইনের লেখা (মন্তব্য); আর <button> — বোতাম, যার ভেতরে লেখা বা আইকন রাখা যায়। সম্পর্কিত ঘরগুলোকে <fieldset> দিয়ে বেঁধে <legend>-এ নাম দেওয়া যায় — যেমন তিনটি radio-র ওপরে “বিভাগ”।

label — প্রতিটি ঘরের নাম

<label for="em">ইমেইল</label> <input id="em" ...> — label-এর for আর ঘরের id মিললে দুটি জোড়া লাগে। লাভ দুটি: লেবেলের লেখায় চাপলেও ঘর বাছাই হয় (ছোট radio বা checkbox-এ ফোনে আঙুল দিয়ে চাপা অনেক সহজ), আর screen reader ঘরে ঢুকলে বলে “ইমেইল, লেখার ঘর”। label ছাড়া ঘরটি তাঁর কাছে শুধু “লেখার ঘর” — কী লিখতে হবে বোঝার উপায় নেই। placeholder (ঘরের ভেতরের হালকা উদাহরণ-লেখা) label-এর বিকল্প নয় — লিখতে শুরু করলেই মুছে যায়।

name আর value — আসলে যা পাঠানো হয়

ফর্ম জমা দিলে ব্রাউজার পাতার লেবেল বা নকশা কিছুই পাঠায় না — পাঠায় শুধু name=মান জোড়া. প্রতিটি ঘরের name attribute হলো সার্ভারের কাছে ওই তথ্যের নাম। name না থাকলে ঘরটি পাঠানোই হয় না — নতুনদের খুব সাধারণ ভুল। radio আর checkbox-এ যে value লেখা থাকে সেটিই যায়, পাশের বাংলা লেখা নয়; আর টিক না দেওয়া checkbox একেবারেই যায় না।

নাম:     [Nusrat Jahan        ]
ইমেইল:   [nusrat@example.com  ]
বিভাগ:   (•) বিজ্ঞান  ( ) ব্যবসায়  ( ) মানবিক
ক্লাব:    [x] ICT ক্লাব  [ ] বিতর্ক ক্লাব
         [ জমা দিন ]

student_name  required          -> ফাঁকা নয়       ✓
email         type="email"      -> @ আছে            ✓
phone         pattern="01[3-9][0-9]{8}"
                                -> ফাঁকা, ঐচ্ছিক    ✓
group         required (radio)  -> একটি বাছা হয়েছে  ✓

student_name=Nusrat Jahan
email=nusrat@example.com
group=science
course=ict
(টিক না দেওয়া "debate" checkbox পাঠানোই হয় না)

method="get"  ->  ঠিকানা-বারে দেখা যাবে
GET /register?student_name=Nusrat+Jahan&email=nusrat%40example.com&group=science&course=ict

method="post" ->  URL পরিষ্কার, তথ্য body-তে
POST /register
Content-Type: application/x-www-form-urlencoded

student_name=Nusrat+Jahan&email=nusrat%40example.com&group=science&course=ict

১. প্রতিটি মান আবার যাচাই (ব্রাউজারকে বিশ্বাস নয়)
২. ইমেইল আগে নিবন্ধিত কি না দেখা
৩. ডেটাবেসে নিরাপদে সংরক্ষণ
৪. উত্তর: নতুন পাতা — "আবেদন গৃহীত, আবেদন নম্বর 2026-0457"

ব্রাউজারে যাচাই — required, placeholder, pattern

HTML নিজেই কিছু validation জানে, কোনো জাভাস্ক্রিপ্ট ছাড়াই: required (ফাঁকা রাখা যাবে না), type="email" বা number (ধরন মেলাতে হবে), min/max, maxlength, আর pattern — একটি নিয়ম-ছাঁচ (regular expression). যেমন বাংলাদেশের মোবাইল নম্বরের জন্য pattern="01[3-9][0-9]{8}": শুরুতে 01, তারপর ৩ থেকে ৯-এর একটি অঙ্ক, তারপর আরও ৮টি অঙ্ক — মোট ১১টি। নিচের রেজিস্ট্রেশন ফর্মে এগুলো একসাথে দেখুন। স্ক্রিপ্টটি আগে ফাঁকা ফর্ম যাচাই করে, তারপর দুটি ভুলসহ পূরণ করে, তারপর ঠিক করে জমা দেয় — কিন্তু preventDefault() দিয়ে আসল পাঠানো থামিয়ে দেখায় কী পাঠানো হতো:

const f = document.getElementById('reg');
const bad = () => [...new Set([...f.elements]
  .filter(el => el.name && !el.validity.valid).map(el => el.name))].join(', ');
console.log('empty form valid?', f.checkValidity(), '| problems:', bad());
f.student_name.value = 'Nusrat Jahan';
f.email.value = 'nusrat.example.com';      // @ নেই
f.phone.value = '1712345678';              // 01 দিয়ে শুরু নয়
console.log('after first try:', bad());
f.email.value = 'nusrat@example.com';
f.phone.value = '01712345678';
f.group.value = 'science';                 // radio বাছাই
f.course[0].checked = true;                // প্রথম checkbox-এ টিক
f.session.value = 'day';
f.note.value = 'Hostel lagbe';
f.addEventListener('submit', (e) => {
  e.preventDefault();                      // আসল সার্ভারে না পাঠিয়ে দেখি কী যেত
  for (const [k, v] of new FormData(f)) console.log(`${k}=${v}`);
  console.log('as GET:', f.getAttribute('action') + '?' + new URLSearchParams(new FormData(f)));
});
f.requestSubmit();                         // যেন দর্শক "জমা দিন" চাপলেন

৬ · অন্য সাইটের জিনিস বসানো — iframe, audio আর video

স্কুলের যোগাযোগ পাতায় একটি মানচিত্র, বা পরিচিতি পাতায় অনুষ্ঠানের একটি ভিডিও — এগুলো নিজের সার্ভারে না রেখে অন্য সাইট থেকে বসানো যায়। iframe (inline frame) পাতার ভেতরে আরেকটি পূর্ণ ওয়েব-পাতার জানালা খোলে। Google Maps-এ “Share → Embed a map” বা YouTube-এ “Share → Embed” চাপলে ঠিক এমন একটি iframe-এর কোড পাওয়া যায়, শুধু কপি করে বসাতে হয়। নিজের অডিও-ভিডিও ফাইল হলে আছে <audio> আর <video> — ব্রাউজার নিজেই প্লে-বোতামসহ প্লেয়ার দেখায়।

<!-- Google Maps বা YouTube-এর "Embed" থেকে কপি করা কোডের ধাঁচ -->
<iframe src="https://www.youtube-nocookie.com/embed/VIDEO_ID"
        title="বার্ষিক সাংস্কৃতিক অনুষ্ঠান ২০২৬ — ভিডিও"
        width="560" height="315" loading="lazy" allowfullscreen></iframe>

<!-- নিজের ফাইল -->
<audio src="media/national-anthem.mp3" controls></audio>

<video src="media/science-fair.mp4" controls width="640" poster="img/fair-cover.jpg">
  <track kind="captions" src="media/science-fair-bn.vtt" srclang="bn" label="বাংলা">
  আপনার ব্রাউজার ভিডিও চালাতে পারে না — <a href="media/science-fair.mp4">ফাইলটি নামিয়ে নিন</a>.
</video>

• controls দিলে প্লে, পজ, ভলিউম আসে; না দিলে ভিডিও থাকে কিন্তু চালানোর বোতাম থাকে না। শব্দসহ নিজে নিজে বেজে ওঠা (autoplay) ব্রাউজার সাধারণত আটকে দেয় — দর্শকও বিরক্ত হন।
• <track> দিয়ে সাবটাইটেল বা ক্যাপশন যোগ হয় — শ্রবণপ্রতিবন্ধী দর্শকের জন্য, আর শব্দ বন্ধ রেখে ফোনে দেখা মানুষের জন্যও।
• iframe-এ title দিন — screen reader এটি পড়ে বলে জানালাটি কিসের। চাইলে sandbox attribute দিয়ে ভেতরের পাতার ক্ষমতা সীমিত করা যায় — এই পর্বের “নিজে চালিয়ে দেখুন” বাক্সগুলোও এভাবে sandbox-করা iframe-এ চলে।

৭ · সব মিলিয়ে — একটি ছোট স্কুল-ওয়েবসাইট

এবার এই পর্বের সব টুকরো জোড়া দিন। ধরুন “আদর্শ উচ্চ বিদ্যালয়” (কাল্পনিক) একটি ছোট static সাইট চায় — চারটি পাতা, একটি স্টাইল ফাইল, কয়েকটি ছবি। ফোল্ডারের গঠন:

school-site/
├── index.html        হোম: পরিচিতি, নোটিশ, ছবি
├── about.html        আমাদের সম্পর্কে: ইতিহাস, শিক্ষকদের টেবিল
├── routine.html      ক্লাস রুটিন (colspan/rowspan)
├── contact.html      যোগাযোগ: ভর্তির ফর্ম + মানচিত্র (iframe)
├── css/style.css     সব পাতার একই নকশা
└── img/logo.png, img/sports-day.jpg …

প্রতিটি পাতার ওপরে একই মেনু — এভাবেই চারটি আলাদা ফাইল একটি “সাইট” হয়ে ওঠে:

<header>
  <a href="index.html"><img src="img/logo.png" alt="আদর্শ উচ্চ বিদ্যালয় — হোম পেজ" width="120" height="40"></a>
  <nav>
    <a href="index.html">হোম</a>
    <a href="about.html">আমাদের সম্পর্কে</a>
    <a href="routine.html">ক্লাস রুটিন</a>
    <a href="contact.html#admission">ভর্তির আবেদন</a>
  </nav>
</header>

লক্ষ করুন: সব পাতা একই ফোল্ডারে, তাই লিংকগুলো শুধু ফাইলের নাম — সবচেয়ে সরল relative ঠিকানা। contact.html#admission অন্য পাতায় গিয়ে সরাসরি ফর্মের অংশে নামায় (অন্য পাতার bookmark). contact.html-এ থাকবে <form id="admission" action="..." method="post"> — ওপরের রেজিস্ট্রেশন ফর্মের মতো, প্রতিটি ঘরে label আর name সহ — আর তার নিচে মানচিত্রের iframe. ফর্মের action কোথায় যাবে? static হোস্টিংয়ে নিজের সার্ভার-প্রোগ্রাম নেই, তাই এমন সাইট সাধারণত কোনো ফর্ম-সেবা বা হোস্টের দেওয়া ফর্ম-ব্যবস্থা ব্যবহার করে; নিজের প্রোগ্রাম লিখতে হলে dynamic হোস্টিং লাগে (পর্ব ৩৪)।

প্রকাশের আগে নিজে একবার যাচাই করুন: প্রতিটি লিংকে চেপে দেখুন কোনোটি ভাঙা কি না; ব্রাউজারের জানালা সরু করে ফোনের মাপে দেখুন টেবিল আর ছবি পর্দার বাইরে যায় কি না; কিবোর্ডের Tab চেপে চেপে পুরো ফর্ম পূরণ করা যায় কি না; আর W3C-র বিনা খরচের HTML validator-এ (validator.w3.org) ফাইলগুলো পরীক্ষা করুন। এই সাইটটিই পর্ব ৫৫-এর ব্যবহারিক পরীক্ষার HTML অংশের ভালো প্রস্তুতি।

৮ · AI-এর যুগে — দশ সেকেন্ডে টেবিল আর ফর্ম, কিন্তু যাচাই আপনার

“একটি ক্লাস রুটিনের HTML টেবিল বানাও” বা “ভর্তির ফর্ম লিখে দাও” — AI চ্যাটবট কয়েক সেকেন্ডে কাজ চলার মতো কোড দেয়। এটি সত্যিই সময় বাঁচায়। কিন্তু AI-এর লেখা HTML-এ কিছু ভুল প্রায় নিয়মিত দেখা যায়: label নেই বা for-id মেলে না; ছবিতে alt="image"; th-এ scope নেই; পুরো পাতার নকশা টেবিল দিয়ে; রুটিনে rowspan দেওয়ার পরও নিচের সারিতে বাড়তি ঘর; name ছাড়া ঘর; আর সবচেয়ে বিপজ্জনক — “required দিয়েছি, তাই ফর্ম নিরাপদ” ধরনের দাবি। AI কখনো পুরোনো ধাঁচও দেয় (<center>, <font>, bgcolor). পরীক্ষার খাতায় পাঠ্যবইয়ের attribute লিখতে হতে পারে, কিন্তু নতুন সাইটে CSS-ই ঠিক পথ — দুটি আলাদা রাখুন।

AI-এর লেখা HTML ব্যবহারের আগে — যাচাইয়ের চেকলিস্ট

• প্রতিটি ফর্ম-ঘরের label আছে, লেবেলে চাপলে ঘরটি বাছাই হয়, আর Tab চেপে পুরো ফর্ম পূরণ করা যায়
• প্রতিটি ঘরে name আছে, আর radio-গুলোর name এক কিন্তু value আলাদা
• প্রতিটি ছবির alt অর্থবহ (বা সাজসজ্জায় ফাঁকা), width-height দেওয়া; th-এ scope আছে
• রুটিনের প্রতিটি সারির ঘর গুনে দেখেছি — colspan আর rowspan মিলিয়ে সব সারিতে কলামের সংখ্যা সমান
• সব লিংক চেপে দেখেছি, relative ঠিকানা ফোল্ডার অনুযায়ী ঠিক; বাইরের লিংকে লেখা অর্থবহ
• AI যত নিশ্চয়তাই দিক, ফর্মের তথ্য সার্ভারে আবার যাচাই হবে — এটি পরিকল্পনায় লেখা আছে