এইচটিএমএল টেক্সট ফরম্যাটিং

এইচটিএমএল টেক্সট ফরম্যাটিং ট্যাগসমূহ: হেডিং, প্যারাগ্রাফ, বোল্ড, ইটালিক, সাবস্ক্রিপ্ট, সুপারস্ক্রিপ্ট ইত্যাদি নিয়ে বিস্তারিত আলোচনা। এইচএসসি আইসিটি অধ্যায় ৪।

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

এইচটিএমএল টেক্সট ফরম্যাটিং (HTML Text Formatting)

  1. এইচটিএমএল টেক্সট ফরম্যাটিং
  2. কেন টেক্সট ফরম্যাটিং প্রয়োজন?
  3. হেডিং ট্যাগ (Heading Tags)
  4. প্যারাগ্রাফ ও লাইন ব্রেক
  5. টেক্সট স্টাইলিং (Visual Styles)
  6. লজিক্যাল বা সিম্যান্টিক ফরম্যাটিং
  7. সাবস্ক্রিপ্ট ও সুপারস্ক্রিপ্ট
  8. বিশেষ কিছু ফরম্যাটিং ট্যাগ
  9. কোটেশন ও এব্রিভিয়েশন
  10. ফন্ট ট্যাগ (Font Tag)
  11. চলো প্র্যাকটিস করি
  12. সমাধান
  13. আজকের ক্লাসের সারসংক্ষেপ

এইচটিএমএল টেক্সট ফরম্যাটিং

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

১। এইচটিএমএল টেক্সট ফরম্যাটিং কী তা ব্যাখ্যা করতে পারব।
২। বিভিন্ন হেডিং ট্যাগ ও প্যারাগ্রাফ ট্যাগ ব্যবহার করতে পারব।
৩। লেখাকে বোল্ড, ইটালিক, আন্ডারলাইন, সাবস্ক্রিপ্ট ও সুপারস্ক্রিপ্ট করতে পারব।
৪। ফন্ট ট্যাগ এবং অন্যান্য বিশেষ ফরম্যাটিং ট্যাগ প্রয়োগ করতে পারব।

স্বাগতম সবাইকে আমাদের আজকের আইসিটি ক্লাসে। আজকে আমরা এইচটিএমএল এর খুবই মজার এবং গুরুত্বপূর্ণ একটি অংশ শিখব, সেটা হলো টেক্সট ফরম্যাটিং। সুন্দর ওয়েবসাইট তৈরির জন্য এটা জানা খুব জরুরি। এই লেকচার শেষে আমরা- ১। এইচটিএমএল টেক্সট ফরম্যাটিং কী তা ব্যাখ্যা করতে পারব। ২। বিভিন্ন হেডিং ট্যাগ ও প্যারাগ্রাফ ট্যাগ সঠিকভাবে ব্যবহার করতে পারব। ৩। লেখাকে বোল্ড, ইটালিক, আন্ডারলাইন, সাবস্ক্রিপ্ট ও সুপারস্ক্রিপ্ট করতে পারব। এবং ৪। ফন্ট ট্যাগ এবং অন্যান্য বিশেষ ফরম্যাটিং ট্যাগ প্রয়োগ করতে পারব। চলো তাহলে শুরু করা যাক।

কেন টেক্সট ফরম্যাটিং প্রয়োজন?

সাধারণ নোটপ্যাড টেক্সট বনাম ফরম্যাট করা সুন্দর ওয়েব পেজ।

  • তথ্যের গুরুত্ব বোঝাতে: শিরোনাম, বোল্ড টেক্সট ইত্যাদি।
  • পাঠযোগ্যতা বাড়াতে: প্যারাগ্রাফ, স্পেস ব্যবহার।
  • সৌন্দর্য বৃদ্ধিতে: রঙ, স্টাইল পরিবর্তন।

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

হেডিং ট্যাগ (Heading Tags)

এইচটিএমএল-এ ৬ ধরণের হেডিং ট্যাগ আছে:

  • <h1> : সবচেয়ে বড় হেডিং (Main Title)
  • <h2> থেকে <h5> : ক্রমানুসারে ছোট হয়
  • <h6> : সবচেয়ে ছোট হেডিং

গুরুত্বপূর্ণ: সার্চ ইঞ্জিন (যেমন Google) হেডিং দেখে পেজের বিষয়বস্তু বোঝে।

খবরের কাগজে যেমন প্রধান খবরটা সবচেয়ে বড় হরফে থাকে, ওয়েবেও ঠিক তাই। এইচটিএমএল-এ মোট ৬টি হেডিং ট্যাগ আছে। `<h1>` হলো সবচেয়ে বড় হেডিং, যা সাধারণত পেজের মেইন টাইটেলের জন্য ব্যবহার হয়। এরপর ক্রমানুসারে `<h2>` থেকে `<h6>` পর্যন্ত আছে। ছবিতে তোমরা দেখতে পাচ্ছো `<h6>` কতটা ছোট। মনে রাখবে, `<h1>` কিন্তু শুধু ফন্ট সাইজ বড় করার জন্য নয়, এটা মূলত পেজের স্ট্রাকচার এবং এসইও (SEO) এর জন্য খুব গুরুত্বপূর্ণ।

প্যারাগ্রাফ ও লাইন ব্রেক

  • <p> ট্যাগ: নতুন প্যারাগ্রাফ তৈরি করে। এটি Block Level Element। স্বয়ংক্রিয়ভাবে আগে ও পরে ফাঁকা জায়গা (Margin) তৈরি করে।
  • <br> ট্যাগ: লাইন ব্রেক (পরের লাইনে যাওয়া)। এটি Empty Tag (এর কোনো ক্লোজিং ট্যাগ নেই)।
  • <hr> ট্যাগ: হরাইজোন্টাল রুল (অনুভূমিক দাগ টানা)।

তোমরা হয়তো ভাবছো, কোডে এন্টার দিলেই তো নতুন লাইন হয়! কিন্তু ব্রাউজার কোড এডিটরের এন্টার বা স্পেস বোঝে না। ছবিতে দেখো, আমরা কোডে এন্টার দিয়েছি কিন্তু আউটপুটে সব এক লাইনে এসেছে। নতুন প্যারাগ্রাফের জন্য আমাদের `<p>` ট্যাগ ব্যবহার করতে হয়। `<p>` ট্যাগ দিলে লেখার আগে ও পরে একটু ফাঁকা জায়গা তৈরি হয়। আর যদি একই প্যারাগ্রাফের মধ্যে নিচের লাইনে যেতে চাও, তবে `<br>` বা ব্রেক ট্যাগ দিতে হবে। খেয়াল করো, `<br>` এর কিন্তু কোনো ক্লোজিং ট্যাগ নেই, এটি এম্পটি ট্যাগ।

টেক্সট স্টাইলিং (Visual Styles)

লেখার স্টাইল পরিবর্তন করা:

  • Bold (বোল্ড): লেখা মোটা করতে <b> ট্যাগ
  • Italic (ইটালিক): লেখা বাঁকা করতে <i> ট্যাগ
  • Underline (আন্ডারলাইন): লেখার নিচে দাগ দিতে <u> ট্যাগ

