এইচটিএমএল ট্যাগ টিউটোরিয়াল[ পর্ব -৩]

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

আমাদের আজকের টপিক এইচটিএমএল ট্যাগ নিয়ে ।
আমরা যেকোন একটা এইচটিএমএল ডকুমেন্ট দেখি সেখানে অবশ্যই ট্যাগ থাকে। যেমন নিচের ডকুমেন্ট টি দেখুন

<!DOCTYPE html>
 <html>
<head>
<title>HTML Tag tutorial in BD Web</title>

</head>
<body>
 
 <h1>This is Heading</h1>
 
 <p>This is paragraph.</p>
 
 </body>
 </html>

এখানে <html>, <head>, </head>, <body> ইত্যাদি এক একটি ট্যাগ। সোজা কথায় less than (<) চিহ্ন এবং greater than (>) চিহ্ন দিয়ে মোড়ানো একটা শব্দকে (যেটা এইচটিএমএল অনুমোদিত) ট্যাগ বলে। যেমন html শব্দটি এই দুই চিহ্ন দিয়ে মুড়িয়ে যখন HTML ডকুমেন্টে লিখি তখন এটার নাম html ট্যাগ। এরুপ শত শত ট্যাগ আছে এইচটিএমএল এ।

যেমন প্যারাগ্রাফ ট্যাগ <p></p>, হেডিং <h1></h1> ট্যাগ ইত্যাদি। প্রায় সব ট্যাগেরই একটা সমাপ্তি ট্যাগ থাকে যেমন উপরে <html> ট্যাগটির সমাপ্তি ট্যাগ (closing tag বলা হয়) হচ্ছে </html> আবার <h1> এর ক্লজিং ট্যাগ হল </h1> এভাবে বাকি সবগুলি।

টেকনিকাল শব্দ যেটা ব্যবহৃত হয় সেটা হচ্ছে শুরুর ট্যাগটিকে বলে opening tag বা start tag আর শেষের ট্যাগটিকে বলে closing tag বা end tag. দুটোই একই শুধু ক্লজিং ট্যাগে একটা ব্যাকস্লাস (/) চিহ্ন বেশি থাকে। এই ওপেনিং এবং ক্লজিং ট্যাগের ভিতর কনটেন্ট দিতে হয়। যেমন উপরে দিয়েছি।

** এই ট্যাগই হচ্ছে এইচটিএমএল এর মুল জিনিস। শত শত ট্যাগ আছে, যত বেশি মনে রাখতে পারবেন ততই দ্রুত কাজ করতে পারবেন। তবে অনেকদিন ধরে কাজ করলে বেশিরভাগ প্রয়োজনীয় ট্যাগগুলি মুখস্থই থাকে।

** কিছু কিছু ট্যাগ আছে এগুলির ক্লজিং ট্যাগ নেই যেমন ইনপুট ট্যাগ, ইমেজ ট্যাগ ইত্যাদি। এই ট্যাগগুলি সামান্য একটু ভিন্ন।

দেখুন ইমেজ ট্যাগ শুরু হয়েছে <img এভাবে আর শেষ হয়েছে /> এই চিহ্ন দিয়ে। ইনপুট ট্যাগটিও তদ্রুপ। আর মাঝে যে জিনিসগুলি দেখছেন (src, type ইত্যাদি) এগুলি সংশ্লিষ্ট ট্যাগটির এট্রিবিউট।

* প্রতিটি ট্যাগেই নানান ধরনের এট্রিবিউট ব্যবহার করা যায়।

* প্রত্যেকটি ট্যাগরই কাজ নির্দিষ্ট করা আছে যেমন আপনার এইচটিএমএল ডকুমেন্টে আপনি যদি প্যারাগ্রাফ দিতে চান তখন <p></p> ট্যাগের ভিতর তা দিতে হবে, হেডিং দিলে <h1></h1> ট্যাগের ভিতর দিতে হবে (বড় ফন্টের হেডিং হলে <h1>, সাইজ অনুযায়ী <h6> পর্যন্ত আছে)।

টেক্সট ফিল্ড দিতে হলে input ট্যাগ, ছবি দিতে চাইলে <img ট্যাগ, ব্রাউজারের টাইটেল বারে দেখানোর জন্য আছে <title></title> ট্যাগ ইত্যাদি।

* উপরে যে ডকুমেন্টটি দিয়েছি সেখানে <html></html> কে বলে প্যারেন্ট ট্যাগ পুরো ডকুমেন্ট টির জন্য কেননা পুরো ডকুমেন্টে যত ট্যাগ আছে সবগুলি এর ভিতরে রাখা হয়েছে। ভিতরের ব্যবহৃত ট্যাগগুলি হল এর চাইল্ড ট্যাগ। একইভাবে head ট্যাগের চাইল্ড ট্যাগ হল title ট্যাগ কিন্তু title ট্যাগের কোন চাইল্ড ট্যাগ নেই। আবার দেখুন body হল প্যারেন্ট ট্যাগ এবং এর চাইল্ড ট্যাগ এখানে p এবং h1

আজকের মত এখানেই শেষ করছি পরবর্তী টিউটোরিয়াল দেখার আমন্ত্রণ জানিয়ে শেষ করছি আজকের পর্ব ।