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

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

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

নেভ (<nav>) ট্যাগঃ মূলত ন্যাভিগেশন মেন্যুকে আদালাভাবে চিহ্নিত করার জন্য এইচটিএমএল ৫ এ নেভ/নেভিগেশন ট্যাগ এর আবির্ভাব। মনে রাখতে হবে, নেভ ট্যাগ ইউজ করলেই যে একটি নেভিগেশন মেন্যু তৈরী হয়ে যাবে এমনটা না। এই ট্যাগ ইউজ করা হবে <div> ট্যাগ এর জায়গায়। <div> কে ID বা Class selector ব্যবহার ছাড়া মেন্যুকে আদালাভাবে চিহ্নিত করার জন্য। আপনি চাইলে আইডি বা ক্লাসও ইউজ করতে পারেন।

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

<html>
                        <body>
<nav>
                                    <ul>
                                                <li>Home</li>
                                                <li>About</li>
                                                <li>Products</li>
                                                <li>Profile</li>
                                                <li>Contact</li>
                                    </ul>
  </nav>
                        </body>
            </html>

সেকশন (<section>) ট্যাগঃ প্রাথমিক ভাবে বলা জায় সেকশন ট্যাগ ডিভ ট্যাগের কাজ করে। তবে এই ট্যাগ এর দ্বারা আলাদা ভাবে সেকশন ওয়াইজ লিখা যায়।

আর্টিকেল (<article>) ট্যাগঃ বলা চলে এই ট্যাগটি পারাগ্রাফ (<p>) ট্যাগের কাজ করে। আপনি সেকশনের মধ্যে কোন পারাগ্রাফ লিখতে চাইলে সেক্ষেত্রে পারাগ্রাফ (<p>) ট্যাগ ইউজ না করে আর্টিকেল (<article>) ট্যাগ ইউজ করতে পারবেন। পারাগ্রাফ (<p>) ট্যাগ এর স্থানে আর্টিকেল(<p>) ট্যাগ ব্যবহার করলে ভিজুয়ালি কোন পার্থক্য বা পরিবর্তন হবে না।

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

<html>
            <body>
<section>
<hgroup>
                                    <h2>This is Section Heading</h2>
                                    <h3>This is sub title of Section Heading</h3>
</hgroup>
<article>This is Section 1 area. We can do anything or post anything here.</article>
  </section>
</body>
</html>

এসাইড (<aside>) ট্যাগঃ মূলত সাইডবারকে আদালাভাবে চিহ্নিত করার জন্য এইচটিএমএল ৫ এ এসাইড(<aside>) ট্যাগ এর আবির্ভাব। মনে রাখতে হবে, এসাইড(<aside>) ট্যাগ ইউজ করলেই যে একটি সাইডবার তৈরী হয়ে যাবে এমনটা না। এই ট্যাগ ইউজ করা হবে ট্যাগ এর সাথে কে ID বা Class selector ব্যবহার ছাড়া সাইডবারকে আদালাভাবে চিহ্নিত করার জন্য। আপনি চাইলে আইডি বা ক্লাসও ইউজ করতে পারেন।

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

<html>
<body>
<aside>
                        <hgroup>
                                    <h2>The Sidebar</h2>
                                    <h3>The sub heading</h3>
                        </hgroup>
                        <article>This is sidebar area. We can do anything or
                        post anything here.</article>
            </aside>
</body>
</html>

ফুটার (<footer>) ট্যাগঃ মূলত ফুটারকে আদালাভাবে চিহ্নিত করার জন্য এইচটিএমএল ৫ এ ফুটার (<footer>) ট্যাগ এর আবির্ভাব। মনে রাখতে হবে, ফুটার (<footer>) ট্যাগ ইউজ করলেই যে ফুটার (<footer>) তৈরী হয়ে যাবে এমনটা না। এই ট্যাগ ইউজ করা হবে <div> ট্যাগ এর সাথে। <div> কে ID বা Class selector ব্যবহার ছাড়া ফুটার আদালাভাবে চিহ্নিত করার জন্য। আপনি চাইলে আইডি বা ক্লাসও ইউজ করতে পারেন।

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

<html>
<body>
<footer>
<p> © Copyright 2012 | All right reserved by Someone.</p>
<p>This site developed by Nothing!</p>
</footer>
</body>
</html>

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

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