এইচটিএমএল সুপারস্ক্রিপ্ট এবং সাবস্ক্রিপ্ট টেক্সট এবং কখন এটি ব্যবহার করবেন

HTML ^{ট্যাগ সুপারস্ক্রিপ্ট টেক্সট নির্দিষ্ট করে। এটি এমন পাঠ্য যা পাঠ্যের একটি লাইনের শীর্ষে প্রদর্শিত হয়। _{ট্যাগ সাবস্ক্রিপ্ট টেক্সট প্রতিনিধিত্ব করে। এটি এমন পাঠ্য যা পাঠ্যের একটি লাইনের নীচে প্রদর্শিত হয়৷}}৷

বেশিরভাগ সময় যখন আমরা পাঠ্যের মুখোমুখি হই, এটির একটি ঐতিহ্যগত বেসলাইন এবং x-উচ্চতা থাকে।

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

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

সুপারস্ক্রিপ্ট এবং সাবস্ক্রিপ্ট টেক্সট কখন ব্যবহার করা হয়?

এমন কিছু সময় আছে যখন আমরা সেট টেক্সটের নিচে বা উপরে অর্ধেক অক্ষর ব্যবহার করতে চাই। সাবস্ক্রিপ্ট হল অক্ষর যা পাঠ্যের নিচে অর্ধেক অক্ষর সেট করা হয়। সুপারস্ক্রিপ্টগুলি এমন অক্ষর যা পাঠ্যের উপরে অর্ধেক অক্ষর সেট করা হয়।

বাস্তব-বিশ্বের সেটিংয়ে, আমরা এই অক্ষরগুলি ব্যবহার করি যখন আমরা গণিত সমীকরণ, রাসায়নিক সমীকরণ, উদ্ধৃতি বা পাদটীকা ব্যবহার করি।

HTML সুপারটেক্সট

HTML এ সুপার টেক্সট করতে, ^{ট্যাগ ব্যবহার করুন। এই ট্যাগটি লাইনের শীর্ষে থাকা যেকোনো পাঠ্যকে উত্থাপন করে। sup ট্যাগের কোনো ট্যাগ-নির্দিষ্ট বৈশিষ্ট্য নেই।}

আসুন এই পদ্ধতির জন্য সিনট্যাক্সটি একবার দেখে নেওয়া যাক:

81% অংশগ্রহণকারী বলেছেন যে তারা বুটক্যাম্পে যোগ দেওয়ার পরে তাদের প্রযুক্তিগত কাজের সম্ভাবনা সম্পর্কে আরও আত্মবিশ্বাসী বোধ করেছেন। আজই একটি বুটক্যাম্পের সাথে মিলিত হন৷

৷

গড় বুটক্যাম্প গ্র্যাড একটি বুটক্যাম্প শুরু করা থেকে শুরু করে তাদের প্রথম চাকরি খোঁজা পর্যন্ত ক্যারিয়ারের পরিবর্তনে ছয় মাসেরও কম সময় ব্যয় করেছে।

<p>4 <sup>2</sup> = 16</p>

আমরা ^{ট্যাগের মধ্যে “2” অক্ষরটি সংযুক্ত করেছি। এটি সুপারস্ক্রিপ্টে "2" উপস্থিত করে। আমাদের কোড এখন দেখায়:}

4 ² =16

HTML সাবটেক্সট

HTML _{কমান্ড সাবটেক্সট সংজ্ঞায়িত করে। সাবটেক্সট বলতে পাঠ্যের একটি লাইনের নীচের দিকে প্রদর্শিত পাঠ্যকে বোঝায়।}

এই সিনট্যাক্স বিবেচনা করুন:

<p>This is main text. <sub>3</sub></p>

আমাদের কোড ফিরে আসে:

এটি প্রধান পাঠ্য। ₃

সুপার টেক্সট উদাহরণের মতো, আমরা _{-এর জন্য কোনও ট্যাগ বৈশিষ্ট্য নির্দিষ্ট করিনি। পাঠ্যকে সাবটেক্সটে স্থানান্তর করতে, আমরা সেই পাঠ্যটিকে একটি _{ট্যাগের মধ্যে আবদ্ধ করি।}}

সাবটেক্সট প্রায়ই উপাদানের পর্যায় সারণীতে উপাদান সংখ্যা বর্ণনা করতে ব্যবহৃত হয়।

HTML সাবটেক্সট এবং সুপারটেক্সট উদাহরণ

আসুন একটি HTML ওয়েব পৃষ্ঠায় _{এবং ^{উভয়ের একটি উদাহরণের মাধ্যমে চলুন। নিম্নলিখিত কোড বিবেচনা করুন:}}

<!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>

আপনি দেখতে পাচ্ছেন, আমরা ব্যবহার করি এবং সাবস্ক্রিপ্ট ট্যাগ এবং সুপারস্ক্রিপ্ট ট্যাগ -এ প্রভাব তৈরি করতে এইচটিএমএল উপাদান। এটি কিছু ডিফল্ট মান সহ আসে:

<style>
       sub {
           vertical-align: sub;
           font-size: smaller;
       }
       sup {
           vertical-align: super;
           font: smaller;
       }
</style>

উভয় ট্যাগই ইভেন্ট এবং গ্লোবাল অ্যাট্রিবিউট ব্যবহার করে যা আমাদের কাছে HTML এ উপলব্ধ। মূলত এর মানে হল যে কেউ যদি পাঠ্যটিতে ক্লিক করে তাহলে আপনি এটিতে একটি ইভেন্ট হ্যান্ডলার সেট করতে পারেন৷

৷

উপরন্তু, আপনি উপাদানগুলি কাস্টমাইজ করতে নিয়মিত HTML বৈশিষ্ট্যগুলির যেকোনো একটি ব্যবহার করতে পারেন। আপনি W3Schools দ্বারা লিখিত গ্লোবাল অ্যাট্রিবিউট তালিকায় আমাদের কাছে উপলব্ধ নিয়মিত HTML বৈশিষ্ট্যগুলির একটি তালিকা খুঁজে পেতে পারেন৷

উপসংহার

HTML _{উপাদান পাঠ্যের একটি অনুচ্ছেদে সাবটেক্সট যোগ করে। সাবটেক্সট পাঠ্যের একটি লাইনের নীচে প্রদর্শিত হয়। ^{টেক্সটে সুপার টেক্সট যোগ করে, যা টেক্সটের একটি লাইনের উপরে দেখা যায়।}}

এটাই! আপনি এখন সফলভাবে HTML-এ সুপারস্ক্রিপ্ট এবং সাবস্ক্রিপ্ট তৈরি করতে পারেন।

আপনি কি HTML সম্পর্কে আরও জানতে চান? শীর্ষস্থানীয় অনলাইন কোর্স এবং বইগুলির বিষয়ে বিশেষজ্ঞ টিপস এবং দিকনির্দেশনার জন্য আমাদের সম্পূর্ণ কীভাবে HTML গাইড শিখবেন তা দেখুন৷

৷