HTML (10) HTML সকল ট্যাগ এর ব্যবহার, Html All Tag example

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

• <table>
• <thead>
• <tr>
• <th>
• <td>
• <tfoot>

• <tittle>
• <time>
• <track>
• <ul>
• <u>
• < video>
• <wbr>

বুঝার সুবিধার্থে একটি  Table  তৈরিতে যে যে উপাদান গুলো বা ট্যাগ গুলোর প্রয়োজন হয় সেগুলো হলো <table><tbody><thead><tr><th><td><tfoot>

তাই সবগুলো ট্যাগ এর ব্যবহার এক সাথে দেখব। কিন্তু কাজ গুলো জানতে বা সুবিধার জন্য এর কোনটির কাজ কি তা একটু আলাদা আলাদা ভাবে জেনে নেয়া যাক।

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

table ট্যাগ হলো টেবিল তৈরির মেজর বা মূল ট্যাগ। এই ট্যাগ দিয়েই মূলত কোনো টেবিল নির্দেশ করে। আর এই ট্যাগের ভিতরেই টেবিলের  বাকী ট্যাগ গুলো লেখা হয়।  টেবিল তৈরির জন্য এই ট্যাগের ভিতর  বিভিন্ন এট্রিবিউট ও ব্যবহার করা হয়ে থাকে। সবগুলোর ব্যবহার নিচে একসাথে দেখব। এখন ট্যাগ গুলোর কাজ গুলো সম্পর্কে আংশিক ধারনা নিয়ে নেই।

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

এই ট্যাগ টেবিলের উপরে হেডলাইন দিতে ব্যবহার করা হয়।  যদি কোনো টেবিল তৈরির সময় টেবিলের শিরোনাম নাম বা টাইটেল দেবার প্রয়োজন হয় তখন এই ট্যাগ ব্যবহার করা হয়। এর ব্যবহার নিচে একসাথে দেখব।

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

এটি টেবিলের বডি নির্দেশক ট্যাগ। এর ভিতরে যাবতীয় সারি কলাম ট্যাগ গুলো লেখা হয়। মূলত টেবিল হেডার  ট্যাগ বা টাইটেল ট্যাগ এর পর এর ব্যবহার করা হয়।  এর ব্যবহারও নিচে দেখব।

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

tbody  এর পর যে ট্যাগ দিয়ে টেবিল তৈরি শুরু করা হয় সেটি <tr>ট্যাগ, এটি টেবিলের প্রতিটা row বা সারিকে নির্দেশ করে। সারি বলতে- টেবিলের সমান্তরালে যে বক্স সমূহ থাকে এগুলোকে টেবিল সারি বলে। প্রতিটি আলাদা আলাদা  row এর জন্য প্রতি বার tr ব্যবহার করতে হয়। 

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

টেবিলের হেড নির্দেশক ট্যাগ হলো th যেটা Table Header নামে পরিচিত।  এটি ব্যবহার করে টেবিলের প্রথম row তে হেড যোগ করা হয়। যার ফলে এতে থাকা ডাটা সমূহ বোল্ড হয়ে দেখায়।

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

টেবিলের প্রতিটা সারির ডাটা গুলো লেখার জন্য <tr> ট্যাগ এর ভিতরে এই ট্যাগ লেখা হয়। td মানে হলো table data. 

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

টেবিলের নির্দিষ্ট সারি কে সিলেক্ট করে স্টাইল করার জন্য এই ট্যাগ ব্যবহার করা হয়। এছাড়াও এই ট্যাগ দিয়ে table  footer লেখা হয়।

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

যেমন-

<table border="1">
<thead>প্রযুক্তি বই ওয়েবসাইট </thead>
<tbody>
<tr>
<th>ডিভাইস</th>
<th>ইউজারের নাম</th>
</tr>

<tr>
<td>মোবাইল</td>
<td>উদয়ী</td>
</tr>
<tfoot style="color:red;">
<tr>
<td>কম্পিউটার </td>
<td>উদয়</td>
</tr>
</tfoot>
</tbody>

</table>

প্রযুক্তি বই ওয়েবসাইট 




ডিভাইস
ইউজারের নাম



মোবাইল
উদয়ী



কম্পিউটার 
উদয়

উপরের ইনপুটে দেখতে পাচ্ছি যে  কোন কোন জায়গায় কোন কোন ট্যাগ ব্যবহার করেছি। আর সবচেয়ে গুরুত্বপূর্ণ বিষয় হলো <tfoot> ট্যাগ এর ভিতরে যে সারিটি ব্যবহার করেছি এটাকে style ট্যাগ দিয়ে color -red করে দেয়ায় নিচের সারি টি লালা রং দেখাচ্ছে।  অর্থাৎ আমরা সব গুলো ট্যাগ এর পারফেক্ট ব্যবহার দেখতে পাচ্ছি। 

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

title ট্যাগ দিয়ে কোনো একটি বিষয়ের টাইটেল বার শিরোনাম লেখা হয়। যেমন আপনি একটা প্যারাগ্রাফ ই লেখালন তখন এর টাইটেল বার শিরো নাম দেয়ার জন্য আপনাকে এই <title > ট্যাগ ব্যবহার করতে হবে।

ব্যবহার দেখতে পাচ্ছি। 

<title><b> কম্পিউটার যে যে কাজে ব্যবহার করা হয়: </b></title>

<p> কম্পিউটার এর কাজের ব্যাপারে বললে শেষ হবে না!  তবে এটি ব্যবসা -শিল্প-শিক্ষা ক্ষেত্রে বিশাল ভূমিকা রাখে। </p>

