এইচটিএমএল আট্রিবিউট (HTML Attribute)
হেল্লো বন্ধু তোমাকে এইপর্বে এইচটিএমএল আট্রিবিউট সম্পর্কে ধারণা দেব। তূমি যদি এখনও এইচটিএমএল ত্যাগ সম্পর্কে না পড় তাহলে এখনি পড়ে নাও। HTML Tag । ত্যাগ না পড়লে এ-ই পর্বে কিছুই বুঝতে পারবা না। ত্যাগ অত্যন্ত গুরুত্বপূর্ণ। এ-ই পর্ব ভালোভাবে বোঝার চেষ্টা করবে কারণ ব্যসিক ভালোভাবে বুঝতে পারলে ভবিষ্যতে আর কোন সমস্যা হবেনা।
তুমি আট্রিবিউট সম্পর্কে পড়ার আগে একটা গল্প পড়ে নাও! একজন মানুষ কিন্তু সবকাজ অটোমেটিক করেনা।তুমি এখন কম্পিউটার এ কোডিং লিখবে তাহলে কোডিং তো লিখবে কিন্তু কিভাবে? প্রথমে কোডিং লিখতে গেলে তোমার হাতকে বলবে লিখা শুরু কর। তারপর তোমার হাত লিখা শুরু করবে। তাইনা? কিন্তু তুমি যখন কিবোর্ড A চাপতে যাবে তখন তোমার ব্রেইন তোমার হাতকে আদেশ দেবে A চাপার জন্য তখন তোমার হাত A চাপবে। আর পুরোকোড তুমি এইভাবেই হাতকে দিয়ে লিখিয়ে নাও। তাহলে একটু ভাবো কিবোর্ড এ কোন বাটন চাপতে গেলে তোমার আগে ব্রেইন এ পৌছাই তারপর তোমার হাতের কাছেযায় তারপর তোমার হাত সেই কাজটা করে। কিন্তু তোমার হাত তো শুধু কিবোর্ড এ-র বাটন চাপার জন্য নয়, বরং বিভিন্ন কাজের জন্য যেমন খেলাধুলার জন্য, খাওয়া জন্য, লিখার জন্য আরো অনেক কিছু করার জন্য। তাহলে বুঝতেই পারছ এ-ই হাতের অনেক কাজ আছে। তাই বিভিন্ন ধরনের আদেশ করলে বিভিন্ন ধরনের কাজ করে দেয়। কিন্তু তুমি যদি অবাস্তব কাজ করতে চাও সেটা কিন্তু সম্ভব না। তাইনা? তুমি হাতকে বিভিন্ন ধরনের কমান্ড দাও তাই তোমার হাত সেই কমান্ড অনুযায়ী তোমার কাজ করে। তেমনই কিছু কিছু ত্যাগ আছে যেগুলো দিয়ে শুধু একরকম কাজ করা যায় না বিভিন্ন রকমের কাজ করা যায়। একটা ত্যাগ কি কি কাজ করবে সেইটা বলে দেওয়ায় হলো আট্রিবিউট! এ-ই আট্রিবিউট দ্বারাই বলে দিতে হয় যে ত্যাগ কি ধরনের কাজ করবে।
চলো একটা উদাহরণ দেখা যাক!তোমাকে আরেক টা ত্যাগ এ-র সাথে পরিচয় করিয়ে দেই।
শুরু ত্যাগঃ <a>
শেষ ত্যাগঃ </a>
উপরে যে ত্যাগ টা দেখতে পাচ্ছ ও-ই ত্যাগটা আসলে লিংক নিয়ে কাজ করার জন্য।
দেখো আমি কোডটা লিখলাম নিচে:
<a> Google </a>
Output: Google
এখন তুমি Google লিখার উপর ক্লিক দাও তাহলে কিছুই হবেনা। কারণ কিছুই বলে দিইনি। একদম হাতের গল্পের মতো। হাতকে কিছু না বললে কি কাজ করবে? তেমনি a ত্যাগ লিংক নিয়ে কাজ করে কিন্তু আমি কিছুই বলিনি কোন লিংক নিয়ে কিভাবে কাজ করবে। তাই সে চুপকরে বসে আছে।
এখন আমি a ত্যাগকে বলেদিলাম যখন তোমাকে(a ত্যাগ)কেউ ক্লিক দেবে তখন তুমি href="https://www.google.com" এ-ই কাজটা করবে। এ-ই href ই হচ্ছে a ত্যাগ এ-র একটা কাজ বা আট্রিবিউট যখন a ত্যাগ এ-র উপর ক্লিক দেবে তখন https://www.google.com নিয়ে যাবে। এটাই হলো href এ-র কাজ।
তাহলে এইকোড টা তোমাকে একটু সুন্দর করে দেখায়ঃ
<a href="https://www.google.com"> Google </a>
output: Google
এবার দেখো Google লিখাটা কালার হয়ে গেছে। তুমি এখন যদি Google লিখটার অপর ক্লিক দাও তাহলে দেখো তোমাকে সত্যি সত্যি google নিয়ে যাবে কিন্তু আমি হারিয়ে যাবো মানে তুমি আমার ওয়েবসাইট থেকে চলে যাবে। দেখোঃ
তবে তুমি যদি ব্যাক এ ক্লিক কর তাহলে আবার আমার লিখাতে চলে আসবে।
চলো তোমাকে একটু উল্লু বানাই।
<a href = "https://www.google.com"> Facebook </a>
Output: Facebook
এখন তুমি যদি উপরে Facebook এ-র উপর ক্লিক দাও তাহলে দেখবে Google এ নিয়ে গেছে কেন? কারণ <a> Google </a> এই ত্যাগ এ-র মাঝে তুমি যাই লিখনা কেন সেটা লিংকের নাম হিসবে যাবে (মনে রাখবে লিংকের নাম শুধু মানুষ অপরে দেখতে পাই)।
ছোট্ট একটা বিদ্যাঃ এখন যদি তুমি উপরে উদাহরণটায় Facebook এর উপর ৫সেকেন্ড মতো চেপে ধর দেখো google.com এই লিংকও দেখা যাচ্ছে। (যদি মোবাইল হয়!) তাহলে তোমাকে কেউ ভুল লিংকে নিয়ে যেতে পারবে না। কোন একটা লিংকে যাওয়া আগেই দেখে নিতে পারো।
তাহলে আট্রিবিউট কিভাবে লিখতে হয়? প্রথমে < চিহ্ন। তার পর ত্যাগ এর নাম (যেমন a)। তারপর একটা স্পেস বা ফাঁকা দিয়ে আট্রিবিউট নাম (যেমন href)। তারপর =(সমান) চিহ্ন দিয়ে " "(ডবল কুয়াটেশন) চিহ্নের ভিতরে আট্রিবিউট ভ্যালু দিতে হয় যেমন:
(href ="www.google.com") এখানে www.google.com হলো href আট্রিবিউট এ-র ভ্যালু! তারপর > চিহ্ন দিতে হয়। তারপর নাম দিতে হয় যেমন আমি দিয়েছিলাম Google তারপর ঐত্যাগের শেষ ত্যাগ দিতে হয় যেমন (</a>)
তুমি আবার একবার Google লিখটার উপর ক্লিক দাও! একটা বিষয় খেয়াল করলে দেখতে পাবে তোমার ক্রোমে যে উইন্ড চালু আছে সেই উইন্ডতেই কিন্তু google এ চলে চাচ্ছে। কিন্তু তুমি যদি চাও কেউ যদি আমার ওয়েবসাইট এ-র ভিতর থেকে কোন লিংকে ক্লিক দেয় তাহলে আমার ওয়েবসাইট এর উইন্ড থেকে যাবে কিন্তু আরেকটা উইন্ড খুলবে ও-ই লিংকের জন্য তাহলে target = "_blank" নামের একটা a ত্যাগ এ-র আট্রিবিউট আছে সেটা ব্যবহার করতে হবে। একটা ত্যাগ এ-র ভিতর একাধিক আট্রিবিউট দেওয়া যায়।
তাহলে একটা উদাহরণ দেখোঃ
<a> href = "www.google.com" target = "_blank " > Go to Google </a>
Output: Go to Google
এবার Go to Google এ ক্লিক দাও দেখো নতুন একটা tab বা উইন্ড খুলছে। তারপর গুগলে যাচ্ছে। নিচের মতোঃ
a ত্যাগ এ-র অনেক আট্রিবিউট আছে কিন্ত সবচেয়ে বেশি ব্যবহার করা হয় এ-ই দুইটা আট্রিবিউট href এবং target তোমার জন্য এ-ই দুইটা আট্রিবিউট জানলেই যথেষ্ট! আরেকটা বিষয় খেয়াল কর সেটা হচ্ছে একধিক আট্রিবিউট বসানোর নিয়ম টা একাধিক আট্রিবিউট বসাতে হলে পর পর বসাতে হবে শুধু মাঝে অবশ্যই সর্বনিম্ন একটা স্পেস বা ফাঁকা হবে। এইবিষয়টা খেয়াল করবা। আবার, আট্রিবিউট কিন্তু আগে পিছে দিলেও সমস্যা নাই তুমি যদি আগে target দিতে তারপর href দিতে তাহলেও কোন সমস্যা নাই!
এ-ই পর্বে তোমাকে আট্রিবিউট কি? কিভাবে ব্যবহার করতে হয়? কাজ কি? এ-ই সমস্ত বিষয় বোঝানোর ছিল। আসা করি তুমি বুঝতে পেরেছো। যদি বুঝতে না পার তাহলে আবার পড়তে পার। কারণ এইগুলো নিয়েই পুরো এইচটিএমএল! ব্যসিক বুঝতে পারলেই ভবিষ্যতে আর কোন সমস্যা নাই। ভালো থাকো!
পোস্ট ভালো লাগলে অবশ্যয় কমেন্ট করুন।