আশাকরি ভাল আছেন। আজ আমাদের ওয়েবসাইটটি সম্পূর্ণ করবো । প্রথমে আমরা সোর্স ফাইল গুলো ডাউনলোড করে নিই যা আমরা গত পর্বে শেষ করেছিলাম । আমরা বিগত পর্বে যেখানে শেষ করেছিলাম সেখান থেকে শুরু করবো। যারা এই পোস্টে নতুন তারা প্রথম পোস্ট থেকে শুরু করুন ।
তৈরি করুন একটি সাধারণ ওয়েব সাইট [পর্ব-০১] :: প্রাথমিক ধারণা
তৈরি করুন একটি সাধারণ ওয়েব সাইট [পর্ব-০২]
তৈরি করুন একটি সাধারণ ওয়েব সাইট [পর্ব-০৩] :: CSS

http://www.mediafire.com/download/95odbplkz40s01a/background.jpg
http://www.mediafire.com/download/qlc4r7hik8tbrw4/index.html

অনেক অলসতার কারনে পোস্ট লেখা হয় নি। আশা করি ক্ষমা করবেন।

প্রথমে একটি ফোল্ডার তৈরি করি। তারপর ডাউনলোড করা ফাইল গুলো কপি করে ওই ফোল্ডারে পেস্ট করুন। এবার index.html ফাইলটি ডবল ক্লিক করে যে কোন একটি ব্রাউজার এ ওপেন করুন ।
এবার সাইটটি ভাল ভাবে লক্ষ করুন। আমাদের p tag এ থাকা পারাগ্রাফ সম্পূর্ণ ব্রউজার জুড়ে। আমরা এই সমস্যার সমাধান করবো । আর এটা করতে আমরা div tag এর সাহায্য নিব। আপনি টেবিল ব্যবহার করে এটা করতে পারেন ।
div tag এর মধ্যে আমরা Hello থেকে শুরু করে ...... এখানে ক্লিক করুন। পর্যন্ত div tag
শুরু হবে h2 এর পর থেকে আর শেষ হবে footer এর আগে । আশাকরি নিচের ছবি টা দেখলে বুঝতে পারবেন।

আবার footer কে অন্য একটি div এর মধ্যে রাখি যার id = footerdiv ।

এবার আমরা এদের সিএসএস তৈরি করবো । আপনার প্রতি আমার উপদেশ হল প্রতি লাইন কোড লিখার পর সেভ করে ফেলা এবং তার ব্রউজার এ প্রিভিউ দেখে নেওয়া । এতে করে আপনি প্রতিটি কোড এর হেতু ভাল মত বুঝতে পারবেন। 😛
প্রথম div যেটার আইডি মেইন কন্টেন্ট সেটা ডিজাইন করবো । এই কোড গুলো এর উপরে থাকবে ।

#mainContent{
left: 15% ;

/* এটি শুরু হবে আপনার ব্রওসার উইন্ডোর বাম পাশের ১৫% পর থেকে, আপনি ডিফল্ট পিক্সেল ব্যবহার করতে পারেন । */

top:125px;

/* উপর থেকে ১২৫ পিকজেল পর থেকে */

hight: 379px;

/*div বক্স এর উচ্চতা */

width: 70%

/* div বক্স এর বিস্তৃতি হবে আপনার ব্রওসার উইন্ডোর বাম পাশের ৭০% পর্যন্ত। অর্থাৎ ১৫% থেকে শুরু করে ৭০% পর্যন্ত। ৫৫% */

background-color: rgba(0,0,0,0.51);

/* box টি ট্রান্সপারেন্ট করার জন্য rgba color ব্যবহার করা হয়েছে। আপনি যে কোন কালার কোড ব্যবহার করতে পারেন ।যেমনঃ green,blue………… */

padding:15px;

/*যা div বক্সের ভিতর থেকে ১৫px padding রাখা হল । */

position: absolute;

/* div বক্স এর পজিশন absolute করা হল । আপনি fixed, relative ইত্যাদি ব্যবহার করতে পারেন । যেহেতু আমাদের পেজটি ডায়নামিক নয় সেহেতু আমরা absolute ব্যবহার করবো । */

}
/*ব্রাকেট বন্ধ করতে ভুইলেন না । */

এখন ফাইল টি সেভ করে ব্রওসার এ প্রিভিউ দিন । বাহ ! সুন্দর তো ।

একটি সমস্যা কিন্ত থেকেই গেল “এই সাইটটি ডিজাইন করেছেন © খেয়েলি টিউনার ” এই লেখা টি যায়গা মত নেই । এবার এটা ঠিক করবো । যেহেতু এ রকম লেখা গুলো সাইটের সব চেয়ে নেচে ভাল মানায় তাই আমরা এই লেখা টি কে নিচে রাখব।
এবার footerdiv এর সিএসএস ঠিক করা হবে ।

#footardiv{
position: absolute;
left: 15%;
width: 70%;

/* বক্সের left and width একই রাখা হল যাতে করে এই বক্সটি ও উপরের বক্সটি একি সরল রেখায় থাকে। */

top: 625px;

/* এই বক্স এর অবস্থান উপর থেকে ৬২৫px দেওয়া হল । আপনি অন্য যে কোন ভেলু দিতে পারেন। তবে তা যদি ৫০০px এর কম হয় তা হলে এটি উপরের div এর মাঝে ঢুকে যাবে । */

height: 60px;

/* box hight 60px নিলাম । কারন এটিতে মাত্র একটি লাইন থাকবে । */

text-align: center;

/*ডিজাইন টি সুন্দর করতে এই বক্সের সব টেক্সট আলাইন সেন্টার বা মধ্যে করা হল । মনে রাখবেন এটা আমাদের তৈরি ২য় div এর মধ্যে থাকবে । ব্রউজার এর নয়। */

}
/*ব্রাকেট বন্ধ করতে ভুইলেন না । */

নিচের ছবিটি মিলিয়ে নেই।

পুর সাইট টি ডাউনলোড করতে এখানে ক্লিক করুন। ফাইলটি আনযিপ করে নিতে হবে ।

আমাকে ফেসবুকে পেতে ক্লিক করুন এই লিঙ্কে ।