লেখাকে হাইলাইট করতে আমরা প্রায়ই লেখাকে মোটা বা বোল্ড করি, এর জন্য ব্যবহার হয় `<b>` ট্যাগ। লেখাকে একটু স্টাইলিশ বা বাঁকা করতে চাইলে ব্যবহার করবে `<i>` ট্যাগ, যাকে আমরা ইটালিক বলি। আর কোনো গুরুত্বপূর্ণ অংশের নিচে দাগ দিতে চাইলে `<u>` ট্যাগ ব্যবহার করবে। মনে রাখা খুব সহজ—B তে Bold, I তে Italic, U তে Underline। ভিডিওটা পজ করে তোমরা এই ট্যাগগুলো একবার প্র্যাকটিস করে দেখতে পারো।

লজিক্যাল বা সিম্যান্টিক ফরম্যাটিং

Bold vs Strong:
- <b>: শুধুই লেখা মোটা করে (Visual)।
- <strong>: লেখা মোটা করে এবং ব্রাউজারকে বলে এটি গুরুত্বপূর্ণ (Semantic)।

Italic vs Emphasis:
- <i>: শুধুই লেখা বাঁকা করে।
- <em>: লেখা বাঁকা করে এবং পড়ার সময় জোর দেওয়া (Emphasis) বোঝায়।

এখন একটা মজার প্রশ্ন—`<b>` আর `<strong>` তো দেখতে একই, তাহলে পার্থক্য কী? `<b>` শুধু দেখতে বোল্ড করে, কিন্তু `<strong>` ব্রাউজারকে বলে যে এই শব্দটা বা বাক্যটা খুবই গুরুত্বপূর্ণ। যারা চোখে দেখে না, তাদের জন্য স্ক্রিন রিডার যখন পড়ে শোনায়, তখন `<strong>` বা `<em>` ট্যাগ থাকলে সেটা গলার স্বরে জোর দিয়ে পড়ে। আধুনিক ওয়েবে আমরা তাই `<strong>` ও `<em>` বেশি ব্যবহার করার চেষ্টা করি। একে বলা হয় সিম্যান্টিক মার্কআপ।

সাবস্ক্রিপ্ট ও সুপারস্ক্রিপ্ট

গাণিতিক ও বৈজ্ঞানিক সূত্রের জন্য:

  • <sub> (Subscript): স্বাভাবিক লাইনের নিচে লেখা হয়।
  • উদাহরণ: $H_2O$ (পানির সংকেত)
  • <sup> (Superscript): স্বাভাবিক লাইনের উপরে লেখা হয়।
  • উদাহরণ: $(a+b)^2$ (বীজগণিতের সূত্র)

বিজ্ঞানের ছাত্ররা তো জানোই, পানির সংকেত $H_2O$ লিখতে ২-কে একটু নিচে নামাতে হয়। এটাকে বলে সাবস্ক্রিপ্ট। মনে রাখবে, 'Sub' মানে নিচে (যেমন সাবমেরিন পানির নিচে চলে)। তাই আমরা `<sub>` ট্যাগ ব্যবহার করি। আর $(a+b)^2$ লিখতে ২-কে উপরে তুলতে হয়, এটাকে বলে সুপারস্ক্রিপ্ট। সুপারম্যান যেমন আকাশে ওড়ে, সুপারস্ক্রিপ্টও উপরে থাকে। এর জন্য `<sup>` ট্যাগ ব্যবহার করবে।

বিশেষ কিছু ফরম্যাটিং ট্যাগ

  • <del>: লেখার মাঝখানে দাগ টানা (Strikethrough)। সাধারণত পুরাতন দাম বা ভুল সংশোধনে ব্যবহৃত হয়।
  • <mark>: লেখাকে হাইলাইট করা (মার্কার দিয়ে দাগানোর মতো)।
  • <pre>: প্রি-ফরম্যাটেড টেক্সট। তুমি কোডে যেভাবে লিখবে (স্পেস, এন্টার সহ), ব্রাউজারে ঠিক সেভাবেই দেখাবে।

ই-কমার্স সাইটে ডিসকাউন্ট দেখেছ? আগের দামের ওপর একটা দাগ টানা থাকে? ওটা `<del>` ট্যাগ দিয়ে করা হয়, মানে deleted text। আবার বই পড়ার সময় আমরা যেমন ইম্পরট্যান্ট লাইন হাইলাইটার দিয়ে দাগাই, ওয়েবে `<mark>` ট্যাগ সেটা করে দেয়—ব্যাকগ্রাউন্ড হলুদ হয়ে যায়। আর `<pre>` ট্যাগ খুব কাজের—তুমি কোডে যতগুলো স্পেস বা এন্টার দেবে, ব্রাউজারে ঠিক তেমনই দেখাবে। কবিতার লাইন সাজাতে বা কোড দেখাতে এটা খুব দরকারি।

কোটেশন ও এব্রিভিয়েশন

  • <blockquote>: দীর্ঘ উদ্ধৃতি বা কোটেশন। ব্রাউজার দুই পাশে জায়গা ছেড়ে দেয় (Indent)।
  • <q>: ছোট বা এক লাইনের উদ্ধৃতি। এটি অটোমেটিক ডাবল কোটেশন (" ") যোগ করে।
  • <abbr>: কোনো শব্দের পূর্ণরূপ দেখানোর জন্য।
  • ব্যবহার: <abbr title="World Health Organization">WHO</abbr>
  • মাউস কার্সার নিলেই পূর্ণরূপ (Title) দেখাবে।

কারও উক্তি বা বাণী প্রকাশ করতে আমরা `<blockquote>` ব্যবহার করি। এতে লেখাটা একটু সরে এসে আলাদাভাবে সুন্দর দেখায়। আর যদি লেখার মাঝেই ছোট কোনো উক্তি থাকে, তবে `<q>` ট্যাগ ব্যবহার করবে, এটা অটোমেটিক ডাবল কোটেশন বসিয়ে দেবে। আরেকটা মজার ট্যাগ হলো `<abbr>`। ধরো তুমি লিখলে 'WHO', মাউস ধরলে দেখাবে 'World Health Organization'। এটা `<abbr title='...'>` দিয়ে করা হয়।

ফন্ট ট্যাগ (Font Tag)

সতর্কতা: HTML5 এ এটি ব্যবহার হয় না (Deprecated), কিন্তু সিলেবাসে আছে। আধুনিক ওয়েবে CSS ব্যবহার করা উচিত।

গঠন: <font attribute="value">Text</font>

