এইচটিএমএল (HTML) এর মৌলিক ধারণা ও পেজ লেআউট

এইচটিএমএল (HTML) এর পরিচিতি, ট্যাগ, এলিমেন্ট, অ্যাট্রিবিউট এবং ওয়েব পেজের মৌলিক কাঠামো নিয়ে বিস্তারিত লেকচার। এইচএসসি আইসিটি অধ্যায় ৪।

শেখা শুরু করুন

এইচটিএমএল (HTML) এর মৌলিক ধারণা ও পেজ লেআউট

  1. এইচটিএমএল (HTML) এর মৌলিক ধারণা ও পেজ লেআউট
  2. ওয়েবসাইটের কঙ্কাল (Skeleton)
  3. HTML কী?
  4. HTML এর বিবর্তন
  5. HTML এর সুবিধা ও অসুবিধা
  6. ট্যাগ (Tag) পরিচিতি
  7. এলিমেন্ট ও অ্যাট্রিবিউট
  8. ওয়েব পেজের মৌলিক কাঠামো (Skeleton)
  9. DOM বা ট্রি স্ট্রাকচার
  10. পেজ লেআউট ও সেমান্টিক ট্যাগ
  11. হাতে কলমে কোডিং: প্রথম ওয়েব পেজ
  12. নিজেকে যাচাই করি (Self Check)
  13. সারসংক্ষেপ

এইচটিএমএল (HTML) এর মৌলিক ধারণা ও পেজ লেআউট

এই লেকচার শেষে আমরা-

১। এইচটিএমএল (HTML) এর ইতিহাস ও সুবিধা-অসুবিধা বর্ণনা করতে পারব।
২। এইচটিএমএল ট্যাগ, এলিমেন্ট এবং অ্যাট্রিবিউটের ধারণা ব্যাখ্যা করতে পারব।
৩। একটি ওয়েব পেজের মৌলিক কাঠামো (Basic Structure) তৈরি করতে পারব।
৪। সেমান্টিক ট্যাগ ব্যবহার করে পেজ লেআউট ডিজাইন করতে পারব।

সবাইকে স্বাগতম! এইচএসসি আইসিটি কোর্সের চতুর্থ অধ্যায়ে আজ আমরা একটি নতুন এবং অত্যন্ত গুরুত্বপূর্ণ টপিক শুরু করতে যাচ্ছি। আজ আমরা শিখব ওয়েবের ভাষা, বা এইচটিএমএল (HTML)। এই লেকচার শেষে আমরা- ১। এইচটিএমএল এর ইতিহাস ও সুবিধা-অসুবিধা বর্ণনা করতে পারব, ২। ট্যাগ, এলিমেন্ট এবং অ্যাট্রিবিউটের ধারণা ব্যাখ্যা করতে পারব, ৩। একটি ওয়েব পেজের মৌলিক কাঠামো তৈরি করতে পারব এবং ৪। সেমান্টিক ট্যাগ ব্যবহার করে পেজ লেআউট ডিজাইন করতে পারব। চলো শুরু করা যাক!

ওয়েবসাইটের কঙ্কাল (Skeleton)

মানুষের শরীর = হাড়ের কাঠামো + মাংস/চামড়া (সৌন্দর্য) + মস্তিষ্ক (কাজ)

ওয়েবসাইট = HTML (কাঠামো) + CSS (সৌন্দর্য) + JavaScript (কাজ)

  • প্রতিটি ওয়েবসাইটের একটি মূল ভিত্তি বা কঙ্কাল থাকে।
  • এই কঙ্কালটিই হলো HTML।

তোমরা কি কখনো ভেবেছ, আমাদের শরীরের হাড়ের কাঠামো বা কঙ্কালটা যদি না থাকত, তাহলে আমরা কি দাঁড়িয়ে থাকতে পারতাম? নিশ্চয়ই না! ঠিক তেমনি, ইন্টারনেটে তোমরা যত সুন্দর সুন্দর ওয়েবসাইট দেখো, তার সবগুলোরই একটা কঙ্কাল বা হাড়ের কাঠামো আছে। এই কঙ্কালটিই হলো HTML। আজ আমরা ইন্টারনেটের এই কঙ্কাল বা ভিত্তিকে ব্যবচ্ছেদ করব! আমরা দেখব কীভাবে এই হাড়গুলো জোড়া দিয়ে একটা ওয়েবসাইটের কাঠামো দাঁড় করানো হয়।

HTML কী?

পূর্ণরূপ: HyperText Markup Language

  • এটি কোনো প্রোগ্রামিং ল্যাঙ্গুয়েজ নয়, এটি 'মার্কআপ' ল্যাঙ্গুয়েজ।
  • জনক: টিম বার্নার্স লি (১৯৯০)।
  • কাজ: ওয়েব পেজের গঠন (Structure) তৈরি করা।

HyperText: লিংকের মাধ্যমে তথ্যের সাথে সংযোগ।
Markup: ট্যাগ ব্যবহার করে গঠন নির্দেশ করা।

প্রথমে আসি সংজ্ঞায়। HTML এর পূর্ণরূপ হলো HyperText Markup Language। মনে রাখবে, এটা কিন্তু কোনো প্রোগ্রামিং ল্যাঙ্গুয়েজ না (যেমন C বা Python)। এটা একটা 'মার্কআপ' ল্যাঙ্গুয়েজ। কেন? কারণ এটা কোনো জটিল অঙ্ক কষে না, বা লজিক দিয়ে সিদ্ধান্ত নেয় না। এটা শুধু ব্রাউজারকে বলে দেয়—'এখানে একটা ছবি বসাও', 'এখানে একটা প্যারাগ্রাফ শুরু করো'। ১৯৯০ সালে টিম বার্নার্স লি এটি আবিষ্কার করেন।

HTML এর বিবর্তন

বর্তমান ভার্সন: HTML5

HTML5 এর নতুন বৈশিষ্ট্য:
* অডিও ও ভিডিও সরাসরি সাপোর্ট করে।
* ক্যানভাস (Canvas) দিয়ে গ্রাফিক্স আঁকা যায়।
* সেমান্টিক ট্যাগ (header, footer, nav) যুক্ত হয়েছে।

HTML5 এখনকার স্ট্যান্ডার্ড। আগে ফ্ল্যাশ প্লেয়ার লাগত, এখন HTML5 দিয়েই ভিডিও চলে।

সময়ের সাথে সাথে HTML এর অনেক পরিবর্তন হয়েছে। সেই HTML 1.0 থেকে শুরু করে এখন আমরা ব্যবহার করছি HTML5। HTML5 আসার পর ওয়েব জগত অনেক শক্তিশালী হয়েছে। আগে ভিডিও দেখার জন্য আলাদা প্লেয়ার লাগত, এখন HTML5 নিজেই অডিও-ভিডিও চালাতে পারে। এছাড়া এতে নতুন অনেক ট্যাগ যুক্ত হয়েছে যা ওয়েব ডিজাইনকে অনেক সহজ করে দিয়েছে।

HTML এর সুবিধা ও অসুবিধা

সুবিধা:
১. শেখা খুব সহজ ও ফ্রি।
২. সব ব্রাউজার (Chrome, Firefox) সাপোর্ট করে।
৩. কেস সেন্সিটিভ নয় (বড় বা ছোট হাতের অক্ষরে লেখা যায়)।

HTML কেন এত জনপ্রিয়? প্রথমত, এটা শেখা খুব সহজ। তোমরা যারা আজ প্রথম দেখছ, তারাও এই ক্লাসের শেষে কোড লিখতে পারবে! এটা ফ্রি এবং সব ব্রাউজারে চলে। তবে এর কিছু সীমাবদ্ধতাও আছে। HTML দিয়ে শুধু স্ট্যাটিক পেজ বানানো যায়—মানে যে পেজের তথ্য নিজে নিজে পরিবর্তন হয় না। যেমন ধরো, ফেইসবুকের নিউজ ফিড কিন্তু শুধু HTML দিয়ে বানানো সম্ভব না, সেখানে প্রোগ্রামিং লাগে।

