HTML (পর্ব ০২) এইচ. টি. এম. এল এর সকল ট্যাগের ব্যবহার , ALL TAG Name and Use Tips. । প্রযুক্তি বই।

প্রিয় পাঠক,  আজকের এই পৃষ্ঠায় আমরা html এর  সকল ট্যাগ সম্পর্কে জানব। এবং এগুলোর ব্যবহার সম্পর্কে আংশিক ধারণা নেব। যাতে প্রথম বার এই ট্যাগ গুলো ব্যবহার করার ক্ষেত্রে সুবিধা হয়। 
ত আমরা প্রাথমিক ট্যাগ গুলো হতে শুরু করি?
এই পৃষ্ঠায় যে ট্যাগ সমূহ নিয়ে আলোচনা থাকছে -
  • <a> লিংক ট্যাগ </a> এর ব্যবহার, How to use  <a> tag in HTML
  • <address> ঠিকানা ট্যাগ এর ব্যবহার, How to use <address > tag in HTML
  • <area> এরিয়া ট্যাগ এর ব্যবহারঃ, How to use < area> tag in HTML
  • < audio> অডিও ট্যাগ এর ব্যবহার, How to use <audio> tag inয়া html
  • <abbr> ট্যাগ এর ব্যবহার, How to use <abbr> tag in Html 
  • <article></article > আর্টিকেল  ট্যাগ এর ব্যবহার, How to use <article > tag in HTML
  • <applet> ট্যাগ এর ব্যবহার, how to use <applet> tag in html
  • <acronym > ট্যাগ এর ব্যবহার, How to use <acronym > tag.

html এর সকল ট্যাগ এর ব্যবহার। html tag


তার আগে জেনে নেই ট্যাগ কোনটি আর এলিমেন্ট কোনটি।
উদাহরণঃ   <b> আমাদের দেশ </b> 
উপরের যে লাল কোড টি দেখছেন এর মাঝে <b></b> হলো বোল্ড ট্যাগ। যার প্রথমটি শুরু ট্যাগ আর পরেরটি শেষ ট্যাগ। এই ট্যাগ দিয়ে কোনে অক্ষর কে বোল্ড বা গাঢ় করা হয়। আর "আমাদের দেশ " অংশ টুকু হলো এলিমেন্ট। 
আর অনেক সময় ট্যাগ এর ভিতর আরো একরি লেখা দেখতে পাবেন। যেমনঃ
<a href=" ">, < div class=" ">,  <h1 id=' '>, <img src=" "> ইত্যাদি। এইযে এখানে লাল রং এর লেখা গুলো দেখছেন এগুলো কে এট্রিবিউট বলে যা কোনো আদেশ করতে ট্যাগ এর ভিতর ব্যবহার করা হয়।

এবার ট্যাগ গুলো পড়া শুরু করি। 

 পড়ার সুবিধার জন্য আমরা ট্যাগ গুলোকে বর্ণমালা অনুযায়ী সাজিয়ে নিলামঃ

<a> লিংক ট্যাগ </a> এর ব্যবহার

এটিকে লিংক ট্যাগ বলে। যখন আমরা একটি সাবজেক্ট বা এলিমেন্ট কে লিংক আকারে প্রকাশ করতে চাই বা কোনো সাবজেক্ট কে লিংকের আকৃতি দিতে চাই বা কোনো সাবজেক্ট কে লিংকে রিডিরেক্ট করতে চাই তখন এই ট্যাগ এর ব্যবহার করি। আমরা যদি একটি উদাহরণ দেখি।

ধরুন আমরা একটি লেখা (আমাদের পোগ্রাম)  এটিকে লিংকে রিডিরেক্ট করতে চাই। বা চাই কোনো লেখার উপর ক্লিক দিলে একটি লিংকে নিয়ে যাবে।  ত এর জন্য  প্রথমে লিংক ট্যাগ শুরু করতে হবে এবং এর সাথে href অর্ডার ব্যবহার করতে হবে। 

