HTML দিয়ে মেনু তৈরিঃ আমাদের ওয়েব পেজ ডিজাইন এর একটি
গুরুত্বপূর্ণ বিষয় হল Horizontal এবং Vertical মেনু তৈরি করা । এটি
কিভাবে তৈরি করতে হয় আমরা এখন টা দেখব ।
Vertical মেনু তৈরি করা-
যেকোনো মেনু তৈরি করার সাধারণত <ul> এবং <li> ট্যাগ ব্যবহার করা হয় । আমরা এখন <ul> এবং <li> ট্যাগ দিয়ে কিভাবে মেনু তৈরি করতে হয় টা দেখব । নিচের কোড টি আপনার <body> ট্যাগ এর ভিতরে পেস্ট করুন ।
<ul>
<li><a href=”">Home</a></li>
<li><a href=”">Service</a></li>
<li><a href=”">Download</a></li>
<li><a href=”">About us</a></li>
<li><a href=”">Contact</a></li>
</ul>
এটি রান করলে নিচের মত আউট পুট দেখবেন ।
আপনি দেখতে পাচ্ছেন যে এখানে আইটেম গুলোর সাথে বুলেট রয়ে গেছে । এটি সরানোর জন্য নিচের সিএসএস কোড টি লিখুন টাইটেল এর মধ্যে ।।
<style type=”text/css”>
ul li{
list-style:none;
}
</style>
এবার রান করলে আপনি বুলেট আর দেখতে পাবেন না । এবার আপনি যদি লিস্ট আইটেম গুলোর অর্থাৎ মেনু গুলোর background-color দিবেন তাহলে নিচের সিএসএস কোড টি পেস্ট করুন ।
ul li{
list-style:none;
background-color:#FF6600;
}
এবার রান করলে দেখবে মেনু গুলোর background-color সেট হয়েছে । কিন্তু মেনু গুলো দেখেন যে পুরা পেজ জুড়ে বিশাল width বা প্রস্থ নিয়ে ভরে আছে । আপনি এবার এটিকে যদি নির্দিষ্ট একটি width দিতে চান তাহলে নিচের কোড টি পেস্ট করুন ।
ul{
width:200px;
margin:0;
padding:0;
}
এখানে টোটাল মেনুর width ২০০ পিক্সেল দেয়া আছে যার কারনে এটি আর পুরা পেজ জুড়ে থাকবেনা । বরং ২০০ পিক্সেল width নিয়েই থাকবে ।এখানে আরেকটি বিষয় লক্ষ করার যে margin:0; এবং padding:0; করা আছে । এটির কারন হল বিভিন্ন ব্রাউজার এ বিভিন্ন রকম margin এবং padding শো করে তাই এটি ০ করে দিলে সব ব্রাউজার এ একই দেখাবে ।
এখন আসুন যে আমরা মেনু গুলোকে আর একটু ভাল করে সাজাই । নিচের কোড টি লক্ষ করুন ।
ul li{
list-style:none;
background-color:#FF6600;
margin:1px 0;
padding:5px 20px;
}
এখানে margin এবং padding আমরা ব্যবহার করেছি । এবার আপনি রান করলে সুন্দর ১ টি মেনু দেখতে পাবেন । এবার আসুন টেক্সট এর নিচের দাগ আছে এটি সরানর জন্য আপনাকে সিএসএস এর নিচের কোড টি দিতে হবে ।
ul li a{
text-decoration:none;
color:#000042;
}
এখন যদি আপনি এটির উপর মাউস ধরলে অন্য রকম স্টাইল হবে এরকম করতে চান তাহলে নিচের কোড টি দিয়ে দিন ।
ul li a:hover{
color:#620000;
}
এখানে hover দারা এর উপরে মাউস ধরলে কি হবে তাই বুঝায় ।
এবার রান করলে আপনি সুন্দর ১ টি মেনু দেখতে পাবেন । সম্পুরন কোড টি একসাথে দেখে নিন ।
<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”>
<html xmlns=”http://www.w3.org/1999/xhtml”>
<head>
<meta http-equiv=”Content-Type” content=”text/html; charset=iso-8859-1″ />
<title>My First Project</title>
<style type=”text/css”>
ul{
width:200px;
margin:0;
padding:0;
}
ul li{
list-style:none;
background-color:#FF6600;
margin:1px 0;
padding:5px 20px;
}
ul li a{
text-decoration:none;
color:#000042;
}
ul li a:hover{
color:#620000;
}
</style>
</head>
<body>
<ul>
<li><a href=”">Home</a></li>
<li><a href=”">Service</a></li>
<li><a href=”">Download</a></li>
<li><a href=”">About us</a></li>
<li><a href=”">Contact</a></li>
</ul>
</body>
</html>
এক নজরে আউট পুট টি দেখে নিন ।
আশা করি বুঝতে পেরেছেন ।
এবার যদি এটিকে Horizontal মেনু বানাতে চাই তাহলে ১ টি কোড মাত্র চেঞ্জ করে দিন টা হল আপনি display:inline; কোড টি দিয়ে দিন । এবং ul এর width:200px; লেখাটি তুলে দিন । তাহলে দেখবেন যে এটি Horizontal মেনু হয়ে গেছে ।
ul li{
list-style:none;
display:inline;
background-color:#FF6600;
margin:1px 0;
padding:5px 20px;
}
পুরা কোড টি দেখুন
<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”>
<html xmlns=”http://www.w3.org/1999/xhtml”>
<head>
<meta http-equiv=”Content-Type” content=”text/html; charset=iso-8859-1″ />
<title>My First Project</title>
<style type=”text/css”>
ul{
margin:0;
padding:0;
}
ul li{
list-style:none;
display:inline;
background-color:#FF6600;
margin:1px 0;
padding:5px 20px;
}
ul li a{
text-decoration:none;
color:#000042;
}
ul li a:hover{
color:#620000;
}
</style>
</head>
<body>
<ul>
<li><a href=”">Home</a></li>
<li><a href=”">Service</a></li>
<li><a href=”">Download</a></li>
<li><a href=”">About us</a></li>
<li><a href=”">Contact</a></li>
</ul>
</body>
</html>
আউট পুট টি দেখে নিন ।
আশা করি বুঝতে সমস্যা হয় নি । এবার আপনার মত আপনি বানান ।
পরবর্তী লেসন গুলোর অপেক্ষায় থাকুন । ধন্যবাদ ।
Vertical মেনু তৈরি করা-
যেকোনো মেনু তৈরি করার সাধারণত <ul> এবং <li> ট্যাগ ব্যবহার করা হয় । আমরা এখন <ul> এবং <li> ট্যাগ দিয়ে কিভাবে মেনু তৈরি করতে হয় টা দেখব । নিচের কোড টি আপনার <body> ট্যাগ এর ভিতরে পেস্ট করুন ।
<ul>
<li><a href=”">Home</a></li>
<li><a href=”">Service</a></li>
<li><a href=”">Download</a></li>
<li><a href=”">About us</a></li>
<li><a href=”">Contact</a></li>
</ul>
এটি রান করলে নিচের মত আউট পুট দেখবেন ।
আপনি দেখতে পাচ্ছেন যে এখানে আইটেম গুলোর সাথে বুলেট রয়ে গেছে । এটি সরানোর জন্য নিচের সিএসএস কোড টি লিখুন টাইটেল এর মধ্যে ।।
<style type=”text/css”>
ul li{
list-style:none;
}
</style>
এবার রান করলে আপনি বুলেট আর দেখতে পাবেন না । এবার আপনি যদি লিস্ট আইটেম গুলোর অর্থাৎ মেনু গুলোর background-color দিবেন তাহলে নিচের সিএসএস কোড টি পেস্ট করুন ।
ul li{
list-style:none;
background-color:#FF6600;
}
এবার রান করলে দেখবে মেনু গুলোর background-color সেট হয়েছে । কিন্তু মেনু গুলো দেখেন যে পুরা পেজ জুড়ে বিশাল width বা প্রস্থ নিয়ে ভরে আছে । আপনি এবার এটিকে যদি নির্দিষ্ট একটি width দিতে চান তাহলে নিচের কোড টি পেস্ট করুন ।
ul{
width:200px;
margin:0;
padding:0;
}
এখানে টোটাল মেনুর width ২০০ পিক্সেল দেয়া আছে যার কারনে এটি আর পুরা পেজ জুড়ে থাকবেনা । বরং ২০০ পিক্সেল width নিয়েই থাকবে ।এখানে আরেকটি বিষয় লক্ষ করার যে margin:0; এবং padding:0; করা আছে । এটির কারন হল বিভিন্ন ব্রাউজার এ বিভিন্ন রকম margin এবং padding শো করে তাই এটি ০ করে দিলে সব ব্রাউজার এ একই দেখাবে ।
এখন আসুন যে আমরা মেনু গুলোকে আর একটু ভাল করে সাজাই । নিচের কোড টি লক্ষ করুন ।
ul li{
list-style:none;
background-color:#FF6600;
margin:1px 0;
padding:5px 20px;
}
এখানে margin এবং padding আমরা ব্যবহার করেছি । এবার আপনি রান করলে সুন্দর ১ টি মেনু দেখতে পাবেন । এবার আসুন টেক্সট এর নিচের দাগ আছে এটি সরানর জন্য আপনাকে সিএসএস এর নিচের কোড টি দিতে হবে ।
ul li a{
text-decoration:none;
color:#000042;
}
এখন যদি আপনি এটির উপর মাউস ধরলে অন্য রকম স্টাইল হবে এরকম করতে চান তাহলে নিচের কোড টি দিয়ে দিন ।
ul li a:hover{
color:#620000;
}
এখানে hover দারা এর উপরে মাউস ধরলে কি হবে তাই বুঝায় ।
এবার রান করলে আপনি সুন্দর ১ টি মেনু দেখতে পাবেন । সম্পুরন কোড টি একসাথে দেখে নিন ।
<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”>
<html xmlns=”http://www.w3.org/1999/xhtml”>
<head>
<meta http-equiv=”Content-Type” content=”text/html; charset=iso-8859-1″ />
<title>My First Project</title>
<style type=”text/css”>
ul{
width:200px;
margin:0;
padding:0;
}
ul li{
list-style:none;
background-color:#FF6600;
margin:1px 0;
padding:5px 20px;
}
ul li a{
text-decoration:none;
color:#000042;
}
ul li a:hover{
color:#620000;
}
</style>
</head>
<body>
<ul>
<li><a href=”">Home</a></li>
<li><a href=”">Service</a></li>
<li><a href=”">Download</a></li>
<li><a href=”">About us</a></li>
<li><a href=”">Contact</a></li>
</ul>
</body>
</html>
এক নজরে আউট পুট টি দেখে নিন ।
আশা করি বুঝতে পেরেছেন ।
এবার যদি এটিকে Horizontal মেনু বানাতে চাই তাহলে ১ টি কোড মাত্র চেঞ্জ করে দিন টা হল আপনি display:inline; কোড টি দিয়ে দিন । এবং ul এর width:200px; লেখাটি তুলে দিন । তাহলে দেখবেন যে এটি Horizontal মেনু হয়ে গেছে ।
ul li{
list-style:none;
display:inline;
background-color:#FF6600;
margin:1px 0;
padding:5px 20px;
}
পুরা কোড টি দেখুন
<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”>
<html xmlns=”http://www.w3.org/1999/xhtml”>
<head>
<meta http-equiv=”Content-Type” content=”text/html; charset=iso-8859-1″ />
<title>My First Project</title>
<style type=”text/css”>
ul{
margin:0;
padding:0;
}
ul li{
list-style:none;
display:inline;
background-color:#FF6600;
margin:1px 0;
padding:5px 20px;
}
ul li a{
text-decoration:none;
color:#000042;
}
ul li a:hover{
color:#620000;
}
</style>
</head>
<body>
<ul>
<li><a href=”">Home</a></li>
<li><a href=”">Service</a></li>
<li><a href=”">Download</a></li>
<li><a href=”">About us</a></li>
<li><a href=”">Contact</a></li>
</ul>
</body>
</html>
আউট পুট টি দেখে নিন ।
আশা করি বুঝতে সমস্যা হয় নি । এবার আপনার মত আপনি বানান ।
পরবর্তী লেসন গুলোর অপেক্ষায় থাকুন । ধন্যবাদ ।
No comments:
Post a Comment