HTML(09) html এর সকল ট্যাগ এর ব্যবহার, HTML All Tag Example।প্রযুক্তি বই।

প্রিয় পাঠক, গত পর্ব গুলোতে আমরা এইচটিএমএল এর  a হতে o পর্যন্ত শব্দ দিয়ে যত গুলো ট্যাগ রয়েছে সব গুলো ট্যাগের ব্যবহার দেখেছি। এই পৃষ্ঠায় আমরা পরবর্তী ট্যাগ গুলো নিয়ে আলোচনা করব। আজকের এই পৃষ্ঠায় যে যে ট্যাগ গুলো নিয়ে আলোচনা করা হয়েছে -

• <p> ট্যাগ এর ব্যবহার,
• <pre> ট্যাগ এর ব্যবহার,
• <picture > ট্যাগ এর ব্যবহার,
• <param> ট্যাগ এর ব্যবহার,
• <progress> ট্যাগ এর ব্যবহার,
• <q> ট্যাগ এর ব্যবহার,
• <script > ট্যাগ এর ব্যবহার,
• <select> ট্যাগ এর ব্যবহার,
• <source > ট্যাগ এর ব্যবহার,
• <span> ট্যাগ এর ব্যবহার,
• <small> ট্যাগ এর ব্যবহার,
• <style> ট্যাগ এর ব্যবহার,
• <strong >ট্যাগ এর ব্যবহার,
• <sammary> ট্যাগ এর ব্যবহার,
• <sub> ট্যাগ এর ব্যবহার,
• <sup> ট্যাগ এর ব্যবহার 

• <p> ট্যাগ এর ব্যবহার

এই ট্যাগ এর ব্যবহার শুরু থেকেই পড়ে আসতেছি, এটি হলো Paragraph ট্যাগ। এই ট্যাগের ভিতরে লেখা সমস্ত টেক্সট প্যারাগ্রাফ আকারের রূপ নেয়। আসলে কোনো ডিটেইল বা বর্ণনা লেখার সময় এই ট্যাগ ব্যবহার করা হয়। এর ব্যবহার যদি দেখি -

ইনপুট	আউটপুট
<h2> এইচ.টি.এম.এল   কি?</h2> <p>এইচ.টি.এম.এল  হলো একটি কম্পিউটার ভাষা। এর পূর্ণ রূপ Hyper Text Markup Language. এর জনক টিম বার্নাস.লি.। </p>	এইচ.টি.এম.এল   কি? এইচ.টি.এম.এল  হলো একটি কম্পিউটার ভাষা। এর পূর্ণ রূপ Hyper Text Markup Language. এর জনক টিম বার্নাস.লি.।

উপরের ইনপুটে <h2 >ট্যাগ এর ভিতরে একটি প্রশ্ন লেখা হয়েছে যাতে  বাকী লেখা থেকে একটু বড় দেখায়্ আর উত্তর টিকে বর্ণনা আকারে <p> ট্যাগ এর ভিতরে লেখা হয়েছে। তাহলে নিশ্চয়ই  বুঝতে পেরেছি যে <p>  ট্যাগ কেন ব্যবহার করা হয়।

• <pre> ট্যাগ এর ব্যবহার

এই ট্যাগ এর কাজ হলো লাইক ব্রেক দেয়া। ঠিক যেমনটা আমরা <br> ট্যাগ দিয়ে করি।  চাইলে< br >ট্যাগ ছাড়া এই ট্যাগ দিয়েও লাইন ব্রেক দেয়া যায়। যেমন-

<p> Computer is a Digital and Electronic Device <pre> It is very useful for Us. </p>
Computer is a Digital and Electronic Device.
It is very useful for Us.

উপরের ইনপুট বক্সে আমরা একটি প্যারাগ্রাফ লিখেছি এবং বেশ কিছু শব্দ লেখার পর It এর আগে একটি <pre> ট্যাগ ব্যবহার করেছি। যার ফলে নিচে আউটপুটে একটি It এর পরে একটি  ব্রেক দেখতে পাচ্ছি। এটাই মূলত এই ট্যাগ এর কাজ।

• <picture> ট্যাগ এর ব্যবহার

