HTML শিখুন HTML5 সহ (পার্ট-4) HTML Attribute

আমরা যে সকল ওয়েব পেজ দেখি সেখানে তো অনেক লেখা, উপাদান বা অনেক তথ্য সাজানো থাকে। তা কিন্তু এমনিতেই সাজানো থাকে না। কোন উপাদান কি ভাবে সাজানো থাকবে, দেখতে কি রকম হবে, ওয়েব পেজ এর কোথায় ও কতটুকু জায়গা নিয়ে বসবে এ সকল বিষয় গুলোই হচ্ছে Attribute বা বৈশিষ্ট্য। এগুলো HTML Attribute দ্বারা ঠিক করে দেওয়া হয়।

Element কি তা বলছি এর আগের টুইটে। প্রত্যেক Element এর নির্দিষ্ট বৈশিষ্ট্য বা Attribute থাকতে পারে। এখানে পারে বলছি, কারন কোন কোন ক্ষেত্রে না ও থাকতে পারে। একটি HTML Element এর জন্য অতিরিক্ত এই বৈশিষ্ট্য গুলো HTML Attribute দ্বারা দেওয়া হয়। Start Tag কি তা জানি আমরা। HTML Attribute গুলো Start Tag এর ভিতরে লেখা হয়, কিন্তু অবশ্যই End Tag ব্যবহার করা যাবে না। এবং নিছের মত করে লেখা হয়ঃ

name=”value”

এখানে name হচ্ছে HTML Attribute এর নাম। value হচ্ছে ঐ HTML Attribute এর মান। এই name এবং value গুলো  নির্দিষ্ট। একটা মান এবং নামের জন্য HTML Element গুলো এক এক রকম দেখা যাবে। এবং একটি সম্পুর্ন element এ নিচের মত করে লেখা হয়ঃ

এখানে a Element বা Link Element এ Attribute ব্যবহার করা হয়েছে। যেখানে,  Attribute name হচ্ছে href এবং value হচ্ছে http://example.com।

Value গুলো সব সময় Double Quote এর মধ্যে লেখা হয়। আর সব সময় ছোট হাতের অক্ষরে লেখা হয়।

কিছু Attribute globally নির্ধারন করা যায় এবং যেকোন Element এ ব্যবহার করা যায়। আবার কিছু কিছু Attribute নির্দিষ্ট Element এর জন্য ব্যবহার করা হয়।

Globally নির্ধারন করতে Attribute গুলো Head Tag এর মধ্যে লিখতে হয়।

যদি কোন Element এ কোন  attribute না থাকে তাকে Empty Attributesবলে।

নিছে HTML Attribute গুলো দেওয়া হলঃ

প্রথমে প্রধান HTML Attribute গুলোঃ

Attribute Value(মান) বর্ননা।
class classname এটি Element এর জন্য Class name ঠিক করে। এটি CSS বা Style Shit এর জন্য ববহার করা হয়।
Id id প্রত্যেকটা Element এর জন্য একটি  id ঠিক করে।
Style style_definition inline style দেওয়া হয়। (inline style সম্পর্কে পরে বলব)
Title text একটা Element এর জন্য অতিরিক্ত তথ্য দেওয়ার জন্য ব্যবহার করা হয়।

 

ভাষার জন্য ব্যবহৃত Attribute গুলোঃ

 

Attribute Value(মান) বর্ননা
dir ltr
rtl
একটি Element এর Text গুলোর দিক নির্দিষ্ট করা হয়। বাম থেকে ডানে লেখার জন্য ltr ব্যবহার করা হয়। আর যারা ডান থেকে বামে, যেমন আরবী, তারা rtl ব্যবহার করে।
lang language_code কোন নির্দিষ্ট একটি ভাষা লেখার জন্য ব্যবহার করা হয়।

 

আমাদের তো সকল languagecode ধরকার নেই, তাই না? বাংলার কোড হচ্ছেঃ bn আর ইংরেজীরঃ en।

কীবোর্ডের জন্য ব্যবহৃত Attribute গুলোঃ

 

Attribute Value(মান) বর্ননা
accesskey character একটা element এ যাওয়ার জন্য সর্টকার্ট কী তৈরি করার জন্য ব্যবহার করা হয়।
tabindex number কীবোর্ডের Tab কী তে কোন Element এর  order কি হবে তা নির্ধারন করে।

 

এবার দেখি HTML5 Global Attributes গুলো।

 

