attributes কি তাহা জানা দরকার…

Published by SNNAFI on

attributes শব্দটার বাংলা করলে একটা অর্থ দাঁড়ায় “বিশেষণ”।আমরা html এ লিখতে বিভিন্ন ইলিমেন্ট ব্যাবহার করি।এট্রিবিউট ব্যাবহারের মাধ্যমে আমরা কোনইলিমেন্ট সম্বন্ধে নতুন কিছু তথ্য যোগ করতে পারি যা ইলিমেন্টের কার্যক্ষমতা বাড়িয়ে দেয়।চলো আমরা সেটা জেনে আসি…

 

ধরো,<human> একটা html ইলিমেন্ট…(এটা কিন্তু আদৌ কোন html ট্যাগ না আমরা শুধু বোঝার সুবিধার্থে এটা ব্যাবহার করতেসি অকা? )

তো, <human> ট্যাগে আমরা সবাই এমন কিছু লিখব ঠিক না?

 

<human>রহিম</human>

 

এটা দ্বারা আমি বোঝতে পারি যে এই ট্যাগে রহিম নাম দ্বারা একজন মানুষকে বোঝানো হয়েছে।যেহেতু, আমরা human  ইলিমেন্ট ব্যাবহার করসি।চলো আর কিছু লেখা যাক……

 

<human gender=”male” age=”18″ height=”5f2i”> রহিম</human>

 

আমরা উপরের লেখা দ্বারা কি বোঝতে পারি?

 

বোঝতে পারি যে, রহিম নামের একজন মানুষ যে একজন ছেলে,যার বয়স ১৮ বছর এবং তার উচ্চতা ৫ ফিট ২ ইঞ্চি।প্রথমে আমরা শুধু ইলিমেন্ট  ব্যবহার করসি,কিন্তু পরে ঐ ইলিমেন্ট সম্পর্কে কিছু তথ্য যোগ করসি।এখানে, gender, age, height এইগুলা হল এট্রিবিউট,এগুলা ইলিমেন্টের কিছু বিশেষণ যোগ করসে রহিম কি ছেলে না মেয়ে, তার বয়স কত?এসব… এক কথাই এট্রিবিউট আমাদের ট্যাগের কিছু নতুন তথ্য যোগ করে তার কাজকে আর বাড়াতে সাহায্য করে…

 

আমরা আমাদের html ফাইল কিছু নতুন কিছু যোগ করি?চলো…

<html>
<head>
<title>আমার প্রথম এইচটিএমএল পেইজ</title>
</head>
<body>
<h1 align="center">হ্যালো</h1>
<p>আমরা এইচটিএমএল শিখতেসি</p>
</body>
</html>

এখানে, align=”center” এট্রিবিউট দ্বারা বোঝা যায় যে, h1 ইলিমেন্টটা এ মাঝ বরাবর লাইনে আসবে।যেহেতু,ট্যাগ দ্বারা মূলত ব্রাউজারকে বোঝানো হয়, তেমনি align=”center” দ্বারা আমরা ব্রাউজারকে বললাম,ঐ মিয়া এটা মাঝখানে দেখাবা😤 নইলে বোঝবাম তুমি html বোঝ না🤔 আচ্ছহা আমরা তাইলে বোঝতে পারলাম কেন এট্রিবিউট ব্যাবহার করা হয়।তোমরা কিন্তু উপরেরটা সেভ করে ব্রাউজারে দেখবা, হ্যালো লেখাটা মাঝখানে আসছে কিনা!! চলো, এট্রিবিউট সম্পর্কে আর কিছু শিখা যাক……😋 ধরো, আমাদের ইচ্ছা হলো, “আমরা এইচটিএমএল শিখতেসি” এই লেখাটাও মাঝখানে দেখাব আর একটা ভিন্ন রঙে রাঙ্গাব😊…।সেটা কেমনে করব আমরা!!! এটা নিয়া কিছু কথা বলে রাখি, এই কাজগুলা আমরা CSS দিয়াও করতে পারি।কি বলেন ভাই?🙄(CSS নিয়া পরে কথা হবে।আপাতত জেনে রাখো,html পেইজ ডিজাইনে CSS এর কুন্ন বিকল্প নাইগা😎)কিন্তু আমরা এখন শুধু html শিখতেসি…তাই আপাতত html দিয়াই করব😃।এইজন্য আমরা নতুন একটা এট্রিবিউট ব্যাবহার করব… সেটা হল style… নিচের এটা লিখে ফেলো তাইলে…

