HTML ব্যবহার করে একটি নেভিগেশন বার (Navigation Bar) তৈরি করা বেশ সহজ। এখানে CSS সহ HTML এর মাধ্যমে একটি নেভিগেশন বার তৈরি করার বিস্তারিত ব্যাখ্যা এবং উদাহরণ দেওয়া হলো:
নেভিগেশন বার body {
font-family: Arial, sans-serif; /* প্রধান ফন্ট ফ্যামিলি নির্ধারণ করা হয়েছে */
margin: 0; /* ডিফল্ট মার্জিন দূর করা হয়েছে */
padding: 0; /* ডিফল্ট প্যাডিং দূর করা হয়েছে */
background-color: #f2f2f2; /* ব্যাকগ্রাউন্ড রঙ নির্ধারণ করা হয়েছে */
}
.navbar {
overflow: hidden; /* অতিরিক্ত বিষয়বস্তু লুকিয়ে রাখা হবে */
background-color: #333; /* নেভিগেশন বারের ব্যাকগ্রাউন্ড রঙ নির্ধারণ করা হয়েছে */
}
.navbar a {
float: left; /* লিংকগুলোকে বাম দিকে সাঁটানো হয়েছে */
display: block; /* লিংকগুলোকে ব্লক ডিসপ্লে করা হয়েছে */
color: #f2f2f2; /* লিংক টেক্সটের রঙ নির্ধারণ করা হয়েছে */
text-align: center; /* টেক্সটকে কেন্দ্রস্থানে স্থাপন করা হয়েছে */
padding: 14px 20px; /* লিংকগুলোর চারপাশে প্যাডিং যোগ করা হয়েছে */
text-decoration: none; /* লিংকগুলোর আন্ডারলাইন লুকিয়ে রাখা হয়েছে */
}
.navbar a:hover {
background-color: #ddd; /* হোভার করলে ব্যাকগ্রাউন্ড রঙ পরিবর্তন হবে */
color: black; /* হোভার করলে টেক্সটের রঙ পরিবর্তন হবে */
}
</style>

<div class="navbar">
<a href="#home">বাড়ি</a>
<a href="#services">সেবা</a>
<a href="#about">আমাদের সম্পর্কে</a>
<a href="#contact">যোগাযোগ</a>
</div>
<div style="padding:16px">
<h2>নেভিগেশন বার উদাহরণ</h2>
<p>এটি একটি সহজ নেভিগেশন বারের উদাহরণ, যেখানে আপনি বাড়ি, সেবা, আমাদের সম্পর্কে এবং যোগাযোগ পাতায় যেতে পারেন।</p>
</div>
ব্যাখ্যা:
- HTML:
<!DOCTYPE html>
: এটি HTML5 ডকুমেন্টের ঘোষণা।<html lang="bn">
: এখানেlang="bn"
সেট করা হয়েছে যাতে ব্রাউজার জানে যে এই ডকুমেন্ট বাংলা ভাষায়।<head>
: এখানে ডকুমেন্টের মেটাডেটা, যেমন ক্যারেক্টার সেট, viewport সেটিংস, এবং স্টাইলশীট রয়েছে।<style>
: স্টাইল ট্যাগের মধ্যে CSS কোড দেওয়া হয়েছে যা নেভিগেশন বারকে স্টাইল করছে।<body>
: এটি HTML ডকুমেন্টের মূল অংশ যেখানে নেভিগেশন বার এবং অন্যান্য কন্টেন্ট রয়েছে।.navbar a:hover
: এটি হোভার স্টেটের জন্য স্টাইল নির্ধারণ করেছে, যা ব্যবহারকারী হোভার করলে ব্যাকগ্রাউন্ড এবং টেক্সটের রঙ পরিবর্তন করে।
- CSS:
body
: পুরো ডকুমেন্টের জন্য সাধারণ স্টাইলিং যেমন ফন্ট, মার্জিন এবং ব্যাকগ্রাউন্ড রঙ নির্ধারণ করা হয়েছে।.navbar
: নেভিগেশন বারের স্টাইলিং যা ব্যাকগ্রাউন্ড রঙ এবং ওভারফ্লো লুকিয়ে রাখে।.navbar a
: নেভিগেশন বার লিংকের জন্য স্টাইলিং যা টেক্সটের রঙ, প্যাডিং এবং টেক্সট অডারলাইন দূর করা হয়েছে।.navbar a:hover
: হোভার অবস্থায় লিংকের ব্যাকগ্রাউন্ড এবং টেক্সটের রঙ পরিবর্তন করে।
নোটঃ ভুল হলে দেখিয়ে দিবেন।