ট্যাগ (Tag) পরিচিতি

ট্যাগ কী? < > কৌণিক ব্র্যাকেটের মধ্যে আবদ্ধ কিওয়ার্ড।

১. কন্টেইনার ট্যাগ (Container Tag):
* শুরু ও শেষ আছে।
* উদাহরণ: <p>লেখা...</p>, <h1>হেডিং</h1>

২. এম্পটি ট্যাগ (Empty Tag):
* যার শেষ নেই বা কন্টেন্ট নেই।
* উদাহরণ: <br> (লাইন ব্রেক), <img> (ছবি), <hr>

HTML এর মূল ভিত্তি হলো 'ট্যাগ'। ট্যাগ চেনার উপায় হলো এই অ্যাঙ্গেল ব্র্যাকেট বা কৌণিক চিহ্ন < >। এর মধ্যে যা লেখা থাকে তাই ট্যাগ। ট্যাগ মূলত দুই ধরণের। ১. কন্টেইনার ট্যাগ—যার শুরু এবং শেষ আছে। যেমন `<p>` দিয়ে শুরু, আর `</p>` দিয়ে শেষ। মাঝখানে থাকে কন্টেন্ট। আর ২. এম্পটি ট্যাগ—এদের শুধু শুরু আছে, শেষ নেই। যেমন `<br>`, যা দিয়ে লাইন ব্রেক দেওয়া হয়। এদের ক্লোজ করতে হয় না।

এলিমেন্ট ও অ্যাট্রিবিউট

এলিমেন্ট (Element):
শুরু ট্যাগ + কন্টেন্ট + শেষ ট্যাগ = এলিমেন্ট
উদাহরণ: <h1> হ্যালো বাংলাদেশ </h1> পুরোটাই একটা এলিমেন্ট।

অ্যাট্রিবিউট (Attribute):
ট্যাগের অতিরিক্ত তথ্য প্রদান করে। থাকে ওপেনিং ট্যাগে।
সিনট্যাক্স: name="value"
উদাহরণ: <p align="center"> মাঝখানে লেখা </p>
এখানে align হলো অ্যাট্রিবিউট।

এখন খুব মনোযোগ দিয়ে শোনো, কারণ অনেকেই ট্যাগ আর এলিমেন্টের মধ্যে গুলিয়ে ফেলে। ট্যাগ হলো শুধু `< >` অংশটুকু। আর এলিমেন্ট হলো শুরু ট্যাগ থেকে শেষ ট্যাগ পর্যন্ত পুরো অংশটা। এবার আসি অ্যাট্রিবিউটে। অ্যাট্রিবিউট মানে হলো বৈশিষ্ট্য। ধরো একটা প্যারাগ্রাফ ট্যাগ `<p>`, কিন্তু তুমি চাও লেখাটা মাঝখানে আসুক। তখন ওপেনিং ট্যাগের ভেতরে লিখতে হবে `align="center"`। এই যে বাড়তি তথ্য দিলাম, এটাই অ্যাট্রিবিউট।

ওয়েব পেজের মৌলিক কাঠামো (Skeleton)

<!DOCTYPE html>
<html>
   <head>
      <title> পেজের নাম </title>
   </head>
   <body>
      মূল কন্টেন্ট এখানে থাকবে...
   </body>
</html>
  • html: রুট এলিমেন্ট
  • head: ব্রাউজারের জন্য তথ্য (মেটাডেটা)
  • body: মানুষের জন্য তথ্য (কন্টেন্ট)

এবার আমরা দেখব একটা ওয়েব পেজের আসল কাঠামো। এটা অনেকটা মানুষের শরীরের মতো। সবার উপরে `<!DOCTYPE html>` দিয়ে ব্রাউজারকে বলি আমরা HTML5 ব্যবহার করছি। এরপর `<html>` শুরু। এর দুটি প্রধান অংশ—`<head>` এবং `<body>`। হেড অংশে থাকে টাইটেল বা মেটাডেটা, যা পেজের ভেতরে দেখা যায় না, এটা ব্রাউজারের বোঝার জন্য। আর বডি অংশে যা লিখবে—ছবি, লেখা, ভিডিও—সেটাই ইউজার স্ক্রিনে দেখতে পাবে।

DOM বা ট্রি স্ট্রাকচার

DOM: Document Object Model

ব্রাউজার HTML কোডকে একটি উল্টানো গাছ (Tree) হিসেবে দেখে।

সম্পর্ক:
* প্যারেন্ট (Parent): <html> হলো <head> ও <body> এর প্যারেন্ট।
* চাইল্ড (Child): <head> ও <body> হলো <html> এর চাইল্ড।
* সিবলিং (Sibling): <head> ও <body> একে অপরের ভাই/বোন।

আমরা যে কোড লিখলাম, ব্রাউজার সেটাকে কীভাবে দেখে? ব্রাউজার সেটাকে একটা ফ্যামিলি ট্রি বা গাছের মতো সাজায়, একে বলা হয় DOM বা Document Object Model। এখানে `<html>` হলো সবার দাদা বা প্যারেন্ট। তার দুই সন্তান—`<head>` এবং `<body>`। আবার `<body>` এর ভেতরে যদি `<p>` বা `<h1>` থাকে, তারা হলো বডির সন্তান। এই সম্পর্কটা বুঝলে পরবর্তীতে ডিজাইন করা অনেক সহজ হবে।

পেজ লেআউট ও সেমান্টিক ট্যাগ

HTML5 এ পেজ সাজানোর আধুনিক ট্যাগ:

  • <header>: পেজের উপরের অংশ (লোগো, ব্যানার)।
  • <nav>: মেনু বা নেভিগেশন বার।
  • <main>: পেজের মূল বিষয়বস্তু।
  • <section> ও <article>: বিষয়বস্তুর আলাদা ভাগ।
  • <aside>: সাইডবার (বিজ্ঞাপন, লিংক)।
  • <footer>: পেজের একদম নিচের অংশ।

আগেকার দিনে ওয়েবসাইট বানাতে শুধু `<div>` ট্যাগ ব্যবহার করা হতো। কিন্তু HTML5 এ আমরা 'সেমান্টিক' ট্যাগ ব্যবহার করি। 'সেমান্টিক' মানে যার অর্থ আছে। যেমন, পেজের উপরের অংশের জন্য `<header>`, মেনুর জন্য `<nav>`, মূল লেখার জন্য `<main>`, আর সবার নিচে `<footer>`। এগুলো ব্যবহার করলে ব্রাউজার এবং গুগল তোমার ওয়েবসাইটকে ভালোভাবে বুঝতে পারে। ছবির ডায়াগ্রামটি খেয়াল করো, দেখবে একটি পেজকে কীভাবে ভাগ করা হয়েছে।

হাতে কলমে কোডিং: প্রথম ওয়েব পেজ

  1. নোটপ্যাড (Notepad) বা কোড এডিটর ওপেন করো।
  2. HTML স্ট্রাকচার কোডটি লেখো।
  3. ফাইলটি সেভ করো। নাম দাও index.html (এক্সটেনশন .html হতে হবে)।
  4. ফাইলটিতে ডাবল ক্লিক করে ব্রাউজারে ওপেন করো।

সতর্কতা: সেভ করার সময় 'All Files' সিলেক্ট করতে হবে (নোটপ্যাডে)।