এই ট্যাগ দিয়ে ওয়েবসাইট বা পেজে ফটো যোগ করা হয়। ঠিক যেমন <img> ট্যাগ দিয়ে করা হয়। তবে picture ট্যাগ এর ভিতরে একাধিক img ট্যাগ ব্যবহার করা হয়ে থাকে। অর্থাৎ picture ট্যাগ হলো img group ট্যাগ। 

এর ব্যবহার হবে এরকম-

<picture >

  <img src="https://imagelink.jpg">

<img src="image.png">

</picture >

উপরে picture ট্যাগ এর ব্যবহার দেখতে পাচ্ছেন,  এছাড়াও আরো অনেক ভাবে এই ট্যাগ এর ব্যবহার করা হয়।

• <param> ট্যাগ এর ব্যবহার

এই ট্যাগ <object> ট্যাগ এর ভিতরে ব্যবহার করে বা <embed> বা যেকোনো মিডিয়া ট্যাগে ব্যবহার করে, ভিডিও বা অডিওকে অটো প্লে করা হয়। এর ব্যবহার এরকম-

 <object data="https://videolink.mp4">

  <param name="autoplay" value="true">
</object>

উপরে <object> ট্যাগ এর ভিতরে param ট্যাগ এর ব্যবহার দেখতে পাচ্ছি,  যার ফলে যেকোন ভিডিও বা অডিও অটো প্লে হবে। এভাবেই এই ট্যাগ ব্যবহার করা হয়।

• <progress> ট্যাগ এর ব্যবহার

Progress মানে হলো উন্নত,  অর্থাৎ কোনো কাজের অগ্রগতি নির্দেশক ট্যাগ এটি। এটিকে লোডিং, অপশনে প্রয়োগ করা হয়। একটি উদাহরণ দেখালে সহজে বুঝে যাবেন। যেমনঃ

আউটপুট: <span>Loading:</span> <progress value="35" max="100"></progress> আউটপুট:

 Loading: 35%

উপরে প্রগ্রেস ট্যাগ এর  প্রগতি দেখতে পাচ্ছেন,  যেখানে Java স্ক্রিপ্ট প্রয়োগ করলে নীল রংটি সামনের দিকে অগ্রসর হবেএবং ১০০% হয়ে পূর্ণ হবে। এটাই এই <progress > ট্যাগ এর কাজ।

• <q> ট্যাগ এর ব্যবহার

এই ট্যাগ এর পূর্ণ  রূপ হলো Quotation, এর মানে হলো সংক্ষিপ্ত আকারে কোনো শব্দ বাক্যকে তুলো ধরা অথবা ঐ বাক্যকে ইনভার্টেট কমা দিয়ে প্রকাশ করা।  এর ব্যবহার যদি দেখি-

 <p> Computer is very < q> essential<q> Device  </p>
Computer is very " essential " Device 

দেখতে পাচ্ছি উপরের ইনপুটে  essential শব্দ টির দু পাশে <q> ট্যাগ ব্যবহার করা হয়েছে। যার ফলে আউটপুটে এর দুপাশে ইনভার্টেড কমা দেখা যাচ্ছে। মূলত এই ট্যাগ এভাবেই শব্দ কে প্রকাশ করে। 

• <script > ট্যাগ এর ব্যবহার

HTML পেজে এই ট্যাগ এর ভিতরে জাভাস্ক্রিপ্ট লেখা হয়। যদি html দিয়ে ওয়েবসাইট বানানোর সময় জাভা স্ক্রিপ্ট পোগ্রামিং করার প্রয়োজন পরে তখন এর ভিতরে জাভা স্ক্রিপ্ট লেখা হয়।

যেমনঃ

<script >   যাবতীয় java স্ক্রিপ্ট   </script >

• <select > ট্যাগ এর ব্যবহার

এই ট্যাগ দিয়ে ড্রপ ডাউন সিলেক্ট ফাংশন তৈরি করা হয়। যেমন  আপনাকে তিনটি ডিভাইসের মধ্যে একটি ডিভাইস পছন্দ করার কথা বলা হলো তখন আপনি তিনটি ডিভাইস থেকে যেকোনো একটি পছন্দ করবেন। এক্ষেত্রে এই ট্যাগ ব্যবহার করা হয়।

