ধাপ
৪

HTML Attribute

কিছু ট্যাগ আছে যেগুলো শুধু opening tag (<>) এবং closing tag (</>) দিয়ে কাজ করা যায় না। যেমন একটি <img> ট্যাগ দিয়ে ছবি লোড/ দেখানোর জন্য আরো কিছু তথ্য দিতে হয়। যা লিখতে হয় <tag এবং > এর ভিতর, অর্থাৎ <tag ... > এরকম। এখানে ... এর স্থানে যে তথ্য দেয়া হয় সেগুলোকেই attribute বলা হয়।

উদাহরণঃ

<tag attribute="value" >

নিচের উদাহরণটি দেখা যাক, তাহলেই সব পরিষ্কার হবে।

কোডঃ

<img src="_images/_post-images/Pumpkin.png" alt="Pumpkin" title="Pumpkin" width="200" height="200">

প্রিভিউঃ

Browser

Pumpkin

বিশ্লেষণঃ

<img ... >

<img> ট্যাগ দিয়ে ওয়েবপেজে ছবি লোড করা হয়।

src="/_images/_post-images/Pumpkin.png"

src একটি এট্রিবিউট। যা এসেছে source থেকে। এটি দিয়ে ছবির ঠিকানা (source) দেয়া হয়।

alt="Pumpkin"

alt এসেছে alter থেকে। ব্রাউজার যদি কোনো কারনে ছবি লোড করতে না পারে তাহলে এ এট্রিবিউটের ভ্যালুটি প্রদর্শন করে। এটি SEO এর জন্যও গুরুত্ব পূর্ণ। সার্চ ইঞ্জিন গুলো ছবি পড়তে পারেনা। সেগুলো alt এট্রিবিউট থেকেই জানতে পারে ছবি সম্পর্কে।

title="Pumpkin"

লোড হওয়া ছবির উপর মাউস পয়েন্টার নিয়ে গেলে এ এট্রিবিউটটির ভ্যালু দেখাবে। ছবি সম্পর্কে তথ্য জানাতেই মূলত এ এট্রিবিউট টি ব্যবহার করা হয়।

width="200"

ছবির প্রস্থ নির্দিষ্ট করে দিতে এ এট্রিবিউটটি ব্যবহার করা হয়।

height="200"

ছবির উচ্চতা নির্দিষ্ট করে দিতে এ এট্রিবিউটটি ব্যবহার করা হয়।

আরেকটি উদাহরন দেখা যাক।

কোডঃ

<a href="http://imaginativeworld.org" title="Imaginative World Main Site">Imaginative World</a>

প্রিভিউঃ

Browser

Imaginative World

বিশ্লেষণঃ

<a ... ></a>

<a> ট্যাগ দিয়ে ওয়েবপেজে লিঙ্ক দেয়া হয়।

href="http://imaginativeworld.org"

href এট্রিবিউট এ লিঙ্ক এর লোকেশন দেয়া হয়। অর্থাৎ লিঙ্ক এ ক্লিক করা হলে কোথায় যাবে তার ঠিকানা দেয়া হয়।

title="Imaginative World"

title এখানোও লিঙ্ক সম্পর্কে তথ্য প্রদানে ব্যবহৃত হয়। লিঙ্কের উপর মাউস পয়েন্টার নিয়ে গেলে এ এট্রিবিউটের তথ্য দেখতে পাবেন।

<a ... >Imaginative World</a>

<a ... > এবং </a> এর ভিতর যা লিখবেন তাই লিঙ্ক হিসেবে দেখাবে।

কিছু সাধারন এট্রিবিউট পরিচিতি

class

এক বা একাধিক Class নির্দিষ্ট করে দেয়া যায়। (স্টাইল শিটে Class ব্যবহৃত হয়)

id

এলিমেন্টের জন্য ID নির্দিষ্ট করে দিতে এ এট্রিবিউটটি ব্যবহার করা যায়। প্রতিটা আইডি অবশ্যই আলাদা আলাদা (unique) হতে হবে।

style

স্টাইল তথ্য এ এট্রিবিউটে নির্দিষ্ট করে দেয়া যায়।

title

উপরের উদাহরন গুলোতেই দেখেছেন এ এট্রিবিউট দিয়ে এলিমেন্ট সম্পর্কে তথ্য দেয়া যায়।

উদাহরণ

নিচের কোড গুলো নিজের মত পরিবর্তন/পরিবর্ধন করে এইচটিএমএল ফাইল হিসেবে ব্রাউজারে চালু করে দেখুন এবং শিখুন।

<!doctype html>
<html>

	<body>

		<p id="normalText" style="text-align: center;">This is a normal paragraph.</p>

		<p class="designed" style="font-size: 32px; color: green;">This is line with two attribute.</p>

		<a id="linkggl" style="font-size: 18px; color: blue;" href="http://google.com">This is line with two attribute.</a>

	</body>

</html>

যা যা জানলাম
Disqus মন্তব্য লোড হচ্ছে.. অপেক্ষা করুন...