HTML (04) HTML এর সকল ট্যাগ এর ব্যবহার HTML All Tag example. । প্রযুক্তি বই।

প্রিয় পাঠক,

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

ত আলোচনা শুরু করা যাক-

শুরুতেই যে ট্যাগটির কথা আসে সেটি হলো

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

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

ইনপুট	আউটপুট
<caption > মোবাইল কোম্পানির   নাম সমূহ  </caption> <ul>     <li>আই.ফোন</li>      <li>স্যামসাং</li>     <li>শাওমি</li>     <li>ওয়ালটন</li>     <li>নোকিয়া<li> </ul>	মোবাইল কোম্পানির   নাম সমূহ ▪️আই.ফোন ▪️স্যামসাং ▪️শাওমি ▪️ওয়ালটন ▪️নোকিয়া

উপরে দেখতে পাচ্ছেন,  ইনপুট বক্সে এলটি হেডিং ব্যবহার করা হয়েছে, ক্যাপশন ট্যাগ এর ভিতরে।  আর লিস্ট ট্যাগ ব্যবহার করা হয়েছে মূলত নাম গুলোকে লিস্ট করার জন্য।  আর আউট পুটে ঐ ক্যাপ শন ট্যাগ এর জন্য "caption" টিকে আলাদা উপরে দেখাচ্ছে।এটাই মূলত এই ট্যাগ এর কাজ।

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

-এই ট্যাগ দিয়ে HTML এর ভিতরে কোডিংকে কোড আকারে দেখাতে ব্যবহার করা হয়। এর মানে হলো- ধরেন আপনি কোডিং এর কোনো অংশের আউটপুট না দেখিয়ে কোড গুলোকে কোডিং আকারেই দেখানো হওক। তখন এই ট্যাগ ব্যবহার করা হয়। এমন অবস্থায় যদি <code> ট্যাগ ব্যবহার করা না হয়  তাহলে যে কোড লিখবেন তাা সবই আউটপুটে এলগরিদম কে নির্দেশ করে ফেলবে। উদাহরণ সরূপ - 

যেমনঃ

ইনপুট	আউটপুট
<!--code ট্যাগ ছাড়া--> #include<stdio.h> int main() {     printf("Hello Uday"); }        <!-- কোড ট্যাগ ব্যবহার করে--> <code> #include<stdio.h> int main() {     printf("Hello Uday"); }       </code>	Hello Uday ___________________ #include<stdio.h> int main() {     printf("Hello Uday"); } <!--code Tag starts here -->

উপরের ইনপুট বক্সে কি দেখতে পাচ্ছি?   এখানে উপরে আমরা একটি কমেন্ট ট্যাগ এী ভিতরে কমেন্ট করে বুঝিয়েছি যে কোনটায় <code> ট্যাগ ব্যবহার করা হয় নি আর কোনটায় ব্যবহার করা হয়েছে। কমেন্ট ট্যাগ এর কোনো আউটপুট নেই। এটি শুধু মাত্র *কোন বিষয়ের উপড় কোড করা হয়েছে তা সহজে বুঝার জন্য ব্যবহার করা হয়। 

তারপর এই ইনপুট বক্সে উপরের কিছু অংশে দেখেছেন কিছু C পোগ্রামিং কোড করেছি। যেটায় <code> ট্যাগ ব্যবহার করা হয় নি তাই সরাসরি এর একটা আউটপুট তৈরি হয়ে গিয়েছে। ডানপাশের আউটপুটে আমরা "Hello Uday " লেখাটি দেখতে পাচ্ছি মূলত এটি ঐ  C পোগ্রামিং কোডের আউটপুট। 

কিন্তু যদি আমরা ঐ c পোগ্রামিং  কোডকে কোড আকারেই আউটপুটে দেখতে চাই তখন আমাদের ঐ C পোগ্রামিং  কোড গুলো <code> ট্যাগ এর ভিতরে লিখতে হবে, যেমনটা আমরা ইনপুট বক্সের নিচের অংশে করেছি। বুঝার সুবিধার জন্য এখানেও কমেন্ট ট্যাগ দিয়ে বলে দিয়েছি।।  আর আউটপুটের বক্সে নিচে আমরা ঐ কোড গুলোকে Code আকারেই দেখতে পাচ্ছি। 

সুতরাং বুঝতে পেরেছি যে <code> ট্যাগ দিয়ে - আউটপুটে Code কে Coding আকারে দেখানো হয়।।

<!-- কমেন্ট Comment  -->   ট্যাগ এর ব্যবহার-

