HTML অ্যাট্রিবিউট: ধাপে ধাপে পূর্ণ নির্দেশিকা

HTML অ্যাট্রিবিউট HTML এলিমেন্টের অতিরিক্ত বৈশিষ্ট্য নির্ধারণ করে। এগুলো একটি HTML এলিমেন্টের ওপেনিং ট্যাগে নির্দিষ্ট করা হয়, এবং কিছু এলিমেন্ট কার্যকর হওয়ার জন্য অ্যাট্রিবিউট আবশ্যক।

HTML অ্যাট্রিবিউট কী, এবং কীভাবে এগুলো ব্যবহার করবেন? HTML শেখার সময় আপনি attributes শব্দটি দেখতে পেতে পারেন। অ্যাট্রিবিউটগুলো একটি HTML পেজের নির্দিষ্ট এলিমেন্ট সম্পর্কে অতিরিক্ত তথ্য প্রদান করতে ব্যবহৃত হয়।

অ্যাট্রিবিউটগুলো একটি HTML ডকুমেন্টের ওপেনিং ট্যাগে নির্দিষ্ট করা হয় এবং সাধারণত নাম/মানের জোড়া হিসেবে নির্দিষ্ট করা হয়। উদাহরণস্বরূপ, name নামে একটি অ্যাট্রিবিউট যার মান value সেটি এমন দেখাবে: name=value।

এই টিউটোরিয়াল উদাহরণের সাথে HTML-এ অ্যাট্রিবিউটের মৌলিক বিষয় এবং কেন এগুলো ব্যবহৃত হয় সেটি আলোচনা করবে। আমরা কিছু সাধারণ-উদ্দেশ্য অ্যাট্রিবিউট ও আলোচনা করব যা HTML-এ অধিকাংশ এলিমেন্টে প্রযোজ্য এবং কোডিং করার সময় আপনি которых সবচেয়ে বেশি মুখোমুখি হবেন।

HTML অ্যাট্রিবিউট কী?

HTML মার্কআপ ভাষার প্রতিটি এলিমেন্টের একটি অ্যাট্রিবিউট থাকতে পারে, যা সেই এলিমেন্টের ধারিত একটি অতিরিক্ত বৈশিষ্ট্য নির্ধারণ করতে ব্যবহৃত হয়।

উদাহরণস্বরূপ, আমরা একটি ছবির উচ্চতা বা একটি ফর্ম এলিমেন্টের সংরক্ষিত মান নির্ধারণ করার জন্য একটি অ্যাট্রিবিউট নির্দিষ্ট করতে চাই। এই অ্যাট্রিবিউটগুলো নির্দিষ্ট এলিমেন্টের জন্য নির্দিষ্ট, অর্থাৎ এগুলো একটি নির্দিষ্ট এলিমেন্ট কীভাবে একটি ওয়েব পেজে কাজ করবে সেটি কাস্টমাইজ করতে ব্যবহার করা যায়।

কিছু ক্ষেত্রে, একটি এলিমেন্টের জন্য অ্যাট্রিবিউট আবশ্যক। উদাহরণস্বরূপ, আপনি যদি <a> HTML ট্যাগের সাথে কাজ করেন, তবে আপনাকে href অ্যাট্রিবিউট নির্ধারণ করতে হবে যাতে ক্লিক করলে ট্যাগটি কোন URL-এ যাবে সেটি জানা যায়।

HTML-এ একটি অ্যাট্রিবিউটের দুটি অংশ আছে:

৮১% অংশগ্রহণকারী বলেছেন বুটক্যাম্পে অংশ নেওয়ার পর তাদের টেক জব প্রস্পেক্টস সম্পর্কে অধিক আত্মবিশ্বাসী অনুভব করছেন। আজই একটি বুটক্যাম্পের সাথে ম্যাচ হোন।

