HTML(08) HTML এর সকল ট্যাগ এর ব্যবহার, HTML all tags example।প্রযুক্তি বই।

 প্রিয় পাঠক,

এইচটিএমএল  শেখাটা কতটুকু গুরুত্বপূর্ণ তা আমাদের ওয়েবসাইটের প্রথম পোস্ট গুলো পড়লেই কেবল বুঝতে পারবেন। বর্তমান অনলাইন জগৎ এখনও এইচটিএমএল এর উপর ভিত্তি করে দাঁড়িয়ে রয়েছে। এর ব্যবহার  ব্যপক, যা কল্পনা করাও অসম্ভব।  নিত্য নতুন নতুন ফাংশন যোগ হচ্ছে। নতুন নতুন ট্যাগের বৃদ্ধি পাচ্ছে। তাই সবগুলো ট্যাগের বিস্তারিত আলোচনা নিয়ে ভিন্ন ভিন্ন  পৃষ্ঠা তৈরি করেছি। যাতে করে সবাই সহজে বুঝতে পারে। আশা করি আমাদের ওয়েবসাইটের এইচটিএমএল সম্পর্কিত সবগুলো পোস্ট পড়তে পারলে এর ব্যপক ব্যবহার সম্পর্কে সম্পূর্ণ  ধারণা পাওয়া যাবে।

 গত ০৭ পর্বে আমরা A - L পর্যন্ত বর্ণমালা দিয়ে শুরু হওয়া ট্যাগ সমূহ নিয়ে আলোচনা করেছিলাম।  এই পর্বে আমরা পরের ট্যাগ গুলো দেখব। এই পর্বে যে যে ট্যাগ নিয়ে আলোচনা থাকছে-

• <main> ট্যাগ এর ব্যবহার।
• <map> ট্যাগ এর ব্যবহার।
• <menu> ট্যাগ এর ব্যবহার।
• <mark> ট্যাগ এর ব্যবহার।
• <nav > ট্যাগ এর ব্যবহার।
• <object> ট্যাগ এর ব্যবহার।
• <ol> ট্যাগ এর ব্যবহার।
• <option > ট্যাগ এর ব্যবহার।
• <output > ট্যাগ এর ব্যবহার। 

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

কোনো কন্টেন্টকে প্রাধান্য দিতে এই ট্যাগ ব্যবহার করা হয়। যদিও এর ব্যবহারের ফলে কোনো রূপের পরিবর্তন হয় না। যেমনঃ

ইনপুট	আউটপুট
<main> My Country Name is  Bangladesh. </main><p>Bangladesh is a small country. In the  Bangladesh have many rivers  </p>

উপরের ইনপুটে দেখতে পাচ্ছেন যে main ট্যাগ এবং <p> ট্যাগ এর মাঝে ব্রেক <br> ট্যাগ না লাগানো সত্যেও দুটি ট্যাগের ভেতরের তথ্য গুলোকে আউটপুটে আলাদা করে দেখাচ্ছে।  অর্থাৎ মেইন অংশ হলো উপরের লাইনটা আর নিচের বাকী তথ্য গুলো বিবরণ। এটাই  main ট্যাগ এর কাজ।

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

Map মানে মানচিত্র,  অর্থাৎ মানচিত্র  বা কোনো চিত্র দিয়ে স্থান  বসাতে এই ট্যাগ ব্যবহার করা হয়। আপনি যদি সাইটে মানচিত্র বসাতে চান তাহলে আপনাকে ম্যাপ ট্যাগ ব্যবহার করতে হবে। প্রসেস টা অনেক লম্বা তাই এখানে আলোচনা করলাম না। পরবর্তীতে বিস্তারিত আলোচনা করব।

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

কোনো একটা মেনু তৈরির জন্য এই ট্যাগ ব্যবহার করা হয়। অনেক ওয়েবসাইটের উপরে দেখবেন কিছু ক্যাটাগরী আকারে লেখা থাকে। এগুলো হলো মেনু। এই menu ট্যাগের ভিতরেই লিস্ট আকারে মেনু গুলো লেখা হয়। যেমন-

উপরের ইনপুট বক্সে আমরা menu ট্যাগ এর ব্যবহার দেখতে পাচ্ছি,  যার ফল সরূপ আউটপুটে মেনু গুলো দেখাচ্ছে। 

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

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

<p>Computer is a very important device for<mark>Digital </mark> world.</p>
Computer is a very important device for Digital world.

উপরের ইনপুটে দেখতে পাচ্ছি যে প্যারাগ্রাফ ট্যাগ এর ভিতরে আবার Digital শব্দটিকে mark ট্যাগ দিয়ে লেখা হয়েছে। তাই আউটপুটে Digital শব্দরি মার্ক হয়ে গিয়েছে।  এটাই মার্ক ট্যাগ এর কাজ।

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

 মেনুবার বা নেভিগেশন তৈরির জন্য এই ট্যাগ ব্যবহার করা হয়। যেমনঃ

উপরের ইনপুট বক্সে nav ট্যাগ ব্যবহার করে ডান পাশের আউট পুটে একটি নেভিগেশন মেনু তৈরি করা হয়েছে। এটাই এই ট্যাগ

 এর কাজ।

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

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

ইনপুট	আউটপুট
<object data= "https://youtube.com/shorts/4zGMuH_1Dj4?si=B5vy_AfT-wgDHdJ0" width="550px" height="150px"> </object>

উপরের object ট্যাগ এর ব্যবহার দেখতে পাচ্ছেন।

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

গত পৃষ্ঠায় আমরা লিস্ট <li> ট্যাগ এর সাথে <ul> লিস্ট ট্যাগ ব্যবহার করেছি। এখন দেখব   <ol> লিস্ট। < ol> এর পূর্ণরূপ হলো Order list,  এটি ব্যবহার করলে লিস্ট এর সাথে নম্বর প্রদর্শিত হয়। 

যেমন-

<ol> <li> Computer </li> <li> Mobile </li><li>Tablet</li> </ol>
1. computer                     2. Mobile                      3. Tablet

উপরের  ইনপুটে অর্ডার লিস্ট এর ব্যবহার দেখতে পাচ্ছেন। 

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

কোনো প্রশ্ন বা লেভেলের মাল্টিপল অপশনের মাঝে যেকোনো একটি অপশন পছন্দ করার জন্য এই ট্যাগ ব্যবহার করা হয়। যেমন আপনাকে কয়েকটি ডিভাইসের নাম দেয়া হলো এর মাঝে আপনাকে একটি পছন্দ করতে হবে। এই ক্ষেত্রে আপনি এই <option> ট্যাগ এর ব্যবহার করতে পারেন।

যেমন-

ইনপুট	আউটপুট
<label for="cars"> Choose a Device: </label> <select>   <option value="cm">Computer </option>   <option value="mb">Mobile </option>   <option value="tb">Tablet </option>   <option value="lp">Laptop </option> </select>	Choose a Device: Computer Mobile Tablet Laptop

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

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

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

-যেমনঃ

ইনপুট	আউটপুট
<form oninput="x.value=parseInt(a.value)+parseInt(b.value)">   <input type="range" id="a" value="50">   +<input type="number" id="b" value="25">   =<output name="x" for="a b"></output> </form>	+ =

উপরের ইনপুটে ফরম ট্যাগ এর সাথে আউট পুট ট্যাগ ব্যবহার করা হয়েছে।

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

ধন্যবাদ!