Maintance

এইচটিএমএল পর্ব ৪ : এট্রিবিউট পরিচিতি

প্রকাশঃ ১:২৩ অপরাহ্ন, জানুয়ারি ১৮, ২০১৮ - সর্বশেষ সম্পাদনাঃ ১:৩২ অপরাহ্ন, জানুয়ারি ১৮, ২০১৮

টেক শহর কন্টেন্ট কাউন্সিলর : ওয়েবসাইটে কোনো এলিমেন্টের কনটেন্ট দেখতে কেমন হবে, সেটি  ওয়েব পেইজের কোথায় থাকবে, জায়গা কতটুকু নিবে, রঙ, স্টাইল বা আকৃতি কেমন হবে এ বিষয়গুলো নির্ধারণ করা হয় এট্রিবিউট দ্বারা।

গত পর্বে এলিমেন্টের সম্পর্কে তুলে ধরা হয়েছিল। এই পর্বে এট্রিবিউট সম্পর্কে তুলে ধরা হলো।

ওয়েবসাইটে কোনো কনটেন্ট সম্পর্কে এইচটিএমএলের এলিমেন্টের মধ‍্যে নির্দেশনা দেওয়া থাকে। ধরুন আপনি একটি প‍্যারা লিখবেন p এলিমেন্টের মধ‍্যে। তাহলে কোড হবে  এরূপ:

<html>
<head>  <title> hello world </title> </head>
<body>
<p> this is techshohor.com </p>
</body>
</html>

তাহলে ওয়েবসাইটে দেখা যাবে এমন :

এখন আপনি চান p এলিমেন্টের মধ‍্যে লেখা প‍্যারার টেক্সটগুলো রঙ পরিবর্তন ও ফ্রন্টের সাইজ বড় করতে। তাহলে আপনাকে লিখতে হবে এমন :

<p style=”color: red; font-size: 40″> this is techshohor.com </p>

তাহলে ব্রাউজারে প্রদর্শিত হবে এমন :

এখানে লক্ষ‍্য করুণ আগের তুলনায় ফ্রন্টের সাইজ ও রঙ পরিবর্তন হয়েছে। এ কাজ করার জন‍্য বাড়তি  style=”color: red; font-size: 40″  কোডটুকু লিখতে হয়েছে।

এই যে বাড়তি নতুন কোড যোগ করা হবে এটাকে সেই এলিমেন্টের এট্রিবিউট বলে। অর্থ্যাৎ এখানে, p এলিমেন্টের এট্রিবিউট হলো নতুন যুক্ত করা কোডগুলো।

কিছু এট্রিবিউট গ্লোবালভাবে নির্ধারণ করা যায়, যা যে কোনো এলিমেন্টে ব‍্যবহার করা যাবে। গ্লোবালভাবে এট্রিবিউট দিতে হলে তা <head> </head> এর মধ‍্যে লিখতে হয়।

এ ছাড়া চাইলে কোনো এট্রিবিউট নির্দিষ্ট কোনো এলিমেন্টের জন‍্য নির্ধারণ করা যায়। যদি কোনো এলিমেন্টে এট্রিবিউট না থাকে তাকে এমটি এট্রিবিউট বলা হয়।

এট্রিবিউট লেখার নিয়ম হচ্ছে- প্রথমে এট্রিবিউটটির নাম লিখতে হবে। এরপর সমান চিহ্ন (=) দিয়ে কোটেশনের (‘বা’) ভিতর এর মান লেখা। উদাহারণ : <p style=”color: red; font-size: 40>  this is techshohor.com </p>।

এখানে ‘style’ এট্রিবিউট এর নাম, এরপর দেয়া হয়েছে ‘=’ চিহ্ন এরপর রঙ এর মান দেয়া এবং সেমিকোলন দিয়ে ফ্রন্টের মান দেয়া।

কয়েক ধরনের এট্রিবিউট গ্রুপ এলিমেন্টে থাকতে পারে। এর মধ্যে কোর এট্রিবিউট id, class, title, style বেশি ব‍্যবহৃত হয়। কিছু এট্রিবিউটের তালিকা পাবেন এই ঠিকানায়

*

*

Related posts/