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

প্রিয় পাঠক, 
গত পাঁচটি পর্বে আমরা a-d দিয়ে শুরু হওয়া ট্যাগ গুলো নিয়ে আলোচনা করেছি। আজকে e হতে শুরু করব। যারা আগের ট্যাগ গুলো দেখেন নি তারা দেখে আসবেন। সম্পূর্ণ আলাদা ভাবে সহজ করে আলোচনা করা হয়েছে। ত এই পর্বের আলোচনা করা হবে এমন কয়েকটি ট্যাগ হলো-
  • <em> ট্যাগ এর ব্যবহার,
  • <figcaption>ট্যাগ এর ব্যবহার,
  • <figure>ট্যাগ এর ব্যবহার,
  • <form>ট্যাগ এর ব্যবহার,
  • <fieldset> ট্যাগ এর ব্যবহার।
  • <footer > ট্যাগ এর ব্যাবহার,
  • <h1> হতে <h6> ট্যাগের ব্যবহার,
  • <html>ট্যাগ এর ব্যবহার।
  • <head> ট্যাগ এর ব্যবহার।
  • < hr>   ট্যাগ এর ব্যবহার।
এইচটিএমএল এর সকল ট্যাগ এর ব্যবহার, html all tags,


<em> ট্যাগ এর ব্যবহারঃ
এই ট্যাগ দিয়ে কোনো একটি প্যারাগ্রাপের ভিতরে বা কোনো সাবজেক্ট কে তীব্র  ভাবে জোর দেয় এবং এটিকে অন্য যেকোনো সাবজেক্ট থেকে আলাদা করে প্রদর্শন করায়। উদাহারণ যদি দেখি-

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

My Country Name is Bangladesh


উপরের ইনপুট ট্যাগে দেখতে পাচ্ছেন যে একটি <p> প্যারাগ্রাফ ট্যাগ এর ভিতরে My country name প্রবেশ করানো হয়েছে আর <em> ট্যাগ এর ভিতরে  Bangladesh লেখা হয়েছে। এই <em> ট্যাগ দেয়ার কারণে এই লেখাটিকে সম্পূর্ণ আলাদা করে দেখিয়েছে। অর্থাৎ তীব্র ভাবে চাপ প্রয়োগ করেছে বা গুরুত্ব দিয়েছে। এটাই মূলত এই ট্যাগ এর কাজ।
  •  <figure> ও <figcaption>ট্যাগ এর ব্যবহার।
 বুঝার সুবিধার  জন্য এই ট্যাগ দুটি কে একসাথে তুলে ধরলাম। কারণ  এখানে একটি আরেকটির পরিপূরক। এই ট্যাগ দুটি দিয়ে কোনো ছবি/ লগো/ চিত্র/ ফিগার প্রবেশ করিয়ে ক্যাপশন লেখা হয়। যেমন আপনি একটি ছবি ইম্পোর্ট করলেন। এখন চাইলে এই ট্যাগ দিয়ে এর ক্যাপশন লিখতে পারবেন। যেমনঃ

ইনপুটআউটপুট
<figure> 
<img src="Nature.jpg">
<figcaption>
This Is Nature Photo
 </figcaption>
 </figure> 

🏞️

This is Nature Photo


উপরের ইনপুট বক্সে একটি ফটোর জন্য figure ট্যাগ এর ভিতরে   img ট্যাগ ব্যবহার করা হয়েছে। এবং এর জন্য সোর্স ট্যাগ ও বয়বহার করা হয়েছে। আর এই ফিগারের ক্যাপশন লেখার জন্য <figcaption > ট্যাগ ব্যবহার করা হয়েছে। যা আউটপুটে প্রদর্শিত হচ্ছে। এটিই এই ট্যাগ গুলোর কাজ।

  • <form>ট্যাগ এর ব্যবহার-
এই ট্যাগ এর কাজ হলো ফরম তৈরি করা। যেমন আপনি যদি কোনো নাম, রোল, বা ইমেইল এর জন্য কেনো ফরম তৈরি করতে চান তখন এই ট্যাগ এর ব্যবহার করা হয়। এর ভিতরে আবার আরো কিছু ট্যাগ ব্যবহার করা হয় বিভিন্ন এট্রিবিউট দেয়ার জন্য। 
যদি একটা উদাহরণ দেখি-

ইনপুটআউটপুট
<form>
  <label for="fname">নাম:</label><br>
  <input type="text" name="fname"><br>
  <label for="lname">রোল:</label><br>
  <input type="text" id="lname" name="lname">
