Post No:04
Part-01
এইচটিএমএল এট্রিবিউট কি?
প্রতিদিন কত ওয়েবসাইট আমরা ভিজিট করি। ওয়েবসাইট গুলো কত সুন্দর করে সাজানো গোছানো থাকে। যেখানে যে কনটেন্ট থাকার কথা সেখানে সেই কন্টেন রেখে একজন ওয়েব ডিজাইনার মনের মত করে ওয়েবসাইট সাজিয়ে থাকেন। এইযে সাজানো-গোছানো অন্তরালে কাজ করে যে জিনিসটা সেটা হচ্ছে এট্রিবিউট।
একটি এইচটিএমএল এট্রিবিউট হল মার্কআপ ভাষার একটি অংশ, যা একটি এইচটিএমএল এলেমেন্ট আচরণ বা প্রদর্শন সামঞ্জস্য করতে ব্যবহৃত হয়। উদাহরণস্বরূপ, এইচটিএমএল এলেমেন্ট গুলির রঙ, আকার বা কার্যকারিতা পরিবর্তন করতে এট্রিবিউট গুলি ব্যবহার করা যেতে পারে।
এট্রিবিউট লেখার নিয়ম
প্রথমে এট্রিবিউট টির নাম, এরপর সমান চিহ্ন ( = ) দিয়ে কোটেশনের (“ ” বা ‘ ’) ভিতরে এর মান। (সব ছোট হাতের অক্ষর অক্ষরে)। যেমন
উদাহরণ
—---------------[ The code must be included in the code tag ]—--------------
<a href=”#”>Click Here</a>
—---------------[ The code must be included in the code tag ]—--------------
বহুল ব্যবহৃত অ্যাট্রিবিউট সমূহ ও তার বিবরণ
এট্রিবিউট | বর্ণনা |
alt | এই এট্রিবিউটটি <img> ট্যাগে ব্যবহৃত হয়। ইমেজ প্রদর্শিত না হলে বিকল্প হিসাবে এই এট্রিবিউট এর টেক্সট ব্রাউজারে প্রদর্শিত হয়। |
charset | এই এট্রিবিউটটি <meta> ট্যাগে ব্যবহৃত হয়। অর্থাৎ অক্ষর/ক্যারেক্টার এনকোডিং(encoding) নির্ধারণ করার জন্য এটি ব্যবহার করা হয়। |
disabled | এই এট্রিবিউটটি <input> ট্যাগে ব্যবহৃত হয়। অর্থাৎ একটি নির্দিষ্ট ইনপুট এলিমেন্টকে অকেজো(disable) করতে এই এট্রিবিউট ব্যবহার করা হয়। |
href | এই এট্রিবিউটটি <a> ট্যাগে ব্যবহৃত হয়। অর্থাৎ একটি লিঙ্কের URL সেট করতে এটি ব্যবহার করা হয়। |
lang | ডকুমেন্টের ভাষা সংক্রান্ত তথ্য ধারণ করে। |
id | একটি এলিমেন্টের জন্য ইউনিক নাম সেট করে। |
src | একটি ইমেজ বা স্ক্রিপ্ট এর সোর্স সেট করে। |
style | একটি এলিমেন্টকে ইনলাইন স্টাইল করার জন্য এটি ব্যবহার করা হয়। |
title | একটি এলিমেন্ট সম্পর্কে অতিরিক্ত তথ্য সংযুক্ত করতে এটি ব্যবহার করা হয়। title যুক্ত এলিমেন্টের উপর মাউস নিয়ে আসলে টুলটিপ হিসেবে টাইটেল এট্রিবিউট এর কন্টেন্ট প্রদর্শিত হয়। |
alt এট্রিবিউট
ইমেজ প্রদর্শিত না হলে ইমেজের বিকল্প হিসেবে একটি টেক্সট সেট করার জন্য alt এট্রিবিউট ব্যবহার করা হয়।
উদাহরণ
—---------------[ The code must be included in the code tag ]—--------------
<!DOCTYPE html>
<html>
<head>
<title>এইচটিএমএল alt এট্রিবিউট</title>
</head>
<body>
<img src="coderlabib-logo.png" alt="Coderlabib.com" width="100px" height="100px">
</body>
</html>
—---------------[ The code must be included in the code tag ]—--------------
ফলাফল
charset এট্রিবিউট
ডকুমেন্টের অক্ষর/ক্যারেক্টার এনকোডিং(encoding) নির্ধারণ করার জন্য <meta> ট্যাগের মধ্যে charset এট্রিবিউট ব্যবহার করা হয়।
ইংরেজী ছাড়া অন্য যেকোনা ভাষা ব্রাউজারে সঠিকভাবে প্রদর্শন করানোর জন্য charset ="utf-8" ব্যবহার করা হয়।
উদাহরণ
—---------------[ The code must be included in the code tag ]—--------------
<!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>
—---------------[ The code must be included in the code tag ]—--------------
ফলাফল
href এট্রিবিউট
এইচটিএমএল <a>, <area>, <base>, <link> ট্যাগের URL href এট্রিবিউটের মাধ্যমে সেট করা হয়।
উদাহরণ
—---------------[ The code must be included in the code tag ]—--------------
<!DOCTYPE html>
<html>
<head>
<title>এইচটিএমএল href এট্রিবিউট</title>
</head>
<body>
<a href="https://sorobindu.com">এটি একটি লিঙ্ক</a>
</body>
</html>
—---------------[ The code must be included in the code tag ]—--------------
ফলাফল
lang এট্রিবিউট
ডকুমেন্টের ভাষা সেট করার জন্য <html> ট্যাগের মধ্যে lang এট্রিবিউট ব্যবহার করা হয়।
উদাহরণ
—---------------[ The code must be included in the code tag ]—--------------
<!DOCTYPE html>
<html lang="bn">
<head>
<title>এইচটিএমএল lang এট্রিবিউট</title>
</head>
<body>
<p>ডকুমেন্টের ভাষা সেট করার জন্য <html> ট্যাগের মধ্যে lang এট্রিবিউট
ব্যবহার করা হয়।</p>
</body>
</html>
—---------------[ The code must be included in the code tag ]—--------------
src এট্রিবিউট
এইচটিএমএল <img> এবং <script> ট্যাগের সোর্স ফাইল যোগ করার জন্য src এট্রিবিউট ব্যবহার করা হয়।
উদাহরণ
—---------------[ The code must be included in the code tag ]—--------------
<!DOCTYPE html>
<html>
<head>
<title>এইচটিএমএল src এট্রিবিউট</title>
</head>
<body>
<img src="coderlabib-logo.png" width="120" height="100">
</body>
</html>
—---------------[ The code must be included in the code tag ]—--------------
ফলাফল
title এট্রিবিউট
এলিমেন্টের উপর মাউস হোভার করলে টুলটিপ আকারে টেক্সট প্রদর্শনের জন্য title এট্রিবিউট ব্যবহার করা হয়।
উদাহরণ
—---------------[ The code must be included in the code tag ]—--------------
<!DOCTYPE html>
<html>
<head>
<title>এইচটিএমএল title এট্রিবিউট</title>
</head>
<body>
<p title="এটি একটি টুলটিপ">এই প্যারাগ্রাফের উপর মাউস নিয়ে আসলে title এট্রিবিউটের
ভ্যালু টুলটিপ আকারে দেখাবে।</p>
</body>
</html>
—---------------[ The code must be included in the code tag ]—--------------
ফলাফল
এট্রিবিউটকে সর্বদাই ছোট হাতের অক্ষরে লিখুন
এইচটিএমএল(৫)-এ এট্রিবিউটের নাম ছোট হাতের অক্ষরে লেখা বাধ্যতামূলক নয়।
charset এট্রিবিউটটি বড়হাতের অক্ষর(capital letter) অথবা ছোট হাতের অক্ষরে(small letter) লিখা যায়। যেমন- Charset অথবা CHARSET।
যাইহোক, W3C এইচটিএমএল এট্রিবিউটগুলো সর্বদা ছোট হাতের অক্ষরে লেখার সুপারিশ করে।
Part 02 Link:
https://blog.shikhun.net/part02