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

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

• <i> ট্যাগ এর ব্যবহার।
• <iframe> ট্যাগ এর ব্যবহার।
• <img> ট্যাগ এর ব্যবহার।
• <ins> ট্যাগ এর ব্যবহার।
• <label > ট্যাগ এর ব্যবহার।
• <legend> ট্যাগ এর ব্যবহার।
• <link> ট্যাগ এর ব্যবহার।
• <li> ট্যাগ এর ব্যবহার।

ত- প্রথম থেকে শুরু করি-

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

এটি একটি Idiomatic Text element ট্যাগ যেটি ব্যবহার করা হলে টেক্সটকে ইতালিক হরফের মতো বাঁকা করে দেয়। আমরা যদি এটার ব্যবহার দেখি-

ইনপুট	আউটপুট
<p> My Country Name is <i> Bangladesh </i></p>	My Country Name is Bangladesh

উপরের ইনপুটে দেখতে পাচ্ছি প্যারাগ্রাফ ট্যাগ এর ভিতর Bangladesh লেখাটির দু পাশে এর  শুরু ও শেষ ট্যাগ ব্যবহার করা হয়েছ, ফলে আউটপুটে Bangladesh লেখাটি ইতালিক হরফের মতো বাঁকা হয়ে গিয়েছে। এটাই মূলত এই ট্যাগের কাজ।

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

এর পূর্ণ রূপ হলো inline frame.  iframe ট্যাগ এর কাজ হলো একটি ওয়েবসাইটের ভিতরে নির্বাচন করা স্থানে অন্য একটি ওয়েবসাইটকে দেখানো। যেমন ধরেন আপনি একটি ব্লগ লেখলেন এবং চাচ্ছেন কোনো প্রয়োজন বিষয়ে একটি ওয়েবসাইট কে আপনার পৃষ্ঠায় লাইভ প্রদর্শন করাবেন তখন এই inline frame ট্যাগ এর ব্যবহার করবেন।

দেখি-

ইনপুট
<iframe src= "https:// udayendudas .blogspot. com" height="600" width:"400">    </iframe>
আউটপুট

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

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

img ট্যাগ এর কাজ হলো কেনো ফটোকে ওয়েবসাইটে যোগ করানো। আপনি যদি কোনো ফটো যোগ করতে চান তখন আপনাকে এই ট্যাগ ব্যবহার করতে হবে। এটা প্রায় iframe ট্যাগ এর মতোই কাজ করে। তবে এর কোনো শেষ ট্যাগ নেই। যদি এর উদাহারণ দেখি-

ইনপুট	আউটপুট
<img src="NaturePhoto.jpg"> <img src="https://naturephoto.jpg.com">	🏞️ 🏞️

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

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

আমরা যে সময় <del> ট্যাগ এর ব্যবহার দেখেছি ঐ সময় <ins> ট্যাগেরও ব্যবহার দেখেছি। আসলে একটি আরেকটির বিপরীতে কাজ করে। <del> দিয়ে কোনো লেখাকে মাঝ বরাবর কাটা দেয়া হয় আর <ins > দিয়ে কাটা দেয়া লেখা এর পাশে নতুন শব্দ লেখা হয়। এর ব্যবহার যদি দেখি-

ইনপুট	আউটপুট
<p>আজকে ডিস্কাউন্ট < del> ২০০ </del><ins >১০০</ins> </p>	আজকে ডিস্কাউন্ট ২০০ ১০০

উপরের ইনপুট আর আউট পুট দেখে ‍ নিশ্চই বুঝে গিয়েছেন যে এই ট্যাগের কাজ কি ? এখানে একটি কাটার জন্য <del> ট্যাগ এবং একটি যোগ করার জন্য <ins> ট্যাগ ব্যবহা করা হয়েছে।  এখন নিশ্চয়ই জেনেছি যে এই ট্যাগ দুটির কাজ কি। 

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

এই ট্যাগ টি <input >  ট্যাগ এর পরিপূরক।  এটি ইনপুট ট্যাগ এর সাথেই ব্যবহার করা হয়। সাধারণত সার্চ বক্স বা  বিভিন্ন বিষয় বস্তুকে সেক্টর অনুযায়ী ভাগ করতে ব্যবহার করা হয়। যেমন আপনি একটি ওয়েবসাইটে বিভিন্ন ক্যাটাগরীর ভিডিও আপলোড দিলেন। তখন আপনি অবশ্যই চাইবেন, একই ক্যাটাগরীর ভিডিও গুলো যেন একপাশে থাকে বা সার্চ করে যাতে এক সাথে খুঁজে পায়। এর জন্য এই label ট্যাগ ব্যবহার করতে হবে।

দেখি। 

ইনপুট	আউটপুট
<label for="student">                 Computer         </label>         <input type="radio" name="Occupation"                id="student" value="student"><br>           <label for="business">                Mobile         </label>         <input type="radio" name="Occupation"                id="business" value="business"><br>           <label for="other">                Tablet         </label>	Computer Mobile Tablet

উপরের ইনপুট বক্সে অবশ্যই দেখতে পাচ্ছেন যে কেন এই লেভেল ট্যাগ ব্যবহার করা হয়েছে। এখানে Computer, Mobile, Tablet এগুলো দিয়ে সার্চে লেভেল লাগিয়ে দেয়া হয়েছে যাতে এগুলো সিলেক্ট করে সার্চ করলে রিলেটেড পোস্ট গুলো চলে আসে। আউটপুটে দেখছেন সিলেক্টর বাটনও দেখাচ্ছে।  এখন নিশ্চই বুঝতে পেরেছি যে এই ট্যাগের কাজ কি। একটু কঠিন লাগতে পারে। পরে এটি নিয়ে বিস্তারিত আলোচনা করব।

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

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

উপরে ইনপুটে আমরা Choose your favorite monster  বাক্যটি <legend> ট্যাগ দিয়ে দিয়েছি।

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

লিংক ট্যাগ মূলত html এর সাথে কোনো পৃষ্ঠাকে,  ফন্ট, স্টাইলশীট,   অন্যান্য পোগ্রামিং ভাষাকে  লিংক করতে বা যুক্ত করার জন্য< head> ট্যাগ এর ভিতরে যোগ করা হয়। যেমন আপনি যদি HTML style এট্রিবিউট এর উপাদান সমূহ আলাদা কোনো পৃষ্ঠায় লেখবেন তখন ঐ পৃষ্ঠা কে <link > ট্যাগ দিয়ে জুড়ে দিতে হবে। নাহলে স্টাইল শীট কাজ করবে না। উদাহরণ সরূপ -

<head>

 

 <link ="stylesheet " href='CSSFile.css">

 

</head>

দেখতে পাচ্ছেন কিভাবে লিংক ট্যাগ দিয়ে একটি স্টাইল শীট যুক্ত করা হয়েছে। 

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

 এটি একটি লিস্ট ট্যাগ। এটি <ul><ol> ট্যাগ এর ভিতরে লিস্ট আইটেম লিখতে ব্যবহার করা হয়। যেমন-

এর ব্যবহার যদি দেখি-

ইনপুট	আউটপুট
<ul> <li> কম্পিউটার </li> <li>মোবাইল </li> < li>টেবলেট </li> </ul>	কম্পিউটার মোবাইল টেবলেট

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

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

ধন্যবাদ!