গড় বুটক্যাম্প স্নাতক ক্যারিয়ার ট্রানজিশনে ছয় মাস কম ব্যয় করেছেন, বুটক্যাম্প শুরু থেকে প্রথম চাকরি পাওয়া পর্যন্ত।

• name আপনি যে অ্যাট্রিবিউট তৈরি করছেন তার নাম নির্ধারণ করে।
• value অ্যাট্রিবিউটের ধারিত মান নির্ধারণ করে।

মান লें আমরা ক্যারিয়ার করমা ওয়েবসাইটের হোম পেজে নির্দেশ করে একটি লিংক নির্ধারণ করতে চাই। এটি করার জন্য, আমরা HTML-এ <a> ট্যাগ ব্যবহার করতে পারি। কিন্তু যদি আমরা ট্যাগটিকে ক্যারিয়ার করমা হোমপেজে লিংক করতে চাই, তবে আমাদের href অ্যাট্রিবিউটও ব্যবহার করতে হবে।

এখানে <a> ট্যাগের একটি উদাহরণ যা ক্যারিয়ার করমা হোমপেজে লিংক করে:

<a href="https://careerkarma.com/">Career Karma</a>

এই ট্যাগ href নামে একটি অ্যাট্রিবিউট ব্যবহার করে এবং এতে "https://careerkarma.com/" মান বসায়, যা ক্যারিয়ার করমা হোমপেজের URL।

HTML-এ অ্যাট্রিবিউট কেস ইনসেনসিটিভ, কিন্তু অ্যাট্রিবিউট সাধারণত লোয়ার কেসে লেখা হয়।

HTML-এ সিঙ্গেল এবং ডাবল কোট

অ্যাট্রিবিউটে মান বসাতে время আপনি সিঙ্গেল এবং ডাবল উভয় কোট ব্যবহার করতে পারেন। ডাবল কোট ব্যবহার করা সবচেয়ে সাধারণ পদ্ধতি (এবং আমাদের আগের উদাহরণে আমরা যেটি ব্যবহার করেছি)। তবে আপনি কোন পদ্ধতি ব্যবহার করবেন সেটি আপনার অ্যাট্রিবিউটের বিষয়বস্তুর ওপর নির্ভর করে।

মান লें আমরা একটি ফর্ম এলিমেন্ট তৈরি করছি যার মান John ‘Rocketman’ Smith। এই ক্ষেত্রে, যেহেতু আমাদের মানে সিঙ্গেল কোট আছে, আমাদের অ্যাট্রিবিউটের নামের জন্য ডাবল কোট ব্যবহার করা উচিত। এই অ্যাট্রিবিউট ঘোষণা করার জন্য আমরা যে কোডটি ব্যবহার করব:

<input type="text" value="John 'Rocketman' Smith">

অন্যদিকে, আমাদের মান যদি ডাবল কোট ধারণ করত এবং John “Rocketman” Smith হত, তবে আমরা অ্যাট্রিবিউট নির্ধারণের জন্য সিঙ্গেল কোট ব্যবহার করতাম। আমরা যে কোডটি ব্যবহার করতাম:

<input type="text" value='John "Rocketman" Smith'>

HTML বুলিয়ান অ্যাট্রিবিউট কীভাবে ব্যবহার করবেন

কিছু অ্যাট্রিবিউট নাম/মানের জোড়া কাঠামো ব্যবহার করে না। আমরা এদের বুলিয়ান অ্যাট্রিবিউট বলি। এই অ্যাট্রিবিউটগুলো শুধু true-false মান 가질 수 있으며, নির্দিষ্ট করা থাকলে তাদের মান true এবং নির্দিষ্ট করা না থাকলে false হয়।

