আমরা যে সকল ওয়েব পেজ দেখি সেখানে তো অনেক লেখা, উপাদান বা অনেক তথ্য সাজানো থাকে। তা কিন্তু এমনিতেই সাজানো থাকে না। কোন উপাদান কি ভাবে সাজানো থাকবে, দেখতে কি রকম হবে, ওয়েব পেজ এর কোথায় ও কতটুকু জায়গা নিয়ে বসবে এ সকল বিষয় গুলোই হচ্ছে 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 এর মধ্যে একটি লিঙ্ক তৈরি করা হল।
এবার আপনার চেষ্টা করার পালা। নিজে নিজে প্র্যপাকটিস করার চেষ্টা করুন। কোন সমস্যা হলে জানাবেন প্লিজ।
পরের পর্বঃ
ভাইয়া উপরে ছক আকারে যেই লিখাগুলো দিলেন ওগুলোর মানে বুঝলাম না! যেমনঃ কালস নেইম, আইডি এগুলো কি?