এইচটিএমএল এট্রিবিউট (HTML Attribute)
সচরাচর ব্যবহৃত কিছু এইচটিএমএল এট্রিবিউট এবং এদের ব্যবহারঃ
| এট্রিবিউট | বর্ণনা |
|---|---|
| alt | এই এট্রিবিউটটি <img> ট্যাগে ব্যবহৃত হয়। ইমেজ প্রদর্শিত না হলে বিকল্প হিসাবে এই এট্রিবিউট এর টেক্সট ব্রাউজারে প্রদর্শিত হয়। |
| charset | এই এট্রিবিউটটি <meta> ট্যাগে ব্যবহৃত হয়। অর্থাৎ অক্ষর/ক্যারেক্টার এনকোডিং(encoding) নির্ধারণ করার জন্য এটি ব্যবহার করা হয়। |
| disabled | এই এট্রিবিউটটি <input> ট্যাগে ব্যবহৃত হয়। অর্থাৎ একটি নির্দিষ্ট ইনপুট এলিমেন্টকে অকেজো(disable) করতে এই এট্রিবিউট ব্যবহার করা হয়। |
| href | এই এট্রিবিউটটি <a> ট্যাগে ব্যবহৃত হয়। অর্থাৎ একটি লিঙ্কের URL সেট করতে এটি ব্যবহার করা হয়। |
| lang | ডকুমেন্টের ভাষা সংক্রান্ত তথ্য ধারণ করে। |
| id | একটি এলিমেন্টের জন্য ইউনিক নাম সেট করে। |
| src | একটি ইমেজ বা স্ক্রিপ্ট এর সোর্স সেট করে। |
| style | একটি এলিমেন্টকে ইনলাইন স্টাইল করার জন্য এটি ব্যবহার করা হয়। |
| title | একটি এলিমেন্ট সম্পর্কে অতিরিক্ত তথ্য সংযুক্ত করতে এটি ব্যবহার করা হয়। title যুক্ত এলিমেন্টের উপর মাউস নিয়ে আসলে টুলটিপ হিসেবে টাইটেল এট্রিবিউট এর কন্টেন্ট প্রদর্শিত হয়। |
এইচটিএমএল এলিমেন্টের সকল এট্রিবিউটের তালিকা ও এদের ব্যবহার দেখার জন্য এইচটিএমএল এট্রিবিউট রেফারেন্স পেজটি ভিজিট করুন।
alt এট্রিবিউট
ইমেজ প্রদর্শিত না হলে ইমেজের বিকল্প হিসেবে একটি টেক্সট সেট করার জন্য alt এট্রিবিউট ব্যবহার করা হয়।
উদাহরণ
<!DOCTYPE html>
<html>
<head>
<title>এইচটিএমএল alt এট্রিবিউট</title>
</head>
<body>
<img src="satt.png" alt="sattacademy.com" width="142" height="142">
</body>
</html>
ফলাফল
charset এট্রিবিউট
ডকুমেন্টের অক্ষর/ক্যারেক্টার এনকোডিং(encoding) নির্ধারণ করার জন্য <meta> ট্যাগের মধ্যে charset
এট্রিবিউট ব্যবহার করা হয়।
ইংরেজী ছাড়া অন্য যেকোনা ভাষা ব্রাউজারে সঠিকভাবে প্রদর্শন করানোর জন্য charset ="utf-8" ব্যবহার করা হয়।
উদাহরণ
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>এইচটিএমএল charset এট্রিবিউট</title>
</head>
<body>
<p>ইংরেজী ছাড়া অন্য যেকোনা ভাষা ব্রাউজারে সঠিকভাবে প্রদর্শন করানোর
জন্য charset="utf-8" ব্যবহার করা হয়।</p>
<p>নিজে চেষ্টা করার সময় আমাদের উদাহরণগুলোতে ব্যবহৃত বাংলা ফন্ট
যদি আপনার ব্রাউজারে সাপোর্ট না করে বা বাংলা ফন্ট ভেঙ্গে যায় তাহলে charset="utf-8"
ব্যবহার করে ফন্ট সমস্যা দূর করতে পারেন।</p>
</body>
</html>
ফলাফল
href এট্রিবিউট
এইচটিএমএল <a>, <area>, <base>, <link> ট্যাগের URL href এট্রিবিউটের মাধ্যমে সেট করা হয়।
উদাহরণ
<!DOCTYPE html>
<html>
<head>
<title>এইচটিএমএল href এট্রিবিউট</title>
</head>
<body>
<a href="http://www.sattacademy.com">এটি একটি লিঙ্ক</a>
</body>
</html>
ফলাফল
lang এট্রিবিউট
ডকুমেন্টের ভাষা সেট করার জন্য <html> ট্যাগের মধ্যে lang এট্রিবিউট ব্যবহার করা হয়।
উদাহরণ
<!DOCTYPE html>
<html lang="bn">
<head>
<title>এইচটিএমএল lang এট্রিবিউট</title>
</head>
<body>
<p>ডকুমেন্টের ভাষা সেট করার জন্য <html> ট্যাগের মধ্যে lang এট্রিবিউট
ব্যবহার করা হয়।</p>
</body>
</html>src এট্রিবিউট
এইচটিএমএল <img> এবং <script> ট্যাগের সোর্স ফাইল যোগ করার জন্য src এট্রিবিউট ব্যবহার করা হয়।
উদাহরণ
<!DOCTYPE html>
<html>
<head>
<title>এইচটিএমএল src এট্রিবিউট</title>
</head>
<body>
<img src="../satt.png" width="142" height="142">
</body>
</html>
ফলাফল
title এট্রিবিউট
এলিমেন্টের উপর মাউস হোভার করলে টুলটিপ আকারে টেক্সট প্রদর্শনের জন্য title এট্রিবিউট ব্যবহার করা হয়।
উদাহরণ
<!DOCTYPE html>
<html>
<head>
<title>এইচটিএমএল title এট্রিবিউট</title>
</head>
<body>
<p title="এটি একটি টুলটিপ">এই প্যারাগ্রাফের উপর মাউস নিয়ে আসলে title এট্রিবিউটের
ভ্যালু টুলটিপ আকারে দেখাবে।</p>
</body>
</html>
ফলাফল
এট্রিবিউটকে সর্বদাই ছোট হাতের অক্ষরে লিখুন
এইচটিএমএল(৫)-এ এট্রিবিউটের নাম ছোট হাতের অক্ষরে লেখা বাধ্যতামূলক নয়।
charset এট্রিবিউটটি বড়হাতের অক্ষর(capital letter) অথবা ছোট হাতের অক্ষরে(small letter) লিখা যায়। যেমন- Charset অথবা CHARSET।
যাইহোক, W3C এইচটিএমএল এট্রিবিউটগুলো সর্বদা ছোট হাতের অক্ষরে লেখার সুপারিশ করে।
এট্রিটিউটের ভ্যালুতে কোটেশন মার্কের ব্যবহার
এইচটিএমএল(৫)-এ এট্রিবিউটের ভ্যালু কোটেশনের("") মধ্যে লেখা বাধ্যতামূলক নয়।
যেমন- উপরের বর্ণনা অনুযায়ী href এট্রিবিউটকে কোটেশন("") ছাড়াই লিখা যায়ঃ
উদাহরণ
<!DOCTYPE html>
<html>
<head>
<title>এইচটিএমএল এট্রিবিউট</title>
</head>
<body>
<a href=http://www.sattacademy.com>এটি একটি লিংক</a>
</body>
</html>
ফলাফল
কিন্তু মাঝে মাঝে কোটেশন("") ব্যবহারের প্রয়োজন হয়। যেমন- নিচের উদাহরণটিতে title এট্রিবিউটের ভ্যালুতে স্পেস থাকায় এটি সঠিক ভাবে কাজ করবে না।
উদাহরণ
<!DOCTYPE html>
<html>
<head>
<title>এইচটিএমএল এট্রিবিউট</title>
</head>
<body>
<p title=Satt Academy>যদি এট্রিবিউটের ভ্যালুর মধ্যে কোন স্পেস(space) থাকে
তবে আপনি কোটেশন("") বাদ দিতে পারবেন না।</p>
</body>
</html>
ফলাফল
সিংগেল(' ') বা ডাবল(" ") কোটেশন
এইচটিএমএল এট্রিবিউটের ভ্যালু লেখার জন্য সচরাচর ডাবল("") কোটেশন ব্যবহার করা হয়। তবে আমরা সিংগেল(' ') কোটেশনও ব্যবহার করতে পারি।
যাইহোক পরিস্থিতি বুঝে এবং প্রয়োজন অনুযায়ী এট্রিবিউটের ভ্যালুতে সিংগেল/ডাবল কোটেশন ব্যবহার করা হয়।
<p title='"স্যাট" একাডেমী'>স্যাট একাডেমী</p>
অথবা বিপরীতভাবেও ব্যবহার করতে পারি।
<p title="'স্যাট' একাডেমী">স্যাট একাডেমী</p>
অধ্যায়ের সারাংশ
- সকল এইচটিএমএল এলিমেন্টে এট্রিবিউট থাকতে পারে।
altএট্রিবিউট পাঠকদের জন্য টেক্সট প্রদান করে।hrefএট্রিবিউট লিংকের URL নির্ধারণ করে।langএট্রিবিউট ডকুমেন্টের ভাষা সেট করে।srcএট্রিবিউট সোর্স url নির্ধারণ করে।titleএট্রিবিউট "tool-tip" আকারে তথ্য প্রদান করে।