কম্পিউটার যে যে কাজে ব্যবহার করা হয়:

কম্পিউটার এর কাজের ব্যাপারে বললে শেষ হবে না!  তবে এটি ব্যবসা -শিল্প-শিক্ষা ক্ষেত্রে বিশাল ভূমিকা রাখে।

উপরের ইনপুটে আমরা টাইটেল ট্যাগ এর ব্যবহার দেখতে পাচ্ছি। এবং আউটপুটে এর রেজাল্ট দেখতে পাচ্ছি। এটাই টাইটেল ট্যাগের কাজ।

<time>ট্যাগ এর ব্যবহার

 কোনো জায়গায় সময় যোগ করার জন্য বা কোনো স্থানে Time দেয়ার জন্য এই ট্যাগ ব্যবহার করা হয়। এই ট্যাগ ব্যবহার না করেও ত টাইম ব্যবহার করা যায় তাহলে কেন এটি ব্যবহার করে? আসলে পোগ্রামার দের কোডিং করার সুবিধার জন্য এমন আলাদা আলাদা  ট্যাগ তৈরি করা হয়েছে। 

<p>
  The Meeting starts at <time datetime="20:00">20:00</time> and you'll be able to enjoy the band for at least
  <time datetime="PT2H30M">2h 30m</time>.
</p>

  The Meeting starts at 20:00 and you'll be able to enjoy the band for at least
  2h 30m.

উপরের ইনপুটে <time>ট্যাগ ব্যবহার করা হয়েছে। এবং আউটপুটে এর রেজাল্ট দেখতে পাচ্ছেন। 

<track>ট্যাগ এর ব্যবহার

এই ট্যাগ একটি মিডিয়া ট্যাগ। যেটি ভিডিও অডিও ট্রাক করার জন্য ব্যবহার করা হয়। এছাড়াও ভিডিও অডিও যোগ করার জন্য আরো ট্যাগ রয়েছে। তবে স্থান অনুযায়ী ট্যাগ সমূহের পরিবর্তনীয় ব্যবহার করা হয়।

যেমন-

<video>
<track src="example.mp4">
</video>

উপরের ইনপুটে ভিডিও ট্যাগ এর ভিতরে ট্রেক ট্যাগ এর ব্যবহার দেখতে পাচ্ছি। 

<ul>ট্যাগ এর ব্যবহার

 এই ট্যাগ  unorder list আন অর্ডার লিস্ট তৈরিতে ব্যবহার করা হয়। অর্থাৎ ব্যবহার ঠিক <ol> এর মতোই কিন্তু এটি বুলেট চিহ্ন দিয়ে চিহ্নিত করা থাকে। যেমন-

যেমন-

<ul>
<li> Desktop  </li>
<li>Laptop</li>
<li>Mobile</li>
<li>Tablet</li>
</ul>

▪️Desktop
▪️Laptop
▪️Mobile
▪️Tablet

উপরের ইনপুট বক্সে দেখতে পাচ্ছি <ul> ট্যাগ ব্যবহার করায় লেখা গুলোর সামনে বুলেট চিহ্ন যোগ হয়েছে। ul এর ব্যবহার এভাবেই করা হয়ে থাকে।

<u>ট্যাগ এর ব্যবহার

যেকোনো লেখা বা শব্দের নিচে underline  আন্ডারলাইন টানতে এই ট্যাগ ব্যবহার করা হয়। অর্থাৎ এই ট্যাগের মাঝে ব্যবহার করা সকল বাক্যের নিচে আন্ডারলাইন সৃষ্টি হবে। 

 যেমন-

<p> Computer is very <u> essential </u>for Us.
</p> 

Computer is very essential for Us.

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

<video>ট্যাগ এর ব্যবহার

এই ট্যাগ একটি মিডিয়া ট্যাগ। যেটি ভিডিও  ট্রাক করার জন্য ব্যবহার করা হয়। এছাড়াও ভিডিও  যোগ করার জন্য আরো ট্যাগ রয়েছে। তবে স্থান অনুযায়ী ট্যাগ সমূহের পরিবর্তনীয় ব্যবহার করা হয়।

যেমন-

<video>
<track src="example.mp4">
</video>

উপরের ইনপুটে ভিডিও ট্যাগ এর ব্যবহার দেখতে পাচ্ছি। যেখানে অসংখ্য ভিডিও একসাথে যোগ করা যাবে।

<wbr>ট্যাগ এর ব্যবহার

এটি <br>ট্যাগ এর মতোই কাজ করে। এটি লাইন ব্রেক দেয়ার জন্য ব্যবহার করা হয়। যেমন-

<p> Computer is a electronic device.<wbr> It is very essential for digital World. </p>

Computer is a electronic device.
It is very essential for digital World.

উপরের ইনপুটে এর ব্যবহার দেখতে পাচ্ছি।  এবং আউটপুটে এর জন্য একটি ব্রেক লাইন দেখতে পাচ্ছি। এটাই <wbr>  ট্যাগ এর কাজ।

প্রিয় পাঠক, সব মিলিয়ে যে যে ট্যাগ সমূহ নিয়ে আলোচনা করা হয়েছে সেগুলোর ব্যবহার ব্যাপক। আশা করি পরবর্তীতে আরো বিস্তারিত আলোচনা নিয়ে আসব। এবং প্রতিটি ট্যাগ নিয়ে আলাদা আলাদা করে আলোচনা করব। 

তাই বিস্তারিত আলোচনা এবং ট্যাগ গুলো দিয়ে নিত্য নতুন ফাংশন তৈরি করণ শেখার জন্য সাথে থাকুন।

ধন্যবাদ!