যেমনঃ 

ইনপুট আউটপুট

<htm>

<a href=" কাঙ্ক্ষিত লিংক">
আমাদের পোগ্রাম 
</a>

</html>

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

উপরের বক্সে নিশ্চই দেখতে পাচ্ছেন html ট্যাগ দি য়ে শুরু করার পর <a> বা লিংক ট্যাগ শুরু করেছি এবং এর ভিতরে লিংকের আদেশ করার জন্য href ব্যবহার করেছি। আর"কাঙ্ক্ষিত লিংকের " জায়গায় আপনি আপনার লিংক দিবেন। আর মূলত "আমাদের পোগ্রাম" লেখাটি লিংকে প্রকাশ হবে। যার উপর ক্লিক দিলেই আপনা কে সরাসরি ঐ লিংকে নিয়ে যাবে। এটাই মূলত লিংক ট্যাগের কাজ।

<address> ঠিকানা ট্যাগ এর ব্যবহারঃ

এই ট্যাগ ঠিকানা তৈরি করার জন্য ব্যবহার করা হয়। যদিও এর ব্যবহার মেইন পেজে কেউ করে না। এটি ব্যবহার করলে লেখাকে বাঁকা করে দেয় তাই এর ব্যবহার এতটা জনপ্রিয় না। তবে কন্টাক্ট পেজ বা ফুটার পেজে এটি ব্যবহার করা যেতে পারে। নিচে এই ট্যাগের ইনপুট  এবং আউটপুট দেখানো হলো-

ইনপুট আউটপুট

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


<area> এরিয়া ট্যাগ এর ব্যবহারঃ

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

যেমনঃ 

ইনপুটআউটপুট

<area
href="কাঙ্ক্ষিত লিংক"  shape="circle
coords="142 142 125" >

🟡

উপরের ইনপুটে যে কোড দেখছেন এরিয়া ট্যাগের ভিতরে লিংক ব্যবহার করার জন্য href অর্ডার করা হয়েছে। আর ঐ এরিয়া এর আকৃতি দেবার জন্য সার্কেল বা বৃত্ত Sape  দেয়া হয়েছে। মূলত এই কোড করার পরই আউটপুটে আমরা একটি বৃত্তাকার এরিয়া দেখতে পাচ্ছি। 

< audio> অডিও ট্যাগ এর ব্যবহারঃ

অডিও ট্যাগ একটি সাউন্ড সিস্টেম ট্যাগ। এই ট্যাগ ব্যবহার করে কোনো অডিও কে কোনো পোগ্রামে  ইম্পোর্ট করা হয়। 

যেমনঃ 

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


  <body>

<audio  src=' PinoSong.mp3 ' >

  </body>


</html>

 💿

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


<abbr></abbr> 

Abbreviation  ট্যাগ এর ব্যবহারঃ

এর বাংলা অর্থ হলো সংক্ষেপণ অর্থাৎ কোনো তথ্যকে সংক্ষিপ্ত করার জন্য <abbr> ট্যাগ ব্যবহার করা হয়। আরো সহজ করে বললে এভাবে বলা যায়-
ধরুন আপনি আপনার ওয়েবসাইটে Bachelor of Business Administration সম্পূর্ণ পূর্ণ রূপটিকে সংক্ষিপ্ত BBA রূপে দেখাতে চান এবং আপনি চান যে এর উপর মাউস কার্সর নিয়ে গেলে পূর্ণ রূপ টি দেখাবে। এর জন্যই <abbr> ট্যাগটি ব্যবহার করা হয়। উদাহরণ সরূপ দেখা যায়-

যেমনঃ 

ইনপুটআউটপুট
 
    

<abbr title=" Bachelor of Business Administration  "> 
BBA
</abbr>

  BBA

