এর আগের পর্বের লিঙ্ক, পুনারায় একবার দেখে আসুন।
আমরা যে সকল ওয়েব পেজ দেখি সেখানে তো অনেক লেখা, উপাদান বা অনেক তথ্য সাজানো থাকে। তা কিন্তু এমনিতেই সাজানো থাকে না। কোন উপাদান কি ভাবে সাজানো থাকবে, দেখতে কি রকম হবে, ওয়েব পেজ এর কোথায় ও কতটুকু জায়গা নিয়ে বসবে এ সকল বিষয় গুলোই হচ্ছে 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://techtweets.com.bd">This is a new Tech Blog</a>
এখানে a Element বা Link Element এ Attribute ব্যবহার করা হয়েছে। যেখানে, Attribute name হচ্ছে href এবং value হচ্ছে http://techtweets.com.bd।
Value গুলো সব সময় Double Quote এর মধ্যে লেখা হয়। আর সব সময় ছোট হাতের অক্ষরে লেখা হয়।
কিছু Attribute globally নির্ধারন করা যায় এবং যেকোন Element এ ব্যবহার করা যায়। আবার কিছু কিছু Attribute নির্দিষ্ট Element এর জন্য ব্যবহার করা হয়।
Globally নির্ধারন করতে Attribute গুলো Head Tag এর মধ্যে লিখতে হয়।
নিছে 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 কি হবে তা নির্ধারন করে। |
| 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>TechTweets</b> A New Bangla Technology Blogging Platform</p>
<p>Visit <a href="http://www.techtweets.com.bd">TechTweets</a> now to broaden your Technology outlook </p>
</body>
</html>
ইনপুট আর আউট পুট নিছে এক সাথে দিলাম।
ব্যাখ্যাঃ
<p><abbr title="Bangla Technology Blog"><b>TechTweets</b></abbr> A New Bangla Technology Blogging Platform</p>
এই এখানে কয়েকটি ট্যাগ ও 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.techtweets.com.bd">TechTweets</a> now to broaden your Technology outlook </p> এখানে P Tag এর মধ্যে আরেকটি Attribute ব্যবহার করাহল। <a href="http://www.techtweets.com.bd">TechTweets</a> এটি দিয়ে TechTweets এর মধ্যে একটি লিঙ্ক তৈরি করা হল।
এবার আপনার চেষ্টা করার পালা। নিজে নিজে চেষ্টা করুন। কোন সমস্যা হলে জানাবেন প্লিজ।
সবগুলো Attribute এর ব্যবহার এক সাথে দেওয়া সম্ভব নয়। আপনার নিজে নিজে চেষ্টা করবেন। কোন সমস্যা হলে জানাবেন। আমি ও আস্তে আস্তে ব্যবহার নিয়ে টুইট করব।
আউয়াল ভাইয়ের নিকট কৃতজ্ঞ, উনার জন্যই এত দ্রুত এ পর্বটি দিতে পারলাম।
পরের পর্বঃ
আমি জাকির হোসাইন। বিশ্বের সর্ববৃহৎ বিজ্ঞান ও প্রযুক্তির সৌশল নেটওয়ার্ক - টেকটিউনস এ আমি 14 বছর 8 মাস যাবৎ যুক্ত আছি। টেকটিউনস আমি এ পর্যন্ত 224 টি টিউন ও 1487 টি টিউমেন্ট করেছি। টেকটিউনসে আমার 5 ফলোয়ার আছে এবং আমি টেকটিউনসে 0 টিউনারকে ফলো করি।
পৃথিবীতে অল্পকয়েক দিনের জন্য অনেকেই আসে, হেঁটে খেলে চলে যায়। এর মধ্যে অল্প কয়েক জনই পায়ের চাপ রেখে যায়।ওদের একজন হতে ইচ্ছে করে। প্রযুক্তির আরেকটি সেরা ব্লগ টেকটুইটস। আপনাদের স্বাগতম, যেখানে প্রতিটি বন্ধুর অংশ গ্রহনে গড়ে উঠেছে একটি পরিবার। আপনাদের পছন্দ হবে আশা করি। ফেসবুকে আমি - ?জাকির!