এবার চলো আমরা হাতে কলমে একটা পেজ বানাই। তোমরা চাইলে ভিডিওটি পজ করে আমার সাথে সাথে করতে পারো। ১. কম্পিউটার থেকে Notepad ওপেন করো। ২. স্লাইডে দেওয়া কোডটি লেখো। ৩. এবার সেভ করার পালা—এটা খুব গুরুত্বপূর্ণ। ফাইলের নাম দাও `index.html`। নামের শেষে `.html` না দিলে কিন্তু কাজ করবে না! ৪. এবার সেভ করা ফাইলে ডাবল ক্লিক করো। দেখবে তোমার ব্রাউজারে তোমার প্রথম ওয়েবসাইট ওপেন হয়েছে! অভিনন্দন!

নিজেকে যাচাই করি (Self Check)

প্রশ্ন ১: <br> ট্যাগটি কোন ধরণের ট্যাগ? (কন্টেইনার / এম্পটি)
প্রশ্ন ২: <p align="center"> এখানে align কী?
প্রশ্ন ৩: HTML ফাইলের এক্সটেনশন কী হতে হয়?

উত্তর:
১। এম্পটি ট্যাগ
২। অ্যাট্রিবিউট
৩। .html

আগানোর আগে চলো একটু দেখি আমরা কী শিখলাম। স্লাইডে তিনটি প্রশ্ন আছে। ভিডিওটা পজ করে উত্তরগুলো ভাবো। ... (একটু বিরতি) ... প্রথমটি হলো—`<br>` একটি এম্পটি ট্যাগ, কারণ এর শেষ নেই। দ্বিতীয়ত, `align` হলো অ্যাট্রিবিউট। এবং তৃতীয়ত, এক্সটেনশন হবে `.html`। আশা করি তোমরা সবাই সঠিক উত্তর দিতে পেরেছ!

সারসংক্ষেপ

আজ আমরা যা শিখলাম:

  • HTML হলো ওয়েবের কঙ্কাল বা কাঠামো।
  • ট্যাগ < > এবং এলিমেন্টের পার্থক্য।
  • অ্যাট্রিবিউট দিয়ে ট্যাগের ক্ষমতা বাড়ানো।
  • পেজের মৌলিক কাঠামো (Head vs Body)।
  • সেমান্টিক ট্যাগ দিয়ে লেআউট ডিজাইন।

আজকে আমরা ওয়েব ডিজাইনের একদম ভিত্তি বা ফাউন্ডেশন তৈরি করলাম। আমরা জেনেছি HTML কী, ট্যাগ ও অ্যাট্রিবিউট কীভাবে কাজ করে এবং একটা পেজের কাঠামো কেমন হয়। এই বিষয়গুলো ভালো করে প্র্যাকটিস করো, কারণ পরের ক্লাসে আমরা এই কাঠামোতে টেক্সট ফরম্যাটিং এবং ছবি যোগ করা শিখব। সেই ক্লাসটি কিন্তু আরো মজার হবে! সবাই ভালো থেকো, ধন্যবাদ।

লেকচার ৩: এইচটিএমএল (HTML) এর মৌলিক ধারণা ও পেজ লেআউট

পড়তে প্রায় 14 মিনিট

লেকচারে আমরা মানুষের কঙ্কালের সাথে ওয়েবসাইটের কাঠামোর তুলনা দেখেছি। এই রিডিং ম্যাটেরিয়ালে আমরা সেই 'কঙ্কাল' বা HTML-এর প্রতিটি হাড়—অর্থাৎ ট্যাগ, সিনট্যাক্স এবং গঠনপ্রণালীকে গভীরভাবে বিশ্লেষণ করব। আমরা জানব কেন একটি সাধারণ নোটপ্যাডে লেখা টেক্সট ব্রাউজারে সুন্দর ওয়েবসাইট হিসেবে প্রদর্শিত হয় এবং এর পেছনের মূল কারিগর 'মার্কআপ' ল্যাঙ্গুয়েজ কীভাবে কাজ করে। এইচএসসি পরীক্ষার জন্য HTML-এর প্রতিটি খুঁটিনাটি বিষয়, বিশেষ করে ট্যাগ এবং সিনট্যাক্স বোঝা অত্যন্ত জরুরি।

এইচটিএমএল (HTML): সংজ্ঞা ও ইতিহাস

এইচটিএমএল (HTML) বা HyperText Markup Language হলো ওয়েব পেজ তৈরি করার জন্য ব্যবহৃত একটি স্ট্যান্ডার্ড মার্কআপ ল্যাঙ্গুয়েজ। এটি কোনো প্রোগ্রামিং ভাষা নয়, কারণ এতে গাণিতিক অপারেশন বা লজিক্যাল সিদ্ধান্ত নেওয়ার ক্ষমতা নেই। এটি মূলত ব্রাউজারকে নির্দেশ দেয় কীভাবে টেক্সট, ইমেজ বা অন্যান্য কন্টেন্ট স্ক্রিনে সাজাতে হবে।

শব্দ দুটিকে ভাঙলে আমরা পাই:
- HyperText (হাইপারটেক্সট): এর মাধ্যমে একটি ওয়েব পেজের তথ্যের সাথে অন্য পেজের তথ্যের লিংক বা সংযোগ স্থাপন করা হয়। আমরা যখন কোনো লিংকে ক্লিক করে এক পেজ থেকে অন্য পেজে যাই, সেটিই হাইপারটেক্সট।
- Markup (মার্কআপ): এটি হলো কিছু নির্দিষ্ট চিহ্ন বা ট্যাগ ব্যবহারের পদ্ধতি, যা সাধারণ টেক্সটকে ফরম্যাট করে ব্রাউজারে প্রদর্শনযোগ্য করে তোলে।

সংজ্ঞা (Definition): HTML (HyperText Markup Language) হলো ওয়েব পেজ তৈরি ও প্রদর্শনের জন্য ব্যবহৃত একটি প্রমিত মার্কআপ ল্যাঙ্গুয়েজ, যা কতগুলো ট্যাগের সমন্বয়ে গঠিত এবং ব্রাউজারকে নির্দেশ দেয় কীভাবে কন্টেন্ট বা তথ্য প্রদর্শিত হবে।

ইতিহাস ও ক্রমবিকাশ

১৯৯০ সালে জেনেভার CERN-এ থাকাকালীন ব্রিটিশ বিজ্ঞানী টিম বার্নার্স লি (Tim Berners-Lee) এইচটিএমএল উদ্ভাবন করেন। তিনি সর্বপ্রথম ওয়েব ব্রাউজার এবং ওয়েব সার্ভারও তৈরি করেন। বর্তমানে এইচটিএমএল-এর মান নিয়ন্ত্রণ এবং উন্নয়ন করে W3C (World Wide Web Consortium) নামক একটি আন্তর্জাতিক সংস্থা।

গুরুত্বপূর্ণ তথ্য (MCQ এর জন্য):
- জনক: টিম বার্নার্স লি (১৯৯০ সাল)।
- বর্তমান সংস্করণ: HTML5।
- নিয়ন্ত্রণকারী সংস্থা: W3C (World Wide Web Consortium)।
- ফাইল এক্সটেনশন: .html বা .htm (সেভ করার সময় এটি ব্যবহার করতে হয়)।

ট্যাগ (Tag) ও এলিমেন্ট (Element)

শিক্ষার্থীরা প্রায়ই ট্যাগ এবং এলিমেন্টের মধ্যে গুলিয়ে ফেলে। কিন্তু এদের মধ্যে স্পষ্ট পার্থক্য রয়েছে। এইচটিএমএল ডকুমেন্টে কৌণিক ব্র্যাকেটের (< >) মধ্যে আবদ্ধ কিওয়ার্ডকে ট্যাগ বলা হয়। অন্যদিকে, ওপেনিং ট্যাগ থেকে শুরু করে ক্লোজিং ট্যাগ পর্যন্ত মাঝখানের কন্টেন্টসহ পুরো অংশকে এলিমেন্ট বলা হয়।