অ্যাট্রিবিউটসমূহ:
1. face: ফন্টের নাম (যেমন Arial, SutonnyMJ)
2. size: সাইজ ১ থেকে ৭ পর্যন্ত।
3. color: রঙের নাম (Red) বা হেক্স কোড (#FF0000)।

এখন যে ট্যাগটি দেখব, সেটি হলো `<font>` ট্যাগ। সত্যি বলতে, আধুনিক প্রফেশনাল ওয়েবে এটি আর ব্যবহার হয় না, এর কাজ এখন CSS দিয়ে করা হয়। কিন্তু আমাদের বইতে এবং সিলেবাসে এটি আছে, তাই শিখতে হবে। এর তিনটি হাত বা অ্যাট্রিবিউট আছে—face দিয়ে ফন্ট স্টাইল ঠিক করা হয়, size দিয়ে আকার (১ থেকে ৭ এর মধ্যে), এবং color দিয়ে লেখার রঙ পরিবর্তন করা হয়।

চলো প্র্যাকটিস করি

নিচের বাক্যটির জন্য এইচটিএমএল কোড লেখো:

"বাংলাদেশের জাতীয় কবি কাজী নজরুল ইসলাম"

শর্ত:
১. 'জাতীয় কবি' লেখাটি আন্ডারলাইন হবে।
২. 'কাজী নজরুল ইসলাম' লেখাটি বোল্ড ও লাল রঙের হবে।

ভিডিওটি পজ করো এবং নিজেই চেষ্টা করো!

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

সমাধান

সঠিক কোড:

<p>
  বাংলাদেশের <u>জাতীয় কবি</u> 
  <b><font color="red">কাজী নজরুল ইসলাম</font></b>
</p>

লক্ষ্যণীয়:
- নেস্টিং (Nesting): যে ট্যাগ পরে শুরু হয়েছে (<font>), সেটি আগে শেষ হয়েছে (</font>)।
- <b> এবং <font> ট্যাগ একসাথে ব্যবহার করা হয়েছে।

দেখো, আমরা প্যারাগ্রাফ `<p>` দিয়ে শুরু করেছি। 'জাতীয় কবি' এর আগে `<u>` দিয়েছি এবং পরে `</u>` দিয়ে শেষ করেছি। 'কাজী নজরুল ইসলাম' এর জন্য `<b>` এবং রঙ করার জন্য `<font>` ট্যাগ ব্যবহার করেছি। খেয়াল করো, `<font>` ট্যাগ `<b>` এর ভেতরে শুরু হয়েছে, তাই এটি `<b>` শেষ হওয়ার আগেই শেষ হয়েছে। একে বলে ট্যাগ নেস্টিং (Nesting)। তোমার উত্তরের সাথে কি মিলেছে? না মিললে আবার একটু দেখে নাও।

আজকের ক্লাসের সারসংক্ষেপ

এক নজরে আজকের শেখা ট্যাগসমূহ:

ট্যাগ কাজ
<b> / <strong> লেখাকে বোল্ড বা মোটা করা
<i> / <em> লেখাকে ইটালিক বা বাঁকা করা
<u> লেখার নিচে দাগ দেওয়া (Underline)
<sub> / <sup> সাবস্ক্রিপ্ট ও সুপারস্ক্রিপ্ট
<br> / <hr> লাইন ব্রেক ও হরাইজোন্টাল রুল
<del> / <mark> স্ট্রাইকথ্রু ও হাইলাইট করা

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

এইচটিএমএল টেক্সট ফরম্যাটিং: ওয়েব পেজের সৌন্দর্যবর্ধন ও উপস্থাপন

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

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

এই অধ্যায়ে আমরা শিখব কীভাবে ওয়েব পেজের টেক্সটকে বোল্ড, ইটালিক, আন্ডারলাইন করা যায়, কীভাবে গাণিতিক সূত্র বা রাসায়নিক সংকেত লিখতে হয় এবং কীভাবে হেডিং ও প্যারাগ্রাফ ব্যবহার করে একটি পেজকে আকর্ষণীয় করে তোলা যায়।

টেক্সট ফরম্যাটিং কী ও প্রকারভেদ

ওয়েব পেজের টেক্সট বা লেখাকে সাধারণ অবস্থার চেয়ে ভিন্নভাবে উপস্থাপন করা—যেমন কোনো শব্দকে মোটা (Bold) করা, বাঁকা (Italic) করা, বা নিচে দাগ (Underline) দেওয়া—এ সবই টেক্সট ফরম্যাটিং এর অন্তর্ভুক্ত।

সংজ্ঞা (Definition): ওয়েব পেজের টেক্সট বা লেখাকে আকর্ষণীয়, সুন্দর ও সহজে পাঠযোগ্য করার জন্য বিভিন্ন ট্যাগ ব্যবহার করে যে সজ্জা বা স্টাইল করা হয়, তাকে এইচটিএমএল টেক্সট ফরম্যাটিং বলে।

এইচটিএমএল ফরম্যাটিং ট্যাগগুলোকে প্রধানত দুই ভাগে ভাগ করা যায়:

  1. ফিজিক্যাল ফরম্যাটিং (Physical Formatting): এই ট্যাগগুলো টেক্সটকে শুধু বাহ্যিকভাবে পরিবর্তন করে (যেমন মোটা বা বাঁকা করা), কিন্তু ব্রাউজারকে টেক্সটের কোনো বিশেষ অর্থ বোঝায় না। যেমন: <b>, <i>, <u>।
  2. লজিক্যাল ফরম্যাটিং (Logical Formatting): এই ট্যাগগুলো টেক্সটের বাহ্যিক পরিবর্তনের পাশাপাশি ব্রাউজার এবং সার্চ ইঞ্জিনকে টেক্সটের গুরুত্ব বা অর্থ (Semantics) বুঝিয়ে দেয়। যেমন: <strong>, <em>।
পার্থক্য ছক: ফিজিক্যাল বনাম লজিক্যাল ট্যাগ
বৈশিষ্ট্য ফিজিক্যাল ট্যাগ (Physical Tag) লজিক্যাল ট্যাগ (Logical Tag)
কাজ শুধুমাত্র টেক্সটের বাহ্যিক রূপ পরিবর্তন করে। টেক্সটের অর্থের ওপর গুরুত্ব দেয় এবং রূপ পরিবর্তন করে।
উদাহরণ <b> (Bold), <i> (Italic) <strong> (Important), <em> (Emphasized)
ব্যবহার সাধারণ ডিজাইনের জন্য ব্যবহৃত হয়। স্ক্রিন রিডার এবং SEO (Search Engine Optimization)-এর জন্য ব্যবহৃত হয়।

হেডিং ও প্যারাগ্রাফ বিন্যাস (Heading & Paragraph)

যেকোনো ডকুমেন্টের শুরুতে একটি শিরোনাম বা হেডিং থাকে। এইচটিএমএল-এ হেডিং দেওয়ার জন্য ৬টি ট্যাগ রয়েছে: <h1> থেকে <h6> পর্যন্ত। <h1> হলো সবচেয়ে বড় সাইজের হেডিং এবং <h6> হলো সবচেয়ে ছোট।

এইচটিএমএল হেডিং ট্যাগের বিভিন্ন সাইজ

গুরুত্বপূর্ণ (Important):
- একটি ওয়েব পেজে <h1> ট্যাগ মাত্র একবার ব্যবহার করা উচিত (সাধারণত পেজের মূল শিরোনাম হিসেবে)। এটি সার্চ ইঞ্জিন অপটিমাইজেশন (SEO)-এর জন্য অত্যন্ত গুরুত্বপূর্ণ।
- হেডিং ট্যাগগুলো ব্লক লেভেল এলিমেন্ট (Block Level Element), অর্থাৎ এগুলো ব্যবহার করলে লেখাটি অটোমেটিক নতুন লাইনে শুরু হয় এবং পুরো লাইনের জায়গা দখল করে।

হেডিং এর অ্যালাইনমেন্ট (Alignment):
হেডিং ডিফল্টভাবে বাম দিকে (Left Align) থাকে। একে মাঝখানে বা ডানদিকে নিতে align অ্যাট্রিবিউট ব্যবহার করা হয়।

<h1 align="center">This is a Centered Heading</h1>
<h2 align="right">This is a Right Aligned Heading</h2>

প্যারাগ্রাফ ট্যাগ <p>:
ওয়েব পেজে কোনো বড় লেখা বা অনুচ্ছেদ লিখতে <p> ট্যাগ ব্যবহৃত হয়। প্যারাগ্রাফ ট্যাগেও align অ্যাট্রিবিউট ব্যবহার করে জাস্টিফাই (Justify) বা অন্যান্য অ্যালাইনমেন্ট করা যায়।

<p align="justify">
    এইচটিএমএল (HTML) হলো হাইপার টেক্সট মার্কআপ ল্যাঙ্গুয়েজ। এটি ওয়েব পেজ তৈরির মূল কাঠামো।
</p>

অক্ষর সজ্জা বা ক্যারেক্টার ফরম্যাটিং (Character Formatting)

লেখার মাঝখানের নির্দিষ্ট কোনো অক্ষর বা শব্দকে স্টাইল করার জন্য ক্যারেক্টার ফরম্যাটিং ট্যাগ ব্যবহৃত হয়। নিচে বহুল ব্যবহৃত কিছু ট্যাগের তালিকা দেওয়া হলো:

  • <b>: লেখা মোটা (Bold) করতে।
  • <i>: লেখা বাঁকা (Italic) করতে।
  • <u>: লেখার নিচে দাগ (Underline) দিতে।
  • <strike> বা <s> বা <del>: লেখার মাঝখানে কাটা দাগ দিতে (যেমন: ~~Price 500~~)।
  • <sup>: সুপারস্ক্রিপ্ট (Superscript) বা পাওয়ার লিখতে (যেমন: $a^2$)।
  • <sub>: সাবস্ক্রিপ্ট (Subscript) বা নিচে ছোট করে লিখতে (যেমন: $H_2O$)।

পরীক্ষার টিপস (Exam Tip):
উদ্দীপকে যদি $a^2 + b^2$ বা $H_2SO_4$ এর মতো গাণিতিক বা রাসায়নিক সংকেত দেখো, চোখ বন্ধ করে <sup> এবং <sub> ট্যাগের কথা ভাববে।
- Power (উপরে) = Superscript (<sup>)
- Base (নিচে) = Subscript (<sub>)

উদাহরণ (Example):
সমস্যা: $(a+b)^2 = a^2 + 2ab + b^2$ কোডটি লেখো।

সমাধান:

(a+b)<sup>2</sup> = a<sup>2</sup> + 2ab + b<sup>2</sup>

ফন্ট ট্যাগ এবং এর অ্যাট্রিবিউট (Font Tag)

যদিও আধুনিক ওয়েব ডিজাইনে (HTML5) <font> ট্যাগের ব্যবহার নিরুৎসাহিত করা হয় এবং এর বদলে CSS ব্যবহার করা হয়, কিন্তু HSC পরীক্ষার জন্য এবং পুরাতন কোড বোঝার জন্য এটি অত্যন্ত গুরুত্বপূর্ণ।

<font> ট্যাগের মাধ্যমে লেখার ফন্ট ফ্যামিলি (ধরন), সাইজ (আকার) এবং কালার (রঙ) পরিবর্তন করা যায়। এর তিনটি প্রধান অ্যাট্রিবিউট রয়েছে:
1. face: ফন্টের নাম নির্ধারণ করে (যেমন: "Arial", "SutonnyMJ")।
2. size: ফন্টের আকার নির্ধারণ করে।
3. color: ফন্টের রঙ নির্ধারণ করে (রঙের নাম বা হেক্সাডেসিমেল কোড)।

সিনট্যাক্স (Syntax):

<font face="font_name" size="value" color="color_name">Your Text Here</font>

মনে রাখবে (Note):
- HTML-এ <font> ট্যাগের সাইজ ১ থেকে ৭ পর্যন্ত হতে পারে।
- ১ হলো সবচেয়ে ছোট সাইজ।
- ৭ হলো সবচেয়ে বড় সাইজ।
- ডিফল্ট সাইজ (যদি কিছু উল্লেখ না করা থাকে) হলো ৩।
- অন্যদিকে হেডিং ট্যাগে <h1> সবচেয়ে বড় এবং <h6> সবচেয়ে ছোট—এই বিপরীত সম্পর্কটি এমসিকিউ-এর জন্য খুবই জরুরি।

বিশেষ ট্যাগ: প্রি-ফরম্যাটেড টেক্সট ও কোটেশন

কখনো কখনো আমাদের এমন টেক্সট দেখাতে হয় যেখানে স্পেস এবং লাইন ব্রেক হুবহু রাখা প্রয়োজন, যেমন কবিতা বা কম্পিউটার কোড।

  • <pre> ট্যাগ: সাধারণ এইচটিএমএল কোডে আমরা এডিটর-এ যতই স্পেস বা এন্টার দিই না কেন, ব্রাউজার সেটাকে মাত্র একটি স্পেস হিসেবে গণ্য করে। কিন্তু <pre> (Pre-formatted text) ট্যাগ ব্যবহার করলে টেক্সটটি ঠিক যেভাবে লিখবে, ব্রাউজারে সেভাবেই দেখাবে।

কবিতা লেখার উদাহরণ:

<pre>
    এইখানে তোর দাদির কবর
        ডালিম গাছের তলে,
    তিরিশ বছর ভিজায়ে রেখেছি
        দুই নয়নের জলে।
</pre>

ব্যাখ্যা: এখানে স্পেস এবং লাইন ব্রেক হুবহু ব্রাউজারে আসবে। <p> ট্যাগ দিয়ে এটি করা বেশ কঠিন হতো কারণ তখন প্রতি লাইনে <br> এবং স্পেসের জন্য &nbsp; ব্যবহার করতে হতো।

  • <br> ট্যাগ: নতুন লাইনে যাওয়ার জন্য (Empty Tag)।
  • <hr> ট্যাগ: সমান্তরাল বা হরাইজন্টাল দাগ টানার জন্য (Empty Tag)।

সৃজনশীল প্রশ্নের পূর্ণাঙ্গ উদাহরণ (Comprehensive Example)

পরীক্ষায় প্রায়ই একাধিক ফরম্যাটিং ট্যাগের সমন্বয়ে প্রশ্ন আসে। চলো একটি জটিল উদাহরণ দেখি।

উদ্দীপক: একটি ওয়েব পেজ তৈরি করো যেখানে 'ICT' লেখাটি লাল রঙের, বড় ফন্টের এবং আন্ডারলাইন করা থাকবে। এর ঠিক নিচে পানির রাসায়নিক সংকেত ($H_2O$) প্রদর্শিত হবে।

এইচটিএমএল ফরম্যাটিং আউটপুট উদাহরণ

সমাধান কোড: 
<html>
<head>
    <title>Formatting Example</title>
</head>
<body>
    <!-- ICT লেখাটি লাল, বড় (ধরি সাইজ ৬) এবং আন্ডারলাইন -->
    <u><font color="red" size="6">ICT</font></u>
    <br>
    <!-- পানির সংকেত -->
    Water: H<sub>2</sub>O
</body>
</html>

নেস্টিং রুল (Nesting Rule):
একাধিক ট্যাগ একসাথে ব্যবহার করার সময় 'Last in, First out' (LIFO) নীতি মেনে চলতে হয়। অর্থাৎ যে ট্যাগ সবার শেষে শুরু হয়েছে, তাকে সবার আগে শেষ করতে হবে।
- সঠিক: <b><i>text</i></b> (এখানে <i> পরে শুরু হয়েছে, তাই আগে শেষ হয়েছে)।
- ভুল: <b><i>text</b></i> (এটি ভুল পদ্ধতি)।

সংক্ষিপ্ত সারাংশ (Quick Revision)

রিভিশন চেকলিস্ট:
- হেডিং: <h1> (সবচেয়ে বড়) থেকে <h6> (সবচেয়ে ছোট)। align অ্যাট্রিবিউট ব্যবহার করা যায়।
- ফন্ট: <font> ট্যাগের অ্যাট্রিবিউট ৩টি—face, size (১-৭), color। ডিফল্ট সাইজ ৩।
- পাওয়ার/বেস: গাণিতিক পাওয়ারের জন্য <sup> এবং রাসায়নিক বেসের জন্য <sub>।
- লাইন ব্রেক: নতুন লাইনের জন্য <br> এবং প্যারাগ্রাফের জন্য <p>।
- বিশেষ: হুবহু টেক্সট (কবিতা/কোড) দেখানোর জন্য <pre>।

পরিভাষা (Glossary)

শব্দ (Term) সংজ্ঞা (Definition)
Tag (ট্যাগ) এইচটিএমএল এর নির্দেশাবলী যা অ্যাঙ্গেল ব্র্যাকেটের (< >) মধ্যে থাকে।
Attribute (অ্যাট্রিবিউট) ট্যাগের অতিরিক্ত বৈশিষ্ট্য নির্দেশক অংশ, যা ওপেনিং ট্যাগের মধ্যে থাকে (যেমন: align, color)।
Nesting (নেস্টিং) একটি ট্যাগের ভেতরে অন্য এক বা একাধিক ট্যাগ ব্যবহার করা।
Typography (টাইপোগ্রাফি) লেখা সাজানোর কৌশল বা শিল্প।
Empty Tag (ফাঁকা ট্যাগ) যে ট্যাগের ক্লোজিং ট্যাগ নেই এবং কন্টেন্ট থাকে না (যেমন: <br>, <hr>, <img>)।

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

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

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

রাইয়ান তার ব্যক্তিগত ওয়েবসাইটে স্বরচিত একটি কবিতা প্রকাশ করতে চায়। কিন্তু কোড লেখার পর ব্রাউজারে আউটপুট দেখার সময় সে লক্ষ্য করল কবিতার লাইনগুলো ব্রেক না হয়ে সব এক লাইনে চলে আসছে। এছাড়া সে রসায়নের একটি আর্টিকেল লিখতে গিয়ে পানির সংকেত ($H_2O$) এবং গণিতের সূত্র ($a^2+b^2$) সঠিকভাবে প্রদর্শন করতে পারছে না।

ক) ফরম্যাটিং ট্যাগ কী?
খ) <b> এবং <strong> ট্যাগের মধ্যে মূল পার্থক্যটি ব্যাখ্যা কর।
গ) উদ্দীপকে রাইয়ানের সমস্যাগুলো সমাধানের জন্য প্রয়োজনীয় HTML কোড লেখ ও ব্যাখ্যা কর।
ঘ) "ওয়েবসাইটের বিষয়বস্তু পাঠকের কাছে গ্রহণযোগ্য ও আকর্ষণীয় করে তুলতে টেক্সট ফরম্যাটিং ট্যাগের ভূমিকা অনস্বীকার্য"—উদ্দীপকের আলোকে বিশ্লেষণ কর।

