এত
দিন আমরা আপনাদেরকে HTML সম্পর্কে ধারণা দিয়েছি। আজ আমরা আপনাদেরকে HTML
এর HTML কমেন্ট ট্যাগ ও HTML এ CSS এর ব্যবহার দেখাব। এখানে আমরা CSS
সম্পর্কে বেসিক কিছু আলোচনা উপস্থাপন করেছি।
HTML কমেন্ট ট্যাগ
HTML ও CSS
HTML দিয়ে ডিজাইনের সময় স্টাইলিং করতে গেলে CSS কোড লাগে কারন CSS এর মাধ্যমে HTML এ তৈরীকৃত পেজটি আরও দৃষ্টিনন্দন করা যায়। একটা HTML পেজে
নিচে সংক্ষেপে CSS এর গুরুত্বপূর্ণ উপাদানগুলো আলোচনা করা হলঃ
২। প্রোপার্টি(Property)
৩। ভ্যালু(Value)
Selector {property: value}
একাধিক ভ্যালুর ক্ষেত্রে ভ্যালু গুলোকে সেমিকোলন দিয়ে পৃথক করা হয়।
যেমনঃ P { text-align: left; color: green}
একটি HTML ডকুমেন্ট এর সাথে তিন ভাবে স্টাইল শিট যুক্ত করা হয়। সেগুলো হলোঃ
১. এক্সটার্নাল স্টাইল শিট (Extarnal Style Sheet)
২. ইন্টারনাল স্টাইল শিট (Internal Style Sheet)
৩. ইনলাইন স্টাইলস(Inline Styles)
পরের টিউটরিয়ালে আমরা আরও কিছু CSS এলিমেন্ট সম্পর্কে জানবো।
HTML কমেন্ট ট্যাগ
- কমেন্ট ট্যাগ
<!-- and -->HTML ডকুমেন্টে কমেন্ট করার ক্ষেত্রে কাজে লাগে। - অন্যান্য ট্যাগ মত কমেন্ট এরও opening tag এবং closing tag আছে।
<!-- Opening Comment</li>-- > Closing Comment- ওয়েব ডেভেলপার হিসাবে আপনি অনেক কাজ অসম্পূর্ণ রাখতে পারেন সেক্ষেত্রে অসম্পূর্ণ কাজটিকে
<!— -- >কমেন্ট ট্যাগ এর ভিতর রাখতে পারেন। - কমেন্ট ট্যাগ এর ভিতর কোন কিছু রাখলে তা ব্রাউজারে দেখা যায় না।
HTML ও CSS
HTML দিয়ে ডিজাইনের সময় স্টাইলিং করতে গেলে CSS কোড লাগে কারন CSS এর মাধ্যমে HTML এ তৈরীকৃত পেজটি আরও দৃষ্টিনন্দন করা যায়। একটা HTML পেজে
<head> ট্যাগের ভিতর <style>
ট্যাগ দিয়ে CSS কোড যোগ করে পেজ স্টাইলিং করা যায়। এটা হচ্ছে ইন্টারনাল
CSS আর যদি CSS কোড বেশি হয়ে যায় তখন CSS কোড আলাদা ফাইলে লেখা হয়।স্টাইলিং
করার জন্য সাধারণত CSS কোড আলাদা ফাইলে লেখা হয়। তবে আপনাদের বুঝার
সুবিধার্থে উদাহরণ সমূহে ইন্টারনাল CSS দিয়ে করা হয়েছে। আপনারা CSS
সম্পর্কে আরও বিশদভাবে ভাবে জানতে পারবেন CSS টিউটোরিয়াল থেকে যা আর
কিছুদিনের মধ্যেই প্রকাশিত হবে।নিচে সংক্ষেপে CSS এর গুরুত্বপূর্ণ উপাদানগুলো আলোচনা করা হলঃ
- CSS অর্থ হল ক্যাসকেডিং স্টাইল শিট
- CSS এর সিনট্যাক্স তিনটি অংশ নিয়ে গঠিত।
২। প্রোপার্টি(Property)
৩। ভ্যালু(Value)
Selector {property: value}
- সিলেক্টর হলো নির্দিষ্ট একটি ট্যাগ যেটি আপনি নির্বাচন করতে চান।
- প্রোপার্টি হচ্ছে অ্যাট্রিবিউট যেটাকে পরিবর্তন করা হয়।
- আর প্রত্যেকটি প্রোপার্টির একটি নির্দিষ্ট ভ্যালু থাকে।
একাধিক ভ্যালুর ক্ষেত্রে ভ্যালু গুলোকে সেমিকোলন দিয়ে পৃথক করা হয়।
যেমনঃ P { text-align: left; color: green}
একটি HTML ডকুমেন্ট এর সাথে তিন ভাবে স্টাইল শিট যুক্ত করা হয়। সেগুলো হলোঃ
১. এক্সটার্নাল স্টাইল শিট (Extarnal Style Sheet)
- একই স্টাইল অনেকগুলো পেইজে প্রয়োগ করার ক্ষেত্রে এক্সটার্নাল CSS(স্টাইল শিট) হল আদর্শ উপায়।
- এক্সটার্নাল স্টাইল শিটের মাধ্যমে একটি মাত্র ফাইল পরিবর্তন করে আপনি সম্পূর্ণ ওয়েভ সাইটের চেহারা পরিবর্তন করে দিতে পারেন।
- প্রতি পেইজে অবশ্যই
<link>ট্যাগ ব্যবহার করে স্টাইল শিটের সাথে লিঙ্ক করতে হয়।<link>ট্যাগ বসাতে হয়<head>সেকশনের ভেতরে।
২. ইন্টারনাল স্টাইল শিট (Internal Style Sheet)
- যখন কোন ডকুমেন্টে একটি ইউনিক স্টাইল থাকে তখন ইন্টারনাল স্টাইল শিট ব্যবহার করা উচিত ।
- হেড (head) সেকশনে স্টাইল
<style>ট্যাগ ব্যবহার করে স্টাইল শিট নির্ধারণ করতে হবে।
৩. ইনলাইন স্টাইলস(Inline Styles)
- এটি হচ্ছে CSS style ট্যাগকে HTML কোড এর ভিতর ব্যবহার করার নিয়ম।
- যখন এলিমেন্টএর সিঙ্গেল অকারেন্সে কোন ইউনিক স্টাইল প্রয়োগ করতে হয় তখন ইনলাইন স্টাইল ব্যবহার করা হয়।
- ইনলাইন স্টাইল প্রয়োগের জন্য সংশ্লিষ্ট ট্যাগে অ্যাট্রিবিউট ব্যবহার করা হয়।
- স্টাইল অ্যাট্রিবিউট যে কোন CSS প্রোপার্টি বহন করতে পারে ।
পরের টিউটরিয়ালে আমরা আরও কিছু CSS এলিমেন্ট সম্পর্কে জানবো।