এটি হলে কমেন্ট ট্যাগ,  যার ব্যবহার আমরা উপরে <code> ট্যাগে দেখেছি, কিন্তু এখন এটি আলাদা ভাবে বিস্তারিত পড়ব।

কমেন্ট ট্যাগ কে  <!-- --> পরকাশ করা হয়। অর্থাৎ  প্রথমে smallerthan এরপর একটি বিস্ময় চিহ্ন এরপর দুটি হাইপেন ( -) চিহ্ন এর পর মূল বিষয় বস্তুর নাম এরপর আবার দুটি হাইপেন Biggerthan দিয়ে শেষ করা হয়। এই ট্যাগের ভিতরের কোনো লেখা আউটপুটে প্রদর্শিত হয় না। শুধু মাত্র কোডিংকে সহজে চেনার জন্য এটি ব্যবহার করা হয়। এতে বুঝা যায় যে কোডের কোন অংশ কেন লেখা হয়েছে।  যদি একটা উদাহরণ দেখি-

যেমনঃ

ইনপুট	আউটপুট
<!-- মেবাইল মডেলের নাম --> <ul>     <li>আই.ফোন</li>          <li>স্যামসাং</li>     <li>শাওমি</li>     <li>ওয়ালটন</li>     <li>নোকিয়া<li>	▪️আই.ফোন ▪️স্যামসাং ▪️শাওমি ▪️ওয়ালটন ▪️নোকিয়া

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

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

আমরা এই ট্যাগের ব্যবহার আগের পোস্টে দেখেছিলাম। কিন্তু বুঝার সুবিধার জন্য একটু বিস্তারিত পড়ি-

এটি হলো সাইট নির্দেশক ট্যাগ। এই ট্যাগ দিয়ে বুঝায় যে কোনো সাবজেক্ট অন্য একটি ওয়েব সাইট বা অন্য কোনো লিংক। এর ভিতরে লিংক <a> ট্যাগ ব্যবহার করেও href লিংক এট্রিবিউট ব্যবহার করা যায় অথবা 

<a> ট্যাগ ছাড়াও। তবে<a> ট্যাগ ব্যবহার করা সবচেয়ে ভালো।<a> ট্যাগ ছাড়া সমস্যা হয়। অনেকসময়  href এট্রিবিউট একটি লিংক নির্দেশক এট্রিবিউট।  এটি কোনো লিংকের আগে ব্যবহার করা হয়। আমরা যদি <cite> ট্যাগ এর ব্যবহার দেখি-

যেমনঃ

ইনপুট	আউটপুট
<cite href="https://projuktiboi.com">  প্রযুক্তি বই </cite> <cite> <a href="https://projuktiboi.com"> প্রযুক্তি বই </a> </cite>	প্রযুক্তি বই      প্রযুক্তি বই

উপরের আউটপুটে একটিতে <a> ট্যাগ ছাড়া এবং নিচেরটিতে <a> ট্যাগ সহ লেখা হয়েছে। এর ফলে আউটপুটে আমরা এর ব্যবধান দেখতে পাচ্ছি।  নিচের টায় লিংক তৈরি হয়েছে কিন্তু উপরের টায় cite নিরর্দেশ করেছে কিন্তু লিংক নির্দেশ করেনি। সুতরাং আমরা এর ব্যবহার বুঝতে পেড়েছি।

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

এবং

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

colgroup ট্যাগ কে একই সাথে অনেকগুলো কলামকে edit করার জন্য ব্যবহার করা হয়।  অর্থাৎ যদি কোন টেবিলের কোনো একটি সম্পূর্ণ  কলামকে একসাথে এডিট করতে চাই তখন,  <table > ট্যাগ এর পর এবং <tr> ট্যাগ এর আগে এই <colgroup> ট্যাগ ব্যবহার করতে হয়। এই ট্যাগের ভিতরে আবার আলাদা আলাদা এট্রিবিউট যোগ করার জন্য <col> ট্যাগ ব্যবহার করা হয়।  নিচে এর ব্যবহার দেখানো হলো-

যেমনঃ

ইনপুট	আউটপুট

উপরের ইনপুট বক্সে দেখতে পাচ্ছেন টেবিল ট্যাগ এর ভিতরে clogroup ব্যবহার করা হয়েছে। এবং কলামকে রং করার জন্য Background color হলুদ এবং লাল করার জন্য এই  Colgroup এর ভিতর দুটি <clo> ট্যাগ এর ভিতর  Style এট্রিবিউট যোগ করা হয়েছে এবং এর ভিতর ব্যকগ্রাউন্ড কালার লাল এবং হলুদ দেয়া হয়েছে। এটাই মূলত  Colgroup এবং <col> ট্যাগের কাজ।

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

ধন্যবাদ।