আজ আমরা ওয়েবসাইট টির ব্যাকগ্রাউন্ড পিকচার সেট করব । আর সাইটটিতে সিএসএস নিয়ে কিছু কাজ করব । বাকগ্রাউন্ড পিকচার কি?? সেটা আমায় জিগাইলে লাভ নাই ,কমু না।
আসেন আসল পোস্টে । আমাদের সাথে যারা নতুন তারা পূর্বের পোষ্ট গুলো পড়ে নিন। আমাদের পোস্টের গত পর্বে শিখেছিলাম কিভাবে Html ফাইল ও Css ফাইল তৈরি করা হয় । আজ আমরা প্রথমে আমাদের HTML এর CSS অ্যাড করা হয় । আমরা External style sheet এর মাধমে css অ্যাড করব, কিন্তু আমরা প্রথমে Internal style sheet তৈরি করব । my_first_site.html এর উপর রাইট ক্লিক করে Open With থেকে Notepad দিয়ে আমাদের পূর্বে তৈরি my_first_site.html ফাইলটি ওপেন করুন । সাইটটিতে সিএসএস রুল অ্যাড করার আগে আমাদের তৈরি সাইটটি (my_first_site.html) যে কোন ইন্টারনেট ব্রউজার এর মাধ্যমে ওপেন করুন । এবং সাইটটি তে কি কি স্টাইল করা যায় ভাবে নিন ।

যেমনঃ

• হেডিং ওয়ান (h1) ও হেডিং টু (h2) এর অবস্থান বাম পাসে না হয়ে মধ্যে হলে ভাল হয়। আবার এদের ভিন্ন রং হলে ভাল হয় ।
• একটা বাচগ্রউন্ড পিকচার দরকার ।
• প্যারাগ্রাফ(p) ট্যাগ এর লেখাগুলো বাউজারের এই প্রান্ত থেকে ওই প্রান্ত বিস্তীর্ণ না হয়ে একটা সীমার মাঝে রাখলে সাইটটি সুন্দর হবে।

তো এবার, আমরা ধাপে ধাপে কাজ শুরু করি । দেখি কি হয় । নিচের ছবিটা লক্ষ্য করুন ।

কিছু বুঝলেন?
গত পোস্টে আমরা শিখে ছিলাম কিভাবে কোন পোস্টে লিঙ্ক সংযুক্ত করা হয়। আজ শিখব কিভাবে আমরা css rule অ্যাড করব । আমরা জানি আমারা ৪ টি উপায়ে css rule অ্যাড করতে পারি।
প্রথমে হেডিং ওয়ান (h1) নিয়ে কাজ করব। মানে হেডিং ওয়ান (h1) জন্য একটি নতুন css rule তৈরি করতে হবে , যেটি ব্রাউজার ডিফল্ট css এর বদলে কাজ করবে । হুম !

আসেন আমরা জেনে নেই কিভাবে css rule তৈরি করব যা head মাঝে এবং style ট্যাগ এর মাঝে এর মাঝে লিখতে হবে। এবং যেহেতু h1 এর জন্য তাই h1{} এর মাঝে হেডিং ওয়ান (h1) এর জন্য css rule অ্যাড করব । আর css অ্যাড করার সাধারণ সুত্র হলঃ style-name: value ;

 
h1 {
	font-size: 32px;  /* style-name= font-size এবং value = ৩২  */

	color: red; /* h1 এর রঙ লাল। এক্ষেত্রে আপনি  white, yallow,black,green,blue etc ব্যবহার করতে পারেন বা color code ব্যবহার করতে পারেন। */

	text-align: center; /* যেহেতু আমরা h1 মধ্যে চাই সেহেতু center ব্যবহার করলাম আপনি left , right বা noneব্যবহার করতে পারেন ।  */

} 

সমস্যায় পড়লে নিচের ছবিটা লক্ষ্য করুন । মনে রাখবেন এই সিএসএস রুল শুধু মাত্র h1 এর জন্য ।

ব্যাস হেডিং ওয়ান (h1) এর জন্য css rule অ্যাড করা শেষ ।

এবার হেডিং টু (h২) এর জন্য css rule অ্যাড করব ।

h2 {
font-size: 28px; /* style-name= font-size এবং value = 28 */
color: gray; /* h2 এর কালার লাল। এক্ষেত্রে আপনি white, yallow,black,green,blue etc ব্যবহার করতে পারেন বা color code ব্যবহার করতে পারেন। */
text-align: center; /* যেহেতু আমরা h2 মধ্যে চাই সেহেতু center ব্যবহার করলাম আপনি left , right বা noneব্যবহার করতে পারেন । */
}

এবার আমরা বাকগ্রাউন্ড ইমেজ / কালার অ্যাড

বাকগ্রাউন্ড পিকচার হল একটা ছবি যা পিছে থাকে 😉 ।
কার পিছে?
-ভাল, সবার পিছে। ওইটা বাদ দেন । আহেন শিক্ষা লই । তারপর নিজেই পারবে কইতে বাকগ্রাউন্ড পিকচার কি।
বাকগ্রাউন্ড পিকচার অ্যাড আমরা দুটি উপায়ে করতে পারি।

• সিএসএস এর অংশ হিসেবে।
• এইচটিএমএল এর অংশ হিসেবে।