উত্তর

(ক) ওয়েবপেইজের টেক্সট বা লেখাকে বিভিন্ন স্টাইলে (যেমন—বড়, ছোট, গাঢ়, বাঁকা, নিচে দাগ দেওয়া ইত্যাদি) উপস্থাপন করার জন্য এইচটিএমএল-এ যেসকল ট্যাগ ব্যবহার করা হয়, তাদেরকে ফরম্যাটিং ট্যাগ বলে।

(খ) <b> ট্যাগ ও <strong> ট্যাগ উভয়ই টেক্সটকে গাঢ় বা বোল্ড (Bold) করতে ব্যবহৃত হয়। তবে এদের মধ্যে মূল পার্থক্য হলো—<b> ট্যাগ শুধুমাত্র লেখাকে দৃশ্যত মোটা বা গাঢ় করে (Visual presentation), এর কোনো বিশেষ অর্থ নেই। অন্যদিকে <strong> ট্যাগ লেখাকে গাঢ় করার পাশাপাশি ব্রাউজার ও সার্চ ইঞ্জিনের কাছে ওই শব্দ বা বাক্যকে 'অধিক গুরুত্বপূর্ণ' (Important semantics) হিসেবে নির্দেশ করে।

(গ) উদ্দীপকে রাইয়ান তিনটি সমস্যার সম্মুখীন হয়েছে: কবিতার লাইন ব্রেক না হওয়া, পানির সংকেতে সাবস্ক্রিপ্ট ব্যবহার এবং জ্যামিতিক সূত্রে সুপারস্ক্রিপ্ট ব্যবহার। নিচে এগুলো সমাধানের কোড ও ব্যাখ্যা দেওয়া হলো:

  1. লাইন ব্রেক সমস্যা: এইচটিএমএল কোডে এন্টার দিয়ে লাইন নিচে নামালেও ব্রাউজার তা এক লাইনে দেখায়। লাইন ব্রেক করার জন্য <br> ট্যাগ ব্যবহার করতে হবে।

  2. পানির সংকেত ($H_2O$): এখানে '2' সংখ্যাটি H-এর নিচে ছোট করে লিখতে হবে। এর জন্য সাবস্ক্রিপ্ট ট্যাগ <sub> ব্যবহার করতে হবে। কোড: H<sub>2</sub>O

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

