আপনি যদি একজন ভালো ওয়েব ডিজাইনার হতে চান তাহলে আপনাকে ভালো গ্রাফিক্স ডিজাইন জানার পাশাপাশি HTML, CSS, Javascript এবং jquery জানতে হবে। 
একটা ভালো ডিজাইনের টেমপ্লেট তৈরির ক্ষেত্রে নেভিগেশনের ফাংশন এবং এর ডিজাইন খুবই গুরুত্ব সহকারে বিবেচনা করতে হয়। যে কেউ সমান্য চেষ্টা করলেই খুব সহজেই HTML, CSS শিখতে পারেন, আর একটু সময় নিয়ে Javascript এবং jquery শিখতে পারলে খুব ভালো টেমপ্লেট ডিজাইন করা যায়। আজ আমরা শুধুমাত্র HTML এবং CSS দিয়েই একটা সহজ কিন্তু সুন্দর নেভিগেশন বার তৈরির চেষ্টা করব।
আমাদের নেভিগেশন বারটি তৈরি করতে তিনটি সরু ইমেজের প্রয়োজন হবে, ইমেজ তিনটি এখান থেকে ডাউনলোড করুন। Zip ফাইলটি Extract করলে images নামে একটা ফোল্ডার পাওয়া যাবে।nav নামে নতুন একটা ফোল্ডার তৈরি করে images নামের ফোল্ডারটা এর মধ্যে রাখতে হবে।
<html> <head> <title>Navigation bar</title> </head> <body> <div id="navigation"> <ul> <li><div id="home"> <a href="#"> HOME</a></div></li> <li ><a href="#">ABOUT US</a></li> <li ><a href="#">HTML</a> <li><a href="#">CSS</a></li> <li ><a href="#">PHP </a></li> <li ><a href="#">CONTACT US</a> </li> </ul> </div> </body> </html>
*{margin:auto; padding:auto;}
body { background: #C99}
#navigation{background:url(images/navigation.png) repeat-x;
margin-top:20px;
width:650px;
height:40px;
font-family:Tahoma;
font-size:14px;
}
#navigation ul {
list-style-type:none;
margin-left:auto;}
#navigation ul li {
float:left;
background: url(images/border.png) no-repeat;
background-position:right;
}
#navigation ul li a {
padding:10px 28px 10px 20px ;
display:block;
text-decoration:none;
text-align:center;
color: #F69;
font-weight:bold;
}
#navigation ul li a:hover {
background: url(images/navov.png) repeat-x;
padding:10px 27px 13px 19px ;
margin:0px 1px 0px 1px;
color:#F3C;
}
#home{background:url(images/border.png) left no-repeat;}
আমরা যদি CSS CODE কে এক্সটার্নাল স্টাইল শীটে রাখতে চাই তাহলে,
HTML Code এর <head>………</head> এর মধ্যে
</p> <p style="text-align: justify;"><link rel="stylesheet" type="text/css" href="style.css"/></p> <p style="text-align: justify;">
যুক্ত করতে হবে।
এরপর একটা Notepad Open করে উপরের HTML Code টুকু লিখে File মেনু থেকে Save as এ ক্লিক করে File name হিসেবে index.html দিয়ে, Save as type হিসেবে All files সিলেক্ট করে এবং Encoding:UTF-8 দিয়ে এরপর Save বাটনে ক্লিক করতে হবে।
অনুরূপভাবে CSS code টি style.css নামে Save করতে হবে। index.html এবং style.css file দুটিকেই nav folder টির মধ্যে রাখতে হবে।
আমরা যদি আমরা যদি CSS CODE কে এমবেডেড স্টাইল শীটে রাখতে চাই তাহলে, নিচের কোডের মত HTML code এর <head>………</head>ট্যাগের মধ্যে <style>………….</style> ট্যাগ যুক্ত করে তার মধ্যে CSS CODE লেখতে হবে।
<html>
<head>
<title>Navigation bar</title>
<style>
*{margin:auto; padding:auto;}
body { background: #C99}
#navigation{background:url(images/navigation.png) repeat-x;
margin-top:20px;
width:650px;
height:40px;
font-family:Tahoma;
font-size:14px;
}
#navigation ul {
list-style-type:none;
margin-left:auto;}
#navigation ul li {
float:left;
background: url(images/border.png) no-repeat;
background-position:right;
}
#navigation ul li a {
padding:10px 28px 10px 20px ;
display:block;
text-decoration:none;
text-align:center;
color: #F69;
font-weight:bold;
}
#navigation ul li a:hover {
background: url(images/navov.png) repeat-x;
padding:10px 27px 13px 19px ;
margin:0px 1px 0px 1px;
color:#F3C;
}
#home{background:url(images/border.png) left no-repeat;}
</style>
</head>
<body>
<div id="navigation">
<ul>
<li><div id="home"> <a href="#"> HOME</a></div></li>
<li ><a href="#">ABOUT US</a></li>
<li ><a href="#">HTML</a>
<li><a href="#">CSS</a></li>
<li ><a href="#">PHP </a></li>
<li ><a href="#">CONTACT US</a> </li>
</ul>
</div>
</body>
</html>
.............................................................................................................
পোস্টটির মূল লেখক টিউটোহোস্ট টিম সদস্য অসিম কুমার
পোস্টটি ইতোপূর্বে এখানে প্রকাশিত
আমি টিউটোহোস্ট। বিশ্বের সর্ববৃহৎ বিজ্ঞান ও প্রযুক্তির সৌশল নেটওয়ার্ক - টেকটিউনস এ আমি 12 বছর 6 মাস যাবৎ যুক্ত আছি। টেকটিউনস আমি এ পর্যন্ত 162 টি টিউন ও 69 টি টিউমেন্ট করেছি। টেকটিউনসে আমার 1 ফলোয়ার আছে এবং আমি টেকটিউনসে 0 টিউনারকে ফলো করি।
টিউটোহোস্ট বাংলাদেশের একটি জনপ্রিয় ওয়েব হোস্টিং সেবাদানকারী প্রতিষ্ঠান। যুক্তরাস্ট্র এবং যুক্তরাজ্য ভিত্তিক দ্রুতগতির বেশ কিছু ওয়েব সারভারে গুরুত্বপূর্ণ তথ্যগুলো নিরাপদে সংরক্ষণ করা হয়। আমরা এদেশে ২৪ ঘন্টা এবং বছরে ৩৬৫ দিন অনলাইন এবং ফোন সাপোর্টের ব্যবস্থা রেখেছি। বাংলেদশসহ অনেক দেশের জনপ্রিয় ওয়েবসাইট আমাদের সারভার ব্যবহার করছে।
![ওয়েব ডেভেলপমেন্ট [পর্ব-05-5] আজকে বোনাস হিসাবে সুডো এবং পজিশন সম্পর্কে কিছু শেয়ার করবো তোমাদের সাথে- সর্ম্পূন কোর্সটি টেকটিউনস হবে](https://dnc.techtunes.io/tDrive/tuner/2023/08/techtunes_f0c88450f0662494e3f887117311d261-368x207.jpg "ওয়েব ডেভেলপমেন্ট [পর্ব-05-5] আজকে বোনাস হিসাবে সুডো এবং পজিশন সম্পর্কে কিছু শেয়ার করবো তোমাদের সাথে- সর্ম্পূন কোর্সটি টেকটিউনস হবে")
ধন্যবাদ ………………….