HTML টিউটোরিয়াল: ১১তম পর্ব (HTML5 Tags)

This entry is part 11 of 15 in the series ওয়েব ডিজাইন

এইচটিএমএল ৫ আগের ভার্সন এইচটিএমএল ৪.০১ থেকে আধুনিক এবং ইউজার ইন্টার‌্যাক্টিভিটি নিয়ে ওয়েব জগতে পদার্পন করেছে। বলা চলে এইচটিএমএল ৫ আসার পর ওয়েব মাষ্টারদের কাজের অনেক পরিবর্তন সাধিত হয়েছে। এইচটিএমএল ৪.০১ এর মত এইচটিএমএল ৫ ভার্সনেও ভিজুয়াল লুক বলতে শুধু মাত্র কাঠামটাই নয়। এইচটিএমএল ৫ দিয়ে নান্দনিক রূপ নিতে হলে আগের মতো সিএসএস এবং ইন্টার‌্যাক্টিভিটি পেতে চাইলে জাভাস্ক্রিপ্ট এর ব্যবহার করতেই হবে।

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

<header>, <hgroup>, <nav>, <section>, <article>, <aside>, <footer>, <details>, <summary>, <mark>, <meter>, <progress>, <time>, <audio>, <video>, <source>.

চলুন এইচটিএমএল ৫ ভার্সনের ট্যাগগুলো নিয়ে বিস্তারিত জানি…

প্রথমের জেনে নেই এইচটিএমএল ৫ এর নতুন যে যে ট্যাগ গুলোর প্রতাবর্তন হয়েছে। এখানে জাভাস্ক্রিপ্ট এর ব্যবহার জানা ছাড়া শুধু মাত্র যে ট্যাগ ইলিমেন্ট এর কাজ করা যায় সেগুলো নিয়ে জানবো…

হেডার (<header>) ট্যাগঃ আমরা এতক্ষনে জেনে গেছি এইচটিএমএল এ ২ ধরণের হেড ট্যাগ আছে, ১. <head> ট্যাগ এবং ২. <h1 >থেকে <h6> পর্যন্ত। আগেও এগুলো নিয়ে অনেক বিস্তারিত আলোচনা করেছি। এখন আমরা যে ট্যাগটি নিয়ে আলোচনা করব সেটা হল <header> ট্যাগ। ভিজুয়ালি এই <header> ট্যাগ ওয়েবসাইট এর <body> সেকশনে মধ্যে কাজ করবে। ধরুন আপনি আপনার ওয়েবসাইট এর হেডিং (টাইটেল, সাব টাইটেল নাম, লোগো ইত্যাদি) লিখবেন। এইচটিএমএল ৪.০১ ভার্সনে আপনি <div> সেকশনের মধ্যে রেখে এই কাজটি করে ফেলতে পারতেন। তবে <div> সেকশন ইউজ করে এই কাজটি করলে আপনাকে এটিই যে ওয়েবসাইট এর হেডিং সেকশন সেটা বুঝার জন্য আলাদা ভাবে <div> কে ID বা Class selector দিয়ে বুঝায় দিতে হতো। কারণ, আপনি যখন একটি ওয়েবসাইট তৈরী করবেন সেখানে আপনি একাধিক <div> ট্যাগ ইউজ করবেন। এইচটিএমএল ৫ ভার্সনে <header> ট্যাগ ইনক্লুড হবার ফলে ওয়েব মাষ্টারদের জন্য কাজ করতে অনেক সুবিধা হয়েছে। কারণ, আপনি যখনি আপনার সাইট এর হেডিং সেকশন করবেন তখন সেখানের লিখা (টাইটেল, সাব টাইটেল নাম, লোগো ইত্যাদি) এই <header> ট্যাগের মধ্যেই লিখবেন।

এইচগ্রুপ (<hgroup>) ট্যাগঃ এইচগ্রুপ ট্যাগ হেডিং ট্যাগের সাথে রিলেটেড। যখনি আপনি একই সাথে পাশপাশি একাধিক হেডিং (<h1> থেকে <h6>) ট্যাগ ইউজ করবেন তখনি সেই ট্যাগ গুলোকে <hgroup> ট্যাগ দিয়ে গ্রুপ করে দিবেন। যদিও ভিজুয়ালি অনেকেই এর পরিবর্তন বুঝতে পারবে না। কিন্তু এইচটিএমএল ৫ এর জন্য এটি ওয়ার্ল্ড ওয়াইড ওয়েব কন্সর্টিয়াম এর রুলস। কডিং স্টান্ডার্ড রক্ষার্থে এভাবেই কোড লিখা উচিৎ।

নিচের Example টি খেয়াল করুনঃ

<html>
<body>
<header>
<hgroup>
<h2>The Demo Website</h2>
<h3>This is sub title of this website</h3>
</hgroup>
</header>
</body>
</html>

এবার, উপরের কোড টুকুর আউটপুট ব্রাউজার এ প্রদর্শনের জন্য উইন্ডোজের Notepad অথবা Notepad++ সফটওয়্যারটি ওপেন করে কোডটুকু কপি-পেস্ট করুন। ফাইলের নাম দিন htm5.html বা আপনার পছন্দ মতো এবং Save as type নির্বাচন করুন .html। এবার Save করুন। বুঝতে কোথাও সমস্যা হলে আমার ফেসবুক গ্রুপে, পেজে অথবা ব্লগের জিজ্ঞাসা পাতা’য় জানাতে পারেন। 🙂

Series Navigation<< HTML টিউটোরিয়াল: ১০ম পর্ব (Character Entities)HTML টিউটোরিয়াল: ১২তম পর্ব (HTML5 Tags) >>