এ অধ্যায়ে আমরা সম্পূর্ণ একটি ওয়েব সাইট তৈরি করা শিখব । আমরা নিচের মত ওয়েবসাইট টি এখন বানাব ।
তো আসুন কিভাবে এটি আমরা বানাতে পারি ।প্রথমেই আপনার নতুন এইচটিএমএল ফাইল এ নিচের কোড টি পেস্ট করুন ।
<!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=UTF-8″ />
<title>Full Website</title>
<link rel=”stylesheet” type=”text/css” href=”style.css” />
</head>
<body>
<div id=”wrapper”>
<!–menu start –>
<ul id=”nav”>
<li><a href=”#”>Project</a></li>
<li><a href=”#”>Team</a></li>
<li><a href=”#”>Contact</a></li>
<li><a href=”#”>Download</a></li>
<li><a href=”#”>History</a></li>
</ul>
<!–menu end –>
<!–contents start –>
<div id=”contents”>
<div id=”left_contents”>
<img src=”images/mobile.png” width=”241″ height=”247″ /></div>
<div id=”right_contents”><img src=”images/Computer-wallpaper.jpg” width=”550″ height=”400″ /></div>
</div>
<!–contents end–>
<!– END page-wrap –>
<div id=”footer”>
<p>© 2011 Bangla Web . All Right Reserved.<p>
</div>
</div>
</body>
</html>
এর সিএসএস কোড গুলো নিচের দেওয়া হল ।
* {
margin: 0;
padding: 0;
}
body {
font-size: 62.5%;
font-family: Helvetica, sans-serif;
}
div#wrapper {
width:800px;
margin: 0 auto;
}
/*This is for menu code start*/
ul#nav {
height: 198px;
background: url(images/header-bg.jpg) no-repeat;
list-style: none;
padding-left: 125px;
}
ul#nav li {
display: inline;
font-size: 1.3em;
}
ul#nav li a {
display: block;
width: 113px;
float: left;
margin-top: 168px;
color: white;
padding-top: 2px;
font-weight: bold;
text-decoration: none;
}
ul#nav li a:hover, ul#nav li a:active {
color: yellow;
}
/*This is for menu code end*/
/*Start ocntents*/
#contents{
width:800px;
height:400px;
}
#left_contents{
width:250px;
height:380px;
padding:20px 0 0 0;
float:left;
background-color:#6a0000;
}
#right_contents{
width:550px;
height:400px;
float:right;
background-color:#e49b14;
}
/*End ocntents*/
#footer{
width:800px;
height:80px;
font-size:14px;
color:#fff;
text-align:center;
padding:30px 0 0 0;
background-color:#49453c;
}
এখানে সিএসএস কোড গুলো অন্য ফাইল এ লিখে এইচটিএমএল পেজ এর সাথে লিংক করে দেওয়া হয়েছে । লিংক করার কোড টি হল
<link rel=”stylesheet” type=”text/css” href=”style.css” />
আপনি ইচ্ছা করলে বাইরের ফাইল এ লিখে লিংক করে দিতে পারেন অথবা এইচটিএমএল ফাইল এই লিখতে পারেন ।
এটি অতি সাধারন একটি ওয়েবসাইট । অল্পতেই আপনি নুঝতে পারবেন ।
এখানে দেখুন <div id=”wrapper”> নামে যে div টা ব্যবহার করেছি সেটির মধ্যেই বাকি গুলো রয়েছে । প্রথমে আমরা মেনু বানিয়েছি আর মেনুর background এ সুন্দর একটি ছবি দিয়েছি । তারপর contents এর জন্য ২ টা div নিয়েছি । আর সবশেষে footer দিয়ে সাইট শেষ। ।
আমি এখানে <div id=”left_contents”> এই div এর মধ্যে একটি মোবাইল এর ছবি দিয়েছি । এবং <div id=”right_contents”> এই div এ Mozilla এর একটি সুন্দর ছবি বসিয়ে দিয়েছি ।
আপমি যখন পেজ ডিজাইন করবেন তখন যা যা দরকার টা টা বামে ডানে দিয়ে নিবেন । তারপর margin , padding , color , background ইত্যাদি দিয়ে পেজ টাকে সাজিয়ে তুলবেন । আশা করি বুঝতে পেরেছেন । আপনাদের সুবিধার জন্য এর সবগুলো কোড সহ ফাইল টি জিপ করে দিয়ে দিচ্ছি । আপনার ইচ্ছামত ডাউনলোড করে নিন ।
Download Link
তো আসুন কিভাবে এটি আমরা বানাতে পারি ।প্রথমেই আপনার নতুন এইচটিএমএল ফাইল এ নিচের কোড টি পেস্ট করুন ।
<!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=UTF-8″ />
<title>Full Website</title>
<link rel=”stylesheet” type=”text/css” href=”style.css” />
</head>
<body>
<div id=”wrapper”>
<!–menu start –>
<ul id=”nav”>
<li><a href=”#”>Project</a></li>
<li><a href=”#”>Team</a></li>
<li><a href=”#”>Contact</a></li>
<li><a href=”#”>Download</a></li>
<li><a href=”#”>History</a></li>
</ul>
<!–menu end –>
<!–contents start –>
<div id=”contents”>
<div id=”left_contents”>
<img src=”images/mobile.png” width=”241″ height=”247″ /></div>
<div id=”right_contents”><img src=”images/Computer-wallpaper.jpg” width=”550″ height=”400″ /></div>
</div>
<!–contents end–>
<!– END page-wrap –>
<div id=”footer”>
<p>© 2011 Bangla Web . All Right Reserved.<p>
</div>
</div>
</body>
</html>
এর সিএসএস কোড গুলো নিচের দেওয়া হল ।
* {
margin: 0;
padding: 0;
}
body {
font-size: 62.5%;
font-family: Helvetica, sans-serif;
}
div#wrapper {
width:800px;
margin: 0 auto;
}
/*This is for menu code start*/
ul#nav {
height: 198px;
background: url(images/header-bg.jpg) no-repeat;
list-style: none;
padding-left: 125px;
}
ul#nav li {
display: inline;
font-size: 1.3em;
}
ul#nav li a {
display: block;
width: 113px;
float: left;
margin-top: 168px;
color: white;
padding-top: 2px;
font-weight: bold;
text-decoration: none;
}
ul#nav li a:hover, ul#nav li a:active {
color: yellow;
}
/*This is for menu code end*/
/*Start ocntents*/
#contents{
width:800px;
height:400px;
}
#left_contents{
width:250px;
height:380px;
padding:20px 0 0 0;
float:left;
background-color:#6a0000;
}
#right_contents{
width:550px;
height:400px;
float:right;
background-color:#e49b14;
}
/*End ocntents*/
#footer{
width:800px;
height:80px;
font-size:14px;
color:#fff;
text-align:center;
padding:30px 0 0 0;
background-color:#49453c;
}
এখানে সিএসএস কোড গুলো অন্য ফাইল এ লিখে এইচটিএমএল পেজ এর সাথে লিংক করে দেওয়া হয়েছে । লিংক করার কোড টি হল
<link rel=”stylesheet” type=”text/css” href=”style.css” />
আপনি ইচ্ছা করলে বাইরের ফাইল এ লিখে লিংক করে দিতে পারেন অথবা এইচটিএমএল ফাইল এই লিখতে পারেন ।
এটি অতি সাধারন একটি ওয়েবসাইট । অল্পতেই আপনি নুঝতে পারবেন ।
এখানে দেখুন <div id=”wrapper”> নামে যে div টা ব্যবহার করেছি সেটির মধ্যেই বাকি গুলো রয়েছে । প্রথমে আমরা মেনু বানিয়েছি আর মেনুর background এ সুন্দর একটি ছবি দিয়েছি । তারপর contents এর জন্য ২ টা div নিয়েছি । আর সবশেষে footer দিয়ে সাইট শেষ। ।
আমি এখানে <div id=”left_contents”> এই div এর মধ্যে একটি মোবাইল এর ছবি দিয়েছি । এবং <div id=”right_contents”> এই div এ Mozilla এর একটি সুন্দর ছবি বসিয়ে দিয়েছি ।
আপমি যখন পেজ ডিজাইন করবেন তখন যা যা দরকার টা টা বামে ডানে দিয়ে নিবেন । তারপর margin , padding , color , background ইত্যাদি দিয়ে পেজ টাকে সাজিয়ে তুলবেন । আশা করি বুঝতে পেরেছেন । আপনাদের সুবিধার জন্য এর সবগুলো কোড সহ ফাইল টি জিপ করে দিয়ে দিচ্ছি । আপনার ইচ্ছামত ডাউনলোড করে নিন ।
Download Link
No comments:
Post a Comment