আবারো আসলাম HTML নিয়ে। এর আগে HTML নিয়ে কয়েকটি টুইট দিয়েছি । আপনি যদি না দেখে থাকেন তাহলে দেখে আসতে পারেনঃ
আমরা যে সকল ওয়েব পেজ দেখি সেখানে তো অনেক লেখা, উপাদান বা অনেক তথ্য সাজানো থাকে। তা কিন্তু এমনিতেই সাজানো থাকে না। কোন উপাদান কি ভাবে সাজানো থাকবে, দেখতে কি রকম হবে, ওয়েব পেজ এর কোথায় ও কতটুকু জায়গা নিয়ে বসবে এ সকল বিষয় গুলোই হচ্ছে 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 href=”http://www.bangladeshipower.wordpress.com”>Teach Bangladeshipower</a>
এখানে a Element বা Link Element এ Attribute ব্যবহার করা হয়েছে। যেখানে, Attribute name হচ্ছে href এবং value হচ্ছে http://www.bangladeshipower.wordpress.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 গুলোর দিক নির্দিষ্ট করা হয়। |
lang | language_code | কোন নির্দিষ্ট একটি ভাষা লেখার জন্য ব্যবহার করা হয়। |
আমাদের তো সকল language code ধরকার নেই, তাই না? বাংলার কোড হচ্ছেঃ 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><abbr title=”Bangla Blog Site”><b>Tech Bangladeshipower</b></abbr> It is New Bangla Blogging Platfrom</p>
<p> Visit <a href=”http://www.bangladeshipower.wordpress.com”>Teach Bangladeshipower</a>Now to broaden your Technology outlook</p>
</body>
</html>
ইনপুট আর আউট পুট নিছে এক সাথে দিলাম।
ব্যাখ্যাঃ
<p><abbr title=”Bangla Blog Site”><b>Tech Bangladeshipower</b></abbr> It is New Bangla Blogging Platfrom</p>
এই এখানে কয়েকটি ট্যাগ ও Attribute এক সাথে ব্যবহার করা হয়েছে।
প্রথমে P ট্যাগ ব্যবহার করে সব গুলোকে paragraph হিসেবে লেখা হয়েছে। তারপর <abbr title=”Bangla Blog Site”><b>Tech Bangladeshipower</b></abbr> এ অংশে abbr হচ্ছে আরেকটি HTML Tag. যা দিয়ে কোন উপাদানের Abbreviation দেওয়া হয়। আর title হচ্ছে একটি Attribute. যা দিয়ে কোন একটা Element এর জন্য অতিরিক্ত তথ্য দেওয়ার জন্য ব্যবহৃত হয়। এখানে আমরা এ Attribute ব্যবহার করছি Tech Bangladeshipower এর জন্য আরো কিছু তথ্য দেওয়ার জন্য। যখন Tech Bangladeshipower এর উপর মাউস নেওয়া হবে তখন Bangla Blog Site এ লেখা টি উঠবে। তার পর সব গুলো Tag শেষ করলাম।
পরবর্তীতে <p>Visit <a href=”http://www.bangladeshipower.wordpress.com”>Tech Bangladeshipower</a> now to broaden your Technology outlook </p> এখানে P Tag এর মধ্যে আরেকটি Attribute ব্যবহার করাহল। <a href=”http://www.bangladeshipower.wordpress.com”>TechTweets</a> এটি দিয়ে Tech Bangladeshipower এর মধ্যে একটি লিঙ্ক তৈরি করা হল।
এবার আপনার চেষ্টা করার পালা। নিজে নিজে চেষ্টা করুন। কোন সমস্যা হলে জানাবেন প্লিজ।
সবগুলো Attribute এর ব্যবহার এক সাথে দেওয়া সম্ভব নয়। আপনার নিজে নিজে চেষ্টা করবেন। কোন সমস্যা হলে জানাবেন। আমি ও আস্তে আস্তে ব্যবহার নিয়ে টুইট করব।
পরের ক্লাস এর জন্য নিচে দেখুন……
এখানে আপনার মন্তব্য রেখে যান