রাইয়ানের সমস্যার সমাধানের পূর্ণাঙ্গ কোড:

<html>
<body>
    <!-- কবিতার লাইন ব্রেক -->
    <p>
        আমার সোনার বাংলা,<br>
        আমি তোমায় ভালোবাসি।
    </p>

    <!-- রাসায়নিক সংকেত -->
    <p>পানির সংকেত: H<sub>2</sub>O</p>

    <!-- জ্যামিতিক সূত্র -->
    <p>সূত্র: a<sup>2</sup> + b<sup>2</sup></p>
</body>
</html>

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

  1. পঠনযোগ্যতা বৃদ্ধি: একটি দীর্ঘ প্যারাগ্রাফ পড়ার চেয়ে যথাযথ হেডিং, প্যারাগ্রাফ ব্রেক এবং হাইলাইট করা টেক্সট পড়া অনেক সহজ। যেমন—রাইয়ানের কবিতার লাইনগুলো <br> ট্যাগ ছাড়া পড়াই কঠিন ছিল।

  2. গুরুত্ব নির্দেশ করা: <strong>, <em>, <mark> ইত্যাদি ট্যাগ ব্যবহার করে নির্দিষ্ট কোনো শব্দ বা বাক্যকে পাঠকের নজরে আনা যায়। এতে পাঠক সহজেই মূল বিষয়টি ধরতে পারে।

  3. গাণিতিক ও বৈজ্ঞানিক প্রকাশ: সাধারণ টেক্সট দিয়ে $H_2O$ বা $a^2$ লেখা সম্ভব নয়। <sub> ও <sup> এর মতো ফরম্যাটিং ট্যাগ ছাড়া বিজ্ঞান বা গণিতের ওয়েবসাইট তৈরি করা অসম্ভব। উদ্দীপকে রাইয়ান এই সমস্যাতেই পড়েছিল।

  4. সৌন্দর্যবর্ধন: একঘেয়ে টেক্সটের বদলে বিভিন্ন ফন্ট স্টাইল, কালার বা সাইজ ব্যবহার করলে পেইজটি দেখতে আকর্ষণীয় হয়, যা ভিজিটরদের বেশিক্ষণ ওয়েবসাইটে ধরে রাখতে সাহায্য করে।

