আমার একটা সুন্দর এবং জনপ্রিয় ওয়েব সাইট আছে! এই উক্তিটুকু কারো কাছে স্বপ্ন আবার অনেকের কাছেই সত্যি। কিন্তু কেমন ওয়েব সাইটকে আমরা সুন্দর বলব? এ প্রসঙ্গে প্রথমেই বলতে হয় যে ওয়েব সাইটের সুন্দর, পরিচ্ছন্ন তথ্যসমৃদ্ধ এবং আকর্ষনীয় নেভিগেশন বার রয়েছে । আমার বিশ্বাস এ ব্যপারে অন্য কারা দ্বিমত থাকার কথা নয়।
শুধু তাই নয় একটি ভালো নেভিগেশন বার যে কোন ওয়েব সাইটকে সার্চ ইন্জিনে সহজে খুজে পেতেও গুরুত্বপূণর্ণ ভুমিকা পালন করে। কিন্তু কিভাবে আমরা একটা ভাল নেভিগেশন বার তৈরি করতে পারি ? অনেকে ভাবছেন কাজটা হয়তবা কঠিন আসলেই কি তাই ! আমরা এই টিউটোরিয়ালটি ভালভাবে প্রত্যক্ষ করার পর এর উত্তর খুজব।
আমরা একটু দেখে নেই আসলে আমরা কি তৈরি করতে যাচ্ছি।
এ ধরনের নেভিগেশন বার তৈরি করার জন্য অবশ্যই HTML এবং CSS এর উপর কিছুটা ধারণা থাকা আবষ্যক । এ ব্যপারে আমার HTMLপর্ব- এক HTMLপর্ব- দুই HTMLপর্ব- তিন HTMLপর্ব- চার HTMLপর্ব-পাঁচ HTML পর্ব-৬ এবং এখান থেকে CSS সেই চাহিদাটুকু পূরণ করবে ।
প্রথমে Desktop এ একটা Filder নিয়ে নাম দেই Navegation । Navegation Filder এর মধ্যে আবার একটা Filder নিয়ে নাম দেই images । এখন নিচের ov.gif এবং un.gif 1 pixel এর image দুটো copy করে images Filder এর মধ্যে রাখি ।
এখন আমরা Navegation Filder এর মধ্যে একটা নোটপ্যাড open করে নিচের code টুকু লিখি।
<html >
<head>
<title>Navigation bar.</title>
</head>
<body>
<div>
<div> <a href="#">Home</a></div>
<div> <a href="#">About us</a></div>
<div> <a href="#">Electronics</a></div>
<div> <a href="#">Tutorials</a></div>
<div> <a href="#">News</a></div>
<div> <a href="#">Technology</a></div>
<div> <a href="#">Template</a></div>
<div> <a href="#">More</a></div>
</div>
</body>
</html>
এখন file মেনু থেকে Save as এ ক্লিক করে File name: index.html , Save as type : All files, দিয়ে save করি । save করা index.html ফাইলটি Internet explorer দিয়ে open করলে নিচের মত দেখাবে।
অমরা এখন index.html এর head ট্যাগের মধ্যে css যুক্ত করব। এ জন্য আমরা head ট্যাগের মধ্যে নিচের code টুকু লিখি।
<style>
body{background:#333;}
.navbar{
margin:0% 15% 0% 15%;
width:822px;
height:30px;
font-family:Verdana, Geneva, sans-serif;
font-size:14px;
line-height:30px;
font-weight:bold;
border:1px solid #000 ;
background:url(images/un.gif) repeat-x ;
}
.button a{
float:left;
width:100px;
height:30px;
color:#000;
text-decoration:none;
text-align:center;}
.button a:hover{
float:left;
width:100px;
height:30px;
color: #C00;
text-decoration:none;
text-align:center;
background:url(images/ov.gif) repeat-x;
}
</style>
<html >
<head>
<title>Navigation bar.</title>
<style>
body{background:#333;}
.navbar{
margin:0% 15% 0% 15%;
width:822px;
height:30px;
font-family:Verdana, Geneva, sans-serif;
font-size:14px;
line-height:30px;
font-weight:bold;
border:1px solid #000 ;
background:url(images/un.gif) repeat-x ;
}
.button a{
float:left;
width:100px;
height:30px;
color:#000;
text-decoration:none;
text-align:center;}
.button a:hover{
float:left;
width:100px;
height:30px;
color: #C00;
text-decoration:none;
text-align:center;
background:url(images/ov.gif) repeat-x;
}
</style>
</head>
<body>
<div>
<div> <a href="#">Home</a></div>
<div> <a href="#">About us</a></div>
<div> <a href="#">Electronics</a></div>
<div> <a href="#">Tutorials</a></div>
<div> <a href="#">News</a></div>
<div> <a href="#">Technology</a></div>
<div> <a href="#">Template</a></div>
<div> <a href="#">More</a></div>
</div>
</body>
</html>
এখন save করে index.html ফাইলটি Internet explorer দিয়ে open করলে আমরা পূর্ণাঙ্গ নেভিগেশন বারটি আমরা দেখতে পাব।
*** আমরা যেখানে # চিহ্ন ব্যবহার করেছি সেখানে আমরা প্রয়োজনীয় পেজের url লিখে লিংক যুক্ত করলে নেভিগেশন বারটি সঠিকভাবে কাজ করবে।
আমি অসীম কুমার পাল। বিশ্বের সর্ববৃহৎ বিজ্ঞান ও প্রযুক্তির সৌশল নেটওয়ার্ক - টেকটিউনস এ আমি 15 বছর 6 মাস যাবৎ যুক্ত আছি। টেকটিউনস আমি এ পর্যন্ত 147 টি টিউন ও 469 টি টিউমেন্ট করেছি। টেকটিউনসে আমার 17 ফলোয়ার আছে এবং আমি টেকটিউনসে 0 টিউনারকে ফলো করি।
আমি অসীম কুমার পাল। ইলেকট্রনিক্স এবং ওয়েব ডিজাইনকে অন্তরে ধারণ করে পথ চলতেছি। স্বপ্ন দেখি এই পৃথিবীর বুকে একটা সুখের স্বর্গ রচনা করার। নিজেকে একজন অতি সাধারণ কিন্তু সুখী মানুষ ভাবতে পছন্দ করি।
আগেই জানতাম , তবে ভাই অনেক দিন পর টিউন করলেন মনে হয় , শাকিল মত আমিও বলতে চাই , এমনেই চালায় যান আর এরপর নিয়মিত টিউন করবে আশা করি 😀 । টিউন টার জন্য অনেক ধন্যবাদ অসিম ভাই।
শাকিল আরেফিন এবং ফাহিম রেজা বাঁধন ধন্যবাদ। আসলেই অনেক দিন পর টিউন করলাম । অনেক দিন হল আমার PC র motherbord টা খারাপ ছিল আর তাছারা একটু ব্যস্ততার মধ্যে দিয়ে সময় অতিবাহিত হয়ে যাচ্ছে।
ইলেক্ট্রনিক্স নিয়ে টিউন করার সময় এসেছে, কিন্তু একটু অপেক্ষা করতে হবে । আর ইলেক্ট্রনিক্সের উপর সকলের আগ্রহ যেমনটা প্রত্যাশা করেছিলাম সেটাও পূরণ হয়নি।
ভাই আমি ইলেক্ট্রনিক্স নিয়ে অনেক টিউন করা ইচ্ছা ছিল , এখানে সবাই কম্পিউটার & ইন্টানেট প্রেমি 🙁 তাই আর ইলেক্ট্রনিক্স বিষয় টিউন করা হয়নি ।
আর একটা কথা,যদি CSS গুলো একটা আলাদা ফাইলে রাখা হয় তাহলে আরো ভালো হয়।আশা করি এ বিষয়ে আপনি একমত হবেন।
আপনার মতামতের সঙ্গে আমি সম্পূর্ণ একমত । এবং আমি নিজেও সেটাই করি । কিন্তু নতুনদের কথা মাথায় রেখেই এভাবে উপস্থাপন করা।
ধন্যবাদ।
![Arduino শিখুন এক্সক্লুসিভ প্রজেক্ট তৈরি করুন [পর্ব-১১] :: ভিডিওতে Arduino বেসিক-৪ (L293D মটর ড্রাইভার IC সম্পর্কে আলোচনা ) | কোর্সটিতে সক্রিয় অংশগ্রহণের মাধ্যমে আপনিও পেতে পারেন টেকটিউনস ভেরিফায়েড সার্টিফিকেট](https://dnc.techtunes.io/tDrive/tuner/ashim/324126/1uno.png "Arduino শিখুন এক্সক্লুসিভ প্রজেক্ট তৈরি করুন [পর্ব-১১] :: ভিডিওতে Arduino বেসিক-৪ (L293D মটর ড্রাইভার IC সম্পর্কে আলোচনা ) | কোর্সটিতে সক্রিয় অংশগ্রহণের মাধ্যমে আপনিও পেতে পারেন টেকটিউনস ভেরিফায়েড সার্টিফিকেট")
হূমম ভালো টিউন, ধন্যবাদ। আর এমনেই চালায় যান।