এইচটিএমএল ট্যাগগুলো Case Insensitive, অর্থাৎ <html> এবং <HTML> একই কাজ করে। তবে W3C-এর স্ট্যান্ডার্ড অনুযায়ী সবসময় ছোট হাতের অক্ষর (Lowercase) ব্যবহার করা উত্তম।

সংজ্ঞা (Definition):
- ট্যাগ (Tag): এইচটিএমএল-এর নির্দিষ্ট নির্দেশক শব্দ যা < > চিহ্নের মধ্যে থাকে। যেমন: <body>।
- এলিমেন্ট (Element): শুরুর ট্যাগ, মাঝখানের বিষয়বস্তু এবং শেষের ট্যাগ—এই সবকিছু মিলিয়ে গঠিত অংশকে এলিমেন্ট বলে।

উদাহরণ (Example):
ধরি একটি কোড: <h1> This is a Heading </h1>

এখানে:
- <h1> = ওপেনিং ট্যাগ (Opening Tag)
- </h1> = ক্লোজিং ট্যাগ (Closing Tag)
- This is a Heading = কন্টেন্ট (Content)
- পুরো লাইনটি = একটি HTML এলিমেন্ট (Element)

নেস্টিং (Nesting) বা একটার ভেতর আরেকটা এলিমেন্ট রাখার ক্ষেত্রে LIFO (Last In First Out) নিয়ম মেনে চলতে হয়। অর্থাৎ, যে ট্যাগটি সবার শেষে শুরু হয়েছে, সেটি সবার আগে শেষ হবে। যেমন: <b><i>Text</i></b> সঠিক, কিন্তু <b><i>Text</b></i> ভুল।

ট্যাগের প্রকারভেদ: কন্টেইনার ও এম্পটি ট্যাগ

গঠন অনুসারে এইচটিএমএল ট্যাগ দুই প্রকার:

১. কন্টেইনার ট্যাগ (Container Tag)

যেসব ট্যাগের শুরু (Opening) এবং শেষ (Closing) উভয়ই আছে এবং যার মধ্যে কন্টেন্ট বা অন্য ট্যাগ থাকতে পারে, তাকে কন্টেইনার ট্যাগ বলে। অধিকাংশ ট্যাগই এই শ্রেণীর অন্তর্ভুক্ত।
উদাহরণ: <html>...</html>, <p>...</p>, <b>...</b>।

২. এম্পটি ট্যাগ (Empty Tag)

যেসব ট্যাগের শুধুমাত্র শুরু আছে কিন্তু কোনো শেষ বা ক্লোজিং ট্যাগ নেই এবং যার মধ্যে কোনো কন্টেন্ট থাকে না, তাকে এম্পটি ট্যাগ বলে। এদের কাজ হলো কোনো নির্দিষ্ট উপাদান (যেমন লাইন ব্রেক বা ছবি) স্থাপন করা।

সাধারণ এম্পটি (Empty) ট্যাগের তালিকা (MCQ টিপস):
নিচের তালিকাটি মুখস্থ রাখা জরুরি, কারণ উদ্দীপকে প্রায়ই প্রশ্ন আসে "নিচের কোনটি এম্পটি ট্যাগ?":
1. <br> (Line Break) - নতুন লাইনে যাওয়ার জন্য।
2. <hr> (Horizontal Rule) - আড়াআড়ি দাগ টানার জন্য।
3. <img> (Image) - ছবি যুক্ত করার জন্য।
4. <input> (Input Field) - ফর্ম তৈরির সময় তথ্য নেওয়ার জন্য।
5. <meta> (Metadata) - পেজের তথ্য ব্রাউজারকে জানানোর জন্য।
6. <link> (Link) - বাহ্যিক ফাইল (যেমন CSS) যুক্ত করার জন্য।

পরীক্ষার টিপস (Exam Tip): উদ্দীপকে অনেক সময় কোড দিয়ে জিজ্ঞেস করে 'এখানে কয়টি এম্পটি ট্যাগ ব্যবহৃত হয়েছে?' তাই উপরের তালিকাটি মনে রাখা জরুরি। এম্পটি ট্যাগে ভুল করে ক্লোজিং ট্যাগ (যেমন </br>) দিলে নম্বর কাটা যাবে।

অ্যাট্রিবিউট (Attribute): সিনট্যাক্স ও নিয়ম

অ্যাট্রিবিউট হলো ট্যাগের অতিরিক্ত বৈশিষ্ট্য নির্দেশক। এটি সবসময় ওপেনিং ট্যাগের (Opening Tag) ভেতরে লেখা হয়। অ্যাট্রিবিউট ব্রাউজারকে এলিমেন্ট সম্পর্কে বাড়তি তথ্য দেয়, যেমন—ছবির সোর্স কোথায়, লিংকের ঠিকানা কী, বা টেক্সটের রঙ কী হবে।

অ্যাট্রিবিউট লেখার নির্দিষ্ট নিয়ম রয়েছে:
1. এটি সবসময় name="value" জোড়ায় থাকে।
2. অ্যাট্রিবিউটের নাম এবং ভ্যালুর মাঝখানে সমান চিহ্ন (=) থাকে।
3. ভ্যালুটিকে অবশ্যই ডাবল কোটেশন (" ") এর মধ্যে রাখা উচিত।

অ্যাট্রিবিউট লেখার গঠন (Syntax):
$$<tagname \ attribute\_name="attribute\_value"> Content </tagname>$$

উদাহরণ ব্যাখ্যা:
<p align="center"> Hello World </p>

এখানে:
- p = ট্যাগ নেম
- align = অ্যাট্রিবিউট নেম
- center = অ্যাট্রিবিউট ভ্যালু
- এর ফলে "Hello World" লেখাটি পেজের মাঝখানে প্রদর্শিত হবে।

কমন কিছু অ্যাট্রিবিউট যা সব ট্যাগে ব্যবহার করা যায় (Global Attributes): id, class, style, title।

এইচটিএমএল পেজের মৌলিক কাঠামো (Basic Structure)

প্রতিটি এইচটিএমএল পেজের একটি নির্দিষ্ট কাঠামো বা "বয়লারপ্লেট" (Boilerplate) থাকে। পরীক্ষার খাতায় যেকোনো এইচটিএমএল কোড লেখার সময় এই কাঠামো মেনে চলা বাধ্যতামূলক। নিচে একটি আদর্শ HTML5 পেজের কাঠামো ব্যাখ্যাসহ দেওয়া হলো:

<!DOCTYPE html>
<html>
   <head>
      <meta charset="UTF-8">
      <title>My First Page</title>
   </head>
   <body>
      <h1>স্বাগতম আমাদের ওয়েবসাইটে</h1>
      <p>এটি একটি প্যারাগ্রাফ।</p>
   </body>
</html>

কোড ব্যাখ্যা (গুরুত্বপূর্ণ):
- <!DOCTYPE html>: এটি কোনো ট্যাগ নয়, এটি ব্রাউজারকে জানিয়ে দেয় যে ডকুমেন্টটি HTML5 সংস্করণে লেখা।
- <html>: এটি পেজের রুট (Root) এলিমেন্ট। পুরো পেজের সবকিছু এর ভেতরে থাকে।
- <head>: এখানে পেজের মেটা তথ্য (Meta Information) থাকে যা সরাসরি ব্রাউজারের মূল স্ক্রিনে দেখা যায় না। যেমন পেজের টাইটেল, স্টাইলশিট লিংক ইত্যাদি।
- <title>: এটি ব্রাউজারের টাইটেল বার বা ট্যাবে পেজের নাম প্রদর্শন করে। এটি <head> এর ভেতরে থাকে।
- <body>: এটিই পেজের প্রধান অংশ। আমরা ওয়েবসাইটে যা কিছু দেখি (টেক্সট, ছবি, ভিডিও) সব এই <body> ট্যাগের ভেতরে লিখতে হয়।