পরিশেষে বলা যায়, কেবল তথ্য দিলেই হয় না, সেই তথ্যকে সঠিকভাবে উপস্থাপন করা জরুরি। আর এই উপস্থাপনের কাজটিই করে টেক্সট ফরম্যাটিং ট্যাগ। তাই ওয়েবসাইটের সৌন্দর্য ও কার্যকারিতা উভয় ক্ষেত্রেই এর ভূমিকা অপরিসীম।

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

'টেক-নিউজ ২৪' নামক একটি নিউজ পোর্টালে সংবাদ আপলোড করার সময় ওয়েব ডেভেলপার বেশ কিছু ফরম্যাটিং স্টাইল ব্যবহার করলেন। তিনি প্রধান শিরোনামটি সবচেয়ে বড় আকারে (<h1>) দিলেন। সংবাদের ভেতরের কিছু গুরুত্বপূর্ণ কি-ওয়ার্ড বাঁকা (Italic) করে দিলেন এবং ভুলবশত লেখা একটি তথ্যের মাঝখানে দাগ (Strikethrough) টেনে সেটাকে সংশোধিত হিসেবে দেখালেন। এছাড়া একটি বিশেষ কোড ব্লক দেখানোর জন্য তিনি এমন একটি ট্যাগ ব্যবহার করলেন যাতে স্পেস এবং লাইন ব্রেকগুলো ঠিকঠাক থাকে।

ক) হেডিং ট্যাগ কয়টি?
খ) <pre> ট্যাগ কেন ব্যবহার করা হয়?
গ) উদ্দীপকের নিউজ পোর্টালে টেক্সট স্টাইলগুলো তৈরির জন্য ব্যবহৃত ট্যাগগুলোর বর্ণনা দাও।
ঘ) "ফন্ট ট্যাগ (<font>) ব্যবহার করে টেক্সট ফরম্যাটিং করার চেয়ে সিএসএস (CSS) বা আধুনিক ট্যাগ ব্যবহার করা বেশি সুবিধাজনক"—উক্তিটি যুক্তিসহ বিশ্লেষণ কর।

উত্তর

(ক) এইচটিএমএল-এ হেডিং ট্যাগ মোট ৬টি ( <h1> থেকে <h6> পর্যন্ত )।

(খ) সাধারণ এইচটিএমএল কোডে একাধিক স্পেস বা এন্টার (নতুন লাইন) দিলে ব্রাউজার সেগুলোকে একটি মাত্র স্পেস হিসেবে গণ্য করে। কিন্তু <pre> (Pre-formatted text) ট্যাগ ব্যবহার করলে এডিতরে যেভাবে স্পেস ও লাইন ব্রেক দেওয়া হয়, ব্রাউজারে ঠিক হুবহু সেভাবেই প্রদর্শিত হয়। সাধারণত কবিতা বা কম্পিউটার কোড প্রদর্শনের জন্য এটি ব্যবহৃত হয়।

(গ) উদ্দীপকের নিউজ পোর্টালে ওয়েব ডেভেলপার যে স্টাইলগুলো ব্যবহার করেছেন, তার জন্য নিম্নলিখিত ট্যাগগুলো ব্যবহৃত হয়:

  1. প্রধান শিরোনাম (Heading): উদ্দীপকে সবচেয়ে বড় আকারের শিরোনামের কথা বলা হয়েছে। এর জন্য <h1> ট্যাগ ব্যবহৃত হয়। এটি সবচেয়ে বড় হেডিং তৈরি করে।
    - কোড: <h1>টেক-নিউজ ২৪ এর আজকের সংবাদ</h1>

  2. বাঁকা লেখা (Italic): গুরুত্বপূর্ণ কি-ওয়ার্ড বাঁকা বা ইটালিক করার জন্য <i> অথবা <em> (Emphasis) ট্যাগ ব্যবহার করা হয়।
    - কোড: <i>গুরুত্বপূর্ণ শব্দ</i>

  3. মাঝখানে দাগ টানা (Strikethrough): কোনো লেখা ভুল বা বাতিল বোঝাতে লেখার মাঝখানে দাগ টানার জন্য <del> (Deleted) বা <s> ট্যাগ ব্যবহৃত হয়।
    - কোড: <del>ভুল তথ্য</del>

  4. কোড ব্লক বা প্রি-ফরম্যাটেড টেক্সট: স্পেস ও লাইন ব্রেক ঠিক রাখার জন্য <pre> ট্যাগ ব্যবহার করা হয়েছে।

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

  1. HTML5 এ বাতিল: <font> ট্যাগটি HTML5 স্ট্যান্ডার্ডে বাতিল (deprecated) করা হয়েছে। আধুনিক ব্রাউজারগুলো ভবিষ্যতে এটি সমর্থন নাও করতে পারে। তাই স্ট্যান্ডার্ড বজায় রাখতে সিএসএস ব্যবহার জরুরি।

  2. কোড ও ডিজাইনের পৃথকীকরণ: <font> ট্যাগ ব্যবহার করলে প্রতিটি লাইনে বা শব্দে আলাদা করে ফন্ট, কালার বা সাইজ বলে দিতে হয়, যা কোডকে জটিল ও অগোছালো করে। অন্যদিকে সিএসএস ব্যবহার করে এক জায়গায় স্টাইল লিখে পুরো ওয়েবসাইটের ডিজাইন নিয়ন্ত্রণ করা যায়।

  3. রক্ষণাবেক্ষণ সহজ: ধরি, নিউজ পোর্টালটির সব শিরোনামের রঙ লাল করতে হবে। <font> ট্যাগ ব্যবহার করলে হাজার হাজার পেজে গিয়ে কোড বদলাতে হবে। কিন্তু সিএসএস ব্যবহার করলে মাত্র এক লাইন কোড পরিবর্তন করলেই পুরো ওয়েবসাইটের সব শিরোনামের রঙ বদলে যাবে।

  4. পেজ লোডিং স্পিড: অতিরিক্ত <font> ট্যাগের ব্যবহার ফাইলের আকার বাড়িয়ে দেয়, ফলে ওয়েবসাইট লোড হতে সময় বেশি লাগে। সিএসএস ফাইল আলাদা থাকায় এবং ক্যাশ মেমোরিতে জমা থাকায় ওয়েবসাইট দ্রুত লোড হয়।

