«

»

ফেব্রুয়ারী ২০

বেসিক ওয়েবসাইট – লেকচার ৩ – ওয়েবসাইটের মেকআপ

বেসিক ওয়েবসাইট – লেকচার ৩ – ওয়েবসাইটের মেকআপ

[কোর্সের মূল পাতা ও লেকচার তালিকা | নিবন্ধনের লিংক]

(ইউটিউব দেখতে না পারলে ভিডিওটা ফেইসবুকেই দেখে নিতে পারেন)

(আপনি চাইলে গুগল ড্রাইভ ১ অথবা গুগল ড্রাইভ ২ থেকে ভিডিওটি ডাউনলোড করতে পারেন)

 

চলুন নামতা শিখি

দুই একে দুই
ওয়েবসাইট মেকআপের সবকিছু <style></style > এর ভিতর থুই
দুই দুই গুনে চার
কোলন(:) দিয়ে বুঝাবো কে কাহার
কোলনের বামপাশ জায়গাটা বৈশিষ্ট বা প্রপার্টি রাখার
আর ডানপাশটা value বা মানের আধার
সেমিকোলন(;) দিয়ে শেষ করি যুগলের বাহার
{ } এর ভিতরে রাখি সব যুগলের সমাহার
{ } এর আগে লিখি স্টাইলগুলা কার জন্যে উপহার
তিন দুই গুনে ছয়
রং কে ইংরেজিতে color কয়
হায় হায়, এই জিনিস শিখতে কইলে লাগে ভয়
h1 হেডারকে সবুজ করতে h1{ color: green; } লিখতে হয়
চার দুই গুনে আট
শিখে গেলাম html element এর সাথে কেমনে স্টাইল করব ফিটফাট
নতুন element যোগ করলে আগের স্টাইল করে ফেলবে কুপোকাত
পাচ দুই গুনে দশ
কোনো একটা element কে id দিয়ে স্টাইল দিলে, অন্যদের হবে লস
<h3 id=”laltu”></h3 >লিখেই ভাব ধরে তুই রেস্ট নিতে চাস
#laltu { color : red; } টা বুঝলে সত্যিই হয়ে যাবি বস
ছয় দুই গুনে বারো
class দিয়ে অনেক element কে একসাথে স্টাইল দিতে পারো
<p class=”putu”></p >লিখে element এ class যোগ করো
.putu { color:navy;} দিয়ে <style></style > এর ভিতর ধাক্কা মারো
সাত দুই গুনে চৌদ্দ
কোনো element কে background-color:pink; দিয়ে হই মনোমুগ্ধ
একইভাবে id বা class এর পিছনে রং দিতে জানে সব আবালবৃদ্ধ

আট দুই গুনে ষোল
কোনোদিনও ভুলোনা, কত্তো আদ্দর ছিলো বাবা মায়ের কোলো
border:1px solid red; দিয়ে সীমানা দেখায়, তা আগেই জানা ছিলো
margin দিয়ে একটা element অন্য element থেকে দূরে সরানো হলো
padding দিয়ে border থেকে লেখাগুলোকে দূরে ঠেলে দেয়া গেলো
border-radius:10px দিলে চোখা কোনোকানিগুলো রাউন্ড হয় কিনা বলো

নয় দুই গুনে আঠারো
width:500px; দিলে নিদৃষ্ট প্রস্থ দিতে পা পা পা পা পারো

দশ দুই গুনে বিশ
background-image:url(‘feb.jpg’); একটা কঠিন জিনিস
feb.jpg একটা ছবির নাম সেটাতো বুঝতে পারিস
না হলে ভিডিও দেখে বুঝে নিস
অথবা কচিকাচাদের স্কুলে ঘুরে আছিস

 

শেষকথা

স্টাইল সম্পর্কে আরো জানতে কচিকাচাদের স্কুল
সব কালারের নাম পাবেন এইখানে
ইচ্ছে মতো কালার করতে কালার পিকার থেকে কালার নাম্বার নিন
তার পরে {color:#163035;} লিখুন
অথবা R,G,B, ভ্যালু জেনে লিখুন {color:rgb(255,5,0);}
সলিড বর্ডার না দিয়ে dashed বা dotted স্টাইলও দিতে পারেন
কিচ্ছু করার নাই, তাইলে গুগলের তেলেসমাতি দেখুন ইউটুবে বা ফেইসবুকে
প্রশ্ন থাকলে কমেন্ট করুন, শিখতে পারলে শেয়ার করুন

আগের লেকচার আরও দেখুন পরের লেকচার

লেখক পরিচিতি

ঝংকার মাহবুব

আমি ঝংকার মাহবুব (jhankar.mahbub@gmail.com)। আমি BUET থেকে ২০০৭ এ পাশ করার পর নিজস্ব ফার্মে কনসালটেন্ট হিসেবে কাজ করেছি। ২০১২ সালে আমি নর্থ ডাকোটা স্টেট ইউনিভার্সিটি থেকে সফটওয়্যার ইঞ্জিনিয়ারিং এ মাস্টার্স ডিগ্রী শেষ করে বর্তমানে শিকাগো শহরে nielsen এ ওয়েব ডেভেলপার হিসেবে কাজ করছি। আর পছন্দ করি ওয়েবসাইট বানাতে।