নেভিগেশন বারের সাধারণ গঠন| সি এস এস বাংলা টিউটোরিয়াল

নেভিগেশন বারের সাধারণ গঠন

নেভিগেশন বার হচ্ছে কতগুলো লিংক এর লিস্ট। তাই সাধারণত নেভিগেশন বার তৈরিতে HTML এর <body></body> এর মধ্যে একটা <div></div> এবং তার মধ্যে আনঅর্ডার লিস্ট <ul><li></li><li></li></ul> এর অনুরূপে তৈরি করতে হয়।ওয়েব সাইটে নেভিগেশন বার প্রদর্শনের সময় বাটনের মত কাজ করে। সম্পূর্ণ নেভিগেশন বারটি বেশ কিছু বাটনে বিভক্ত থাকে। একটি নেভিগেশন বারে কতটি বাটন থাকবে তা মূলত <li></li> ট্যাগের সংখ্যার উপর নির্ভর করে।ঠিক যতটি বাটন প্রয়োজন ততটি <li></li> ট্যাগ নিতে হয়।বিভিন্ন পেজের সাথে লিংক তৈরির জন্য <li></li> ট্যাগের মধ্যে <a></a>ট্যাগ ব্যবহার করা হয়।তাহলে একটা নেভিগেশন বারের সাধারণ গঠন হচ্ছে <div><ul><li><a></a></li><li><a></a></li></ul></div> এর অনুরূপ।

পেজে আরো অনেক div উপাদান থাকতে পারে তাই নেভিগেশন বারের div কে আলাদাভাবে দেখানোর জন্য  id যুক্ত করতে হয়।যেমন <div id="navigation">।

অনুশীলন প্রজেক্ট

<html>
<head>
<title> www.tutohost.com</title>
</head>
<body >
<div id="navigation">
<ul>
<li><a></a></li>
<li><a></a></li>
</ul>
</div>
</body>
</html>

একটা  নোটপ্যাড  open  করে  উপরের code  টুকু  লিখে  file  মেনু  থেকে  Save as এ ক্লিক করে File name:  index.html  ,   Save as type : All files,  দিয়ে save করে index.html ফাইলটি Mozilla Firefox দিয়ে open করলে নিচে প্রদর্শিত ছবির মত দেখাবে।



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

কপি রাইট টিউটোহোস্ট ২০১০-২০১২