এইচটিএমএল এট্রিবিউট - HTML Attribute


এট্রিবিউট হল এমন কিছু শব্দগুচ্ছ যা প্রথম অর্থাৎ শুরুর দিকের এইচটিএমএল এলিমেন্ট বা ট্যাগেও সাথে বসে এবং এইচটিএমএল এলিমেন্টের কাজের ওপর প্রভাব বিস্তার করে।

Example of HTML Attributor

এট্রিবিউটের বৈশিষ্ট্য


href এট্রিবিউট

এইচটিএমএল ডকুমেন্টে এ <a>, <area>, <base>, <link>, এই সকল ট্যাগের URL নির্দেশ করতে, অর্থাৎ এইচটিএমএল ডকুমেন্টের সাথে এগুলো যুক্ত করতে href এট্রিবিউটের ব্যবহার করে করা হয়।

উদাহরণ


<a href="https://www.websschool.com">This is a link.</a>

কোড এডিটর



src এট্রিবিউট

এইচটিএমএল ডকুমেন্টে <img> এবং <script> ট্যাগের সাথে মূল ফাইল এর সংযোগ করার জন্য src এট্রিবিউট ব্যবহার করা হয়। নিছে একটি উদাহরণ দেখুন।

উদাহরণ


<img src="flower_image.jpg" />

কোড এডিটর



width এবং height এট্রিবিউট

এইচটিএমএল ডকুমেন্টে কোন ছবির প্রস্থ বা width ও উচ্চতা বা height নির্ধারণ করার জন্য width এবং height এট্রিবিউট ব্যবহার করা হয়। নিচে এর একটি উদাহরণ দেখুন।

উদাহরণ


<img src="flower_image.jpg" width="500" height="600">

কোড এডিটর


এখানে ছবিটির আকার বা size পিক্সেল বা px এ নির্ধারিত হবে অর্থাৎ width="500" এর অর্থ হল ব্রাউজারে 500px প্রস্থে ছবিটি প্রদর্শিত হবে।

আপনি আমাদের এইচটিএমএল ছবি অধ্যায়ে ছবি সম্পর্কে আরও বিস্তারিত জানতে পারবেন।


alt এট্রিবিউট

কোন কারনে যদি ওয়েব পেজে নির্ধারিত ছবিটি প্রদর্শিত না হয়, তখন ছবিটির বিকল্প হিসেবে একটি লেখা, ওয়েব পেজে প্রদর্শিত হয়। এই লেখা বা text নির্ধারণ করার জন্য alt এট্রিবিউট ব্যবহার করা হয়। ছবি বা image টি বিদ্যমান না থাকলে Alt এট্রিবিউট ছবিটির স্থানে নিচের মত একটি লেখা বা text প্রদর্শন করে।

উদাহরণ


<img src="img_girl.jpg" alt="Girl with a flower">

কোড এডিটর


Example of use of Alt Attribute

style এট্রিবিউট

style এট্রিবিউট ব্যবহার করে কোন এইচটিএমএল এলিমেন্টে স্টাইল যেমন - রঙ, ফন্ট, আকার ইত্যাদি যোগ করা যায়। নিছে একটি উদাহরন দেখুন।

উদাহরণ


<p style="color:red">I am a paragraph</p>

কোড এডিটর


স্টাইল সম্পর্কে আরও বিস্তারিত জানতে আমাদের সিএসএস টিউটোরিয়াল পেজটি ব্রাউজ করুন।


lang এট্রিবিউট

এইচটিএমএল ডকুমেন্টের ভাষা বা laguage নির্ধারণ করার জন্য <html> ট্যাগের সাথে lang এট্রিবিউট ব্যবহার করা হয়। সার্চ ইঞ্জিন এবং বিভিন্ন ওয়েব অ্যাপ্লিকেশান এর জন্য এইচটিএমএল ডকুমেন্টের শুরুতেই lang এট্রিবিউট ব্যবহার করে ওয়েব পেজের ভাষা নির্ধারণ করে দিতে হয়।

উদাহরণ


<!DOCTYPE html>
<html lang="en-US">
<body>

কোড এডিটর


এইচটিএমএল lang এট্রিবিউটে ব্যবহারের জন্য সকল ভাষার কোড জানতে আমাদের এইচটিএমএল ল্যাঙ্গুয়েজ কোড পেজটি ব্রাউজ করুন।


title এট্রিবিউট

কোন এলিমেন্টের উপর মাউস হোভার করলে একটি টুলটিপ আকারে কোন লেখা প্রদর্শনের জন্য title এট্রিবিউট ব্যবহার করা হয়ে থাকে।

উদাহরণ


<p title="I'm a tooltip">
This is a paragraph with a tooltip.
</p>

কোড এডিটর



এট্রিবিউট সর্বদা ছোট হাতের অক্ষরে লিখুন

এইচটিএমএল এর ৫.০ সংস্করণে কোন এইচটিএমএল এট্রিবিউটের নাম ছোট হাতের অক্ষর বা capital letter এ লেখা বাধ্যতামূলক না। অর্থাৎ STYLE এট্রিবিউটটি বড় হাতের অক্ষর বা capital letter অথবা ছোট হাতের অক্ষরে বা small letter এ লেখা যায়, এ দুটি একই কাজ করবে। যেমন- style অথবা STYLE। কিন্তু W3C এইচটিএমএল এট্রিবিউটগুলোকে সর্বদা ছোট হাতের অক্ষর ব্যবহার করে লেখার পরামর্শ দেয়।


কোটেশন ছিনহের ব্যবহার

এইচটিএমএল ৫.০ সংস্করণে কোন এট্রিবিউটের মান কোটেশনের ছিনহের ("") মধ্যে রাখতেই হবে , এমন না। কিন্তু তাও কখন কখন কোটেশন ("") ছিনহ ব্যবহারের প্রয়োজন হয়। যেমন- কোন এট্রিবিউটের ভ্যালুতে স্পেস থাকলে তা ঠিক ভাবে কাজ নাও করতে পারে।
যেমন – নিছে একটি উদাহরন দেখুন, যেখানে title এট্রিবিউটের ভ্যালুতে স্পেস থাকায় এটি সঠিক ভাবে কাজ করছে না।

উদাহরণ - ভুল পদ্ধতি


<p title=About websSchool>

সঠিক পদ্ধতিটি নিছে দেখুন।

উদাহরণ - সঠিক পদ্ধতি


<p title="About websSchool">

যদিও এইচটিএমএল এট্রিবিউটের মান লেখার জন্য সাধারনত ডাবল ( " " ) কোটেশন ব্যবহার করা হয়ে থাকে, তারপরও আমরা সিংগেল (' ') কোটেশন ছিনহও ব্যবহার করতে পারি। যদি এমন হয়, এট্রিবিউটের মানেই ডাবল ( " " ) কোটেশন রয়েছে, সেক্ষেত্রে সিংগেল কোটেশন ব্যবহার করা জেতে পারে। তবে সর্বক্ষেত্রে ডাবল কোটেশন ব্যবহার করাই উত্তম।

উদাহরণ - সঠিক পদ্ধতি


< p title='This is a "paragraph" with a tooltip'.>

এটাকে এর বিপরীতভাবেও ব্যবহার করা যায়। নিচে এর একটি উদাহরণ দেখুন।

উদাহরণ - সঠিক পদ্ধতি


< p title="This is a 'paragraph' with a tooltip".>

W3C এর এইচটিএমএল এট্রিবিউট সম্পর্কিত ওয়েব পেজটি দেখতে W3C - Html/Attributes/ Global ওয়েব পেজটি ব্রাউজ করুন।