</form>




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

  • <fieldset> ট্যাগ এর ব্যবহার।
এই ট্যাগ এর কাজ হলো ফরমকে বর্ডার দিয়ে আবৃত করা। এর সাথে আরো কয়েকটি ট্যাগ ব্যবহার করা হয়। যেমনঃ

উপরে দেখতে পাচ্ছেন এই ট্যাগ দিয়ে ফরম টিকে আবৃত করা হয়েছে।

<footer > ট্যাগ এর ব্যাবহার,
এই ট্যাগ ওয়েবসাইটের একদম নিচে ব্যবহার করা হয়। অর্থাৎ এই ট্যাগ এর ভেতর যা লিখবেন তা সব একটি ইনফরমেশন হিসেবে তৈরি হবে। আপনি যেকোন ওয়েবসাইটের নিচের দিকে থাকালে দেখবেন যে কিছু তথ্য দেয়া থাকে- যেমনঃ Contact, privacy,  copyright ইত্যাদি এসব এই footer ট্যাগ এ লেখা হয়। 
যেমনঃ
ইনপুটআউটপুট
<footer>
<ul>
<li style="float:left;" >
Pravacy </li>
<li 
style="float:left; margin-left:25px;">Contact </li>


</ul>

</footer>
  • Privacy
  • Contact

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

<h1>,<h2>,<h3>,<h4>,<h5>,<h6>  ট্যাগ এর ব্যবহার-

এই ট্যাগ গুলো কোনো টেক্সট এর সাইজ নির্দেশক ট্যাগ। এর মধ্যে <h1> ট্যাগ এর ভিতরে লেখা ফন্ট গুলো সবচেয়ে বড় হয়। আর বাকীগুলা যথাক্রমে ছোট ছোট হয়। 
যেমনঃ
ইনপুটআউটপুট
<h1>This is HTML</h1>
<h2>This is HTML</h2>
<h3>This is HTML</h3>
<h4>This is HTML</h4>
<h5>This is HTML</h5>
<h6>This is HTML</h6>

This is HTML

This is HTML

This is HTML

This is HTML

This is HTML
This is HTML

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

<html> ও <head> ট্যাগ
এদুটি অন্যতম ট্যাগ। এই দুটি ট্যাগ ব্যতিত কোনো ওয়েবসাইট হয় না। কারণ এগুলো দিয়ে ওয়েবসাইটের মূল অংশের কাজ করা হয়। এমনকি এতে অনেক প্রোগ্রামিং ফাইলের লিংক করা যায়। <html> ভাষাকে নির্দেশ করতে <html>   ট্যাগ ব্যবহার করা হয়।  প্রতিটি ওয়েবসাইটেই শুরুতে  <html> ট্যাগ এবং এর পর <head> ট্যাগ ব্যবহার করা হয়। এগুলোর ভিতরেই মূলত এই কোড গুলো করা হয়।
exmple:
<html>
     <head>   </head> 
      <body>   </body>
</html>

এইচটিএমএল কোড  লেখার মূল গঠন টি এরকম ই হয়।

<hr > ট্যাগ এর ব্যাবহার
এটি ব্যবহার করা হয় কোনো পেজের ভিতরে সমান্তরালে লাইন টানার জন্য। লেখার সময় কখনো যদি সমান্তরালে দাগ টানার প্রয়োজন পরে তখন এই ট্যাগ ব্যবহার করা হয়। 
যেমনঃ

ইনপুটআউট পুট
<p>
 আধুনিক  যুগের জন্য কম্পিউটার একটি গুরুত্বপূর্ণ যন্ত্র, এটি ছাড়া আধুনিক যুগে কল্পনা করা অসম্ভব। 
 </p>

<hr>

<p>
 আধুনিক  যুগের জন্য কম্পিউটার একটি গুরুত্বপূর্ণ যন্ত্র, এটি ছাড়া আধুনিক যুগে কল্পনা করা অসম্ভব। 
 </p>



আধুনিক যুগের জন্য কম্পিউটার একটি গুরুত্বপূর্ণ যন্ত্র, এটি ছাড়া আধুনিক যুগে কল্পনা করা অসম্ভব।


আধুনিক যুগের জন্য কম্পিউটার একটি গুরুত্বপূর্ণ যন্ত্র, এটি ছাড়া আধুনিক যুগে কল্পনা করা অসম্ভব।


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

Post a Comment

0 Comments