এক্ষেত্রে আমরা সিএসএস এর অংশ হিসেবে। বাকগ্রাউন্ড ইমেজ অ্যাড করব । প্রথমে যে ছবিটা বাকগ্রাউন্ড পিকচার হিসেবে অ্যাড করব সেটা আমাদের সাইট ফাইল এ কপি করি ।
আমি যে ছবিটা ব্যবহার করব সেটা এই লিঙ্ক থেকে নামিয়ে নিতে পারেন । আপনি আপনার পছন্দ মত বাকগ্রাউন্ড ইমেজ বা কালার দিতে পারেন ।সেক্ষেত্রে ইমেজ আমরা জানি background-image এটি বডি এর অংশ । কারন এটি দৃশ্যমান।


হে হে ! আমারে বোকা পাইছেন । দৃশ্যমান হইলেই যদি বডি ট্যাগ এর অংশ হয় তা হলে হেডিং ওয়ান (h1) ও হেডিং টু (h2) কি বডির অংশ না । এই প্রশ্নের উত্তরে খেয়ালি টিউনার কি কইবো?
এইটা সত্য হেডিং ওয়ান (h1) ও হেডিং টু (h2) বডির অংশ । আসেন আর একটু গভিরে যাই । মনে করেন একটা স্কুলের সব কক্ষ গুলো স্কুলের বডি । কিন্তু ধরেন হেডিং ওয়ান (h1) প্রধান শিক্ষক এর কক্ষ আর হেডিং টু (h2) সহকারি শিক্ষকের কক্ষ । এখন প্রধান শিক্ষক এর কক্ষ বা সহকারি শিক্ষকের কক্ষে আলাদা ডিজাইন করলেও তা স্কুলেটির বডি ।

আমাদের ওয়েবসাইটের বাকগ্রাউন্ড ইমেজ অ্যাড করতে হলে body ট্যাগ এর জন্য একটি নতুন css rule তৈরি করতে হবে , যার ফলে ব্রাউজার ডিফল্ট css এর বদলে নতুন css rule টি করবে । হুম !

body{
} 
 


body লিখে এর মাঝে {} দ্বিতীয় বন্ধনীর মাঝে body tag এর জন্য সিএসএস অ্যাড করব । 
 নিচের কোডটি অনুসরন করুন -
 background-image: url (আপনার প্রিয় ইমেজ এর লিঙ্ক); 

এই কোডটি {} দ্বিতীয় বন্ধনীর মাঝে পেস্ট করুন । যেহেতু যে ছবি টা আমরা অ্যাড করব সেটা আমাদের সাইট ফোল্ডারে আছে তাই আমাদের সরাসরি ইমেজ পিকচার এর নাম লিখে দিলেই চলবে ।

 background-image: url(background.jpg); 

তো এবার ফাইলটি সেভ করুন। তারপর যে কোন ইন্টারনেট ব্রউজার এর মাধ্যমে ওপেন করুন । দেখুন কাজ করে কিনা ।
হুম ! আরও অনেক কাজ বাকি । দ্বিতীয় বন্ধনীর মাঝে body tag এর জন্য আরও কিছু সিএসএস অ্যাড করব ।

এবার সম্পূর্ণ পেজ টি সেভ করুন । আর ব্রাউজারে ওপেন করে দেখে নিন কেমন হল সাইটটি । সবকিছু ভালই শুধু h2 আর প্যারাগ্রাফ গুলো ঠিক মত পড়া যাচ্ছে না । তা হলে কি করা যায়?
ভাবুন ??
এক উপায় আছে ব্যাকগ্রাওন্ড ইমেজ টা চেঞ্জ করে নতুন একটা দেই । নাহ এক কাজ করি css text effect দিয়ে কিছু করা যায় কি চেষ্টা করে দেখি। text-shadow দিলে কেমন হয় । তাহলে আমাদের h2 এর সমস্যাটা কেটে যাবে । আবার চমৎকার এফেক্ট ও আসবে । সাধারণ সুত্র =

 text-shadow:  ডানদিকেরছায়া  বামদিকেরছায়া   colour ; 

যেমনঃ

 text-shadow: 1px 1px blue;  

উপরের কোড টি আমরা h2{ } মধ্যে লিখব। দয়াকরে শেষের ; চিহ্ন দিতে ভুলবেন না ।
এবার আসুন বডি অংশে ।

 

body {
	font-family: "Times New Roman", Times, serif;
	 /* front হিসেবে আমি Times New Roman", Times, serif এই তিনটি ফ্রন্ট সেট করলাম , আপনি একটা ব্যবহার করতে পারেন।  */
	font-size: 18px; 
	color: white; /* রঙ সাদা দিলাম । যেহেতু আমাদের  ব্যাকগ্রাউন্ড ইমেজ গ্রে রঙের । আপনি কালো রঙ ব্যবহার করতে পারেন ।   */ 
	background-color:black; /* যদি কোন কারনে ব্যাকগ্রাউন্ড ইমেজ কাজ না করে */ 
	background-repeat: no-repeat; /* যেহেতু আমরা ব্যাকগ্রাউন্ড ইমেজ একবার দেখতে চাই বার বার নয় */ 
	background-image: url(background.jpg);	
} 

ভাই আজ এর পারমু না । আজ জাই গা । নেক্সট পোষ্টটা যারা শিখতে চান তারা div আর table নিয়ে কিছু সময় দিন ।
HTML div tag

HTML table tag

এই পোস্টের শেষের ফাইল টি ডাউনলোড করতে এখানে ক্লিক করুন । আর কোন প্রস্ন থাকলে ফেসবুকে যোগাযোগ করুন Click Here ।