উপরের  ইনপুট বক্সে দেখতে পাচ্ছেন <abbr>. ট্যাগ এর ভিতরে  BBA. এর পূর্ণ রূপটি রয়েছে। এবং এটিলে title এট্রিবিউট দিয়ে অর্ডার করা হয়েছে। আর আউট পুটে এর সংক্ষিপ্ত রূপটি দেখতে পাচ্ছি। এটাই এই ট্যাগ এর কাজ।

<article></article > আর্টিকেল  ট্যাগ এর ব্যবহারঃ

এই ট্যাগের কাজ একদম সিম্পল। এর কাজ হলো কোনো লেখাকে Article এর রূপ দেয়া। অর্থাৎ এটি ওয়েবসাইটে প্যারাগ্রাফের মতো দেখাবে। <p>প্যারাগ্রাফ ট্যাগ এর মতোই এই আর্টিকেল ট্যাগও। এটিকে একটি উদাহরণ দিয়ে দেখানো যাক-

 যেমনঃ 

ইনপুটআউটপুট
 
     

<article > 
আমাদের পোগ্রামের নাম এইচ.টি.এম.এল পোগ্রাম। 
</article >

  আমাদের পোগ্রামের নাম এইচ.টি.এম.এল পোগ্রাম।

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

<aside></aside> এসাইড ট্যাগ এর ব্যবহারঃ

 কোনো অংশকে মূল কন্টেন্ট এর থেকে একটু আলাদা করে দেখানোর জন্য এই ট্যাগ ব্যবহার করা হয়। মূলত এর ভিতর এমন কোনো ডকুমেন্ট ব্যবহার করা হয় যা মূল টপিক থেকে আলাদা। এই ট্যাগ সাইডবারে, বা মাঝে মাঝে মূল কনটেন্টের ভিতরেও লেখা হয়। এটি একটি হেডলাইন নির্দেশক ব্লক ট্যাগ। এর ব্যবহার-

যেমনঃ 

ইনপুটআউটপুট
আমাদের html পোগ্রামিং বেশ জনপ্রিয়  তাই এর সম্পর্কে জানা অতি আবশ্যক। 

<aside> 
<h3> Pooular Post</h3>
<ul>
<li>এইচ.টি.এম.এল</li>
<li>সি.এস.এস</li>
</ul>

</aside>
আমাদের html পোগ্রামিং বেশ জনপ্রিয়  তাই এর সম্পর্কে জানা অতি আবশ্যক। 

Popular Post
   ★
এইচ.টি.এম.এল
    ★সি.এস.এস

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


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

 এই ট্যাগ এর কাজ হলো অন্য কোনো সোর্স হতে কেনো তথ্যকে পেস্ট করে দেখানো। এবং দর্শক এটাকে ফরওয়ার্ড আকার দেখতে পারবে। এরকম কোনো তথ্যের প্রদর্শন করানোর জন্য আপনাকে কোডিং করতে হবে না। সরা সরি লিংকের মাধ্যমে দেখাতে পারবেন।

কিন্তু html 5 এ এটি সাপোর্ট করে না! তাই এখানে ব্যবহার করা যায় না। তবে এই ট্যাগ এর পরিবর্তে <embed>  ট্যাগ ব্যবহার করা যায়।  যা পরে আলোচনা করব।


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

html 5 এ এটি সাপোর্ট করে না! তাই এখানে ব্যবহার করা যায় না। তাই এটা নিয়ে পরে কোনো পোস্টে বিস্তারিত আলোচনা করব। 



প্রিয় পাঠক,  এই পৃষ্ঠায় শুধু সবগুলোর শুরুতে a বর্ণ আছে এমন ট্যাগ গুলো নিয়ে আলোচনা করলাম।

পরের পৃষ্ঠায় পরবর্তী ট্যাগ গুলো নিয়ে আলোচনা করা হলো- ধারাবাহিক  ভাবে দেখে দিবেন।

ধন্যবাদ! 

_________________________

Post a Comment

0 Comments