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



ওয়েব পেজে কোন এলিমেনটের স্টাইল, অবস্থান ইত্যাদি পরিবর্তনকারী কতগুলো নির্দিষ্ট শব্দই হল এট্রিবিউট। একটি উদহারন এর মাধ্যমে বিষয়টি আরও সহজবোধ্য করা যায়।

একটি প্যারাগ্রাফ এর কথা বিবেচনা করি। ডিফল্ট ভ্যালু হিসেবে প্যারাগ্রাফটি ওয়েব পেজের বাম দিক থেকে প্রদর্শিত হয়। কিন্তু আমরা প্যারাগ্রাফ ট্যাগটির সাথে একটি এট্রিবিউট ব্যবহার করে প্যারাগ্রাফটিকে ওয়েব পেজের ডান দিক থেকে প্রদর্শন করতে পারি।
এর জন্য আমাদের নিচের code টাইপ করতে হবে -

 

&<p align="right">This is a paragraph</p>


এখানে p হল একটি ট্যাগ ( tag ) আমরা p ট্যাগের সাথে align এট্রিবিউট ব্যবহার করেছি এবং এট্রিবিউটের মান বা value রূপে right নির্ধারণ করেছি।


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

এট্রিবিউটের কিছু বৈশিষ্ট্য আছে। এগুলো নিচে দেয়া হল -
এইচটিএমএল এলিমেনটও এট্রিবিউট হতে পারে,
এট্রিবিউট সবসময় start tag এ লেখা হয়,
একটি এট্রিবিউটের name ও value নামে ২টি অংশ থাকে যা এভাবে লিখতে হয় - name="value"


href এট্রিবিউট

এইচটিএমএল এ <a>, <area>, <base>, <link> ট্যাগের URL href এট্রিবিউটের মাধ্যমে সেট করা হয়।

উদাহরণ

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




src এট্রিবিউট

এইচটিএমএল <img> এবং <script> ট্যাগের সোর্স ফাইল যোগ করার জন্য src এট্রিবিউট ব্যবহার করা হয়।

উদাহরণ

<img src="img_girls.jpg">




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

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

উদাহরণ

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


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

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


alt এট্রিবিউট

ইমেজ প্রদর্শিত না হলে ইমেজের বিকল্প হিসেবে একটি টেক্সট সেট করার জন্য alt এট্রিবিউট ব্যবহার করা হয়। ইমেজটি বিদ্যমান না থাকলেও Alt এট্রিবিউট ইমেজের স্থলে টেক্সট প্রদর্শন করে।

উদাহরণ

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



style এট্রিবিউট

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

উদাহরণ

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


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


lang এট্রিবিউট

এইচটিএমএল ডকুমেন্টের ভাষা বা laguage নির্ধারণ করার জন্য <html> ট্যাগের মধ্যে lang এট্রিবিউট ব্যবহার করা হয়।

উদাহরণ

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

...

</body>
</html>


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


title এট্রিবিউট

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

উদাহরণ

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




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

এইচটিএমএল৫ এ এট্রিবিউটের নাম ছোট হাতের অক্ষরে লেখা বাধ্যতামূলক নয়। charset এট্রিবিউটটি বড়হাতের অক্ষর বা capital letter অথবা ছোট হাতের অক্ষরে বা small letter এ লিখা যায়। যেমন- Charset অথবা CHARSET।

তবে যাইহোক, W3C এইচটিএমএল এট্রিবিউটগুলোকে সর্বদা ছোট হাতের অক্ষরে লেখার সুপারিশ করে।


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

এইচটিএমএল ৫ এ এট্রিবিউটের মান কোটেশনের ছিনহের ("") মধ্যে লেখা বাধ্যতামূলক নয়। যেমন- উপরের বর্ণনা অনুযায়ী href এট্রিবিউটকে কোটেশন("") ছাড়াই লিখা যায়।

ভুল পদ্ধতি

<a href=https://www.websschool.com>



সঠিক পদ্ধতি

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


কিন্তু মাঝে মাঝে কোটেশন("") ব্যবহারের প্রয়োজন হয়। যেমন- নিচের উদাহরণটিতে title এট্রিবিউটের ভ্যালুতে স্পেস থাকায় এটি সঠিক ভাবে কাজ করবে না।

ভুল পদ্ধতি

<p title=About W3Schools>




সিংগেল(' ') বা ডাবল(" ") কোটেশন

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

যা হোক পরিস্থিতি বুঝে এবং প্রয়োজন অনুযায়ী এট্রিবিউটের মানে সিংগেল/ডাবল কোটেশন ব্যবহার করা হয়।

উদাহরণ

<p title='John "ShotGun" Nelson'>


অথবা এর বিপরীতভাবেও ব্যবহার করতে পারি।

উদাহরণ

<p title="John 'ShotGun' Nelson">




সকল এট্রিবিউট

এট্রিবিউট বর্ণনা
alt এই এট্রিবিউটটি <img> ট্যাগে ব্যবহৃত হয়। ইমেজ প্রদর্শিত না হলে বিকল্প হিসাবে এই এট্রিবিউট এর টেক্সট ব্রাউজারে প্রদর্শিত হয়।
disabled এই এট্রিবিউটটি <input> ট্যাগে ব্যবহৃত হয়। অর্থাৎ একটি নির্দিষ্ট ইনপুট এলিমেন্টকে অকেজো বা disable করতে এই এট্রিবিউট ব্যবহার করা হয়।
href এই এট্রিবিউটটি <a> ট্যাগে ব্যবহৃত হয়। অর্থাৎ একটি লিঙ্কের URL সেট করতে এটি ব্যবহার করা হয়।
id একটি এলিমেন্টের জন্য ইউনিক নাম সেট করে।
src একটি ছবি বা স্ক্রিপ্ট এর সোর্স নির্ধারণ করে।
style একটি এলিমেন্টকে ইনলাইন স্টাইল করার জন্য এটি ব্যবহার করা হয়।
title একটি এলিমেন্ট সম্পর্কে অতিরিক্ত তথ্য সংযুক্ত করতে এটি ব্যবহার করা হয়। title যুক্ত এলিমেন্টের উপর মাউস নিয়ে আসলে টুলটিপ হিসেবে টাইটেল এট্রিবিউট এর কন্টেন্ট প্রদর্শিত হয়।







এই ওয়েব সাইট এর সমস্ত টিউটোরিয়াল, সার্কিট ডায়াগ্রাম, উদাহরণ ইত্যাদি খুব সহজ ও সাধারণ ভাবে তৈরি করা হয়েছে। টিউটোরিয়াল, সার্কিট ডায়াগ্রাম, উদাহরণ ইত্যাদির ভুল পরিহার করার জন্য বার বার যাচাই করা হয়েছে, কিন্তু আমরা এর পূর্ণ নিশ্চয়তা ও দায়ভার বহন করি না। যখন আপনি এই সাইটটি ব্যবহার করেন, আমরা ধরে নেই যে আপনি পড়েছেন এবং সম্মত আছেন আমাদের টার্মস অফ ইউস (Terms of use) এবং প্রাইভেসি পলিসি( Privacy policy) সম্পর্কে।

Report or suggest about this page

Copyright 2016-2018 by websschool.com, All Rights Reserved.