আপনি ইংরেজিতে খুব বেশি দক্ষ নন , আপনার
লেখাপড়া টেকনোলজি ভিত্তিক নয়; কিন্তু আপনি ওয়েব ডেভল্পমেন্ট শিখতে আগ্রহী।
কারণ বর্তমানে ওয়েব ডেভল্পমেন্ট শিখে ফ্রিল্যান্সিং করে এবং ব্যাক্তিগতভাবে
বিভিন্ন ধরণের প্রজেক্টে কাজ করে ভাল ক্যারিয়ার গড়া সম্ভব। ওয়েবে ওয়েব
ডেভলপমেন্ট এর উপর অনেক ভাল ভাল টিউটোরিয়াল থাকলেও আপনি সর্বোচ্চ সুবিধা
নিতে পারছেন না।
শেখার কোন ভাল উৎস পাচ্ছেনা তাই আপনি কি হতাস?। আপনার আগ্রহকে আমরা
শ্রদ্ধা করি, আমরা আপনার সেবার জন্যই কাজ করে যাচ্ছি। টিউটোহোস্ট আপনাদের
মত নতুন আগ্রহীদের জন্য সহজ বাংলা ভাষায় মানসম্মত প্রজেক্টভিত্তিক
টিউটোরিয়াল এবং ই-বুক প্রকাশের উদ্দগ নিয়েছে। ইতোমধ্যেই HTML এবং
WordPress এর উপর ই-বুক প্রকাশিত হয়েছে । ই- বুক সমূহ এখান থেকে ডাউনলোড করুন।
পি এইচ পি , জাভাস্ক্রিপ্ট, জে কোয়েরি, জুমলা, এইচ টি এম এল ৫, সি এস এস ৩
এর মত এডভান্স বিষয়ের উপর বাংলাভাষায় সহজ টিউটোরিয়াল তৈরির জন্য টিউটো
হোস্টের প্রোগ্রামারগণ কাজ করে যাচ্ছে। সি এস এস এর উপর টিউটোরিয়াল তৈরি
সুসম্পন্ন হয়েছে এবং ই-বুক তৈরির কাজ চলছে। আজ আপনাদের জন্য সি এস এস এর
ইনডেক্স প্রকাশ করলাম। এতে একটি পূর্ণাঙ্গ নেভিগেশন বার এবং একটি আকর্ষণীয়
ইমেজ গ্যালারী তৈরির প্রজেক্ট অন্তর্ভূক্ত রয়েছে।
শেখার কোন ভাল উৎস পাচ্ছেনা তাই আপনি কি হতাস?। আপনার আগ্রহকে আমরা
শ্রদ্ধা করি, আমরা আপনার সেবার জন্যই কাজ করে যাচ্ছি। টিউটোহোস্ট আপনাদের
মত নতুন আগ্রহীদের জন্য সহজ বাংলা ভাষায় মানসম্মত প্রজেক্টভিত্তিক
টিউটোরিয়াল এবং ই-বুক প্রকাশের উদ্দগ নিয়েছে। ইতোমধ্যেই HTML এবং
WordPress এর উপর ই-বুক প্রকাশিত হয়েছে । ই- বুক সমূহ এখান থেকে ডাউনলোড করুন।
পি এইচ পি , জাভাস্ক্রিপ্ট, জে কোয়েরি, জুমলা, এইচ টি এম এল ৫, সি এস এস ৩
এর মত এডভান্স বিষয়ের উপর বাংলাভাষায় সহজ টিউটোরিয়াল তৈরির জন্য টিউটো
হোস্টের প্রোগ্রামারগণ কাজ করে যাচ্ছে। সি এস এস এর উপর টিউটোরিয়াল তৈরি
সুসম্পন্ন হয়েছে এবং ই-বুক তৈরির কাজ চলছে। আজ আপনাদের জন্য সি এস এস এর
ইনডেক্স প্রকাশ করলাম। এতে একটি পূর্ণাঙ্গ নেভিগেশন বার এবং একটি আকর্ষণীয়
ইমেজ গ্যালারী তৈরির প্রজেক্ট অন্তর্ভূক্ত রয়েছে।
Cascading
Style Sheets এর সংক্ষিপ্ত রূপ হচ্ছে CSS । সহজ ভাষায় ওয়েব পেজের
বিভিন্ন উপাদানের গঠন, আকার, আকৃতি, অবস্থান, রং, গতিশীলতা ইত্যাদি
নির্ধারণের সহজ কৌশল হচ্ছে CSS ।
সিএসএস কেন প্রয়োজন?
একটা
সময় ছিল যখন শুধুমাত্র HTML দিয়েই একটি ওয়েব সাইটের ডিজাইন করা হত । সে
সময়ে ডিজাইন বলতে একটা ওয়েব পেজের বিভিন্ন ফন্ট এর কালার, সাইজ, টেবিলের
বিভিন্ন সেলের কালার, পুরো পৃষ্ঠার ব্যাকগ্রাউন্ড কালার, এবং প্রয়োজনীয়
ইমেজ সংযোজনকে বোঝানো হতো। এবং প্রতিটা পেজের প্রতিটা উপাদানের জন্যই আলাদা
আলাদাভাবে কালার, সাইজ নির্ধারণ করতে হতো। যা ছিল একটা জটিল প্রক্রিয়া,
এবং সময় সাপেক্ষ ব্যাপার । বর্তমানে যদি একটা ওয়েব সাইটে ১০০০ বা এর অধিক
একই ধরনের পেজ থাকে তাহলেও একটি মাত্র CSS স্ক্রিপ্ট ব্যবহার করে ডিজাইন
সম্পূর্ণ করা হয়।
সিএসএস ব্যবহার করে তৈরি একটি নেভিগেশন বার
সি এস এস এর সকল বাংলা টিউটোরিয়াল
--------------------------------------------------------------------------------------
সিএসএস কি?
Cascading Style Sheets এর সংক্ষিপ্ত রূপ হচ্ছে CSS । সহজ ভাষায় ওয়েব
পেজের বিভিন্ন উপাদানের গঠন, আকার, আকৃতি, অবস্থান, রং, গতিশীলতা ইত্যাদি
নির্ধারণের সহজ কৌশল হচ্ছে CSS ।
সিএসএস কেন প্রয়োজন?
একটা সময় ছিল যখন শুধুমাত্র HTML দিয়েই একটি ওয়েব সাইটের ডিজাইন করা হত ।
সে সময়ে ডিজাইন বলতে একটা ওয়েব পেজের বিভিন্ন ফন্ট এর কালার, সাইজ,
টেবিলের বিভিন্ন সেলের কালার, পুরো পৃষ্ঠার ব্যাকগ্রাউন্ড কালার, এবং
প্রয়োজনীয় ইমেজ সংযোজনকে বোঝানো হতো। এবং প্রতিটা পেজের প্রতিটা উপাদানের
জন্যই আলাদা আলাদাভাবে কালার, সাইজ নির্ধারণ করতে হতো। যা ছিল একটা জটিল
প্রক্রিয়া, এবং সময় সাপেক্ষ ব্যাপার । বর্তমানে যদি একটা ওয়েব সাইটে
১০০০ বা এর অধিক একই ধরনের পেজ থাকে তাহলেও একটি মাত্র CSS স্ক্রিপ্ট
ব্যবহার করে ডিজাইন সম্পূর্ণ করা হয়।
সিএসএস ব্যবহার করে তৈরি একটি নেভিগেশন বার
-----------------------------------------------------------------------------
সিলেক্টর
CSS এর মাধ্যমে HTML দ্বারা তৈরি করা ওয়েব পেজের বিভিন্ন অংশকে
নির্দিষ্ট করে গঠন, আকার, আকৃতি, অবস্থান, রং, গতিশীলতা ইত্যাদি নির্ধারণ
করা হয়। HTML দ্বারা তৈরি ওয়েব পেজের কোন অংশকে নির্দিষ্টভাবে চিহ্নিত
করার জন্য সিলেক্টর ব্যবহার করা হয়। CSS এ বেশ কয়েক ধরণের সিলেক্টর
ব্যবহার করা হয় । এ গুলোর মধ্যে উল্লেখযোগ্য হচ্ছে .... - ট্যাগ সিলেক্টর
- ক্লাস সিলেক্টর
- আইডি সিলেক্টর
ট্যাগ সিলেক্টর
CSS এ ওয়েব পেজের কোন অংশকে নির্দিষ্টভাবে চিহ্নিত করার জন্য যখন HTML ট্যাগ সমূহ ব্যবহার করা হয় তাকে ট্যাগ সিলেক্টর বলে। যেমন- body{background: #FC9;
- font-family: Tahoma;
- color: #F60;}
অনুশীলন প্রজেক্ট
<html>
<head>
<title> Selectors</title>
<head>
<title> Selectors</title>
<style>
body{background: #FC9;
font-family: Tahoma;
color: #F60;}
</style>
</head>
<body >
<marquee>
<h1>www.tutohost.com</h1>
</marquee>
</body>
</html>
body{background: #FC9;
font-family: Tahoma;
color: #F60;}
</style>
</head>
<body >
<marquee>
<h1>www.tutohost.com</h1>
</marquee>
</body>
</html>
অনুশীলন প্রজেক্ট
body {background: #FC9; font-family: Tahoma; color: #F60;} এখানে body ট্যাগ সিলেক্টর।ক্লাস সিলেক্টর
CSS এ ওয়েব পেজের কোন অংশ বা এক বা একাধিক উপাদানকে নির্দিষ্টভাবে চিহ্নিত
করার একটি অন্যতম পদ্ধতি ক্লাস সিলেক্টর । একাধিক উপাদানকে একই ক্লাস
সিলেক্টর দ্বারা চিহ্নিত করা যায়, তাই এটি কোডিং এর পরিমাণ হ্রাস করতে
সাহায্য করে।যেমন <p class="mar"> 24 / 7 Support</p> এর জন্য css কোড
.mar{color: #C03;
font-size:36px}
ক্লাস সিলেক্টর নির্দেশ করার জন্য HTML ট্যাগের মধ্যে class কি-ওয়ার্ড
ব্যবহার করা হয় এর পর = চিহ্ন দিয়ে ডাবল কোটেশন এর ভেতরে ক্লাস এর নাম
লেখা হয়। যেমন <p class="mar">। এখানে mar ক্লাসের নাম। স্টাইল
সিটে ক্লাসকে চিহ্নিত করতে (.) ডট চিহ্ন ব্যবহার করা হয়। অনুশীলন প্রজেক্ট
<html>
<head>
<title> Selectors</title>
<head>
<title> Selectors</title>
<style>
body{background: #FFC}
.post{color:#066;
font-family:Tahoma;
text-align:justify;}
body{background: #FFC}
.post{color:#066;
font-family:Tahoma;
text-align:justify;}
.mar{color: #C03;
font-size:36px}
</style>
</head>
<body >
<h1>www.tutohost.com</h1>
font-size:36px}
</style>
</head>
<body >
<h1>www.tutohost.com</h1>
<p class="post">
We are bangladeshi Hostgator hosting provider. The world wide technical and support team is working for your best movement.
</p>
<p class="post">
We
are dedicated with client requrement. You can host your huge data of
your company with our secured and hacking proof server. We are taking
care of more than 1000 bangladeshi websites and their huge information.
</p>
<marquee>
<p class="mar"> 24 / 7 Support</p>
</marquee>
</body> </html>
একটা নোটপ্যাড open করে উপরের code টুকু লিখে
file মেনু থেকে Save as এ ক্লিক করে File name: index.html , Save
as type : All files, দিয়ে save করে index.html ফাইলটি Mozilla Firefox
দিয়ে open করলে নিচে প্রদর্শিত ছবির মত দেখাবে। <p class="mar"> 24 / 7 Support</p>
</marquee>
</body> </html>
প্রজেক্ট বিশ্লেষণ
<p class="post"> এর মাধ্যমে একটি প্যারাগ্রাফের জন্য post নামে একটি ক্লাস নির্ধারণ করা হয়েছে।<p class="post"> এর মাধ্যমে অপর একটি প্যারাগ্রাফের জন্য post নামে একটি ক্লাস নির্ধারণ করা হয়েছে।
.post{color:#066;
font-family:Tahoma;
text-align:justify;}
এর মাধ্যমে post নামে নির্ধারিত ক্লাসযুক্ত উভয় প্যারাগ্রাফের জন্য স্টাইল নির্ধারণ করা হয়েছে।
<p class="mar">এর মাধ্যমে একটি প্যারাগ্রাফের জন্য mar নামে একটি ক্লাস নির্ধারণ করা হয়েছে।
.mar{color: #C03;
font-size:36px}
এর মাধ্যমে mar নামে নির্ধারিত ক্লাসযুক্ত প্যারাগ্রাফের জন্য স্টাইল নির্ধারণ করা হয়েছে।
This is dummy text. It is not meant to be read. Accordingly, it is difficult to figure out when to end it. But then, this is dummy text. It is not meant to be read. Period.