এতক্ষন আমরা ভেঙ্গে ভেঙ্গে ওয়েব ডিজাইন এর সিখসিলাম । এবার এইচটিএমএল
এবং সিএসএস দিয়ে পুরা একটা ওয়েবপেজ কিভাবে তৈরি করতে হয় টা দেখব ।
এজন্যই প্রথমে dreamweaver software টি ওপেন করে একটি নতুন html ফাইল নিন এবার নিচের পুরা কোড টি পেস্ট করুন ।
<!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>CSS Traning</title>
<style type=”text/css”>
#wrapper{
width:950px;
margin:0 auto;
}
#header{
width:950px;
height:100px;
float:left;
background-color:#003300;
}
#menu{
width:950px;
height:30px;
float:left;
background-color:#CC0033;
}
#contents{
width:950px;
height:430px;
float:left;
background-color:#999999;
}
#footer{
width:950px;
height:130px;
float:left;
background-color:#FFCC99;
}
</style>
</head>
<body>
<div id=”wrapper”>
<div id=”header”></div>
<div id=”menu”></div>
<div id=”contents”></div>
<div id=”footer”></div>
</div>
</body>
</html>
এবার রান করুন দেখতে পাবেন যে সম্পূর্ণ এক্রি ওয়েব পেজ যেখানে header,footer , menu সবকিছুই রয়েছে ।
এবার আসুন কোড গুলো আলোচনা করি ।
এখানে <div id=”wrapper”></div>এর মধ্যে header,footer , menu সবকিসুই দিয়ে দেয়া হয়েছে । অর্থাৎ এটিই মেইন div যার মধ্যে সবকিসুই রয়েছে । আর <div id=”header”></div> এটি দ্বারা header অংশ তৈরি হয়েছে । <div id=”menu”></div> এই টি মেনু তৈরির জন্য ব্যবহৃত হয়েছে । <div id=”contents”></div>দ্বারা contents এর জায়গা তৈরি হয়েছে । আর <div id=”footer”></div> এটি দ্বারা footer বানানো হয়েছে ।
এবার আসুন সিএসএস কোড গুলো নিয়ে আলোচনা করি । এখানে <div id=”wrapper”></div> এর সিএসএস এরকম লেখা হয়েছে ।
width:950px;
margin:0 auto;
এখানে width:950px; এর মানে হল এই div টির প্রস্ত 950px হবে । আর margin:0 auto; দ্বারা ডানে বামে auto আর উপরে নিচে margin:0 ।
আমরা আগেই বলেছি যে margin==auto দিলে ওয়েবপেজ সবসময় সব ব্রাউজার এই মাঝখানে থাকবে ।
এখন আপনার যত খানি দরকার ততখানি দিয়ে নিন width । পরবর্তী লেসন এ বিস্তারিত পাবেন । ধন্যবাদ ।
এজন্যই প্রথমে dreamweaver software টি ওপেন করে একটি নতুন html ফাইল নিন এবার নিচের পুরা কোড টি পেস্ট করুন ।
<!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>CSS Traning</title>
<style type=”text/css”>
#wrapper{
width:950px;
margin:0 auto;
}
#header{
width:950px;
height:100px;
float:left;
background-color:#003300;
}
#menu{
width:950px;
height:30px;
float:left;
background-color:#CC0033;
}
#contents{
width:950px;
height:430px;
float:left;
background-color:#999999;
}
#footer{
width:950px;
height:130px;
float:left;
background-color:#FFCC99;
}
</style>
</head>
<body>
<div id=”wrapper”>
<div id=”header”></div>
<div id=”menu”></div>
<div id=”contents”></div>
<div id=”footer”></div>
</div>
</body>
</html>
এবার রান করুন দেখতে পাবেন যে সম্পূর্ণ এক্রি ওয়েব পেজ যেখানে header,footer , menu সবকিছুই রয়েছে ।
এবার আসুন কোড গুলো আলোচনা করি ।
এখানে <div id=”wrapper”></div>এর মধ্যে header,footer , menu সবকিসুই দিয়ে দেয়া হয়েছে । অর্থাৎ এটিই মেইন div যার মধ্যে সবকিসুই রয়েছে । আর <div id=”header”></div> এটি দ্বারা header অংশ তৈরি হয়েছে । <div id=”menu”></div> এই টি মেনু তৈরির জন্য ব্যবহৃত হয়েছে । <div id=”contents”></div>দ্বারা contents এর জায়গা তৈরি হয়েছে । আর <div id=”footer”></div> এটি দ্বারা footer বানানো হয়েছে ।
এবার আসুন সিএসএস কোড গুলো নিয়ে আলোচনা করি । এখানে <div id=”wrapper”></div> এর সিএসএস এরকম লেখা হয়েছে ।
width:950px;
margin:0 auto;
এখানে width:950px; এর মানে হল এই div টির প্রস্ত 950px হবে । আর margin:0 auto; দ্বারা ডানে বামে auto আর উপরে নিচে margin:0 ।
আমরা আগেই বলেছি যে margin==auto দিলে ওয়েবপেজ সবসময় সব ব্রাউজার এই মাঝখানে থাকবে ।
এখন আপনার যত খানি দরকার ততখানি দিয়ে নিন width । পরবর্তী লেসন এ বিস্তারিত পাবেন । ধন্যবাদ ।
No comments:
Post a Comment