HTML (পর্ব০৩) এর সকল Tag এর ব্যবহার, HTML all Tag list and Use. । প্রযুক্তি বই।

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

html এর সকল ট্যাগের ব্যবহার,


 <b></b> বোল্ড ট্যাগ এর ব্যবহারঃ

এই ট্যাগ দিয়ে কোনো লেখা কে বোল্ড করা হয়। যদি কোনো লেখাকে বোল্ড বা গাঢ় করে প্রদর্শন করাতে চাই তখন এই বোল্ড ট্যাগের মাঝে লেখাটি লিখতে হয়। 

যেমনঃ 

ইনপুটআউটপুট
 
    আমাদের পোগ্রামিং 

<b> 
আমাদের পোগ্রামিং
</b>

  আমাদের পোগ্রামিং

  আমাদের পোগ্রামিং  

উপরের আউটপুটে আমরা দুটি লেখা দেখতে পাচ্ছি। উপরেরটি হালকা এবং নিচেরটি গাঢ় বা বোল্ড হরফের।

এবার একটু ইনপুটের দিকে থাকাই। কি দেখতে পাচ্ছি?
আমরা একটায় <b> ট্যাগ ব্যবহার করেছি আর একটায় ব্যবহার করিনি। তাই একটি বোল্ড হয়েছে, আরেকটি হয়নি। এটাই মূলত বোল্ড ট্যাগের কাজ। 

<body> ট্যাগ এর ব্যবহারঃ
এটা মূলত কোনো ওয়েবসাইটের বডিকে নির্দেশ করে। এই বডির ভিতরেই মূলত যাবতীয় কোড গুলো করা হয়। একটি html শীটে কেবল একবার ই বডি ট্যাগ ব্যবহার করা যায়। html লিখতে গেলে এর প্রয়োজনীয়তা বাধ্যগত। বডির ভিতরেই সকল তথ্য উপস্থাপন করা হয়। এটার ব্যবহার - 

যেমনঃ 

ইনপুটআউটপুট
 
    <html> 
  
   
 </head>


  <body>
<p>আমাদের পোগ্রামিং </p>

  </body>


</html>

আমাদের পোগ্রামিং 

উপরের বক্সে বডি ট্যাগের ব্যবহার দেখতে পাচ্ছি?  এটি দেয়া বাধ্যগত, নাহলে কোড এর আউটপুট দেখতে পাব না।


<button> ট্যাগ এর ব্যবহারঃ
বাটন ট্যাগ হলো কোনো বাটন তৈরি করার ট্যাগ, যেমন আপনি এখানে কটি ডাউনলোড বাটন তৈরি করতে চান তখন এই ট্যাগ ব্যবহার করতে হবে।

যেমনঃ 

ইনপুটআউটপুট
 <button>Download </button> 

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

<br> ট্যাগ এর ব্যবহারঃ

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

যেমনঃ 

ইনপুটআউটপুট
 
 <p>  আমাদের  সবার প্রয়োজন কম্পিউটার সম্পর্কে জ্ঞান অর্জন করা

<br>
কারণঃ এটি আধুনিক যুগের হাতিয়ার। 

  </p>


আমাদের  সবার প্রয়োজন কম্পিউটার সম্পর্কে জ্ঞান অর্জন করা

কারণঃ এটি আধুনিক যুগের হাতিয়ার। 


উপরের ইনপুট  বক্সে দেখতে পাচ্ছি,  প্রথম এবং শেষ প্যারাগ্রাফের মাঝে অর্থাৎ "কারণ " শব্দটির আগে একটি <br> ট্যাগ ব্যবহার করেছি। যার ফলে "কারণ " শব্দটির আগে একটি ব্রেক বা গেফ পড়েছে। এটাই মূলত এই ট্যাগ এর কাজ।


<base> ট্যাগ এর ব্যবহারঃ

বেইজ ট্যাগ এমন একটি ট্যাগ যার দ্বারা কোনো টার্গেট লিংক বা কোনো সাবজেক্টকে লিংক করা হয়।  এর ভিতরে href ব্যবহার করে লিংক জুড়িয়ে দেয়া হয়। 
এই ট্যাগ শুধু মাত্র <head><\head> ট্যাগ এর ভিতরে ব্যবহার করা যায়। এবং শুধু একবার। নিচে এর ব্যবহার দেখানো হলো।