সুতরাং, রক্ষণাবেক্ষণ, কোডের পরিচ্ছন্নতা এবং আধুনিক মানদণ্ড বিবেচনায় <font> ট্যাগের চেয়ে সিএসএস বা আধুনিক ফরম্যাটিং পদ্ধতি ব্যবহার করা অনেক বেশি যুক্তিযুক্ত ও সুবিধাজনক।

এমসিকিউ

১। নিচের কোনটি এইচটিএমএল-এর টেক্সট ফরম্যাটিং ট্যাগ?

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

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

ব্যাখ্যা: <b> ট্যাগটি টেক্সটকে বোল্ড বা গাঢ় করার জন্য ব্যবহৃত হয়, যা একটি ফরম্যাটিং ট্যাগ। বাকিগুলো স্ট্রাকচারাল ট্যাগ।

২। লেখা বাঁকা (Italic) করার জন্য কোন ট্যাগটি ব্যবহৃত হয়?

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

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

ব্যাখ্যা: <i> ট্যাগটি ইটালিক বা বাঁকা হরফে লেখা প্রদর্শনের জন্য ব্যবহৃত হয়।

৩। এইচটিএমএল-এ সবচেয়ে ছোট হেডিং ট্যাগ কোনটি?

ক) <h1>
খ) <h3>
গ) <h5>
ঘ) <h6>

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

ব্যাখ্যা: এইচটিএমএল-এ <h1> থেকে <h6> পর্যন্ত মোট ৬টি হেডিং ট্যাগ আছে। এর মধ্যে <h1> সবচেয়ে বড় এবং <h6> সবচেয়ে ছোট হেডিং তৈরি করে।

৪। $a^2 + b^2$ লেখার জন্য ‘2’ কে উপরে উঠাতে কোন ট্যাগ ব্যবহার করা হয়?

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

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

ব্যাখ্যা: কোনো লেখাকে স্বাভাবিক লাইনের উপরে (সুপারস্ক্রিপ্ট) প্রদর্শনের জন্য <sup> (Superscript) ট্যাগ ব্যবহৃত হয়।

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

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

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

ব্যাখ্যা: কোনো লেখাকে স্বাভাবিক লাইনের নিচে (সাবস্ক্রিপ্ট) প্রদর্শনের জন্য <sub> (Subscript) ট্যাগ ব্যবহৃত হয়। যেমন—$H_2O$ এর ‘2’।

৬। কোন ট্যাগটি টেক্সটের নিচে আন্ডারলাইন (Underline) করতে ব্যবহৃত হয়?

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

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

ব্যাখ্যা: <u> ট্যাগটি টেক্সটের নিচে দাগ বা আন্ডারলাইন দেওয়ার জন্য ব্যবহৃত হয়।

৭। এইচটিএমএল-এ বড় ফন্টের জন্য কোন ট্যাগটি ব্যবহৃত হয়?

ক) <large>
খ) <big>
গ) <huge>
ঘ) <max>

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

ব্যাখ্যা: <big> ট্যাগটি টেক্সটকে স্বাভাবিকের চেয়ে এক ধাপ বড় ফন্টে প্রদর্শন করে। (যদিও HTML5 এ এটি কম ব্যবহৃত হয়, তবে সিলেবাসে অন্তর্ভুক্ত)।

৮। টেক্সট হাইলাইট (Highlight) করার জন্য সঠিক ট্যাগ কোনটি?

ক) <high>
খ) <light>
গ) <mark>
ঘ) <color>

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

ব্যাখ্যা: <mark> ট্যাগটি কোনো টেক্সটকে হাইলাইট বা মার্ক করে রাখার জন্য ব্যবহৃত হয়, সাধারণত হলুদ রঙে।

৯। লেখা বা টেক্সটের মাঝখানে দাগ (Strikethrough) দিতে কোন ট্যাগ ব্যবহৃত হয়?

ক) <del>
খ) <cut>
গ) <cross>
ঘ) <strike>

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

ব্যাখ্যা: <del> (Deleted text) ট্যাগটি কোনো লেখা বাতিল বা মুছে ফেলা হয়েছে বোঝাতে মাঝখানে দাগ টেনে দেয়। HTML4 এ <strike> ছিল, তবে HTML5 এ <del> বা <s> ব্যবহৃত হয়।

১০। <tt> ট্যাগটি কী ধরনের টেক্সট প্রদর্শন করে?

ক) টেলিটাইপ টেক্সট
খ) টেলিফোন টেক্সট
গ) টাইটেল টেক্সট
ঘ) টেবিল টেক্সট

সঠিক উত্তর: ক) টেলিটাইপ টেক্সট

ব্যাখ্যা: <tt> (Teletype Text) ট্যাগটি ফিক্সড-উইডথ বা টাইপরাইটার স্টাইলে লেখা প্রদর্শন করে।

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

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

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

ব্যাখ্যা: <b> ট্যাগের শুরু <b> এবং শেষ </b> আছে, তাই এটি কন্টেইনার ট্যাগ। বাকিগুলো এম্পটি ট্যাগ।

১২। <strong> ট্যাগের কাজ কী?

ক) লেখা বড় করা
খ) লেখা বাঁকা করা
গ) লেখাকে অধিক গুরুত্বসহকারে বোল্ড করা
ঘ) লেখা আন্ডারলাইন করা

সঠিক উত্তর: গ) লেখাকে অধিক গুরুত্বসহকারে বোল্ড করা

ব্যাখ্যা: <strong> ট্যাগটি লেখাকে বোল্ড বা গাঢ় করে এবং ব্রাউজার বা সার্চ ইঞ্জিনকে বোঝায় যে এই টেক্সটটি গুরুত্বপূর্ণ।

১৩। নিচের কোডটির আউটপুট কী হবে?
HTML <i>Is Easy</i>

ক) HTML Is Easy
খ) HTML Is Easy
গ) HTML Is Easy
ঘ) HTML Is Easy

