ICT
অধ্যায় 5HSC ICT • অধ্যায় ৪

ওয়েব ডিজাইন পরিচিতি এবং HTML5 (Web Design & HTML)

পর্ব 1 / 2 • Static vs Dynamic Websites, Empty Tags, Subscript/Superscript & Ordered Lists

পর্ব ১: ওয়েবসাইট কাঠামো, HTML ফরম্যাটিং ট্যাগ (sub, sup) ও লিস্ট (ol, ul)

আনুমানিক সময়: 25 মিনিট
মূল ধারণা (Core Concept)

HTML (HyperText Markup Language) কোনো প্রোগ্রামিং ভাষা নয়; এটি একটি মার্কআপ ভাষা যা ওয়েবপেজের কাঠামো তৈরি করে। যেসব ট্যাগের ওপেনিং এবং ক্লোজিং উভয়ই থাকে তাদের কন্টেইনার ট্যাগ (Container Tag, যেমন <b>...</b>) এবং যেসব ট্যাগের ভেতরে কোনো কন্টেন্ট ও ক্লোজিং ট্যাগ থাকে না তাদের এম্পটি ট্যাগ (Empty Tag, যেমন <br>, <img>, <hr>) বলে।

মনে রাখার মূল পয়েন্ট:
  • এম্পটি ট্যাগ (Empty Tags): <br> (লাইন ব্রেক), <hr> (হরাইজন্টাল লাইন), <img> (ছবি যুক্ত করা), <meta>, <input>।
  • রাসায়নিক সংকেত (যেমন H₂O) লিখতে ব্যবহৃত হয় <sub> (Subscript) এবং বীজগণিতের ঘাত (যেমন a² + b²) লিখতে ব্যবহৃত হয় <sup> (Superscript)।
  • ক্রমিক তালিকা তৈরি করতে <ol> (Ordered List, type="1"/"A"/"a"/"i") এবং বুলেট তালিকা তৈরি করতে <ul> (Unordered List, type="disc"/"circle"/"square") ব্যবহৃত হয়।
  • হাইপারলিংক ট্যাগ: <a href="https://www.decentiot.cloud" target="_blank">লিংক টেক্সট</a>।
ধাপে ধাপে হাতে-কলমে পরীক্ষা (Guided Steps)
ক্লিক করলেই ডানপাশের ল্যাব বদলাবে!
ধাপ 1: রাসায়নিক সংকেত (<sub>) ও বীজগণিতের সূত্র (<sup>) এবং ক্রমিক লিস্ট (<ol>) দেখো

ডানপাশের লাইভ ল্যাবে দেখো কীভাবে H<sub>2</sub>SO<sub>4</sub> এবং (a+b)<sup>2</sup> কোড ব্রাউজারে রেন্ডার হয়!

মনে রাখার সহজ নিয়ম ও ম্যাজিক ট্রিকস (Easy Rules & Tricks)
2টি শর্টকাট

"Sub" (Submarine) পানির নিচে থাকে—তাই নিচে ছোট লেখা (যেমন H₂SO₄ এর 2 ও 4) লিখতে <sub>! আর "Sup" (Superman) আকাশের ওপরে ওড়ে—তাই ওপরে পাওয়ার বা ঘাত (যেমন x² এর 2) লিখতে <sup>!

উদাহরণ (Example):H₂SO₄ = H<sub>2</sub>SO<sub>4</sub> (a+b)² = (a+b)<sup>2</sup>
মনে রাখার ছন্দ / হুক: Submarine নিচে (<sub> = নিচে), Superman ওপরে (<sup> = ওপরে)!
বোর্ড পরীক্ষার সৃজনশীল (CQ) ও MCQ স্পেশাল টিপস
  • MCQ-তে প্রায়ই আসে: "কোনটি এম্পটি ট্যাগ?" — মনে রাখবে: BIH-MI (<br>, <img>, <hr>, <meta>, <input>)।
  • ইমেজ ট্যাগের আবশ্যিক অ্যাট্রিবিউট হলো src (ছবির ঠিকানা) এবং ছবি লোড না হলে বিকল্প টেক্সট দেখায় alt অ্যাট্রিবিউট।

HTML5 টেবিল (rowspan / colspan) ও ট্যাগ ভিজ্যুয়াল ল্যাব

বামপাশে বোর্ড পরীক্ষার HTML কোড এবং ডানপাশে তার ব্রাউজার আউটপুট সরাসরি তুলনা করো

HTML টেবিলে colspan="2" ব্যবহারের বোর্ড কৌশল

যখন একটি ঘর ডানপাশে ২টি কলামের সমান জায়গা দখল করে, তখন <td colspan="2"> বা <th colspan="2"> লিখতে হয়!

HTML সোর্স কোড (পরীক্ষার খাতায় যা লিখবে):index.html
<table border="1" cellspacing="0" cellpadding="8">
  <tr>
    <th colspan="2">HSC ICT Result</th>
  </tr>
  <tr>
    <td>Roll</td>
    <td>GPA</td>
  </tr>
  <tr>
    <td>101</td>
    <td>5.00</td>
  </tr>
</table>
ব্রাউজার আউটপুট (Visual Output):Live Render
HSC ICT Result (colspan="2")
RollGPA
1015.00