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

প্রিয় পাঠক, 

গত ৪টি পর্বে আমরা  html এর ধারাবাহিক ভবে ‍a,b,c, দিয়ে শুরু হওয়া ট্যাগ গুলো নিয়ে আলোচনা করেছিলাম। এই পৃষ্ঠায় আমরা d,e দিয়ে শুরু হওয়া ট্যাগ সমূহ নিয়ে আলোচনা করব। 

এই পর্বে যেযে ট্যাগ সমূহ নিয়ে আলোচনা থাকছে-

• <datalist> ট্যাগ এর ব্যবহার, How to use Datalist Tag
• <detais> ট্যাগ এর ব্যবহার, How to use details tag
• <dialog> ট্যাগ এর ব্যবহার, How to use <dialg> tag
• <div> ট্যাগ এর ব্যবহার , How to use Div tag
• <dl> ট্যাগ এর ব্যবহার , How to use <dl> tag
• <dt> ট্যাগ এর ব্যবহার, Hoe to use <dt> tag
• <dd>  ট্যাগ এর ব্যবহার,How to use <dd> tag
• <del>   ট্যাগ এর ব্যবহার,How to use <del> tag

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

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

What is <datalist> tag?

ডাটা লিস্ট ট্যাগ কি?

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

ইনপুট	আউটপুট
<h2>কবিতার নাম ও পৃষ্ঠা সার্চ করুন</h2> <form action='form' method='get'> <input list='browser' name ='browser'> <datalist id ='browser'> <option value='গীতাঞ্জলি'> <option value='সংকল্প’> <option value=’অক্ষমা'> <option value='অক্ষমতা’> </datalist <input type='submit' value='send'> </form>	কবিতার নাম ও পৃষ্ঠা সার্চ করুন

উপরের ইনপুট বক্সে আমরা প্রথমে <h1>  ট্যাগ এর ভিতরে একটি হেড লাইন ব্যবহার করেছি এবং নিচে একটি ফরম ট্যাগ ব্যবহার করেছি । কারন <datalist >ট্যাগের কাজ গুলো ফরম ট্যাগের ভিতরে আর সার্চ বক্সে ব্যবহার করা হয়ে থাকে। ইনপুট বক্সে যে কবিতার নাম গুলো দেখছেন তা আউটপুটে দেখতে পাবেন না কিন্তু আপনি যদি আউটপুটের সার্চ বক্সে সার্চ করেন তখন value হিসেবে কবিতার নাম গুলো দেখ তে পাবেন । এটাই হলো datalist ট্যাগ এর কাজ।

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

 What is details Tag?

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

উাহারণ দেখি-

ইনপুট	আউটপুট
<details open> <summary> কম্পিউটার কি?< /summary> <p> কম্পিউটার হলো একটি গণনা কারী যন্ত্র। কম্পিউটারকে আধুনিক যুগের হাতিয়ার বলা হয়। </p> </details>	কম্পিউটার কি? কম্পিউটার হলো একটি গণনা কারী যন্ত্র।কম্পিউটারকে আধুনিক যুগের হাতিয়ার বলা হয়।

উপরের ইনপুট বক্সে দেখতে পাচ্ছেন <details >ট্যাগ  এর ভিতরে একটি Sammary  ট্যাগ ব্যবহার করা হয়েছে। এবং একটি প্রশ্ন করা হয়েছে । এখন আপনি যদি এই কম্পিউটার সম্পর্কে একটি ডিটাইলস লিখতে চান তাহলে paragraph র্ট্যাগ এর ভিতরে লিখতে পারেন । এটি অসাধারণ একটি ফাংশন  তৈরি করবে। আপনি আউটপুট বক্সে ‘ কম্পিউটার কি ?’  এর বাম পাশে ত্রিভূজাকার  একটি চিহ্ন দেখতে পাবেন এটায় ক্লিক করলে  আপনি কম্পিউটার সম্পর্কে লেখা ডিটাইলসটি দেখতে পাবেন।  এটাই মূলত এই detsils ট্যাগ এর কাজ। 

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

What is Dailog tag?

এর কাজ হলো একটি পপআপ তৈরি করা । আপনি চাইলে এই ট্যাগ দিয়ে একটি ডায়লগ তৈরি করে রাখতে পারেন এবং আপনি যখন কোন পেজ বা ওয়েব সাইট  খুলবেন তখন ঐ কথোপকথন টি প্রদর্শিত হবে। এবং প্রবেশ করার জন্য এতে ক্লিক করে প্রবেশ করতে হবে। একটি উদাহারণ যদি দেখি-

<h1> হেলো</h1> <!--This is an open dialog Tag--> <dialog open> আপনি কি প্রবেশ করতে রাজি? </dialog>

হেলো আপনি কি প্রবেশ করতে রাজি?

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