<html>
<head>
<title>আমার প্রথম এইচটিএমএল পেইজ</title>
</head>
<body>
<h1 align="center">হ্যালো</h1>
<p style="color:maroon" align="center">আমরা এইচটিএমএল শিখতেসি</p>
</body>
</html>

এখানে, style এট্রিবিউটের অংশ হলো, “color: maroon”।আর, এটার ভিতর আমরা রংকে বোঝাইসি color দ্বারা পরে একটা : দিসি পরে রঙের নাম।এখানে color হলো style এট্রিবিউটের একটা প্রোপার্টি। আর রঙের নাম হলো color প্রোপার্টির মান। তার মানে, কি দাঁড়াইল,এট্রিবিউটের লিখার জন্য এট্রিবিউটের নাম লিখে “=” দিয়ে পরে ” ” এর ভিতরে প্রোপার্টিসহ মান বা শুধু মান লিখতে হয়।যেমনঃ align হলো এট্রিবিউটের নাম আর center হলো তার মান।কিন্তু অন্যদিকে style এট্রিবিউটের জন্য আমরা color প্রোপার্টি ও তার মান ব্যাবহার করসি। এই হল এট্রিবিউটের গঠন।কিন্তু তুমি চাইলে ” ” ব্যাবহার নাও করতে পারো।মানে align=”center” না লিখে align=center লিখতেও পারো😀।কিন্তু ” ” দেওয়াটা স্ট্যান্ডার্ড নিয়ম।আর আমরা সব সময় স্ট্যান্ডার্ডটাই অনুসরণ করব ঠিক না???😎😎 আচ্ছা, আমরা কি style এট্রিবিউট দিয়ে লেখা মাঝখানে আনতে পারব না???? পারব কি?😒 অবশ্যই পারব…😎।।চলো সেটাও দেখে আসি আমরা…😋

<p style="color: maroon; text-align: center">আমরা এইচটিএমএল শিখতেসি</p>

তো,আমরা text-align ব্যাবহার করে লেখা মাঝখানে নিয়ে আসলাম।আবার, align দিয়েও একই কাজ করলাম।দারুণ না!!😎এখানে, align কিন্তু একটা এট্রিবিউট আর অন্যদিকে text-align কিন্তু style এট্রিবিউটের একটা প্রোপার্টি। এখানে,আমরা style এট্রিবিউটের ভিতরে color আর text-align ব্যাবহার করসি।দুইটাই style এট্রিবিউটের একটা একটা প্রোপার্টি।যেহেতু, আমরা দুইটা প্রোপার্টি নির্দিষ্ট করসি তাই color: maroon এর পরে ; দিসি পরে text-align: center দিসি। তাহলে, আমরা জানলাম যে,একের অধিক এট্রিবিউট ব্যাবহার করলে কেবল মাঝখানে একটা স্পেস দিলেই হয়।আর একই এট্রিবিউটে একের অধিক প্রোপার্টি মানেঃ color , text-align ব্যাবহার করলে আমরা তাদের মাঝখান ; দিবো।অকা?😉 আমরা পরবর্তীতে আরও এট্রিবিউট সম্বন্ধে জানব, যখন আমরা আরও ইলিমেন্ট শিখব…আরেকটা কথা ইলিমেন্ট কিন্তু যেকোনো ইলিমেন্টেই থাকতে পারে… void হোক আর না হোক…আমরা আস্তে আস্তে আরও জানব এই নিয়া।আজকে মূলত আমরা জানলাম এট্রিবিউট জিনিসটা কি?এটা কি খায় নাকি মাথায় দেয়??😛😜আশা করি তোমরা বোঝতে পারসো এট্রিবিউটের মূল কাজটা সম্পর্কে..কেন আমরা এট্রিবিউট ব্যাবহার করব…এই টুকুই আপাতত যথেষ্ট…😃 শেষ হইল আমাদের এট্রিবিউটনামার কিচ্ছা😁😁 কোন সমস্যা?কমেন্ট বক্স আছে? কিল্লাই????🧐কমেন্ট ফেলো কোন কিছু বোঝতে সমস্যা হইলে…😃 ঠিক্কাছে ভাইডি😋

Categories: htmlWebsite

0 Comments

Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.