HTML ব্যবহার করে নেভিগেশন বার (Navigation Bar)

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>
![Screenshot 2025-01-10 085218|396x316](upload://hD0jN8lNeJ0vp7q3qqySRB6ggZo.png)
<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>

ব্যাখ্যা:

  1. HTML:
  • <!DOCTYPE html>: এটি HTML5 ডকুমেন্টের ঘোষণা।
  • <html lang="bn">: এখানে lang="bn" সেট করা হয়েছে যাতে ব্রাউজার জানে যে এই ডকুমেন্ট বাংলা ভাষায়।
  • <head>: এখানে ডকুমেন্টের মেটাডেটা, যেমন ক্যারেক্টার সেট, viewport সেটিংস, এবং স্টাইলশীট রয়েছে।
  • <style>: স্টাইল ট্যাগের মধ্যে CSS কোড দেওয়া হয়েছে যা নেভিগেশন বারকে স্টাইল করছে।
  • <body>: এটি HTML ডকুমেন্টের মূল অংশ যেখানে নেভিগেশন বার এবং অন্যান্য কন্টেন্ট রয়েছে।
  • .navbar a:hover: এটি হোভার স্টেটের জন্য স্টাইল নির্ধারণ করেছে, যা ব্যবহারকারী হোভার করলে ব্যাকগ্রাউন্ড এবং টেক্সটের রঙ পরিবর্তন করে।
  1. CSS:
  • body: পুরো ডকুমেন্টের জন্য সাধারণ স্টাইলিং যেমন ফন্ট, মার্জিন এবং ব্যাকগ্রাউন্ড রঙ নির্ধারণ করা হয়েছে।
  • .navbar: নেভিগেশন বারের স্টাইলিং যা ব্যাকগ্রাউন্ড রঙ এবং ওভারফ্লো লুকিয়ে রাখে।
  • .navbar a: নেভিগেশন বার লিংকের জন্য স্টাইলিং যা টেক্সটের রঙ, প্যাডিং এবং টেক্সট অডারলাইন দূর করা হয়েছে।
  • .navbar a:hover: হোভার অবস্থায় লিংকের ব্যাকগ্রাউন্ড এবং টেক্সটের রঙ পরিবর্তন করে।

নোটঃ ভুল হলে দেখিয়ে দিবেন।

2 Likes

ভাই, এআই দিয়ে এই টাইপের পোস্ট না দিয়ে ছোট ছোট ভিডিও বানিয়ে পোস্ট করেন।

5 Likes

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