বিস্-মিল্লাহির রাহমানির রাহীম । প্রথমে সবাই কে সালাম জানাই আসসালামু আলাইকুম ওয়া রাহমাতুল্লাহ ! সালামটা গ্রহণ করবেন । আপনারা সবাই কেমন আছেন । আশা করি ভালো আছেন ।
আপনাদের দোয়াই আমিও ভালো আছি । আমি এই পর্যন্ত এইচটিএমএল সম্পর্কে ১১ টি পোস্ট
করছি । আমার গত পোস্ট টি ছিল এইচটিএমএল/HTML হেড / Head সম্পর্কে । যারা দেখেন নি তারা দেখে নিন । এইচটিএমএল টিউটোরিয়াল । HTML Tutorial পর্ব ৯ ।
আমি আজ কে আলোচনা করব এইচটিএমএল / HTML সিএসএস / CSS নিয়ে । তাহলে শুরু করা যাক ।
<!DOCTYPE html>
<html>
ফন্ট পরিবারের, রং, এবং ফন্টের আকার বৈশিষ্ট্য ফন্ট, রং, এবং একটি এলিমেন্ট টেক্সট মাপ সংজ্ঞায়িত:
অভ্যন্তরীণ / Internal স্টাইল শিটঃ
একটি একক ডকুমেন্ট একটি অনন্য স্টাইল রয়েছে একটি অভ্যন্তরীণ স্টাইল শীট ব্যবহার করা যাবে । অভ্যন্তরীণ শৈলী ভালো, <style> ট্যাগ ব্যবহার করে, একটি HTML পৃষ্ঠায় <head> বিভাগে ব্যাখ্যা করা হয়েছে:
আপনাদের দোয়াই আমিও ভালো আছি । আমি এই পর্যন্ত এইচটিএমএল সম্পর্কে ১১ টি পোস্ট
করছি । আমার গত পোস্ট টি ছিল এইচটিএমএল/HTML হেড / Head সম্পর্কে । যারা দেখেন নি তারা দেখে নিন । এইচটিএমএল টিউটোরিয়াল । HTML Tutorial পর্ব ৯ ।
আমি আজ কে আলোচনা করব এইচটিএমএল / HTML সিএসএস / CSS নিয়ে । তাহলে শুরু করা যাক ।
সিএসএস CSS (Cascading Style Sheets) এটি ব্যবহার হয় স্টাইল এলিমেন্ট এ ।
স্টাইলিং এইচটিএমএল এর সঙ্গে সিএসএসঃ
CSS স্টাইল HTML উপাদান ভাল উপায় প্রদান করে এইচটিএমএল 4 সঙ্গে একসাথে চালু হয় ।
সিএসএস নিম্নলিখিত ভাবে এইচটিএমএল যোগ করা যেতে পারে:
Inline - HTML এলিমেন্ট স্টাইল অ্যাট্রিবিউট ব্যবহার করে ।
Internal - <head> এর ভিতরে <style> এলিমেন্ট রাখতে হয় ।
External - এর একটি বহিরাগত/External সিএসএস ফাইল ব্যবহার করে ।
Inline - HTML এলিমেন্ট স্টাইল অ্যাট্রিবিউট ব্যবহার করে ।
Internal - <head> এর ভিতরে <style> এলিমেন্ট রাখতে হয় ।
External - এর একটি বহিরাগত/External সিএসএস ফাইল ব্যবহার করে ।
এইচটিএমএল এ সিএসএস যোগ করার জন্য, আকাঙ্ক্ষিত পথ, পৃথক CSS ফাইলগুলির CSS সিনট্যাক্স করা হয় ।
যাইহোক, এই এইচটিএমএল টিউটোরিয়াল আমরা CSS স্টাইল অ্যাট্রিবিউট ব্যবহার করে আপনাকে পরিচয় করিয়ে দিব । এই উদাহরণ গুলো সরল করে দিব । এটি সহজ আপনি কোড সম্পাদনা করতে এবং এটি নিজে চেষ্টা করে পারবেন ।
যাইহোক, এই এইচটিএমএল টিউটোরিয়াল আমরা CSS স্টাইল অ্যাট্রিবিউট ব্যবহার করে আপনাকে পরিচয় করিয়ে দিব । এই উদাহরণ গুলো সরল করে দিব । এটি সহজ আপনি কোড সম্পাদনা করতে এবং এটি নিজে চেষ্টা করে পারবেন ।
Inline স্টাইলঃ
একটি অনন্য স্টাইল একটি এলিমেন্ট এক একক সংঘটন প্রয়োগ করা হলে একটি ইনলাইন স্টাইল ব্যবহার করা যেতে পারে ।ইনলাইন স্টাইল ব্যবহার করার জন্য, প্রযোজ্য ট্যাগে স্টাইল বৈশিষ্ট্য ব্যবহার করুন । স্টাইল বৈশিষ্ট্য কোনো CSS এর সম্পত্তি থাকতে পারে । নীচের উদাহরণ টেক্সট রং এবং একটি অনুচ্ছেদের বাম
মার্জিন পরিবর্তন দেখায় কিভাবেঃ
<p style="color:blue;margin-left:20px;">This is a paragraph.</p>
এইচটিএমএল স্টাইল উদাহরণ - ব্যাকগ্রাউন্ড রঙঃ
ব্যাকগ্রাউন্ড রঙিন সম্পত্তি একটি এলিমেন্ট জন্য ব্যাকগ্রাউন্ড রং সংজ্ঞায়িত:
<!DOCTYPE html>
<html>
<body style="background-color:yellow;">
<h2 style="background-color:red;">This is a heading</h2>
<p style="background-color:green;">This is a paragraph.</p>
</body>
<h2 style="background-color:red;">This is a heading</h2>
<p style="background-color:green;">This is a paragraph.</p>
</body>
</html>
ব্যাকগ্রাউন্ড রঙিন সম্পত্তি "পুরাতন" bgcolor অ্যাট্রিবিউট অপ্রচলিত করে তোলে ।
এইচটিএমএল স্টাইল উদাহরণ - ফন্ট, রঙ এবং আকারঃ
ফন্ট পরিবারের, রং, এবং ফন্টের আকার বৈশিষ্ট্য ফন্ট, রং, এবং একটি এলিমেন্ট টেক্সট মাপ সংজ্ঞায়িত:
<!DOCTYPE html>
<html>
<html>
<body>
<h1 style="font-family:verdana;">A heading</h1>
<p style="font-family:arial;color:red;font-size:20px;">A paragraph.</p>
</body>
<h1 style="font-family:verdana;">A heading</h1>
<p style="font-family:arial;color:red;font-size:20px;">A paragraph.</p>
</body>
</html>
ফন্ট পরিবারের, রং, এবং ফন্টের আকার বৈশিষ্ট্য পুরাতন <font> ট্যাগ অবচিত হয়েছে ।
এইচটিএমএল স্টাইল উদাহরণ - টেক্সট প্রান্তিককরণ / Alignment:
টেক্সট প্রান্তিককরণ সম্পত্তি একটি উপাদান টেক্সট অনুভূমিক প্রান্তিককরণ নির্দিষ্ট করে:
<!DOCTYPE html>
<html>
<body>
<h1 style="text-align:center;">Center-aligned heading</h1>
<p>This is a paragraph.</p>
</body>
</html>
টেক্সট প্রান্তিককরণ সম্পত্তি একটি উপাদান টেক্সট অনুভূমিক প্রান্তিককরণ নির্দিষ্ট করে:
<!DOCTYPE html>
<html>
<body>
<h1 style="text-align:center;">Center-aligned heading</h1>
<p>This is a paragraph.</p>
</body>
</html>
টেক্সট প্রান্তিককরণ সম্পত্তি পুরাতন <center> ট্যাগ অপ্রচলিত করে তোলে ।
অভ্যন্তরীণ / Internal স্টাইল শিটঃ
একটি একক ডকুমেন্ট একটি অনন্য স্টাইল রয়েছে একটি অভ্যন্তরীণ স্টাইল শীট ব্যবহার করা যাবে । অভ্যন্তরীণ শৈলী ভালো, <style> ট্যাগ ব্যবহার করে, একটি HTML পৃষ্ঠায় <head> বিভাগে ব্যাখ্যা করা হয়েছে:
<head>
<style type="text/css">
body {background-color:yellow;}
p {color:blue;}
</style>
</head>
<style type="text/css">
body {background-color:yellow;}
p {color:blue;}
</style>
</head>
এক্সটার্নাল / External স্টাইল শীটঃ
স্টাইল অনেক পৃষ্ঠাসমূহ প্রয়োগ করা হয় যখন একটি বহিস্থিত স্টাইল শীট আদর্শ হয় । একটি বহিস্থিত স্টাইল শীট সঙ্গে, আপনি একটি ফাইল পরিবর্তন করে একটি সম্পূর্ণ ওয়েব সাইটের চেহারা
পরিবর্তন করতে পারেন । প্রতি পৃষ্ঠায় <link> ট্যাগ ব্যবহার করে স্টাইল শীট আপনি লিঙ্ক করতে পারেন । <link> ট্যাগ <head> এর ভিতরে যায়:
<head>
<link rel="stylesheet" type="text/css" href="mystyle.css">
</head>
<link rel="stylesheet" type="text/css" href="mystyle.css">
</head>
এইচটিএমএল স্টাইল ট্যাগঃ
অসমর্থিত ট্যাগ্স এবং অ্যাট্রিবিউট করা
HTML এর 4 ইঞ্চি, বেশ কয়েকটি ট্যাগ এবং বৈশিষ্ট্যাবলী স্টাইল ডকুমেন্ট করতে ব্যবহার করা হয়েছে । এইসব ট্যাগের ব্যবহারও HTML-এর নতুন কোনো সংশোধিত সংস্করণ মধ্যে সমর্থিত হবে না । এলিমেন্ট আছে ব্যবহার করে এড়িয়ে চলুন: <font>, <center>, এবং <strike>, এবং অ্যাট্রিবিউটস করা: রঙ এবং bgcolor ।
HTML এর 4 ইঞ্চি, বেশ কয়েকটি ট্যাগ এবং বৈশিষ্ট্যাবলী স্টাইল ডকুমেন্ট করতে ব্যবহার করা হয়েছে । এইসব ট্যাগের ব্যবহারও HTML-এর নতুন কোনো সংশোধিত সংস্করণ মধ্যে সমর্থিত হবে না । এলিমেন্ট আছে ব্যবহার করে এড়িয়ে চলুন: <font>, <center>, এবং <strike>, এবং অ্যাট্রিবিউটস করা: রঙ এবং bgcolor ।
আজ এই পর্যন্ত থাক আগামী দিন বিস্তারিত আলোচনা করব । ধন্যবাদ সবাই কে । যদি ভালো লাগে তাহলে কমেন্ট করুন । আর যদি কোন সমস্যা হয় তাহলেও কমেন্ট করুন । ভালো থাকুন সুস্থ থাকুন
।
দয়া করে কেউ এই ব্লগের কোনো কিছু চুরি করবেন না ।
।
দয়া করে কেউ এই ব্লগের কোনো কিছু চুরি করবেন না ।
কোন মন্তব্য নেই:
একটি মন্তব্য পোস্ট করুন