লেআউট ও সেমান্টিক ট্যাগ (HTML5 Layout)

HTML5-এ ওয়েব পেজের বিভিন্ন অংশকে অর্থপূর্ণভাবে সংজ্ঞায়িত করার জন্য কিছু বিশেষ ট্যাগ যুক্ত করা হয়েছে, যাদেরকে সেমান্টিক ট্যাগ (Semantic Tags) বলা হয়। আগে লেআউট তৈরির জন্য শুধুমাত্র <div> ট্যাগ ব্যবহার করা হতো, কিন্তু <div> দেখে বোঝা যেত না যে সেটি পেজের কোন অংশ (হেডার নাকি ফুটার)।

সেমান্টিক ট্যাগগুলো তাদের নাম দেখেই বোঝা যায় তারা কী কাজ করছে। যেমন: <header>, <footer>, <article>।

সংজ্ঞা (Definition): সেমান্টিক ট্যাগ (Semantic Tag) হলো এমন সব ট্যাগ যা ব্রাউজার এবং ডেভেলপার উভয়ের কাছেই তাদের বিষয়বস্তুর অর্থ স্পষ্টভাবে প্রকাশ করে। উদাহরণ: <table>, <form>, <header>। নন-সেমান্টিক ট্যাগ হলো <div>, <span> যা বিষয়বস্তু সম্পর্কে কিছু বলে না।

HTML5 Semantic Layout showing Header, Nav, Section, Aside, and Footer regions

একটি আদর্শ ওয়েব পেজ লেআউটের প্রধান অংশগুলো হলো:
1. <header>: পেজের ওপরের অংশ, যেখানে লোগো বা শিরোনাম থাকে।
2. <nav>: নেভিগেশন বার, যেখানে মেনু লিংকগুলো থাকে।
3. <section>: পেজের মূল বিষয়বস্তুর একেকটি বিভাগ।
4. <article>: স্বতন্ত্র কোনো লেখা বা ব্লগ পোস্ট।
5. <aside>: মূল কন্টেন্টের পাশে থাকা সাইডবার।
6. <footer>: পেজের একেবারে নিচের অংশ, যেখানে কপিরাইট বা কন্টাক্ট ইনফো থাকে।

পরীক্ষার টিপস (Exam Tip): সৃজনশীল প্রশ্নে তোমাকে একটি লেআউট চিত্র দিয়ে বলতে পারে—"উদ্দীপকের চিত্রটি তৈরির জন্য প্রয়োজনীয় HTML কোড লিখো।" তখন <div> ব্যবহার না করে সেমান্টিক ট্যাগ ব্যবহার করা আধুনিক এবং সঠিক পদ্ধতি। এতে কোড রিডেবিলিটি বাড়ে।

সারাংশ ও পরীক্ষার প্রস্তুতি

এই অধ্যায় থেকে ভালো করার জন্য নিচের বিষয়গুলো ঝালাই করে নাও:

সংক্ষিপ্ত সারাংশ (Quick Revision):
- HTML হলো মার্কআপ ল্যাঙ্গুয়েজ, কঙ্কালস্বরূপ; এটি প্রোগ্রামিং ভাষা নয়।
- ট্যাগ < > এর মধ্যে থাকে, আর এলিমেন্ট হলো শুরু থেকে শেষ পর্যন্ত পুরো অংশ।
- <br>, <hr>, <img>, <input> হলো এম্পটি ট্যাগ (ক্লোজিং নেই)।
- অ্যাট্রিবিউট ট্যাগের ক্ষমতা বাড়ায় এবং সবসময় ওপেনিং ট্যাগে থাকে।
- <!DOCTYPE html> দিয়ে HTML5 বোঝায়, যা সবার শুরুতে লিখতে হয়।
- সেমান্টিক ট্যাগ (যেমন <header>, <footer>) ব্যবহার করা SEO এবং কোড বোঝার জন্য ভালো।

পরিভাষা (Glossary)
পরিভাষা (Term) সংজ্ঞা (Definition)
Tag (ট্যাগ) HTML-এর নির্দেশক কিওয়ার্ড যা < > এর মধ্যে থাকে।
Attribute (অ্যাট্রিবিউট) ট্যাগের অতিরিক্ত বৈশিষ্ট্য নির্দেশক, যা ওপেনিং ট্যাগে বসে।
Element (এলিমেন্ট) ওপেনিং ট্যাগ, কন্টেন্ট এবং ক্লোজিং ট্যাগের সমষ্টি।
Semantic Tag অর্থবোধক ট্যাগ যা ব্রাউজার ও ডেভেলপার উভয়ের কাছে স্পষ্ট (যেমন <table>)।
Boilerplate HTML কোডের প্রারম্ভিক স্ট্যান্ডার্ড কাঠামো।
W3C World Wide Web Consortium - ওয়েবের মান নিয়ন্ত্রণকারী সংস্থা।

অনুশীলনের প্রশ্ন

সৃজনশীল প্রশ্ন

সৃজনশীল প্রশ্ন ১

নিহাল তার আইসিটি ক্লাসে শিখেছে কীভাবে নোটপ্যাড ব্যবহার করে ওয়েবপেজ তৈরি করতে হয়। সে বাড়িতে একটি পেজ তৈরির চেষ্টা করল এবং তাতে নিজের নাম ও কলেজের নাম লিখল। কিন্তু ব্রাউজারে রান করার পর সে দেখল, টাইটেল বারের লেখাটি পেজের বডিতে দেখাচ্ছে এবং প্যারাগ্রাফের লেখাগুলো সব এক লাইনে চলে এসেছে। সে তার বড় ভাইকে সমস্যাটি দেখালে তিনি বললেন, "তুমি HTML এর মৌলিক কাঠামো ঠিকমতো অনুসরণ করনি এবং সঠিক ট্যাগ ব্যবহার করনি।"

ক) HTML কী?
খ) HTML কে কেস সেনসিটিভ ভাষা বলা হয় না কেন?
গ) নিহালের সমস্যাটি সমাধানের জন্য একটি সঠিক মৌলিক কাঠামোর কোড লিখে দেখাও।
ঘ) "ওয়েবপেজ সুন্দরভাবে প্রদর্শনের জন্য সঠিক ট্যাগ ও অ্যাট্রিবিউট ব্যবহার অপরিহার্য"—উদ্দীপকের আলোকে বিশ্লেষণ কর।

উত্তর

(ক) HTML (HyperText Markup Language) হলো ওয়েবপেজ তৈরির জন্য ব্যবহৃত একটি মার্কআপ ল্যাঙ্গুয়েজ, যা ট্যাগের মাধ্যমে টেক্সট, ইমেজ এবং অন্যান্য কন্টেন্ট ব্রাউজারে প্রদর্শন করে।

(খ) HTML কোডে ট্যাগগুলো বড় হাতের (Uppercase) বা ছোট হাতের (Lowercase) অক্ষর—যেকোনোভাবেই লেখা যায় এবং ব্রাউজার উভয়কেই সমানভাবে গ্রহণ করে। যেমন: <body> এবং <BODY> এর মধ্যে কোনো পার্থক্য নেই। একারণে HTML কে কেস সেনসিটিভ (Case Sensitive) ভাষা বলা হয় না।

(গ) উদ্দীপকে নিহালের সমস্যা ছিল সে HTML এর মৌলিক কাঠামো (Structure) ঠিকমতো লেখেনি এবং লাইন ব্রেক বা প্যারাগ্রাফ ট্যাগ ব্যবহার করেনি। নিচে একটি সঠিক মৌলিক কাঠামোর কোড দেওয়া হলো যা তার নাম ও কলেজের নাম সঠিকভাবে প্রদর্শন করবে:

<!DOCTYPE html>
<html>
<head>
    <title>নিহালের ওয়েবপেজ</title>
</head>
<body>
    <h1>নিহাল</h1>
    <p>ঢাকা সিটি কলেজ</p>
</body>
</html>

ব্যাখ্যা: উপরের কোডে <head> অংশে টাইটেল এবং <body> অংশে মূল কন্টেন্ট রাখা হয়েছে। নাম বড় করে দেখানোর জন্য <h1> এবং কলেজের নামের জন্য <p> ট্যাগ ব্যবহার করা হয়েছে, যা লেখাগুলোকে আলাদা লাইনে ও সঠিক ফরম্যাটে দেখাবে।

(ঘ) উদ্দীপকে নিহালের তৈরি পেজটিতে লেখাগুলো এলোমেলোভাবে প্রদর্শিত হচ্ছিল কারণ সে সঠিক ট্যাগ ও অ্যাট্রিবিউট ব্যবহার করেনি। ওয়েবপেজ ডিজাইনে এর গুরুত্ব নিচে বিশ্লেষণ করা হলো:

  1. কাঠামোগত বিন্যাস: HTML এর প্রতিটি ট্যাগের নির্দিষ্ট কাজ আছে। যেমন—<br> ট্যাগ লাইন ব্রেক দেয়, <p> ট্যাগ প্যারাগ্রাফ তৈরি করে। নিহাল এগুলো ব্যবহার না করায় সব লেখা এক লাইনে চলে এসেছিল। সঠিক ট্যাগ কন্টেন্টকে সুশৃঙ্খল রাখে।
  2. তথ্য সঠিক স্থানে প্রদর্শন: <title> ট্যাগ ব্রাউজারের টাইটেল বারে নাম দেখায়, আর <body> ট্যাগের ভেতরের কন্টেন্ট মূল পেজে দেখায়। নিহাল এই কাঠামো না মানায় তার টাইটেলের তথ্য ভুল জায়গায় দেখাচ্ছিল।
  3. সৌন্দর্য বৃদ্ধি ও কাস্টমাইজেশন: অ্যাট্রিবিউট ব্যবহার করে কন্টেন্টের অবস্থান (align), রঙ (color), বা আকার পরিবর্তন করা যায়। সঠিক অ্যাট্রিবিউট ছাড়া পেজটি দেখতে সাধারণ ও আকর্ষণহীন মনে হয়।
  4. ব্রাউজারের বোধগম্যতা: ব্রাউজার কেবল সঠিক সিনট্যাক্স ও ট্যাগ বুঝেই আউটপুট দেয়। ভুল বা অপ্রয়োজনীয় ট্যাগ ব্যবহার করলে পেজ ঠিকমতো লোড হয় না বা ভেঙে যায়।

সুতরাং, উদ্দীপকের আলোকে বলা যায়, একটি ওয়েবপেজকে ব্যবহারকারীর কাছে গ্রহণযোগ্য, সুন্দর এবং সঠিকভাবে উপস্থাপন করতে ট্যাগ ও অ্যাট্রিবিউটের সঠিক প্রয়োগ অপরিহার্য।

সৃজনশীল প্রশ্ন ২

আইসিটি শিক্ষক ক্লাসে HTML5 এর নতুন কিছু ফিচার নিয়ে আলোচনা করছিলেন। তিনি বোর্ডে নিচের কোডটি লিখলেন:

<p>পানির রাসায়নিক সংকেত H<sub>2</sub>O</p>
<p>তিনি বললেন, (a+b)<sup>2</sup> এর সূত্রটি মুখস্ত কর।</p>

এরপর তিনি শিক্ষার্থীদের বললেন, "আধুনিক ওয়েবে আমরা পেজের বিভিন্ন অংশ ভাগ করার জন্য <div> এর পরিবর্তে <header>, <footer>, <section> এর মতো অর্থবহ ট্যাগ ব্যবহার করি।"

ক) এম্পটি ট্যাগ (Empty Tag) কী?
খ) <br> এবং <p> ট্যাগের মধ্যে পার্থক্য লেখ।
গ) উদ্দীপকে প্রদর্শিত H2O এবং (a+b)2 সঠিকভাবে প্রদর্শনের জন্য ব্যবহৃত ট্যাগগুলোর কাজ ব্যাখ্যা কর।
ঘ) শিক্ষকের উল্লিখিত "অর্থবহ ট্যাগ" বা সেমান্টিক এলিমেন্টগুলো ব্যবহার করা কেন সুবিধাজনক? মতামত দাও।

উত্তর

(ক) যেসকল HTML ট্যাগের শুরু আছে কিন্তু শেষ বা ক্লোজিং ট্যাগ নেই এবং যার ভেতরে কোনো কন্টেন্ট থাকে না, তাকে এম্পটি ট্যাগ (Empty Tag) বলে। উদাহরণ: <br>, <img>, <hr>।

(খ) <br> এবং <p> ট্যাগের পার্থক্য:
১. কাজ: <br> ট্যাগ ব্যবহৃত হয় লেখার মাঝখানে লাইন ব্রেক বা নতুন লাইন তৈরি করার জন্য। অন্যদিকে, <p> ট্যাগ ব্যবহৃত হয় একটি নতুন অনুচ্ছেদ বা প্যারাগ্রাফ তৈরি করার জন্য।
২. ধরণ: <br> হলো এম্পটি ট্যাগ (ক্লোজিং নেই), কিন্তু <p> হলো কন্টেইনার ট্যাগ (ওপেনিং ও ক্লোজিং উভয়ই আছে)।
৩. ফাঁকা স্থান: <p> ট্যাগ প্যারাগ্রাফের আগে ও পরে স্বয়ংক্রিয়ভাবে কিছু মার্জিন বা ফাঁকা জায়গা তৈরি করে, যা <br> করে না।

(গ) উদ্দীপকে রাসায়নিক সংকেত এবং গাণিতিক সূত্র লেখার জন্য <sub> এবং <sup> ট্যাগ ব্যবহার করা হয়েছে। নিচে এদের কাজ ব্যাখ্যা করা হলো:

  1. <sub> (Subscript) ট্যাগ: পানির সংকেত $H_2O$ তে '2' সংখ্যাটি 'H' এর সামান্য নিচে অবস্থিত। সাধারণ টেক্সট থেকে কোনো অক্ষর বা সংখ্যাকে সামান্য নিচে ছোট করে দেখানোর জন্য <sub> বা সাবস্ক্রিপ্ট ট্যাগ ব্যবহৃত হয়। কোডে H<sub>2</sub>O লিখলে আউটপুট আসবে $H_2O$।

  2. <sup> (Superscript) ট্যাগ: গাণিতিক সূত্র $(a+b)^2$ এ '2' সংখ্যাটি পাওয়ার বা ঘাত হিসেবে উপরে অবস্থিত। সাধারণ টেক্সট থেকে কোনো অক্ষর বা সংখ্যাকে সামান্য উপরে ছোট করে দেখানোর জন্য <sup> বা সুপারস্ক্রিপ্ট ট্যাগ ব্যবহৃত হয়। কোডে (a+b)<sup>2</sup> লিখলে আউটপুট আসবে $(a+b)^2$।

অর্থাৎ, উদ্দীপকের কোডটি টেক্সটের বেসলাইন পরিবর্তন করে গানিতিক ও বৈজ্ঞানিক ফরম্যাট প্রদর্শনে সহায়তা করে।