সঠিক উত্তর: খ) HTML Is Easy (বাঁকা)

ব্যাখ্যা: <i> ট্যাগের ভেতরের অংশটুকু ইটালিক বা বাঁকা হবে। এখানে শুধু 'Is Easy' অংশটুকু বাঁকা হবে।

১৪। টেক্সট ফরম্যাটিংয়ের ট্যাগগুলো হলো—
i. <b>
ii. <i>
iii. <u>

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

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

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

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

১৫। ওয়েবপেজে কোড প্রদর্শনের জন্য উপযুক্ত ট্যাগ কোনটি?
i. <code>
ii. <pre>
iii. <samp>

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

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

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

ব্যাখ্যা: <code> (Code snippet), <pre> (Preformatted text), এবং <samp> (Sample output)—সবগুলোই প্রোগ্রামিং কোড বা আউটপুট প্রদর্শনে ব্যবহৃত হয়।

১৬। নিচের উদ্দীপকটি পড় এবং ১৬ ও ১৭ নং প্রশ্নের উত্তর দাও:
মি. রফিক তার ওয়েবসাইটে একটি কবিতা লিখলেন এভাবে:

<p>
    বনের পাখি বনে গায়,
    খাঁচার পাখি খাঁচায়।
</p>

কিন্তু ব্রাউজারে তিনি দেখলেন লাইন দুটি পাশাপাশি দেখাচ্ছে।

১৬। মি. রফিকের সমস্যা সমাধানের জন্য কোন ট্যাগটি ব্যবহার করা উচিত?

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

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

ব্যাখ্যা: এইচটিএমএল-এ লাইন ব্রেক বা নতুন লাইনে যাওয়ার জন্য <br> ট্যাগ ব্যবহার করতে হয়।

১৭। উদ্দীপকের কবিতাটি হুবহু স্পেসসহ প্রদর্শন করতে চাইলে কোন ট্যাগটি সবচেয়ে উপযোগী?

ক) <p>
খ) <div>
গ) <pre>
ঘ) <span>

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

ব্যাখ্যা: <pre> (Preformatted) ট্যাগ ব্যবহার করলে কোড এডিটরে যেভাবে স্পেস ও লাইন ব্রেক দেওয়া হয়, ব্রাউজারে ঠিক সেভাবেই প্রদর্শিত হয়।

১৮। <em> ট্যাগ এবং <i> ট্যাগের মধ্যে মিল কোথায়?

ক) উভয়ই লেখা বড় করে
খ) উভয়ই লেখা বাঁকা করে
গ) উভয়ই লেখা বোল্ড করে
ঘ) উভয়ই লেখা কালার করে

সঠিক উত্তর: খ) উভয়ই লেখা বাঁকা করে

ব্যাখ্যা: <em> (Emphasized text) এবং <i> (Italic text) উভয় ট্যাগই লেখাকে দৃশ্যত বাঁকা বা ইটালিক করে প্রদর্শন করে।

১৯। নিচের কোডটির আউটপুট কেমন হবে?
X<sup>2</sup> + Y<sub>3</sub>

ক) $X2 + Y3$
খ) $X^2 + Y_3$
গ) $X_2 + Y^3$
ঘ) $X^2 + Y3$

সঠিক উত্তর: খ) $X^2 + Y_3$

ব্যাখ্যা: <sup>2</sup> এর কারণে ২ উপরে (পাওয়ার) যাবে এবং <sub>3</sub> এর কারণে ৩ নিচে (সাবস্ক্রিপ্ট) যাবে।

২০। ফন্ট ট্যাগের অ্যাট্রিবিউট কোনটি?
i. face
ii. size
iii. color

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

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

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

ব্যাখ্যা: <font> ট্যাগের তিনটি প্রধান অ্যাট্রিবিউট হলো face (ফন্ট ফ্যামিলি), size (আকার), এবং color (রঙ)।

২১। <small> ট্যাগের কাজ কী?

ক) লেখা বড় করা
খ) লেখা স্বাভাবিকের চেয়ে ছোট করা
গ) লেখা মুছে ফেলা
ঘ) লেখা অদৃশ্য করা

সঠিক উত্তর: খ) লেখা স্বাভাবিকের চেয়ে ছোট করা

ব্যাখ্যা: <small> ট্যাগটি টেক্সটকে তার আশেপাশের টেক্সটের তুলনায় এক সাইজ ছোট করে প্রদর্শন করে।

২২। নিচের কোনটি ব্লক লেভেল এলিমেন্ট?

ক) <b>
খ) <span>
গ) <h1>
ঘ) <img>

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

ব্যাখ্যা: <h1> একটি ব্লক লেভেল এলিমেন্ট কারণ এটি পুরো লাইন দখল করে। বাকিগুলো ইনলাইন এলিমেন্ট।

২৩। নিচের উদ্দীপকটি লক্ষ্য কর এবং ২৩ ও ২৪ নং প্রশ্নের উত্তর দাও:

<body>
    <del> Price: 500 </del> <ins> 400 </ins>
</body>

২৩। ব্রাউজারে '500' লেখাটি কীভাবে প্রদর্শিত হবে?

ক) আন্ডারলাইন করা
খ) মাঝখানে কাটা দাগসহ
গ) বোল্ড করা
ঘ) ইটালিক করা

সঠিক উত্তর: খ) মাঝখানে কাটা দাগসহ

ব্যাখ্যা: <del> ট্যাগ ব্যবহারের ফলে লেখাটির মাঝখানে দাগ (Strikethrough) চলে আসবে, যা বাতিল বোঝায়।

২৪। <ins> ট্যাগটি কেন ব্যবহৃত হয়েছে?

ক) লেখাটি ইনসার্ট বা নতুন সংযোজন বোঝাতে
খ) লেখাটি ডিলিট করতে
গ) লেখাটি অদৃশ্য করতে
ঘ) লেখাটি বাঁকা করতে

সঠিক উত্তর: ক) লেখাটি ইনসার্ট বা নতুন সংযোজন বোঝাতে

ব্যাখ্যা: <ins> (Inserted text) ট্যাগটি বোঝায় যে এই টেক্সটটি নতুন করে নথিতে যুক্ত করা হয়েছে। ব্রাউজারে এটি সাধারণত আন্ডারলাইনসহ প্রদর্শিত হয়।

২৫। <blockquote> ট্যাগটি কী কাজে ব্যবহৃত হয়?

ক) টেক্সট বোল্ড করতে
খ) প্যারাগ্রাফ তৈরি করতে
গ) অন্য উৎস থেকে উদ্ধৃতি প্রদর্শন করতে
ঘ) কোড লিখতে

সঠিক উত্তর: গ) অন্য উৎস থেকে উদ্ধৃতি প্রদর্শন করতে

ব্যাখ্যা: <blockquote> ট্যাগটি দীর্ঘ উদ্ধৃতি বা কোটেশন প্রদর্শনের জন্য ব্যবহৃত হয়, যা সাধারণত ব্রাউজারে একটু মার্জিন বা ইনডেন্টসহ দেখায়।