HTML Attribute বা বৈশিষ্ট্য এইচটিএমএল উপাদানগুলি বা ট্যাগ সম্পর্কে অতিরিক্ত তথ্য সরবরাহ করে।
এইচটিএমএল অ্যাট্রিবিউট
- সমস্ত HTML element গুলোর অ্যাট্রিবিউট থাকতে পারে।
- অ্যাট্রিবিউট এইচটিএমএল এলিমেন্ট সম্পর্কে অতিরিক্ত তথ্য সরবরাহ করে।
- অ্যাট্রিবিউট সর্বদা শুরু ট্যাগে যোগ করা হয়।
- অ্যাট্রিবিউট বা বৈশিষ্ট্যগুলি সাধারণত name/ value জোড়ায় আসে: name= “value”
href অ্যাট্রিবিউট
<a> ট্যাগ একটি হাইপারলিংক সংজ্ঞায়িত করে। href অ্যাট্রিবিউট টি লিঙ্কটিতে ক্লিক করলে কোন পৃষ্ঠায় নিয়ে যায় তা নির্দিষ্ট করে:
<a href="https://kivabe.com">ভিজিট কিভাবে.কম</a>
আমাদের এইচটিএমএল লিংক অধ্যায়ের লিঙ্কগুলি সম্পর্কে আপনি আরও শিখবেন।
src অ্যাট্রিবিউট
<img> ট্যাগটি কোনও HTML পেজে কোনও চিত্র যোগ করতে ব্যবহৃত হয়। src অ্যাট্রিবিউট টি কো চিত্রটি ওয়েব পেজে যোগ করা হবে সেটা নির্দিষ্ট করে:
<img src="https://kivabe.com/wp-content/uploads/2017/04/img-tag-in-html.jpg">
src attribute টি নির্দিষ্ট করার জন্য দুটি উপায় রয়েছে:
1. Absolute URL – অন্য ওয়েবসাইটে হোস্ট করা একটি ছবির লিঙ্ক । উদাহরণ
src=”https://kivabe.com/wp-content/uploads/2017/04/img-tag-in-html.jpg”
Note: অন্য ওয়েবসাইটে হোস্ট করা চিত্রগুলি কপিরাইটের অধীনে হতে পারে। আপনি যদি এটি ব্যবহারের অনুমতি না পান তবে আপনি কপিরাইট আইন লঙ্ঘন করতে পারেন। এছাড়াও, আপনি অন্য ওয়েবসাইটে হোস্ট করা ছবি গুলি নিয়ন্ত্রণ করতে পারবেন না; এটি হঠাৎ করে মুছে ফেলতে বা পরিবর্তন করে ফেলতে পারে।
2. Relative URL – নিজের ওয়েবসাইটের মধ্যে হোস্ট করা একটি চিত্রের লিঙ্কগুলি। এখানে, URL- এ ডোমেনের নাম অন্তর্ভুক্ত করা হয়নি। URL টি যদি স্ল্যাশ ছাড়াই শুরু হয় তবে এটি বর্তমান পৃষ্ঠার সাথে আপেক্ষিক হবে। উদাহরণ: src = “img_girl.jpg”। URL টি যদি স্ল্যাশ দিয়ে শুরু হয় তবে এটি ডোমেনের সাথে রিলেটিভ হবে। উদাহরণ:
src=”../media/img/bg-light.jpg”
টিপ: Relative URL ব্যবহার করা সবসময় উত্তম । আপনি ডোমেন পরিবর্তন করলে সেগুলি ভেঙ্গে যাবেনা
*** Image insert ও ফাইল পাথ সম্পর্কে আরো বিস্তারিত দেখে নিতে পারেন নিচের পোস্ট টি থেকে ।
width ও height অ্যাট্রিবিউট
<img> ট্যাগটিতে প্রস্থ এবং উচ্চতার বৈশিষ্ট্যও থাকা উচিত, যা চিত্রটির প্রস্থ এবং উচ্চতা নির্দিষ্ট করে (পিক্সেল ইউনিট এ ):
<img src="../media/img/bg-light.jpg" width="500" height="250">
alt অ্যাট্রিবিউট
alt attribute নির্দেশ করে যে যদি ইমেজ টি লোড না হয় তখন কোন টেক্সট দেখাবে সেটি । alt attribute টি HTML5 এ অবশ্যই যোগ করতে হবে । অর্থাৎ কোন ইমেজ যদি alt অ্যাট্রিবিউট ছাড়া হয়, তবে সেটির জন্য HTML5 Document ভেলিড হবেনা ।
<img src="../media/img/bg-light.jpg" alt="Example Image">
যদি ছবিটি লোড না হয়ে থাকে তবে কী ঘটে তা দেখুন:
<img src="bg-light.jpg" alt="Example Image">
style Attribute
রঙ, ফন্ট, আকার এবং আরও অনেক কিছুতে স্টাইল যুক্ত করতে style অ্যাট্রিবিউট ব্যবহৃত হয়
<p style="color:red"> এই লেখার রং লাল </p>
lang Attribute
ওয়েব পেজের ভাষা ঘোষণা করার জন্য আপনার সর্বদা <html> ট্যাগের মধ্যে lang অ্যাট্রিবিউট টি অন্তর্ভুক্ত করা উচিত। এটি সার্চ ইঞ্জিন এবং ব্রাউজারগুলিকে সহায়তা করার জন্য। নিম্নলিখিত উদাহরণটি ইংরাজিকে ভাষা হিসাবে নির্দিষ্ট করে:
<!DOCTYPE html> <html lang="en"> <body> ... </body> </html>
lang অ্যাট্রিবিউট এ ভাষা কোডে দেশীয় কোডও যুক্ত করা যায়। সুতরাং, প্রথম দুটি অক্ষর এইচটিএমএল পৃষ্ঠার ভাষা সংজ্ঞা দেয় এবং শেষ দুটি অক্ষর দেশকে সংজ্ঞায়িত করে।
নিম্নলিখিত উদাহরণটি বাংলা হিসাবে ভাষা এবং বাংলাদেশকে দেশ হিসাবে নির্দিষ্ট করে:
<!DOCTYPE html> <html lang="bn-BD"> <body> ... </body> </html>
title Attribute
title অ্রাট্রিবিউট টি একটি এইচটিএমএল এলিমেন্ট সম্পর্কে কিছু অতিরিক্ত তথ্য সংজ্ঞায়িত করে।
title অ্রাট্রিবিউট এর ভেলুটি একটি টুলটিপ হিসাবে প্রদর্শিত হবে যখন আপনি এলিমেন্ট টির উপর মাউস রাখবেন:
<p style="color:red" title="এটি একটি P tag">আমার উপর মাউচ রাখুন </p>
একসাথে একাধিক অ্যাট্রিবিউট ও ব্যবহার করা যায় । উপরের কোড টি দেখুন ।
সর্বদা ছোট হাতের অ্যাট্রিবিউট ব্যবহার করুন
এইচটিএমএল স্ট্যান্ডার্ডের জন্য ছোট হাতের অ্যাট্রিবিউট নাম প্রয়োজন হয় না।
title attribute (এবং অন্যান্য সমস্ত attribute ) বড় হাতের বা ছোট ছোট অক্ষরের মতো title বা TITLE দিয়ে লেখা যেতে পারে।
তবে, W3C এইচটিএমএলে ছোট হাতের অ্যাট্রিবিউট রিকমেন্ড করে এবং এক্সএইচটিএমএলের মতো স্ট্রিক ডকুমেন্ট এর জন্য ছোট হাতের অ্যাট্রিবিউট এ লিখতে হয়।
আমরা আমাদের কিভাবে.কম এ সব lowercase attribute ব্যবহার করেছি ।
সর্বদা অ্যাট্রিবিউট এর মান কোটেশন এর মধ্যে রাখুন
এইচটিএমএল স্ট্যান্ডার্ডের জন্য অ্যাট্রিবিউট মানগুলির চারপাশে কোটেশন এর প্রয়োজন নেই।
তবে ঝামেলা বাধে যখন একাধিক শব্দ থাকে অ্যাট্রিবিউট ভ্যালুতে, কারন একাধিক ওয়ার্ড হওয়ায় ২য় ওয়ার্ড টি নতুন আর একটি অ্যাট্রিবিউট ভেবে ভুল করে বসে কোন কোন ওয়েব বাউজার ।
আর W3C ও রকমেন্ড করে কোটেশন এর মধ্যেই অ্যাট্রিবিউট ভ্যালু গুলো রাখতে ।
Single নাকি Double Quotes?
সিংগেল বা ডাবল যে কোনটি ই আপনি ব্যবহার করতে পারেন । তবে যেটি দিয়ে শরু করবেন সেটি দিয়েই শেষ করবেন । যেমন আপনি ডাবল কোট দিয়ে শুরু করেছেন কোন অ্যাট্রিবিউট ভ্যালু, তাহলে সেটি শেষ ও করতে হবে ডাবল কোট দিয়েই ।
আবার টাইটেল অ্যাট্রিবিউট এর ক্ষেত্রে আপনি যদি কোটেশন ই দেখানে চান যেমন: আমার নাম “শাহরিয়ার”, তাহলে নিচের মতো করতে পারেন ।
<p title='আমার নাম "শাহরিয়ার" '>আমি এই পোস্ট টি লিখেছি </p>
কিংবা
<p title="আমার নাম 'শাহরিয়ার' ">আমি এই পোস্ট টি লিখেছি </p>
Global Attributes
HTML Tag ভেদে Attribute গুলো আলাদা আলাদা হয় । কিন্তু ৫টি এট্রিবিউটা আছে যারা সব ট্যাগের সাথেই থাকতে পারে ।
- class
- id
- style
- title
- data-
এগুলো গ্লোবাল এট্রিবিউট এবং যে কোন HTML Elements এর সাথে থাকে ।
title ও style সম্পর্কে ধারনা পেয়ে গেছেন । বাকি তিনটি নিয়ে আমরা পরে আলোচনা করবো ।
অধ্যায় সারাংশ
- সমস্ত HTML এলিমেন্ট গুলোর অ্যাট্রিবিউট থাকতে পারে
- <a> এর href বৈশিষ্ট্যটি লিঙ্কটিতে যে পেজে যায় তার URL টি নির্দিষ্ট করে
- <img> এর src অ্যাট্রিবিউটটি প্রদর্শিত হওয়ার চিত্রটি নির্দিষ্ট করে
- <img> এর width এবং height বৈশিষ্ট্যগুলি চিত্রগুলির জন্য আকারের তথ্য সরবরাহ করে
- <img> এর alt বৈশিষ্ট্যটি একটি চিত্রের জন্য একটি বিকল্প পাঠ্য সরবরাহ করে
- রঙ, ফন্ট, আকার এবং আরও অনেক কিছুতে style বৈশিষ্ট্যটি স্টাইল যুক্ত করতে ব্যবহৃত হয়
- <html> ট্যাগের lang বৈশিষ্ট্যটি ওয়েব পৃষ্ঠার ভাষা ঘোষণা করে
- title বৈশিষ্ট্য একটি উপাদান সম্পর্কে কিছু অতিরিক্ত তথ্য সংজ্ঞায়িত করে
- ৫টি গ্লোবাল এট্রিবিউটা আছে যারা সব ট্যাগের সাথেই থাকতে পারে: class, id, style, title , data-