(ঘ) শিক্ষকের উল্লিখিত <header>, <footer>, <section> ইত্যাদি ট্যাগগুলোকে HTML5-এ 'সেমান্টিক ট্যাগ' (Semantic Tags) বলা হয়। <div> এর পরিবর্তে এগুলো ব্যবহারের সুবিধাসমূহ নিচে বিশ্লেষণ করা হলো:

  1. কোড রিডেবিলিটি (Code Readability): সেমান্টিক ট্যাগ দেখে সহজেই বোঝা যায় পেজের কোন অংশটি কী কাজ করছে। যেমন <header> দেখলে বোঝা যায় এটি শিরোনাম অংশ, কিন্তু <div> দেখলে তা বোঝা যায় না। এটি ডেভেলপারদের জন্য কোড মেইনটেইন করা সহজ করে।
  2. সার্চ ইঞ্জিন অপ্টিমাইজেশন (SEO): গুগল বা অন্যান্য সার্চ ইঞ্জিন সেমান্টিক ট্যাগ ব্যবহার করা পেজকে বেশি গুরুত্ব দেয়। সার্চ ইঞ্জিন বুঝতে পারে পেজের কোন অংশটি মূল কন্টেন্ট (<article>) আর কোনটি নভিগেশন (<nav>), ফলে র‍্যাঙ্কিং ভালো হয়।
  3. অ্যাক্সেসিবিলিটি (Accessibility): দৃষ্টিপ্রতিবন্ধীদের জন্য ব্যবহৃত স্ক্রিন রিডার সফটওয়্যারগুলো সেমান্টিক ট্যাগ ব্যবহার করে পেজের গঠন সঠিকভাবে পড়ে শোনাতে পারে। এতে ওয়েবসাইটটি সবার জন্য ব্যবহারযোগ্য হয়।
  4. ব্রাউজার সাপোর্ট: আধুনিক ব্রাউজারগুলো এই ট্যাগগুলোর ওপর ভিত্তি করে ডিফল্ট স্টাইলিং ও ফিচার প্রদান করতে পারে।

সুতরাং, সাধারণ <div> ট্যাগের চেয়ে সেমান্টিক ট্যাগ ব্যবহার করা ওয়েবসাইটকে প্রযুক্তিগতভাবে আধুনিক, এসইও-বান্ধব এবং ব্যবহারকারী-বান্ধব করে তোলে।

এমসিকিউ

১। HTML এর জনক কে?

ক) বিল গেটস
খ) টিম বার্নার্স লি
গ) স্টিভ জবস
ঘ) মার্ক জুকারবার্গ

সঠিক উত্তর: খ) টিম বার্নার্স লি

ব্যাখ্যা: ১৯৮৯ সালে টিম বার্নার্স লি (Tim Berners-Lee) জেনেভায় অবস্থিত CERN ল্যাবে কাজ করার সময় HTML আবিষ্কার করেন।

২। HTML ফাইলের এক্সটেনশন কোনটি?

ক) .ht
খ) .hml
গ) .html
ঘ) .text

সঠিক উত্তর: গ) .html

ব্যাখ্যা: যেকোনো HTML ডকুমেন্ট সেভ করার সময় ফাইলের নামের শেষে .html বা .htm এক্সটেনশন ব্যবহার করতে হয়।

৩। নিচের কোনটি এম্পটি (Empty) ট্যাগ?

ক) <body>
খ) <br>
গ) <p>
ঘ) <h1>

সঠিক উত্তর: খ) <br>

ব্যাখ্যা: যে ট্যাগের কোনো ক্লোজিং ট্যাগ থাকে না এবং যার ভেতরে কোনো কন্টেন্ট থাকে না, তাকে এম্পটি ট্যাগ বলে। <br>, <img>, <hr> হলো এম্পটি ট্যাগ।

৪। HTML এ সবচেয়ে বড় হেডিং ট্যাগ কোনটি?

ক) <h6>
খ) <h1>
গ) <head>
ঘ) <title>

সঠিক উত্তর: খ) <h1>

ব্যাখ্যা: HTML এ মোট ৬টি হেডিং ট্যাগ আছে (<h1> থেকে <h6>)। এর মধ্যে <h1> সবচেয়ে বড় এবং <h6> সবচেয়ে ছোট হেডিং প্রদর্শন করে।

৫। ওয়েব পেজের টাইটেল (Title) কোথায় প্রদর্শিত হয়?

ক) পেজের বডিতে
খ) ব্রাউজারের টাইটেল বারে
গ) ফুটার অংশে
ঘ) স্ট্যাটাস বারে

সঠিক উত্তর: খ) ব্রাউজারের টাইটেল বারে

ব্যাখ্যা: <title> ট্যাগের মধ্যে যা লেখা হয়, তা ব্রাউজারের একেবারে উপরের টাইটেল বারে বা ট্যাবে প্রদর্শিত হয়।

৬। টেক্সটকে গাঢ় বা বোল্ড (Bold) করতে কোন ট্যাগ ব্যবহৃত হয়?

ক) <i>
খ) <b>
গ) <u>
ঘ) <p>

সঠিক উত্তর: খ) <b>

ব্যাখ্যা: <b> বা <strong> ট্যাগ ব্যবহার করে টেক্সটকে সাধারণের চেয়ে মোটা বা বোল্ড করা হয়।

৭। $a^2 + b^2$ লিখতে কোন ট্যাগটি প্রয়োজন?

ক) <sub>
খ) <sup>
গ) <pow>
ঘ) <up>

সঠিক উত্তর: খ) <sup>

ব্যাখ্যা: কোনো টেক্সটকে সাধারণ লাইনের চেয়ে একটু উপরে ছোট করে দেখানোর জন্য <sup> (Superscript) ট্যাগ ব্যবহৃত হয়। যেমন: স্কয়ার বা পাওয়ার দিতে এটি লাগে।

৮। $H_2O$ সংকেতটি লিখতে কোন ট্যাগ প্রয়োজন?

ক) <sub>
খ) <sup>
গ) <down>
ঘ) <bottom>

সঠিক উত্তর: ক) <sub>

ব্যাখ্যা: কোনো টেক্সটকে সাধারণ লাইনের চেয়ে একটু নিচে ছোট করে দেখানোর জন্য <sub> (Subscript) ট্যাগ ব্যবহৃত হয়। রাসায়নিক সংকেত লিখতে এটি বেশি লাগে।

৯। নিচের কোনটি কন্টেইনার (Container) ট্যাগ?

ক) <br>
খ) <img>
গ) <body>
ঘ) <hr>

সঠিক উত্তর: গ) <body>

ব্যাখ্যা: যে ট্যাগের ওপেনিং এবং ক্লোজিং উভয়ই থাকে এবং যার ভেতরে কন্টেন্ট থাকে, তাকে কন্টেইনার ট্যাগ বলে। <body> শুরু এবং শেষ আছে।

১০। HTML ট্যাগগুলো কী চিহ্ন দ্বারা আবৃত থাকে?

ক) { }
খ) [ ]
গ) ( )
ঘ) < >

সঠিক উত্তর: ঘ) < >

ব্যাখ্যা: HTML এর সকল কি-ওয়ার্ড বা ট্যাগ অ্যাঙ্গেল ব্র্যাকেট < > এর মধ্যে লিখতে হয়।

১১। নিচের কোনটি সঠিক HTML কাঠামো?

ক) <html><head><body>...</body></head></html>
খ) <html><head>...</head><body>...</body></html>
গ) <head><html>...</html><body>...</body></head>
ঘ) <body><html>...</html><head>...</head></body>

সঠিক উত্তর: খ) <html><head>...</head><body>...</body></html>

ব্যাখ্যা: একটি স্ট্যান্ডার্ড HTML পেজের প্রধান দুটি অংশ হলো <head> এবং <body>, যা <html> ট্যাগের ভেতরে থাকে। হেড আগে এবং বডি পরে আসে।

১২। HTML এর সর্বশেষ ভার্সন কোনটি?

ক) HTML 4.01
খ) XHTML
গ) HTML5
ঘ) HTML 2.0

সঠিক উত্তর: গ) HTML5

