Post No:05
Part:02
Previous Part Link:
https://blog.shikhun.net/part-01
এট্রিটিউটের ভ্যালুতে কোটেশন মার্কের ব্যবহার
এইচটিএমএল(৫)-এ এট্রিবিউটের ভ্যালু কোটেশনের("") মধ্যে লেখা বাধ্যতামূলক নয়।
যেমন- উপরের বর্ণনা অনুযায়ী href এট্রিবিউটকে কোটেশন("") ছাড়াই লিখা যায়ঃ
উদাহরণ
—---------------[ The code must be included in the code tag ]—--------------
<!DOCTYPE html>
<html>
<head>
<title>এইচটিএমএল এট্রিবিউট</title>
</head>
<body>
<a href=https://github.com/developernaimul>এটি একটি লিংক</a>
</body>
</html>
—---------------[ The code must be included in the code tag ]—--------------
ফলাফল
কিন্তু মাঝে মাঝে কোটেশন("") ব্যবহারের প্রয়োজন হয়। যেমন- নিচের উদাহরণটিতে title এট্রিবিউটের ভ্যালুতে স্পেস থাকায় এটি সঠিক ভাবে কাজ করবে না।
উদাহরণ
—---------------[ The code must be included in the code tag ]—--------------
<!DOCTYPE html>
<html>
<head>
<title>এইচটিএমএল এট্রিবিউট</title>
</head>
<body>
<p title=github.com developernaimul>যদি এট্রিবিউটের ভ্যালুর মধ্যে কোন স্পেস(space) থাকে
তবে আপনি কোটেশন("") বাদ দিতে পারবেন না।</p>
</body>
</html>
—---------------[ The code must be included in the code tag ]—--------------
ফলাফল
সিংগেল(' ') বা ডাবল(" ") কোটেশন
এইচটিএমএল এট্রিবিউটের ভ্যালু লেখার জন্য সচরাচর ডাবল("") কোটেশন ব্যবহার করা হয়। তবে আমরা সিংগেল(' ') কোটেশনও ব্যবহার করতে পারি।
যাইহোক পরিস্থিতি বুঝে এবং প্রয়োজন অনুযায়ী এট্রিবিউটের ভ্যালুতে সিংগেল/ডাবল কোটেশন ব্যবহার করা হয়।
উদাহরণ
—---------------[ The code must be included in the code tag ]—--------------
<p title='"নাইম" নাইমুল হাসান'>স্বরবিন্দু শিক্ষা হোক মজায় মজায়</p>
—---------------[ The code must be included in the code tag ]—--------------
অথবা বিপরীতভাবেও ব্যবহার করতে পারি।
উদাহরণ
—---------------[ The code must be included in the code tag ]—--------------
<p title="'নাইম' নাইমুল হাসান">স্বরবিন্দু শিক্ষা হোক মজায় মজায়</p>
—---------------[ The code must be included in the code tag ]—--------------
এইচটিএমএল class এট্রিবিউট
একাধিক এলিমেন্টকে একই ধরনের স্টাইল করার জন্য এইচটিএমএল class এট্রিবিউট ব্যবহার করা হয়।
উদাহরণ
—---------------[ The code must be included in the code tag ]—--------------
<!DOCTYPE html>
<html>
<head>
<title>এইচটিএমএল class এট্রিবিউট</title>
<style>
.cities {
Background-color:#0abcc5;
color: white;
margin: 20px 0 20px 0;
padding: 25px;
}
</style>
</head>
<body>
<div class="cities">
<h2>ঢাকা</h2>
<p> ঢাকা বাংলাদেশের রাজধানী
এবং ঢাকা বিভাগের প্রধান শহর। ঢাকা একটি
মেগাসিটি এবং দক্ষিণ এশিয়ার অন্যতম প্রধান শহরও বটে। বুড়িগঙ্গা নদীর তীরে
অবস্থিত এই শহর বাংলাদেশের বৃহত্তম শহর। ঢাকা
মহানগর এলাকার জনসংখ্যা প্রায় ১ কোটি ৫০ লক্ষ।</p>
</div>
<div class="cities">
<h2>রাজশাহী</h2>
<p>রাজশাহী বাংলাদেশের উত্তরাঞ্চলের
(উত্তরবঙ্গের) একটি প্রধান শহর। বিখ্যাত পদ্মা নদীর তীরে রাজশাহী শহর অবস্থিত। এটি রাজশাহী বিভাগের বিভাগীয় শহর।</p>
</div>
</body>
</html>
—---------------[ The code must be included in the code tag ]—--------------
ফলাফল
ইনলাইন এলিমেন্টে class এট্রিবিউটের ব্যবহার
এইচটিএমএল ইনলাইন এলিমেন্টেও class এট্রিবিউটটি ব্যবহার করা যায়।
উদাহরণ
—---------------[ The code must be included in the code tag ]—--------------
<!DOCTYPE html>
<html>
<head>
<title>এইচটিএমএল class এট্রিবিউট</title>
<style>
.note {
Font-size: 120px;
color: #0088ED;
}
</style>
</head>
<body>
<h1>স্বরবিন্দু<span class="note"> শিক্ষা হোক</span> মজায় মজায়</h1>
<p>ব্লগ- <span class="note">Labib Hasan Rana</span> ©২০২২</p>
</body>
</html>
—---------------[ The code must be included in the code tag ]—--------------
ফলাফল
এইচটিএমএল স্টাইল এট্রিবিউট (HTML Style Attribute)
style এট্রিবিউট
এইচটিএমএল এলিমেন্টকে তিনভাবে স্টাইল করা যায়। যথাঃ
ইনলাইন(inline) স্টাইল
ইন্টারনাল(internal) স্টাইল
এক্সটার্নাল(external) স্টাইল
ইনলাইন(inline) স্টাইল করার জন্য এইচটিএমএল style এট্রিবিউট ব্যবহার করা হয়। style এট্রিবিউটেও সিএসএসের সকল প্রোপার্টি ব্যবহার করা যায়।
সিন্টেক্স
উদাহরণ
—---------------[ The code must be included in the code tag ]—--------------
<tagname style="css-property: css-value;">content</tagname>
—---------------[ The code must be included in the code tag ]—--------------
style এট্রিবিউট ব্যবহার করে টেক্সটের কালার সেট
color প্রোপার্টির মাধ্যমে একটি এইচটিএমএল এলিমেন্টের টেক্সটকে কালার করা হয়।
উদাহরণ
—---------------[ The code must be included in the code tag ]—--------------
<!DOCTYPE html>
<html>
<head>
<title>এইচটিএমএল style এট্রিবিউট</title>
</head>
<body>
<p style="color: aqua;">style এট্রিবিউট এর মাধ্যমে এই প্যারাগ্রাফ এর কালার টিল করা হয়েছে।</p>
</body>
</html>
—---------------[ The code must be included in the code tag ]—--------------
ফলাফল
style এট্রিবিউট ব্যবহার করে ব্যাকগ্রাউন্ড কালার সেট
background-color প্রোপার্টির মাধ্যমে একটি এইচটিএমএল এলিমেন্টের ব্যাকগ্রাউন্ড কালার সেট করা হয়।
উদাহরণ
—---------------[ The code must be included in the code tag ]—--------------
<!DOCTYPE html>
<html>
<head>
<title>এইচটিএমএল style এট্রিবিউট</title>
</head>
<body style="background-color: #0088ED;">
<p>এটি একটি প্যারাগ্রাফ।</p>
</body>
</html>
—---------------[ The code must be included in the code tag ]—--------------
ফলাফল
style এট্রিবিউট ব্যবহার করে ফন্ট নির্ধারণ
font-family প্রোপার্টির মাধ্যমে এইচটিএমএল এলিমেন্টের ফন্ট নির্ধারণ করা হয়।
উদাহরণ
—---------------[ The code must be included in the code tag ]—--------------
<!DOCTYPE html>
<html>
<head>
<title>এইচটিএমএল style এট্রিবিউট</title>
</head>
<body>
<p style="font-family: courier;">Developer Naimul.</p>
<p style="font-family: helvetica neue, Helvetica;">Developer Naimul.</p>
</body>
</html>
—---------------[ The code must be included in the code tag ]—--------------
ফলাফল
style এট্রিবিউট ব্যবহার করে টেক্সট সাইজ সেট
font-size প্রোপার্টির মাধ্যমে একটি এইচটিএমএল এলিমেন্টের টেক্সটের আকার নির্ধারণ করা করা হয়।
উদাহরণ
—---------------[ The code must be included in the code tag ]—--------------
<!DOCTYPE html>
<html>
<head>
<title>এইচটিএমএল style এট্রিবিউট</title>
</head>
<body>
<p style="font-size:24px">নাইমুল হাসান নাইম।</p>
<p style="font-size:10px;">নাইমুল হাসান নাইম।</p>
</body>
</html>
—---------------[ The code must be included in the code tag ]—--------------
ফলাফল
style এট্রিবিউট ব্যবহার করে টেক্সট এলাইনমেন্ট (alignment) সেট
text-align প্রোপার্টির মাধমে এইচটিএমএল এলিমেন্টের কন্টেন্টের অবস্থান নির্ধারণ করা হয়।
উদাহরণ
—---------------[ The code must be included in the code tag ]—--------------
<!DOCTYPE html>
<html>
<head>
<title>এইচটিএমএল style এট্রিবিউট</title>
</head>
<body>
<p style="text-align: center;">এই প্যারাগ্রাফটি মাঝে থাকবে।</p>
<p style="text-align: right;">ব্লগ - নাইমুল হাসান নাইম।</p>
</body>
</html>
—---------------[ The code must be included in the code tag ]—--------------
ফলাফল
অধ্যায়ের সারাংশ
সকল এইচটিএমএল এলিমেন্টে এট্রিবিউট থাকতে পারে।
alt এট্রিবিউট পাঠকদের জন্য টেক্সট প্রদান করে।
href এট্রিবিউট লিংকের URL নির্ধারণ করে।
lang এট্রিবিউট ডকুমেন্টের ভাষা সেট করে।
src এট্রিবিউট সোর্স url নির্ধারণ করে।
title এট্রিবিউট "tooltip" আকারে তথ্য প্রদান করে।
এইচটিএমএল এলিমেন্টকে ইনলাইন স্টাইল করার জন্য style এট্রিবিউট ব্যবহার করা হয়।
টেক্সটের কালার সেট করার জন্য color প্রোপার্টি ব্যবহার করা হয়।
ব্যাকগ্রাউন্ড কালার সেট করার জন্য background-color প্রোপার্টি ব্যবহার করা হয়।
টেক্সটের ফন্ট নির্ধারণের করার জন্য font-family প্রোপার্টি ব্যবহার করা হয়।
টেক্সটের সাইজ নির্ধারণ করার জন্য font-size প্রোপার্টি ব্যবহার করা হয়।
কন্টেন্টের অবস্থান নির্ধারণ করার জন্য text-align ব্যবহার করা হয়।