HTML <sup> ট্যাগ সাপারস্ক্রিপ্ট টেক্সট নির্দিষ্ট করে। এটি এমন টেক্সট যা একটি লাইনের উপরে দেখায়। <sub> ট্যাগ সাবস্ক্রিপ্ট টেক্সট প্রতিনিধিত্ব করে। এটি এমন টেক্সট যা একটি লাইনের নিচে দেখায়।
আমরা অধিকাংশ সময় টেক্সটের সাথে মুখোমুখি হলে, সেটির একটি ট্রেডিশনাল বেসলাইন এবং x-height থাকে।
এই আর্টিকেলে এই পয়েন্ট পর্যন্ত সব কিছু একটি বেসলাইন دارد। এই বেসলাইন মূলত সেটি পয়েন্ট যেখানে একটি আন্ডারলাইন দেখায় যদি আমরা এটিকে একটি দিয়ে ফরম্যাট করি, এবং একটি x-height। x-height হলো কাল্পনিক লাইন যেখানে একটি লোয়ারকেস লেটার শেষ হয়। এর নাম x-height কারণ লোয়ারকেস x স্পেসটি পূরণ করে।
এই গাইডে, আমরা HTML-এ সাবস্ক্রিপ্ট এবং সাপারস্ক্রিপ্ট কীভাবে ডিফাইন করবেন সেটি আলোচনা করব। আমরা এই দুটি টেক্সট ফরম্যাটিং টপিকের উদাহরণ দিয়ে যাবেন যাতে আপনি আপনার কোডে এগুলো ব্যবহার করতে শিখেন।
সাপারস্ক্রিপ্ট এবং সাবস্ক্রিপ্ট টেক্সট কখন ব্যবহার করা হয়?
কখনো কখনো আমরা সেট করা টেক্সট থেকে অর্ধেক ক্যারেক্টার নিচে বা উপরে ক্যারেক্টার ব্যবহার করতে চাই। সাবস্ক্রিপ্ট হলো যেসব ক্যারেক্টার টেক্সট থেকে অর্ধেক ক্যারেক্টার নিচে সেট করা হয়। সাপারস্ক্রিপ্ট হলো যেসব ক্যারেক্টার টেক্সট থেকে অর্ধেক ক্যারেক্টার উপরে সেট করা হয়।
বাস্তব জীবনে, আমরা এই ক্যারেক্টারগুলো ব্যবহার করি যখন আমরা ম্যাথ ইকোয়েশন, কেমিক্যাল ইকোয়েশন, সাইটেশন বা ফুটনোট ব্যবহার করি, উদাহরণস্বরূপ।
HTML সুপারটেক্সট
HTML-এ সুপার টেক্সট তৈরি করতে, <sup> ট্যাগ ব্যবহার করুন। এই ট্যাগ এর ভেতরে যেকোনো টেক্সট লাইনের টপে তোলা দেয়। sup ট্যাগের কোনো ট্যাগ-নির্দিষ্ট অ্যাট্রিবিউট নেই।
এই মেথডের সিনট্যাক্স দেখা যাক:
৮১% অংশগ্রহণকারী বলেছেন বুটক্যাম্পে অংশ নেওয়ার পর তাদের টেক জব প্রস্পেক্টস সম্পর্কে অধিক আত্মবিশ্বাসী অনুভব করছেন। আজই একটি বুটক্যাম্পের সাথে ম্যাচ হোন।
গড় বুটক্যাম্প স্নাতক ক্যারিয়ার ট্রানজিশনে ছয় মাস কম ব্যয় করেছেন, বুটক্যাম্প শুরু থেকে প্রথম চাকরি পাওয়া পর্যন্ত।
<p>4 <sup>2</sup> = 16</p>
আমরা "2" ক্যারেক্টারটিকে <sup> ট্যাগের ভেতরে এনক্লোজ করেছি। এটি "2"-কে সাপারস্ক্রিপ্টে দেখায়। আমাদের কোড এখন দেখাবে:
4 ² = 16
HTML সাবটেক্সট
HTML <sub> কমান্ড সাবটেক্সট নির্ধারণ করে। সাবটেক্সট বলতে টেক্সটকে বুঝায় যা একটি লাইনের নিচের দিকে দেখায়।
এই সিনট্যাক্স বিবেচনা করুন:
<p>This is main text. <sub>3</sub></p>
আমাদের কোড রিটার্ন করে:
This is main text. ₃
সুপার টেক্সট উদাহরণের মতো, আমরা <sub>-এর জন্য কোনো ট্যাগ অ্যাট্রিবিউট নির্দিষ্ট করিনি। টেক্সটকে সাবটেক্সটে রূপান্তর করতে, আমরা সেটিকে <sub> ট্যাগের ভেতরে এনক্লোজ করি।
সাবটেক্সট প্রায়শই পিরিওডিক টেবিলে এলিমেন্ট নম্বর বর্ণনা করতে ব্যবহৃত হয়।
HTML সাবটেক্সট এবং সুপারটেক্সট উদাহরণ
চলুন একটি HTML ওয়েব পেজে <sub> এবং <sup> উভয়ের উদাহরণ দেখি। নিচের কোড বিবেচনা করুন:
<!DOCTYPE html> <html lang="en"> <head> <style> </style> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Superscript and Subscript</title> <style> sub { vertical-align: sub; font-size: smaller; } sup { vertical-align: super; font: smaller; } </style> </head> <body> <div style="text-align:center;" class="container"> <div> <h3>Superscript</h3> <span>E=MC<sup>2</sup></span> <br /> <span>1.7 x 10<sup>4</sup></span> </div> <div> <h3>Subscript</h3> <span>H<sub>2</sub>O</span> <br /> <span><sup>†1</sup>Ipsum, Lorem. Footnote example, 2020.</span> </div> </div> </body> </html>
আপনি দেখতে পাচ্ছেন, আমরা <sub> এবং <sup> সাবস্ক্রিপ্ট ট্যাগ এবং সাপারস্ক্রিপ্ট ট্যাগ ব্যবহার করেছি <span> HTML এলিমেন্টে ইফেক্ট তৈরি করতে। এতে কিছু ডিফল্ট ভ্যালু আসে:
<style> sub { vertical-align: sub; font-size: smaller; } sup { vertical-align: super; font: smaller; } </style>
উভয় ট্যাগ HTML-এ উপলব্ধ ইভেন্ট এবং গ্লোবাল অ্যাট্রিবিউট ব্যবহার করে। মূলত এর মানে আপনি কেউ টেক্সটে ক্লিক করলে একটি ইভেন্ট হ্যান্ডলার সেট করতে পারেন।
অতিরিক্তভাবে, আপনি আপনার কাছে উপলব্ধ সকল রেগুলার HTML অ্যাট্রিবিউট ব্যবহার করে এলিমেন্টগুলো কাস্টমাইজ করতে পারেন। W3Schools-র লেখা গ্লোবাল অ্যাট্রিবিউটস লিস্টে উপলব্ধ রেগুলার HTML অ্যাট্রিবিউটের তালিকা পাওয়া যাবে।
উপসংহার
HTML <sub> এলিমেন্ট একটি প্যারাগ্রাফ টেক্সটে সাবটেক্সট যোগ করে। সাবটেক্সট একটি লাইনের নিচে দেখায়। <sup> টেক্সটে সুপার টেক্সট যোগ করে, যা একটি লাইনের উপরে দেখায়।
বাস! আপনি এখন HTML-এ সফলভাবে সাপারস্ক্রিপ্ট এবং সাবস্ক্রিপ্ট তৈরি করতে পারবেন।
আপনি কি HTML সম্পর্কে আরও জানতে চান? এক্সপার্ট টিপস এবং টপ অনলাইন কোর্স ও বইর গাইডেন্সের জন্য আমাদের পূর্ণ How to Learn HTML গাইড দেখুন।