ইনপুট:

 <h3>Choose a Device </h3><select> <option>Computer </option><option>Mobile </option><option>Tablet </option></select >

আউটপুট:

 
 
Choose a Device 
 Computer Mobile Tablet 

উপরের  ইনপুটে select এর ব্যবহার দেখতে পাচ্ছেন।  যার ফল সরূপ Choose a Devise  বাক্যটির নিচে এড়ো চিহ্নে ক্লিক করলে আপনি সিলেক্ট করার জন্য আরো কয়েকটি অপশন পেয়ে যাবেন। মূলত এরকম ভাবেই <select> ট্যাগ এর ব্যবহার করা হয়।

• <small> ট্যাগ এর ব্যবহার

এই ট্যাগ ব্যবহার করা হয় কেনো টেক্সটকে ছোট করে দেখাতে। যেমন কখনো কোনো লেখাকে আপনি অপেক্ষাকৃত ছোট দেখাতে চাইলে এই ট্যাগ এর ব্যবহার করতে পারেন। যেমন-

ইনপুট:

 <p>Desktop is a bigger than <small>laptop </small></p>
Desktop is a bigger than laptop

দেখতে পাচ্ছেন উপরের ইনপুট বক্সে laptop এর জন্য small ট্যাগ ব্যবহার করায় আউটপুটে এই laptop লেখাটি ছোর হয়ে গিয়েছে। অর্থাৎ এই ট্যাগ পারফেক্ট ভাবে কাজ করছে। এরজন্যই মূলত এই ট্যাগ ব্যবহার করা হয়।

• <source > ট্যাগ এর ব্যবহার

যখন পোগ্রামে মিডিয়া ট্যাগ যেমন <picture > <video> ট্যাগ ব্যবহার করা হয় তখন এই সোর্স ট্যাগ ব্যবহার করা হয়। 

ইনপুট:

 <video> <source src="https://video link.mp4"> </video>

দেখতে পাচ্ছি ঠিক এরকম ভাবেই এই ট্যাগ এর ব্যবহার করা হয়।

• <span> ট্যাগ এর ব্যবহার

এই ট্যাগ দিয়ে কোনো টেক্সট কে আলাদা করে সিলেক্ট করে স্টাইল দেয়া হয়। যেমন একটি প্যারা গ্রাফের মাঝখানের একটি শব্দকে লাল রং করতে চান বা যেকোনো স্টাইল দিতে চান। তখন এই ট্যাগ ব্যবহার করা যায়। যেমন-

ইনপুট:

 <p>We are know that,There are Three Kinds of<span style="color:red;"> Computer </span> </p>
We are know that,There are Three Kinds of Computer 

দেখতে পাচ্ছেন Computer লেখাটির সামনে span ট্যাগ ব্যবহার করে শুধু এই লেখাটাকে লাল রং করা হয়েছে Style এট্রিবিউট ব্যবহার করে। মূলত এজন্যই আলাদা আলাদা স্টাইল দেয়ার জন্য এই ট্যাগ ব্যবহার করা হয়।

• <style> ট্যাগ এর ব্যবহার

 HTMLকোড গুলোর আউট পুটকে বিভিন্ন  স্টাইল বা সুন্দর রূপ দেয়ার জন্য এই স্টাইল ট্যাগ ব্যবহার করা হয়।  এটার ভিতরে বিভিন্ন এট্রিবিউট উপাদান ব্যবহার করা হয়। যেমন, color, background, font-size,font-family ইত্যাদি ইত্যাদি,  মূলত এটির দ্বারাই একটি ওয়েবসাইট কে আকর্ষণীয় করে তুলা হয়। এর ভিতরে যাবতীয় এট্রিবিউট লেখা হয়।  যার ফলে html কোডিং একটু সুন্দর এবং শৃঙ্খলা দেখায়।এর ব্যবহার দু ভাবে করা যায়।

• Style Sheet বা CSS 
• <style> ট্যাগ এর মাধ্যমে  

Style এট্রিবিউট গুলো আলাদা শীট এ ব্যবহার করার জন্য এই css শীট ব্যবহার করতে হয়।