যেমনঃ 

ইনপুটআউটপুট
 
    <html> 

    <head> 
    <base href  =" লিংক"> আমাদের পোগ্রামিং 
   </base>
 </head>


  <body>

  </body>
</html>

আমাদের পোগ্রামিং 

উপরের ইনপুটে দেখতে পাচ্ছি <base> ট্যাগ টি <head> ট্যাগ এর ভিতরে  দেখতে পাচ্ছি।  এবং আউটপুটে এর রেজাল্ট দেখতে পাচ্ছি যে লেখাটি লিংক হয়ে গিয়েছে। এটাই হলো বেইজ ট্যাগ এর ব্যবহার।


<basefont> ট্যাগ এর ব্যবহারঃ

আগের ধাপে দেখেছেন <base> ট্যাগ এর ব্যবহার এখন শুধু Base এর সাথে font যুক্ত হয়েছে। তারমনে এই ট্যাগের কাজ অবশ্যই ফন্ট স্টাইলের জন্য হবে? হ্যা! শুধু font tag  ব্যবহার করে যেকোনো টেক্সট কে আলাদা আলাদা স্টাইল দেওয়া হয়। কিন্তু <basefontট্যাগ ব্যবহার করে পেজের সকল টেক্সটকে একই স্টাইল, সাইজ এবং কালার এ সেট করা যায়। কিন্তু html 5 এ এটি সাপোর্ট করে না! তাই এখানে ব্যবহার করা যায় না।


<bgsound> ট্যাগ এর ব্যবহারঃ

 এই ট্যাগ এর নাম দেখেই নিশ্চয়ই বুঝে গিয়েছি সবাই এটি হলো সাউন্ড ট্যাগ।  হ্যা! 
যদি এটিকে আরো ভেঙে দেখি- bg হলো background এর সংক্ষিপ্ত রূপ। আর sound হলো শব্দ।  এর মানে দাঁড়ায়, Background Sound অর্থাৎ যখন ওয়েবসাইটের কভার বা ব্যাকগ্রাউন্ডে কোনো সাউন্ড দিডে চাইবেন তখন এই ট্যাগ এর ব্যবহার করা হয়। আমরা যদি একরা উদাহরণ দেখি -

যেমনঃ 

ইনপুটআউটপুট
 
    <html> 
    <head> 
    </head>


  <body>

<bgsound  src=' PinoSong.mp3 ' >

  </body>


</html>

 

উপরের আউটপুটে বডি ট্যাগ এর ভিতরে <bgsound> ট্যাগটি ব্যবহার করা হয়েছে। এটি ইনপুট করার পর আপনি ওয়েবসাইটে প্রবেশ করার পর ই আপনার দেয়া সাউন্ড টি শুনতে পারবেন। এটি ই মূলত এই ট্যাগ এর কাজ।

<bdi> ট্যাগ এর ব্যবহারঃ

এটি Bidirectional ট্যাগ, এর কাজ হলো কোনো অ্যালগারিদমের কোনো লেখাকে আলাদা করে দেখাতে।  যখন আমাদের কোনো এড্রেস তৈরি করতে হয় বা কোনো জিনিসকে লিখতে গিয়ে মূল বিষয়কে আলাদা করে দেখাতে হয় তখন এই ট্যাগ ব্যবহার করা হয়। যেমন আমরা আমাদের পরিচয় লিখতে গিয়ে এরকম লিখি-
নাম       - উদয়েন্দু 
ঠিকানা   - হবিগঞ্জ 
মোবাইল - ০১৫........

উপরে যে  একদম কালো বোল্ড করা অংশ দেখছেন যেমন(নাম, ঠিকানা, মোবাইল) এগুলো ঐ ট্যাগ দিয়ে এক লাইনেই আলাদা করে দেখানো হয়েছে। আমরা যদি এর html ব্যবহারটা দেখি তাহলে এরকম হবে-

যেমনঃ 

ইনপুটআউটপুট
 
    <ul>
      <li>
<bdi font-weight="600'' >Name</bdi>
:Udayendu
</li>
  
 <li>
<bdi font-weight="600''> Class</bdi>
: X</li>
  <li><bdi font-weight="600''>Roll</bdi>:0001</li>
  
</ul
Name:Udayendu
Class  :X
Roll    :0001