<div> Division ট্যাগ এর ব্যবহার

What is Div tag?

 এটি একটি গুরুত্ব পূর্ণ ট্যাগ । যেকোন কোড লিখেন এটি লাগবেই । কোডে সবচেয়ে বেশি ব্যবহার করা হয় এমন ট্যাগের মধ্যে একটি <div> র্ট্যাগ। এর কাজ হলো আলাদা আলাদা গ্রাউন্ড তৈরি করা । অর্থাৎ এটি ব্যবহার করে আপনি নিজের মতো করে একাধিক প্লেস তৈরি করতে পারবেন। 

যেমন আমি দুটি লেখার জন্য দুটি প্লেস তৈরি করতে চাই - তাহলে নিচের উদাহারণ টি দেখি-

ইনপুট	আউটপুট
<div style="background-color: red; height: 300px; width: 200px;">  প্লেস ১ </div> <br>      <div style="background-color: yellow; height: 300px; width: 200px;">      প্লেস ২     </div>	প্লেস ১ প্লেস ২

উপরের  ইনপুট বক্সে কি দেখতে পাচ্ছেন ? <div> ট্যাগের ভিতরে একটি style এট্রিবিউট ব্যবহার করা হয়েছে যাতে একি রং করা যায় এবং আমরা স্পষ্ঠ ভাবে বুঝতে পারি দুটি আলাদা প্লেস। এখন আপনি এই দুটি প্লেসে আলাদা আলাদা কিছু লিখতে পারেন এবং যেমন খুশি ডিজাইন করতে পারেন।  এটি মূলত এই <div> ট্যাগ এর কাজ ।

<dl><dt><dd>  ট্যাগ এর ব্যবহার

What is dl tag?

- এটি হলো একটি Description list করার ট্যাগ। 

What is dট tag?

-   এটি Description list এর ভিতরে Description Title নির্দেশক ট্যাগ।

What is d tag?

-   এটি Description list এর ভিতরে Description data নির্দেশক ট্যাগ।

এই ট্যাগ হলো  Description list  করার একটি ট্যাগ গ্রুপ। এই তিনটি ট্যাগ কে একসাথে পড়ার অর্থ হলো এই তিনটি ট্যাগ একই যায়গায় একটি আরেকটির পরিপূরক হিসেবে ব্যবহার করা হয় । ঠিক যেমন <ul><li> এর ব্যবহার করা হয় এরকম ই। আমরা যদি এর উদাহারণ দেখি। 

ইনপুট	আউটপুট
<dl>   <dt>কম্পিউটার কি ? </dt>   <dd> -কম্পিউটার একটি গণনা কারী যন্ত্র ।</dd>   <dt>PC এর পূর্ণ রূপ কি? </dt>   <dd>-PC এর পূর্ণ রূপ হলো  Parsonal Computer </dd>   <dt>কম্পিউটার কত প্রকার? </dt>   <dd>-কম্পিউটার প্রধানত তিন প্রকার</dd> </dl>	কম্পিউটার কি ? -কম্পিউটার একটি গণনা কারী যন্ত্র । PC এর পূর্ণ রূপ কি? -PC এর পূর্ণ রূপ হলো Parsonal Computer কম্পিউটার কত প্রকার? -কম্পিউটার প্রধানত তিন প্রকার

উপরের ইনপুট বক্সের দিকে থাকালেই আমরা এই ট্যাগ গুলোর ব্যবহার জানতে পারব। dl দ্বারা সম্পূর্ণ ডেসক্রিপশন লিস্টকে বুঝিয়েছে।  dt দিয়ে  Description Title কে বূঝিয়েছে আর ddদিয়ে ডাটা কে বুঝিয়েছে।  এবার আপনারাই আন্দাজ করতে পারবেন কোনটি কি। এটাই এই তিনটি ট্যাগের কাজ। 

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

What is del tag?

যেকোন তথ্য  আপডেট অথবা তথ্য পরিবর্তন করা দেখানোর জন্য <del> ট্যাগ ব্যবহার করা হয়। একটি স্থান হতে  কোন শব্দ বা বাক্য বাতিল বুঝাতে  <del> ট্যাগটি ব্যবহৃত হয়। যেমনঃ ধরেন আপনি একটি পোশাক বিক্রি করবেন । যার পূর্ব মূল্য ছিল ২০০ টকা কিন্তু আজ আপনি এটিকে ডিস্কাউন্ট দিয়ে ১০০ টাকায় বিক্রয় করবেন । এ ক্ষেত্রে আপনি এই ট্যাগ ব্যবহার করতে পারেন। উদাহারণ -

<ul><li> এর ব্যবহার করা হয় এরকম ই। আমরা যদি এর উদাহারণ দেখি। 

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

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