বুলিয়ান অ্যাট্রিবিউট HTML ফর্মে সাধারণত ব্যবহৃত হয়। মান লেন আমরা একটি ফর্ম ফিল্ড তৈরি করছি যা ব্যবহারকারীর নাম চাইবে। আমরা এই ফর্ম ফিল্ডকে ডিফল্টভাবে বাধ্যতামূলক করতে চাই। আমরা এটি সম্পন্ন করতে required বুলিয়ান অ্যাট্রিবিউট ব্যবহার করতে পারি:

<input type="text" value="Name" required>

এই উদাহরণে, আমরা তিনটি অ্যাট্রিবিউট সহ একটি ইনপুট ট্যাগ নির্ধারণ করেছি। প্রথম দুটি অ্যাট্রিবিউট, type এবং value, নাম/মান কাঠামো ব্যবহার করে। তৃতীয় অ্যাট্রিবিউট, required, একটি বুলিয়ান অ্যাট্রিবিউট। যেহেতু আমরা required বুলিয়ান অ্যাট্রিবিউট নির্দিষ্ট করেছি, এর মান true সেট হয়েছে।

স্ট্যান্ডার্ড HTML অ্যাট্রিবিউট কীভাবে ব্যবহার করবেন

HTML-এ কিছু অ্যাট্রিবিউট আছে যা প্রতিটি এলিমেন্টে প্রযোজ্য। এদের গ্লোবাল অ্যাট্রিবিউট বলা হয়।

আপনি একটি ওয়েবপেজে এদের সনাক্ত করতে পারেন, তাই আপনাকে জানতে হবে সেগুলো কী এবং কীভাবে কাজ করে। চলুন HTML-এ এলিমেন্টে প্রযোজ্য চারটি সবচেয়ে সাধারণ স্ট্যান্ডার্ড অ্যাট্রিবিউট নিয়ে আলোচনা করি।

HTML id অ্যাট্রিবিউট

id অ্যাট্রিবিউট একটি এলিমেন্টকে একটি অনন্য শনাক্তকারী দেয়। id অ্যাট্রিবিউট নিজে কোনোভাবে HTML এলিমেন্টের প্রদর্শনাকে প্রভাবিত করে না, কিন্তু এটি আপনাকে CSS বা JavaScript-এ কাজ করার সময় একটি নির্দিষ্ট এলিমেন্ট সিলেক্ট করে ম্যানিপুলেট করতে দেয়।

আপনি যেকোনো এলিমেন্টে যা id বসাবেন সেটি একটি ডকুমেন্টে অনন্য হওয়া উচিত।

<p> ট্যাগে id অ্যাট্রিবিউট ব্যবহারের একটি উদাহরণ:

<p id="secondParagraph">Hello, there! Welcome to my site.</p>

এই উদাহরণে, আমরা আমাদের <p> ট্যাগে id অ্যাট্রিবিউট বসিয়েছি যার মান secondParagraph।

HTML title অ্যাট্রিবিউট

HTML title অ্যাট্রিবিউট প্রায়শই একটি এলিমেন্ট বা এর বিষয়বস্তু ব্যাখ্যা করতে ব্যবহৃত হয়। title অ্যাট্রিবিউটে সংরক্ষিত মান একটি টুলটিপ হিসেবে প্রদর্শিত হয় যা ব্যবহারকারী কর্ষর এলিমেন্টের ওপর নেওয়ার সময় দেখায়।

মান লেন আমাদের একটি ইনপুট ফিল্ড আছে যা ব্যবহারকারীর নাম সংগ্রহ করে। আমরা ব্যবহারকারী ফিল্ডের ওপর হোভার করলে This field is required দেখাতে চাই। আমরা নিচের কোড ব্যবহার করে এটি অর্জন করতে পারি:

<input type="text" title="This field is required">

যখন আমরা টেক্সট ফিল্ডের ওপর হোভার করব, নিচের টুলটিপটি দেখাবে:

HTML style অ্যাট্রিবিউট