Attribute Value(মান) বর্ননা
accesskey character একটা element এ যাওয়ার জন্য সর্টকার্ট কী তৈরি করার জন্য ব্যবহার করা হয়।
class classname এটি Element এর জন্য Class name ঠিক করে। এটি CSS বা Style Shit এর জন্য ববহার করা হয়।
contenteditable true
false
ব্যবহার কারীক কোন লেখা বা উপাদান সম্পাদনা করতে পারবে কি পারবে না তা নির্দিষ্ট করে।
contextmenu menu_id context menu দেওয়ার জন্য ব্যবহার হয়।
dir ltr
rtl
একটি Element এর Text গুলোর দিক নির্দিষ্ট করা হয়।
draggable true
false
auto
Drag  করার জন্য বব্যবহার করা হয়।
dropzone copy
move
link
কোন জাগায় Drag করা গুলো ছেড়ে দেওয়ার জায়গা ঠিক করে।
hidden hidden কোন উপাদান লুকাতে ব্যবহার করা হয়।
id id প্রত্যেকটা Element এর জন্য একটি  id ঠিক করে।
lang language_code কোন নির্দিষ্ট একটি ভাষা লেখার জন্য ব্যবহার করা হয়।
spellcheck true
false
spelling এবং grammar চেক করার জন্য বয়বহার করা হয়।
style style_definition inline style দেওয়ার জন্য ববহৃত হয়।
tabindex number কীবোর্ডের Tab কী তে কোন Element এর  order কি হবে তা নির্ধারন করে।
title text একটা Element এর জন্য অতিরিক্ত তথ্য দেওয়ার জন্য ব্যবহ্রা করা হয়।

HTML এর Global Attributes গুলোর সাথে কিছু নতুন Attributes যোগ করে HTML5 Global Attributes তৈরি করা হয়েছে। যা আপনারা ইতি মধ্যে লক্ষ্য করছেন। মানে হল যদি আপনার আগে HTML শিখা থাকে তাহলে আপনাকে আর বেশি কষ্ট করতে হবে না HTML5 শিখার জন্য। তা বলে মনে করবেন না আমি আপনাদের কে বলছি নতুন করে HTML শিখতে। HTML আর HTM5 একই জিনিস। নতুন কিছু বৈশিষ্ট যোগ করেই হল HTM5, আর কিছু না। তাই ভায় পাওয়ার কোন কারন নেই। নিছের উধারন টি দেখুনঃ

<!DOCTYPE HTML><html>
<body>
<p>
<title="Bangla Technology Blog"><b>blog</b> A New Bangla Technology Blogging Platform
</p>

<p>
Visit <a href="http://www.eaxample.com ">Blog</a> now to broaden your Technology outlook
</p>
</body>
</html>

এ কোড গুলো কোড এডিটরে লিখে এরপর ব্রাউজে দেখুন।

ব্যাখ্যাঃ

এই এখানে কয়েকটি ট্যাগ ও Attribute এক সাথে ব্যবহার করা হয়েছে।

প্রথমে P ট্যাগ ব্যবহার করে সব গুলোকে paragraph হিসেবে লেখা হয়েছে। তারপর <abbr title=”Bangla Technology Blog”><b>TechTweets</b></abbr> এ অংশে abbr হচ্ছে আরেকটি HTML Tag. যা দিয়ে কোন উপাদানের Abbreviation দেওয়া হয়। আর  title হচ্ছে একটি Attribute. যা দিয়ে কোন একটা Element এর জন্য অতিরিক্ত তথ্য দেওয়ার জন্য ব্যবহৃত হয়। এখানে আমরা এ Attribute ব্যবহার করছি TechTweets এর জন্য আরো কিছু তথ্য দেওয়ার জন্য। যখন TechTweets এর উপর মাউস নেওয়া হবে তখন Bangla Technology Blog এ লেখা টি উঠবে। তার পর সব গুলো Tag শেষ করলাম।

পরবর্তীতে <p>Visit <a href=”http://www.example.com.bd”>TechTweets</a> now to broaden your Technology outlook </p> এখানে P Tag এর মধ্যে আরেকটি  Attribute ব্যবহার করাহল। <a href=”http://www.example.com.bd”>TechTweets</a> এটি দিয়ে TechTweets এর মধ্যে একটি লিঙ্ক তৈরি করা হল।

এবার আপনার চেষ্টা করার পালা। নিজে নিজে প্র্যপাকটিস করার চেষ্টা করুন। কোন সমস্যা হলে জানাবেন প্লিজ।

 

পরের পর্বঃ

HTML শিখুন HTML5 সহ [পর্ব-5]

2 thoughts on “HTML শিখুন HTML5 সহ (পার্ট-4) HTML Attribute”

  1. ভাইয়া উপরে ছক আকারে যেই লিখাগুলো দিলেন ওগুলোর মানে বুঝলাম না! যেমনঃ কালস নেইম, আইডি এগুলো কি?

    Reply

Leave a Reply