আর সরাসরি html পেজে স্টাইল ব্যবহার করতে হলে <style>  ট্যাগ ব্যবহার করতে হয়।

উদাহরণ -

<style> যাবতীয় CSS বা এট্রিবিউট </style>

• <strong> ট্যাগ এর ব্যবহার

কোনো লেখা বা শব্দকে বোল্ড করার জন্য বা প্রচুর জোর দিয়ে প্রকাশ করার জন্য এই ট্যাগ ব্যবহার করা হয়। যেমন- 

ইনপুট:

 <p>We are know that,There are Three Kinds of<strong> Computer </strong> </p>
We are know that,There are Three Kinds of Computer 

দেখতে পাচ্ছি Computer শব্দটির জন্য strong ব্যবহার করা হয়েছে। যার ফলে computer লেখাটি বোল্ড হয়ে গিয়েছে। এই কাজটি <b> ট্যাগ দিয়েও করা হয়। 

• <sammary> ট্যাগ এর ব্যবহার

এই ট্যাগ দিয়ে কোনো কিছুর ডিটেইল ওপেন  করা হয়।ধরেন আপনি কোনো একটা প্রশ্নের উত্তরকে Sammary আকারে প্রকাশ করতে চান তখন এই ট্যাগ ব্যবহার করতে পারেন। এর ব্যবহার আগেও দেখেছিলাম। উদাহারণ সরূপ-

ইনপুট:

<details>
  <summary>কম্পিউটার কি?</summary>
  <p>কম্পিউটার হলো একটি গণনা কারী যন্ত্র, বর্তমান বিশ্বের প্রতিটি সেক্টরে যার ব্যবহার ব্যাপক </p>
</details>

  
কম্পিউটার কি?
  
কম্পিউটার হলো একটি গণনা কারী যন্ত্র, বর্তমান বিশ্বের প্রতিটি সেক্টরে যার ব্যবহার ব্যাপক 

দেখতে পাচ্ছেন কীভাবে একটি সামারি লেখা হয়েছে। এখন নিচের আউটপুটে লক্ষ্য করুন।কম্পিউটার কি? এই প্রশ্নের বাম পাশে ত্রিভুজ আকৃতির বাটনে ক্লিক করলেই সামারিটি ওপেন হবে। ত বুঝতে পারলাম এর কাজ কি।

• <sub> ট্যাগ এর ব্যবহার

sub ট্যাগ মানে  Subject Base, যেকোনো লেখাকে একটি সাব অবজেক্টের প্রকাশ করা বা কোনো বেইজ তৈরি করতে এই ট্যাগ ব্যবহার করা হয়।  যেমন আপনি যদি অক্সিজেন  এর সংকেত লিখি O_{2 ,} এখানে 2 লেখাটি লেখতে গিয়ে <sub>  ট্যাগ ব্যবহার করা হয়েছে। উদাহরণ সরূপ -

ইনপুট:

H<sub>2</sub>O

আউটপুট:

H2O 

দেখতে  পাচ্ছি,  পানির সংকেত লিখতে গিয়ে ২ লেখাটিকে সাব ট্যাগ দিয়ে  ছোট করা হয়েছে।  এটাই এই ট্যাগ এর কাজ।

• <sup> ট্যাগ এর ব্যবহার

sup ট্যাগ মানে Subject Powerযেকোনো লেখাকে একটি power এ প্রকাশ করা। Sup ট্যাগ ব্যবহার করলে একটি সূচক আকারের সংখ্যা বা শব্দর  তৈরি হয়। যেমন আপনি যদি গণিতে সূচক লেখি  উদাহরণ সরূপ -

ইনপুট:

a<sup>2</sup>b<sup>4</sup>

আউটপুট:

a2b4

দেখতে  পাচ্ছি,  সূচক লিখতে গিয়ে ২ লেখাটিকে ও 4  লেখাটিকে সাব পাওয়ার ট্যাগ দিয়ে  ছোট করা হয়েছে।  এটাই এই ট্যাগ এর কাজ।

প্রিয় পাঠক, পরবর্তী ট্যাগ গুলো সম্পর্কে জানতে অবশ্যই আমাদের ওয়েবসাইটের সাথে থাকবেন।

ধন্যবাদ।