HTML style অ্যাট্রিবিউট একটি নির্দিষ্ট এলিমেন্টের জন্য CSS স্টাইল নির্দিষ্ট করতে ব্যবহৃত হয়। একটি এলিমেন্ট স্টাইল করার এই পদ্ধতিকে ইনলাইন স্টাইল তৈরি বলা হয়।

মান লেন আমরা একটি টেক্সট প্যারাগ্রাফ তৈরি করছি যা স্লেটি রঙে দেখাবে। আমরা style অ্যাট্রিবিউট ব্যবহার করে আমাদের টেক্সটের রঙ নির্দিষ্ট করতে পারি। এই কাজটি সম্পন্ন করতে আমরা যে কোডটি ব্যবহার করতে পারি:

<p style="color: gray;">Hello, there! This is my website.</p>

আমাদের কোডের আউটপুট:

আপনি দেখতে পাচ্ছেন, আমাদের টেক্সটের রঙ স্লেটি হয়ে গেছে। এটি হলো কারণ আমরা একটি style অ্যাট্রিবিউট নির্দিষ্ট করেছি এবং color স্টাইলকে gray এর সমান বসিয়েছি।

এলিমেন্ট-নির্দিষ্ট HTML অ্যাট্রিবিউট

আপনি যে অন্যান্য অ্যাট্রিবিউটগুলো মুখোমুখি হতে পারেন সেগুলো একটি এলিমেন্টের জন্য নির্দিষ্ট। এখানে কিছু উদাহরণ:

img src

<img src="source.png">

এই উদাহরণে, আমরা src অ্যাট্রিবিউট নির্দিষ্ট করেছি। এই অ্যাট্রিবিউট img ট্যাগের সাথে ব্যবহার হয় যাতে ট্যাগটি ওয়েবপেজে কোন ফাইল রেন্ডার করবে সেটি নির্দেশ করে।

a href

<a href="https://careerkarma.com/">Career Karma homepage</a>

এই উদাহরণে href অ্যাট্রিবিউট ব্যবহার করা হয়েছে যাতে <a> ট্যাগটি জানতে পারে লিংক ক্লিক করলে ব্যবহারকারীকে কোন সাইটে নেয়া হবে।

img alt

<img src="source.png" alt="Image of a book">

আমাদের কোডে, আমরা alt অ্যাট্রিবিউট নির্দিষ্ট করেছি। এই অ্যাট্রিবিউট img ট্যাগের জন্য নির্দিষ্ট এবং বিকল্প টেক্সট নির্দিষ্ট করে যা ওয়েবপেজ প্রসেস করবে যদি ছবিটি প্রদর্শন করা না যায়।

HTML-এ alt অ্যাট্রিবিউট স্ক্রিন রিডার পড়তে পারে, তাই দৃষ্টিবাধিত কেউ যারা স্ক্রিন রিডারের ওপর নির্ভর করে সেও আমাদের ওয়েবপেজ বুঝতে পারবেন।

HTML অ্যাট্রিবিউট ব্যবহার: উপসংহার

অ্যাট্রিবিউট হলো HTML-এ একটি নির্দিষ্ট এলিমেন্টে প্রযোজ্য অতিরিক্ত বৈশিষ্ট্য। অ্যাট্রিবিউট সবসময় একটি এলিমেন্টের ওপেনিং ট্যাগে নির্দিষ্ট করা হয় এবং সাধারণত নাম/মানের জোড়া ব্যবহার করে।

এই টিউটোরিয়াল উদাহরণের সাথে HTML-এ অ্যাট্রিবিউটের মৌলিক বিষয়, বুলিয়ান অ্যাট্রিবিউট, কিছু স্ট্যান্ডার্ড HTML অ্যাট্রিবিউট, এবং কিছু এলিমেন্ট-নির্দিষ্ট অ্যাট্রিবিউট নিয়ে আলোচনা করেছে। এখন আপনি জানেন HTML-এ অ্যাট্রিবিউট কীভাবে ব্যবহার করতে হয়।