ব্যাখ্যা: বর্তমানে প্রচলিত এবং সর্বশেষ HTML ভার্সন হলো HTML5, যা অনেক নতুন ফিচার ও সেমান্টিক ট্যাগ যুক্ত করেছে।

১৩। অনুচ্ছেদ বা প্যারাগ্রাফ তৈরির জন্য কোন ট্যাগ ব্যবহৃত হয়?

ক) <para>
খ) <p>
গ) <text>
ঘ) <line>

সঠিক উত্তর: খ) <p>

ব্যাখ্যা: নতুন প্যারাগ্রাফ বা অনুচ্ছেদ তৈরি করতে <p> ট্যাগ ব্যবহৃত হয়, যা স্বয়ংক্রিয়ভাবে লেখার আগে ও পরে ফাঁকা স্থান তৈরি করে।

১৪। HTML কমেন্ট লেখার সঠিক নিয়ম কোনটি?

ক) // This is a comment
খ) /* This is a comment */
গ) <!-- This is a comment -->
ঘ) <comment> This is a comment </comment>

সঠিক উত্তর: গ) <!-- This is a comment -->

ব্যাখ্যা: HTML কোডে কোনো নোট বা মন্তব্য রাখতে <!-- দিয়ে শুরু এবং --> দিয়ে শেষ করতে হয়। ব্রাউজার এটি প্রদর্শন করে না।

১৫। হাইপারলিংক তৈরি করতে কোন ট্যাগ ব্যবহৃত হয়?

ক) <link>
খ) <a>
গ) <href>
ঘ) <url>

সঠিক উত্তর: খ) <a>

ব্যাখ্যা: <a> (Anchor) ট্যাগ ব্যবহার করে এক পেজের সাথে অন্য পেজ বা ফাইলের সংযোগ বা হাইপারলিংক তৈরি করা হয়।

১৬। HTML ভাষাটির বৈশিষ্ট্য হলো—
i. এটি কেস সেনসিটিভ নয়
ii. এটি প্ল্যাটফর্ম ইন্ডিপেন্ডেন্ট
iii. এটি একটি প্রোগ্রামিং ভাষা

নিচের কোনটি সঠিক?

ক) i ও ii
খ) i ও iii
গ) ii ও iii
ঘ) i, ii ও iii

সঠিক উত্তর: ক) i ও ii

ব্যাখ্যা: HTML কোনো প্রোগ্রামিং ভাষা নয়, এটি মার্কআপ ল্যাঙ্গুয়েজ। তবে এটি কেস সেনসিটিভ নয় (ছোট/বড় হাতের অক্ষর সমান) এবং যেকোনো অপারেটিং সিস্টেমে চলে (প্ল্যাটফর্ম ইন্ডিপেন্ডেন্ট)।

১৭। <body> ট্যাগের অ্যাট্রিবিউট হতে পারে—
i. bgcolor
ii. text
iii. src

নিচের কোনটি সঠিক?

ক) i ও ii
খ) i ও iii
গ) ii ও iii
ঘ) i, ii ও iii

সঠিক উত্তর: ক) i ও ii

ব্যাখ্যা: bgcolor দিয়ে ব্যাকগ্রাউন্ড কালার এবং text দিয়ে লেখার ডিফল্ট কালার সেট করা যায়। কিন্তু src অ্যাট্রিবিউট সাধারণত ইমেজ বা স্ক্রিপ্ট ট্যাগে ব্যবহৃত হয়।

১৮। ফন্টের স্টাইল পরিবর্তনের জন্য ব্যবহৃত ট্যাগ—
i. <b>
ii. <i>
iii. <u>

নিচের কোনটি সঠিক?

ক) i ও ii
খ) i ও iii
গ) ii ও iii
ঘ) i, ii ও iii

সঠিক উত্তর: ঘ) i, ii ও iii

ব্যাখ্যা: <b> (Bold), <i> (Italic), এবং <u> (Underline)—তিনটিই টেক্সটের ফরম্যাটিং বা স্টাইল পরিবর্তনের জন্য ব্যবহৃত হয়।

নিচের উদ্দীপকটি পড় এবং ১৯ ও ২০ নং প্রশ্নের উত্তর দাও:

<html>
 <body>
  <p> I love <b> Bangladesh </b> </p>
 </body>
</html>

১৯। উদ্দীপকের কোডটিতে কয়টি এলিমেন্ট রয়েছে?

ক) ১টি
খ) ২টি
গ) ৩টি
ঘ) ৪টি

সঠিক উত্তর: ঘ) ৪টি

ব্যাখ্যা: এখানে html, body, p, এবং b—মোট ৪টি ভিন্ন ভিন্ন এলিমেন্ট বা ট্যাগ ব্যবহৃত হয়েছে।

২০। 'Bangladesh' শব্দটি ব্রাউজারে কেমন দেখাবে?

ক) সাধারণ ফন্টে
খ) বাঁকা বা ইটালিক
গ) মোটা বা বোল্ড
ঘ) আন্ডারলাইন করা

সঠিক উত্তর: গ) মোটা বা বোল্ড

ব্যাখ্যা: শব্দটি <b> এবং </b> ট্যাগের মধ্যে থাকায় এটি সাধারণ টেক্সটের চেয়ে গাঢ় বা বোল্ড দেখাবে।

২১। <font face="Arial">Text</font>—এখানে face কী?

ক) ট্যাগ
খ) অ্যাট্রিবিউট
গ) ভ্যালু
ঘ) এলিমেন্ট

সঠিক উত্তর: খ) অ্যাট্রিবিউট

ব্যাখ্যা: ট্যাগের ওপেনিং অংশের ভেতরে যা থাকে এবং ট্যাগের কার্যকারিতা বা বৈশিষ্ট্য নির্দেশ করে, তাকে অ্যাট্রিবিউট বলে। এখানে face হলো অ্যাট্রিবিউট।

২২। নিচের কোনটি সঠিক সিনট্যাক্স?

ক) <body color="red">
খ) <body bgcolor="red">
গ) <body bg="red">
ঘ) <body background="red">

সঠিক উত্তর: খ) <body bgcolor="red">

ব্যাখ্যা: HTML এ পেজের ব্যাকগ্রাউন্ড কালার পরিবর্তনের জন্য bgcolor অ্যাট্রিবিউট ব্যবহার করা হয়। background অ্যাট্রিবিউট সাধারণত ছবি যুক্ত করতে ব্যবহৃত হয়।

২৩। লাইন ব্রেক বা নতুন লাইন তৈরি করতে কোন ট্যাগ ব্যবহার করা হয়?

ক) <lb>
খ) <break>
গ) <br>
ঘ) <newline>

সঠিক উত্তর: গ) <br>

ব্যাখ্যা: <br> (Break) ট্যাগ ব্যবহার করলে কার্সার বা লেখা পরবর্তী লাইনে চলে যায়।

২৪। <center> ট্যাগটি কী কাজ করে?

ক) লেখাকে বামে সরায়
খ) লেখাকে ডানে সরায়
গ) লেখাকে মাঝখানে আনে
ঘ) লেখাকে জাস্টিফাই করে

সঠিক উত্তর: গ) লেখাকে মাঝখানে আনে

ব্যাখ্যা: <center> ট্যাগ ব্যবহার করলে এর ভেতরের টেক্সট বা এলিমেন্ট পেজের মাঝখানে (Center alignment) প্রদর্শিত হয়।

২৫। ওয়েব পেজ ডিজাইন করার সময় সাধারণত কোন ট্যাগটি সবার প্রথমে থাকে?

ক) <head>
খ) <title>
গ) <body>
ঘ) <html>

সঠিক উত্তর: ঘ) <html>

ব্যাখ্যা: যেকোনো HTML ডকুমেন্টের শুরু হয় <html> ট্যাগ দিয়ে এবং শেষ হয় </html> দিয়ে। এটিই রুট এলিমেন্ট।