🌐 “ওয়েব জগতের সফর” — HTML শেখার গল্প
একদিন “নিলয়” নামের এক শিক্ষার্থী তার প্রথম ওয়েবপেজ বানাতে শিখছিল। সে ভাবল –
“একটা ওয়েবপেজ তো একটা বইয়ের মতো! বইতে যেমন শিরোনাম, অনুচ্ছেদ আর ফরম্যাট থাকে, ওয়েবপেজেও তেমনই কিছু লাগে।”
১️⃣ শিরোনাম – হেডিং ট্যাগ (Heading Tags)
নিলয় প্রথমেই শিখল, ওয়েবপেজে শিরোনাম দেওয়ার জন্য ৬টা হেডিং ট্যাগ আছে।
-
<h1>👉 সবচেয়ে বড় শিরোনাম -
<h6>👉 সবচেয়ে ছোট শিরোনাম
📖 বিশ্লেষণ:
হেডিং শুধু বড় টেক্সট বানানোর জন্য নয়। এগুলো ব্রাউজার ও সার্চ ইঞ্জিনকে বলে দেয়, কোনটা মূল শিরোনাম, কোনটা উপ-শিরোনাম।
অর্থাৎ <h1> মানে সবচেয়ে গুরুত্বপূর্ণ বিষয়।
২️⃣ অনুচ্ছেদ – প্যারাগ্রাফ ট্যাগ (Paragraph Tag)
এরপর সে <p> ট্যাগ শিখল।
সে লিখল –
কিন্তু মজার ব্যাপার! কোডে যত স্পেস বা লাইন ব্রেকই দিক, ব্রাউজার সেগুলো সরিয়ে দিয়ে শুধু এক অনুচ্ছেদ বানায়।
📖 বিশ্লেষণ:
প্যারাগ্রাফ ট্যাগ ওয়েবপেজকে পড়তে সহজ ও সুন্দর করে তোলে। ব্রাউজার স্বয়ংক্রিয়ভাবে প্রতিটি প্যারাগ্রাফের আগে-পরে স্পেস যোগ করে।
৩️⃣ লাইন ভাঙা – লাইন ব্রেক (Line Break <br>)
নিলয় ভাবল – “সবসময় নতুন প্যারাগ্রাফ দরকার নেই, মাঝপথে লাইন ভাঙতে চাই।”
তখন শিখল <br> ট্যাগ।
📖 বিশ্লেষণ:
এটি Empty Tag, মানে এর কোনো Closing নেই। শুধুই নতুন লাইন তৈরি করে।
৪️⃣ আগের মতো রাখো – Preformatted <pre>
সে দেখল <p> স্পেস আর লাইন ব্রেক মানে না।
তখন <pre> ব্যবহার করে কোড লিখল –
ব্রাউজারও একদম হুবহু তাই দেখাল।
📖 বিশ্লেষণ:<pre> সব স্পেস ও ব্রেক যেমন আছে তেমনই রাখে। কোড বা কবিতা দেখাতে কাজে লাগে।
৫️⃣ স্টাইল – Style Attribute & Font Tag
নিলয় এরপর টেক্সট সাজাতে শিখল:
কখনো সে পুরোনো <font> ট্যাগও দেখল। যদিও এখন এটি পুরোনো হয়ে গেছে।
📖 বিশ্লেষণ:
-
আধুনিক ওয়েবসাইটে সবসময় CSS + style attribute ব্যবহার করতে হবে।
-
<font>এখন আর ব্যবহার করা উচিত নয়।
৬️⃣ টেক্সট সাজানো – Formatting Tags
নিলয় খুব খুশি হয়ে টেক্সট সাজাতে লাগল –
-
<b>👉 Bold -
<i>👉 Italic -
<u>👉 Underline -
<strong>👉 গুরুত্বপূর্ণ লেখা (Bold এর মতো দেখায়, কিন্তু অর্থে ভিন্ন) -
<em>👉 গুরুত্বসহকারে লেখা (Italic এর মতো দেখায়) -
<sup>👉 Superscript (যেমন X<sup>2</sup>) -
<sub>👉 Subscript (যেমন H<sub>2</sub>O)
📖 বিশ্লেষণ:
এগুলো শুধু সাজানোর জন্য নয়। অনেক সময় অর্থ প্রকাশেও ব্যবহৃত হয়। যেমন <em> মানে শুধু বাঁকা লেখা নয়, বরং “গুরুত্বপূর্ণ” লেখা।
৭️⃣ কোটেশন – Quote & Blockquote
একদিন সে দেখল – কারও উক্তি লিখতে চাই।
-
<q>👉 ছোট উদ্ধৃতি, ব্রাউজার কোটেশন মার্ক দেয়। -
<blockquote>👉 বড় উদ্ধৃতি, আলাদা ব্লক আকারে দেখায়।
📖 বিশ্লেষণ:
ওয়েবপেজে উদ্ধৃতি আলাদা করে দৃষ্টিনন্দন ও অর্থবহ করে তোলে।
৮️⃣ ঠিকানা ও তথ্য – Address & Cite
নিলয় তার ওয়েবসাইটে নিজের যোগাযোগ যোগ করল –
এছাড়াও <cite> দিয়ে বই/কাজের নাম লিখল।
📖 বিশ্লেষণ:
-
<address>যোগাযোগের তথ্য দেখায় (সাধারণত ইটালিক হয়)। -
<cite>মানে কোনো বই বা কাজের শিরোনাম।
৯️⃣ মন্তব্য – Comment Tag
শেষে নিলয় দেখল, কোডে কিছু নোট রাখতে চাইলে কমেন্ট ব্যবহার করতে হয় –
📖 বিশ্লেষণ:
মন্তব্য ব্রাউজারে দেখা যায় না, কিন্তু প্রোগ্রামারদের জন্য কোড বোঝা সহজ হয়।
🔟 ছোট পরীক্ষা – (MCQ Practice)
নিলয় প্র্যাকটিস করতে কয়েকটা প্রশ্ন লিখল –
-
টেক্সটকে বাঁকা করতে কোন ট্যাগ?
✅<i> -
প্যারাগ্রাফ বানাতে কোন ট্যাগ?
✅<p> -
লাইন ব্রেকের জন্য কোন ট্যাগ?
✅<br> -
সবচেয়ে বড় হেডিং?
✅<h1> -
ফরম্যাটিং ট্যাগ কোনটি?
✅<sup>
👉 এভাবে গল্পের ছলে নিলয় শিখল – হেডিং, প্যারাগ্রাফ, ফরম্যাটিং, কোটেশন, স্টাইল, এমনকি কমেন্টও।
শেষে সে বলল –
“HTML আসলে বই লেখার মতো, শুধু ট্যাগ দিয়ে সাজাতে হয়।”
🎯 বহুনির্বাচনী প্রশ্নোত্তর (২০টি)
1. টেক্সটকে বাঁকা করতে কোন ট্যাগ ব্যবহৃত হয়?
ক) <i> ✅
খ) <u>
গ) <th>
ঘ) <b>
2. HTML এর কোন ট্যাগ ব্যবহার করে প্যারাগ্রাফ তৈরি করা যায়?
ক) <p> ✅
খ) <img>
গ) <th>
ঘ) <br>
3. HTML এ লাইন ব্রেকের জন্য কোন ট্যাগ ব্যবহৃত হয়?
ক) <dt>
খ) <hr>
গ) <br> ✅
ঘ) <tr>
4. সবচেয়ে বড় হেডিং প্রদর্শিত হয় কোনটিতে?
ক) <h1> ✅
খ) <h4>
গ) <h5>
ঘ) <h6>
5. নিচের কোনটি ফরম্যাটিং ট্যাগ?
ক) <sup> … </sup> ✅
খ) <body> … </body>
গ) <table> … </table>
ঘ) <html> … </html>
6. X = a² + b² সমীকরণটি HTML-এ লেখার জন্য কোন ট্যাগ প্রয়োজন?
ক) <sup> ✅
খ) <sub>
গ) <li>
ঘ) <h2>
7. X² সমীকরণকে ওয়েব পেইজে প্রদর্শনের জন্য কোন ট্যাগ ব্যবহার করা হবে?
ক) <sup> ✅
খ) <sub>
গ) <img>
ঘ) <jpg>
8. কোনটি সাদা রঙ নির্দেশ করে?
ক) “#BBBBBB”
খ) “#EEEEEE”
গ) “#AAAAAA”
ঘ) “#FFFFFF” ✅
9. <font> ট্যাগ এর কাজ হলো—
i. টেক্সটের ধরন ঠিক করা
ii. টেক্সটের আকার ঠিক করা
iii. টেক্সটের রঙ ঠিক করা
সঠিক উত্তর → ঘ) i, ii ও iii ✅
10. হেডিং ট্যাগ কয়টি?
ক) 2
খ) 4
গ) 6 ✅
ঘ) 8
11. <font> ট্যাগে অ্যাট্রিবিউট হিসেবে ব্যবহৃত হয়—
i. size
ii. color
iii. face
সঠিক উত্তর → ঘ) i, ii ও iii ✅
12. HTML কোড <p> H <sup> 2 </sup> O </p> এর ফলাফল কী?
ক) H2O ✅
খ) H₂O
গ) H²O
ঘ) HO₂
13. কোন হেডিং ট্যাগের সাইজ সবচেয়ে ছোট?
ক) <h1>
খ) <h4>
গ) <h5>
ঘ) <h6> ✅
14. <i> ট্যাগের মত ট্যাগ কোনগুলো?
i. <u>
ii. <del>
iii. <tr>
সঠিক উত্তর → ক) i ও ii ✅
15. HTML এ অনুভূমিক রেখা দিতে কোন ট্যাগ ব্যবহার করা হয়?
ক) <line>
খ) <hr> ✅
গ) <br>
ঘ) <p>
16. <pre> ট্যাগের মূল বৈশিষ্ট্য কী?
ক) টেক্সট সবসময় বোল্ড হয়
খ) টেক্সট সবসময় সেন্টার হয়
গ) স্পেস ও লাইন ব্রেক ঠিক রাখে ✅
ঘ) টেক্সট সবসময় ইটালিক হয়
17. HTML এ মন্তব্য (comment) লেখার সঠিক পদ্ধতি কোনটি?
ক) <!-- comment --> ✅
খ) </! comment />
গ) <comment>
ঘ) {-- comment --}
18. <blockquote> ট্যাগের কাজ কী?
ক) টেক্সট বোল্ড করা
খ) টেক্সট ইন্ডেন্ট করে উদ্ধৃতি প্রদর্শন ✅
গ) টেক্সট লাল করা
ঘ) টেক্সট আন্ডারলাইন করা
19. কোন ট্যাগ ব্যবহার করে সংক্ষিপ্ত রূপ (Abbreviation) লেখা যায়?
ক) <abbr> ✅
খ) <cite>
গ) <small>
ঘ) <sub>
20. <cite> ট্যাগের মূল কাজ কী?
ক) কাজের শিরোনাম ইটালিক ফরম্যাটে দেখানো ✅
খ) প্যারাগ্রাফ শেষ করা
গ) উদ্ধৃতি (quote) দেখানো
ঘ) টেক্সট বোল্ড করা
📘 ৫টি জ্ঞানমূলক প্রশ্নোত্তর
1. হেডিং ট্যাগ কয়টি এবং কোনটি সবচেয়ে বড়?
➡ হেডিং ট্যাগ ৬টি: <h1> থেকে <h6> পর্যন্ত। এর মধ্যে <h1> সবচেয়ে বড় এবং <h6> সবচেয়ে ছোট।
2. প্যারাগ্রাফ ট্যাগের ব্যবহার কীভাবে হয়?
➡ <p> … </p> দিয়ে লেখা অংশ ব্রাউজারে একটি প্যারাগ্রাফ হিসাবে প্রদর্শিত হয়।
3. ফরম্যাটিং ট্যাগ কী?
➡ যে ট্যাগ টেক্সটকে বিভিন্ন ফরম্যাটে (Bold, Italic, Underline, Superscript, Subscript ইত্যাদি) প্রদর্শন করে তাকে ফরম্যাটিং ট্যাগ বলে।
4. <pre> ট্যাগের বৈশিষ্ট্য কী?
➡ <pre> ট্যাগ টেক্সটকে পূর্বনির্ধারিত ফরম্যাটে দেখায়, যেখানে স্পেস ও লাইন ব্রেক ঠিক থাকে।
5. HTML এ কমেন্ট লেখার সুবিধা কী?
➡ কোড বুঝতে সহজ হয়, তবে ব্রাউজারে কমেন্ট প্রদর্শিত হয় না।
📗 ৫টি অনুধাবনমূলক প্রশ্নোত্তর
1. একটি ওয়েবসাইটে “কবিতার লাইন” ঠিক যেমন লেখা হয়েছে তেমনভাবে প্রদর্শন করতে হলে কোন ট্যাগ ব্যবহার করবে?
➡ <pre> ট্যাগ ব্যবহার করতে হবে, কারণ এটি লাইন ব্রেক ও স্পেস ঠিক রাখে।
2. যদি একজন শিক্ষার্থী ওয়েবপেজে সমীকরণ H₂O লিখতে চায় তবে কোন ট্যাগ ব্যবহার করবে?
➡ <sub> ট্যাগ ব্যবহার করবে। যেমন: H<sub>2</sub>O।
3. একজন ওয়েব ডিজাইনার শিরোনামের জন্য <b> ট্যাগ ব্যবহার করলেন। এটা কি সঠিক? কেন?
➡ না, <b> কেবল Bold করে। শিরোনামের জন্য <h1> … <h6> ব্যবহার করতে হবে।
4. বিজ্ঞানভিত্তিক ওয়েবসাইটে (a+b)² সূত্রটি দেখাতে হলে কোন ট্যাগ দরকার?
➡ <sup> ট্যাগ ব্যবহার করতে হবে। যেমন: (a+b)<sup>2</sup>।
5. ওয়েবসাইটে কোনো বিখ্যাত ব্যক্তির উদ্ধৃতি (quote) দিতে হলে কোন ট্যাগ সবচেয়ে উপযুক্ত?
➡ <blockquote> ট্যাগ ব্যবহার করতে হবে, কারণ এটি উদ্ধৃতিকে আলাদা করে দেখায়।