>>> ওয়েবপেজ তৈরি – পর্ব -২

গত লেসন এ আমরা দেখেসিলাম কিভাবে একটি ওয়েবপেজ এর লেআউট তৈরি করতে হয় এবং আমরা তৈরি করেও ছিলাম । এবার আসুন আমরা সেই লেআউট এ কিভাবে কোন কিছু ঢুকাতে হয় টা দেখব ।
সর্বপ্রথম <div id=”header”></div>আর মধ্যে আপনি  Welcome To Bangla Web লিখে  দিন । নিচের মত ।
<div id=”header”>Welcome To Bangla Web</div>
এবার রান করলে আপনি আমাদের ডিজাইন করা ওয়েবপেজ এর  header এ  Welcome To Bangla Web লেখাটি দেখতে পাবেন । কিন্তু এই লেখাটি
header এর center এ নাই বরং নামে চেপে আছে। এটি center এ আনতে হলে সিএসএস এর ছোট্ট এই কোড   text-align:center; এটি আপনার header   এর সিএসএস এর মধ্যে পেস্ট করে দিন । এবার রান করলে দেখবেন যে Welcome To Bangla Web লেখাটি  header  এর মাঝখানে চলে গেছে । এবার আপনি চান যে এটির  রং  একটি নতুন রং হোক তাহলে সিএসএস এর এই চদ টি দিয়ে দিন ।   color:#FFFFFF; দেখুন পুরা কোড টি ।
#header{
width:950px;
height:100px;
float:left;
background-color:#003300;
text-align:center;
color:#FFFFFF;
}
এখন রান করলে দেখবেন যে  Welcome To Bangla Web লেখাটি  header এর মাঝখানে সাদা রং এর হয়ে কি সুন্দর দেখাচ্ছে । এবার লেখাটিকে যদি আপনি বড় করতে চান তাহলে সিএসএস এর এই কোড টি দিয়ে দিন । font-size:24px; পুরা কোড টি এরকম।
#header{
width:950px;
height:100px;
float:left;
background-color:#003300;
text-align:center;
color:#FFFFFF;
font-size:24px;
}
এখন  রান  করলে  Welcome To Bangla Web অনেক বড় দেখতে পাবেন ।
এবার দেখুন যে  Welcome To Bangla Web লেখাটি header উপরের সাথে লেগে আছে এটি নিচে আনার জন্য   padding-top:20px; দিয়ে দিন তাহলে header নিচে আসবেনা কিন্তু Welcome To Bangla Web লেখাটি ২০ পিক্সেল নিচে চলে আসবে । আমরা আগেই বলে সিলাম padding-top:20px; দিলে height ২০ পিক্সেল কমাতে হবে ।
আশা করি বুঝতে পেরেছেন ।

এবার আসুন কিভাবে মেনু বানাতে হয় । আমরা আগেই মেনু তৈরি শিখেছি তাই এখন আর আলোচনা করছিনা । সেই  কোড টি <div id=”menu”></div> এর মধ্যে পেস্ট করুন ।

এবার রান করলেই দেখাতে পাবেন সুন্দর  একটি মেনু ।
এবার আসুন <div id=”contents”></div> এর মধ্যে কিছু লিখি । <div id=”contents”></div> এর ভিতরে নিচের এই কোড টি লিকে দিন ।
<h1>Welcome To Bangla Web</h1>
<p>At Bangla Web you will learn how to make a website. We offer free tutorials in all web development technologies totally in bangla.Select a tutorial from the menu to the left.Learn and earn money from home.At Bangla Web you will learn how to make a website. We offer free tutorials in all web development technologies totally in bangla.Select a tutorial from the menu to the left.Learn and earn money from home.At Bangla Web you will learn how to make a website. We offer free tutorials in all web development technologies totally in bangla.Select a tutorial from the menu to the left.Learn and earn money from home.At Bangla Web you will learn how to make a website. We offer free tutorials in all web development technologies totally in bangla.Select a tutorial from the menu to the left.Learn and earn money from home. </p>
<p>At Bangla Web you will learn how to make a website. We offer free tutorials in all web development technologies totally in bangla.Select a tutorial from the menu to the left.Learn and earn money from home.At Bangla Web you will learn how to make a website. We offer free tutorials in all web development technologies totally in bangla.Select a tutorial from the menu to the left.Learn and earn money from home.At Bangla Web you will learn how to make a website. We offer free tutorials in all web development technologies totally in bangla.Select a tutorial from the menu to the left.Learn and earn money from home.At Bangla Web you will learn how to make a website. We offer free tutorials in all web development technologies totally in bangla.Select a tutorial from the menu to the left.Learn and earn money from home. </p>
এবার আসুন  footer এর মধ্যে কিছু লিখে দিই । নিচের কোড টি দিয়ে দিন ।
<div id=”footer”>  Home | About us | Services | Members | Download | Contact </div>
এবার সবশেষে রান করলেই দেখতে পাবেন সুন্দর একটি ওয়েবপেজ ।