এসো বাংলায় ওয়েব-ডিজাইন শিখি হাতে খরি পর্ব-৫
এইচটিএমএল স্টাইল 'HTML Style'
আমি আপনাদের শেখার বাংলায় কিভাবে ওয়েবডিজাইন করবেন । আমি আপনাদের কে সহজ ভাবে ও পেক্টিকেল ভাবে ওয়েবডিজাইন শিক্ষানোর চেষ্টা করব এবং ভিডিও এর মাধ্যমে । আশা করি সবাই ভাল ভাবে বুঝতে পারবেন।আমার কেনো ভুল হলে ক্ষমা করবেন। আর একটা কথা অবশ্যই প্রত্যেক দিন একটু সময় ব্যয় করে হলেও Practice করবেন তাহলে দেখবেন আরও সহজ হয়ে যাবে । আমি গত পর্বে HTML style এর এইচটিএমএল স্টাইলনিয়ে আলোচনা করেছিলাম আজ HTML style প্যারাগ্রাফ নিয়ে আলোচনা করব।
প্রত্যেকটি এইচটিএমএল উপাদানের জন্য একটি ডিফল্ট বা নির্দিষ্ট স্টাইল থাকে পিছনের কালার বা ব্যাকগ্রাউন্ড কালার সাদা এবং টেক্সট এর কালার কালো। স্টাইল attribute এর মাধ্যমে আমরা এই ডিফল্ট কালার কে পরিবর্তন করতে পারি। নিচের উদাহরণ এ ব্যাকগ্রাউন্ড কালার ডিফল্ট সাদা থেকে light gray কালার এ পরিবর্তনকরা হয়েছে।
উদাহরণ
<!DOCTYPE html>
<html>
<body style=”background-color:lightgrey”>
<html>
<body style=”background-color:lightgrey”>
<h1>This is a heading</h1>
<p>This is a paragraph.</p>
</body>
</html>
</html>
This is a heading
This is a paragraph.
|
Bgcolor attribute পুরাতন এইচটিএমএল ভার্সন এ সাপোর্ট করে কিন্তু এইচটিএমএল ৫ এ সাপোর্ট করে না
এইচটিএমএল স্টাইল attribute
এইচটিএমএল স্টাইল attribute নিম্নোক্ত syntax মেনে চলে
style=”property:value”
এই প্রপার্টি হল সিএসএস এর প্রপার্টি এবং ভ্যালু হল সিএসএস এর ভ্যালু।
এইচটিএমএল টেক্সট কালার
এইচটিএমএল এর টেক্সট কালার পরিবর্তন করার জন্য color প্রপার্টি ব্যবহার করা হয়।
উদাহরণ
উদাহরণ
<body>
<h1 style=”color:blue”>This is a heading
<p style=”color:red”>This is a paragraph.</p>
</body>
<h1 style=”color:blue”>This is a heading
<p style=”color:red”>This is a paragraph.</p>
</body>
ফলাফল
This is a heading
This is a paragraph.
এইচটিএমএল ফন্টস
Font-family প্রপার্টি দ্বারা ফন্টের ধরন পরিবর্তন করা হয়।
উদাহরণ
উদাহরণ
<body>
<h1 style=”font-family:verdana”>This is a heading</h1>
<p style=”font-family:courier”>This is a paragraph.</p>
</body>
<h1 style=”font-family:verdana”>This is a heading</h1>
<p style=”font-family:courier”>This is a paragraph.</p>
</body>
ফলাফল
This is a heading
This is a paragraph.
পুরাতন এইচটিএমএল এ <font> ট্যাগ সাপোর্ট করে কিন্তু এইচটিএমএল ৫ এ সাপোর্ট করে না।
এইচটিএমএল টেক্সট সাইজ
Font-size প্রপার্টি দ্বারা টেক্সট এর আকার পরিবর্তন করা হয়।
উদাহরণ
উদাহরণ
<body>
<h1 style=”font-size:300%”>This is a heading</h1>
<p style=”font-size:160%”>This is a paragraph.</p>
</body>
<h1 style=”font-size:300%”>This is a heading</h1>
<p style=”font-size:160%”>This is a paragraph.</p>
</body>
ফলাফল
This is a heading
This is a paragraph.
এইচটিএমএল টেক্সট alignment
Text-align প্রপার্টি দ্বারা টেক্সট horizontal ভাবে কোন দিকে অবস্থান করবে তা নির্দেশ দেওয়া হয়
উদাহরণ
উদাহরণ
<body>
<h1 style=”text-align:center”>Centered Heading</h1>
<p>This is a paragraph.</p>
</body>
<h1 style=”text-align:center”>Centered Heading</h1>
<p>This is a paragraph.</p>
</body>
ফলাফল
Centered Heading
This is a paragraph.
<center> ট্যাগ পুরাতন এইচটিএমএল ভার্সন এ কাজ করে নতুন এইচটিএমএল এ কাজ করে না।
একনজরে প্রপার্টি গুলো
• স্টাইল attribute এর ব্যবহার
• background-color এর ব্যবহার
• color এর সাহায্যে টেক্সট কালার এর ব্যবহার
• টেক্সট এর ফন্ট এর জন্য font-family এর ব্যবহার
• টেক্সট এর আকার এর জন্য font-size এর ব্যবহার এবং
• text-align এর ব্যবহার।