উপরের  ইনপুটে দেখতে পাচ্ছেন যে, লিস্ট করার জন্য <ul> ট্যাগ ব্যবহার করা হয়েছে, এবং এর ভিতরে  bdi ট্যাগ আর bdi ট্যাগ এর ভেতর এট্রিবিউট হিসেবে font-weight ব্যবহার করা হয়েছে। যার ফলে সব কয়েকটি <bdi> ট্যাগের ভিতরের লেখা গুলো যেমন, Name, Class, Roll বোল্ড হয়ে গিয়েছে।  মূলত এই এট্রিবিউট বোল্ড করার জন্যই ব্যবহার করা হয়েছে। অর্থাৎ <bdi> ট্যাগের কাজ হলো কোনো অ্যালগারিদম কে আলাদা করে দেখানো। 

<bdo> ট্যাগ এর ব্যবহারঃ
এই ট্যাগটি কোনো লেখাকে ডান থেকে বামে অথবা বাম থেকে ডানে প্রদর্শিত হওয়ার নির্দেশ দেয়।  উদাহরণ না দেখালে বুঝা যায় না। ধরেন একটি স্বাভাবিক লেখা যেমন, I have a Computer. এই লেখাটিকে  <bdo > ট্যাগ দিয়ে উল্টো ভাবে প্রদর্শন করানো হয়। এর একটি dir নামের এট্রিবিউট থাকে, আর এর ভিতর দুটি মান থাকতে পারে, একটি rtl ( right to left), আরেকটি ltr  (left to right). এরমানে হলো আপনি ডান হতে বা বাম হতে লেখা দেখতে পারেন। 
উদাহরণ সরূপ দেখা যাক-

যেমনঃ 

ইনপুটআউটপুট
 <p> I have a Computer    </p>
  <p>  
<bdo dir="rtl">I have a Computer  </bdo>
</p>
  
I have  a Computer  


retupmoC a evah I 

উপরের  ইনপুট বক্সে আমরা একই বাক্য দুবার বব্যবহার করেছি। একটিতে প্যরাগ্রাফ ট্যাগ <p> এর ভিতর শুধু I have a Computer  বাক্য টি দিয়েছি, আরেকটির ভিতরে Dir ="rtl" মানে ডান হতে বামে এট্রিবিউট মান ব্যবহার করেছি। এবং আউটপুট বক্সে দেখতে পাচ্ছি  নিচের বাক্যটির অক্ষর সমূহ উল্টো ভাবে ডান হতে বামে দেখাচ্ছে।

যদিও এই ট্যাগের ব্যবহার খুব কম। এই ট্যাগ মূলত এভাবেই কাজ করে।


<big> ট্যাগ এর ব্যবহারঃ

big মানে বড়, অর্থাৎ ফন্ট বড় করে লেখার জন্য এই ট্যাগ ব্যবহার করা হয়। HTML 5 এ এই ট্যাগ সাপোর্ট করে না।  তাই এই ট্যাগ সম্পর্কে এখন আলোচনা করব না। কিন্তু এই ট্যাগের পরিবর্তে <h1> <h2> <h3><h4> <h5> <h6> এই ছয়টি ট্যাগ ব্যবহার করা হয়, যেগুলো পরে আলোচনা করব।


<big> ট্যাগ এর ব্যবহারঃ
এই  ট্যাগ দিয়ে যেকোনো কনটেন্ট কে একটি ব্লক ব্যকগ্রাউন্ডের আকার দেয়া যায়। অর্থাৎ একটি বডির উপর আরো একটি বডি তৈরি করা যায় আর একে cite এট্রিবিউট দিয়ে লিংক রিডিরেক্টও করা যায় অথবা অন্য কোনো সোর্স হতেও  তথ্য এনে এই ব্লকে সরাসরি দেখাতে পারবেন ইম্পোর্ট করা ছাড়াই। আর এই বল্কের সাইজ আপনি  height, width, এট্রিবিউট ব্যবহার করে করতে পারবেন।
উদাহরণ  -

যেমনঃ 

ইনপুটআউটপুট
 <p> HTML full meaning is Hyper Text Markup Language. </p>
    <blockquote cite=" https://html.com">
      I'm a programer see my site 
    </blockquote>
    
<p> One of the best language  </p>
HTML full meaning is Hyper Text Markup Language.

I'm a programer see my site 


One of the best language

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

Post a Comment

0 Comments