ধাপ
৩
লেআউট HTML দিয়ে বানানো হয়, কিন্তু HTML দিয়ে কোনো ডিজাইন করা যায় না! ডিজাইন করতে আমাদের লাগবে CSS! আমরা Brackets দিয়ে এখন CSS ফাইল তৈরি করব।
CSS ফাইল তৈরি করতে নিচের ধাপ গুলো অনুসরণ করুনঃ
এই "style.css" হলে আমাদের CSS ফাইল।
এখন Brackets এ দেখুন প্রোজেক্ট ফোল্ডার অংশে style.css ফাইলটি দেখাচ্ছে। এখন index.html এ ক্লিক করে <head> অংশে নিচের কোডটুকু লিখুন।
<link rel="stylesheet" type="text/css" href="style.css">এখানে <link> ট্যাগ দিয়ে style.css ফাইলকে HTML ডকুমেন্টে যুক্ত করা হয়েছে। এখন আমরা style.css ফাইলে কোনো রুল/নিয়ম লিখলে তা HTML ডকুমেন্টটিতে কাজ করবে।
তো এবার ডিজাইনের জন্য রুল লিখা যাক!
Brackets এ বাম থেকে এবার style.css এ ক্লিক করুন। তাহলে CSS ফাইলটি চালু হবে। এবার আমরা সব কোড এটাতে লিখব।
ব্রাউজারের ডিফল্ট কিছু স্টাইল আগে থেকে দেয়া থাকে। যা আমাদের স্টাইলে করার সময় সমস্যা করতে পারে। তাই আমরা শুরুতে নিচের কোডটি লিখব।
body {
margin: 0;
padding: 0;
border: 0;
}এখানে margin, padding এবং border এর মান শূন্য করে দেয়া হয়েছে, এ রুলটি <body> ট্যাগের ভিতর যত ট্যাগ আছে সবার জন্য প্রযোজ্য। যদি কোনো ট্যাগে এগুলোর মান নির্দিষ্ট করা না থেকে তাহলে এ রুলের নিয়ম গুলো প্রয়োগ হবে।
Header অংশে আমাদের দুটো অংশ ছিলঃ লোগো এবং মেনু।
আমরা লোগোর জন্য <div> ট্যাগ ব্যবহার করেছিলাম, এবং ট্যাগের সাথে logo ক্লাসও ব্যবহার করেছিলাম।
এখানে দুটো এলিমেন্ট ছিল, <h1> এবং <img> এলিমেন্ট। <h1> এলিমেন্টের জন্য আমরা নিচের রুলটি লিখবঃ
div.logo h1 {
position: absolute;
top: -2000px;
}div.logo h1 মানে হল logo ক্লাস যুক্ত <div> ট্যাগের ভিতর যেসব <h1> ট্যাগ আছে সেগুলোতে রুলসমূহ প্রয়োগ হবে।
position: absolute; দিয়ে বুঝানো হল যে এলিমেন্টটির অবস্থান হবে সম্পূর্ণ আলাদা। অর্থাৎ এর অবস্থান নির্দিষ্ট করে দেয়া হবে, এবং এর অবস্থান সাইটের যে কোন যায়গাতে হতে পারে।
top: -2000px; দিয়ে বলা হল এর অবস্থান হবে ব্রাউজারের উপর/শুরু থেকে ২০০০পিক্সেল উপরে! মানে কি! মানে হল আমরা টাইটালটাকে লুকিয়ে ফেললাম। আমরা আমাদের সাইটে লোগো হিসেবে শুধু একটা ছবি দেব, কিন্তু SEO এর জন্য প্রত্যেক পাতায় <h1> ট্যাগ ব্যবহার করে ঐ পাতার টাইটেল দেয়া দরকার হয়। তাই আমরাও টাইটেল দিলাম এবং তা হাইড করে দিলাম। সার্চইঞ্জিন HTML ডকুমেন্ট পড়তে পারে, কিন্তু CSS পড়তে পারেনা, তাই টাইটেলটি আমরা ব্রাউজারে দেখতে না পেলেও সার্চইঞ্জিন ঠিকি দেখতে পাবে এবং পড়তে পারবে।
এবার লোগো ছবিটির জন্য নিচের কোড লিখতে হবে।
div.logo img {
width: 600px;
height: 160px;
}div.logo img মানে হল logo ক্লাস যুক্ত <div> ট্যাগের ভিতর যেসব <img> ট্যাগ আছে সেগুলোতে রুলসমূহ প্রয়োগ হবে।
width: 600px; আমাদের ছবিটির width হল ৬০০ পিক্সেল, তাই এখানে 600px ব্যবহার করা হয়েছে।
height: 160px; একইভাবে ছবিটির height ১৬০ পিক্সেল দেখাতে বলা হয়েছে।
এ অবস্থায় দেখা যাবে ছবিটি বাম পাশে চলে গিয়েছে। একে মাঝখানে আনতে নিচের কোড টুকু লিখুন।
div.logo {
text-align: center;
}text-align: center; দিয়ে শুধু "লেখা" নয় "ছবি" সহ প্রায় সব এলিমেন্টকেই মাঝখানে আনা যায়। এখানেও তাই করা হল।
CSS এর যে অংশ/রুল গুলো এতক্ষন বর্ণনা করা হল সেগুলো নিচে আর বর্ণনা করা হয়নি। শুধু নতুন বিষয় গুলো বর্ণনা করা হয়েছে।
মেনু বারের জন্য নিচের কোডটুকু লিখুনঃ
nav ul {
margin: 0;
list-style: none;
width: 100%;
margin-left: -40px;
}
nav li {
padding: 5px 0;
float: left;
width: 50%;
text-align: center;
font-size: 21px;
border-top: 2px solid #aaa;
border-bottom: 2px solid #aaa;
}list-style: none; লিস্ট এর সকল বৈশিষ্ট্য none (না) করে দেয়া হল।
কিন্তু তারপরও দেখা যাচ্ছে মেনু বাম পাশে কিছু যায়গা ব্লক করে রেখেছে। হিসাব করে দেখা যাচ্ছে যে ৪০ পিক্সেল পরিমান যায়গা এটি ব্লক করেছে! তাই এই কোডটি দেয়া হয়েছেঃ margin-left: -40px;
float: left; প্রতিটি মেনু আইটেমকে <li> ট্যাগে রাখা হয়েছে। তাদেরকে একের পর এক পাশাপাশি রাখার জন্য float প্রোপার্টি ব্যবহার করা হয়েছে। অর্থাৎ এ প্রোপার্ট দিয়ে তাদের বাম পাশে একের পর এক স্থান দখল করতে বলা হয়েছে।
বাকি মান গুলো আশা করি বুঝেছেন। মান গুলো পরিবর্তন করে লাইভ প্রিভিউ উইন্ডোতে দেখুন এবং শিখুন।
এবার মেনু একটু সুন্দর করার জন্য নিচের কোড টুকু লিখুনঃ
nav li:hover {
background-color: #eee;
}
nav li:active {
background-color: #ddd;
}:hover সুডো এলিমেন্টটি, কোনো এলিমেন্টের উপর মাউস কার্সর রাখাকে বুঝানো হয়; অর্থাৎ li:hover এ যে কোড লিখা হবে তা <li> এলিমেন্টের উপর মাউস কার্সর নিয়ে গেলেই কাজ করবে।
:active সুডো এলিমেন্টটি কোনো এলিমেন্টকে ক্লিক করা নির্দেশ করে। অর্থাৎ li:active এ যে কোড লিখা হয়েছে সেগুলো শুধু <li> এলিমেন্টে ক্লিক করা অবস্থায় প্রকাশ পাবে।
আমাদের artical অংশের জন্য নিচের কোড লিখতে হবে।
artical {
float: left;
width: 70%;
}আমাদের ওয়েব সাইটে artical এবং aside (সাইড বার) পাশাপাশি থাকবে। ধরে নিলাম artical ৭০ভাগ যায়গা এবং aside বাকী ৩০ভাগ যায়গা জুড়ে থাকবে।
width: 70%; দিয়ে artical এর width মোট প্রস্থের ৭০ভাগ দখল করতে বলা হয়েছে।
আমরা জানি block এলিমেন্ট যেখানে থাকে সেখানের সম্পূর্ণ width (বাম এবং ডান অংশ) দখল করে থাকে। এ সমস্যা সমাধানের জন্য আমরা একে float প্রোপার্টি দিয়ে বাম পাশে থাকতে বলে দিয়েছি।
এবার section অংশ গুলোর জন্য নিচের কোড লিখি।
section {
padding: 10px;
}এখানে শুধু সৌন্দর্য বর্ধনের জন্য প্যাডিং ১০ পিক্সেল করা হয়েছে। ফলে পোষ্ট সমূহের চার দিকে ১০ পিক্সেল করে ফাঁকা স্থান তৈরি হবে।
Aside অংশের জন্য নিচের কোড টুকু লিখি।
aside {
float: left;
width: 30%;
}আগেই বলেছিলাম aside এর জন্য ৩০% width বরাদ্দ, তাই এখানে width:30%; ব্যবহার করা হয়েছে। একই ভাবে float প্রোপার্টি ব্যবহার করে পাশাপাশি রাখ হয়েছে।
Footer এর জন্য নিচের কোড টুকু লিখতে হবে।
footer {
clear: both;
padding: 5px;
text-align: center;
background-color: #eee;
}এখানে দেখা যাবে aside এর সাথে footer-ও artical এর পাশে চলে গিয়েছে। এ সমস্যা সমাধানের জন্য এখানে clear: both; ব্যবহার করা হয়েছে। যার অর্থ হল এলিমেন্টের বাম ও ডান ফাঁকা কর! দুই পাশ ফাঁকা করা মানে আলাদা একটি যায়গা একে বেছে নিতে হবে, যার দুই দিকে কিছু নেই। তাই এটি নিচে নেমে আসে এবং বাম-ডান দখল করে নেয়।
আমাদের সাইটের কাঠামো সাজানোর কাজ শেষ হল।
তো এ অবস্থায় নিচের লিঙ্কে ক্লিক করে প্রিভিউ দেখে আসুনঃ
কি ওয়েব সাইটের মত লাগছে? এবার কিছু কারুকার্য করা দরকার ওয়েবপেজের সৌন্দর্য বাড়ানোর জন্য।