HTML id এট্রিবিউট

ایچ تی ایم ال (HTML) id اطلاعات کا استعمال اس لئے کیا جاتا ہے کہ وہ ایچ تی ایم ال (HTML) عناصر کو منفرد آئی ڈی دکھائی دے سکے۔

ایک ایچ تی ایم ال (HTML) ڈاکومن میں ایک ہی آئی ڈی کا استعمال نہیں کیا جاسکتا۔

اطلاعات کا استعمال id کی جگہ لکھ کریں۔

id اطلاعات کا استعمال اس لئے کیا جاتا ہے کہ وہ ایچ تی ایم ال (HTML) عناصر کا منفرد آئی ڈی دکھائی دے سکے۔ id اطلاعات کا ماخذ ایچ تی ایم ال (HTML) ڈاکومن میں کسی کسی کو منفرد ہونا چاہئے۔

id اطلاعات کا استعمال اس لئے کیا جاتا ہے کہ وہ اس لئے کسی کسی سٹائل تکنیک کی جگہ کا پتا لگائی جاسکے اور جاویاسکریپٹ (JavaScript) بھی اس کا استعمال کرسکتا ہے تاکہ وہ خاص آئی ڈی والا عناصر کو سیکس کرسکے اور آپریشن کرسکے۔

id کا گرامر: ایک وایو (井号) لکھ کریں، پچھلے ایک id نام دینے کے بعد، پچھلے کوروکو بندا (花括号) میں سی ایس ای (CSS) کی جگہیں لکھیں۔

下面的例子中我们有一个 <h1> উপাদান, id-নাম "myHeader"-কে নির্দেশ করে, এই <h1> উপাদানগুলি, head পর্বের #myHeader স্টাইল সেট করার জন্য স্টাইল সংজ্ঞা করা হয়:

উদাহরণ

<!DOCTYPE html>
<html>
<head>
<style>
#myHeader {
  background-color: lightblue;
  color: black;
  padding: 40px;
  text-align: center;
}
</style>
</head>
<body>
<h1 id="myHeader">My Header</h1>
</body>
</html>

আপনার নিজেই চেষ্টা করুন

মন্তব্য:id-এর নাম, আক্ষরশঃ সংবেদনশীল!

মন্তব্য:id-এর নামটিতে কমন্ড চারার অংশ থাকতে হবে, এবং শুধুমাত্র খালি বাক্যবিন্যাস নিহিত হবে (স্পেস, ট্যাব, ইত্যাদি)।

শ্রেণী এবং ID-এর পার্থক্য

একই শ্রেণীর নাম, একাধিক HTML উপাদান দ্বারা ব্যবহৃত হতে পারে, কিন্তু id-এর নাম, পৃষ্ঠার একমাত্র একটি HTML উপাদান দ্বারা ব্যবহৃত হবে:

উদাহরণ

<style>
/* "myHeader" id-যুক্ত উপাদানের স্টাইল সেট করা */
#myHeader {
  background-color: lightblue;
  color: black;
  padding: 40px;
  text-align: center;
}
/* "city" নামের শ্রেণীর সকল উপাদানের স্টাইল সেট করা */
.city {
  background-color: tomato;
  color: white;
  padding: 10px;
}
</style>
<!-- অভিন্ন id-যুক্ত উপাদান -->
<h1 id="myHeader">My Cities</h1>
<!-- একই শ্রেণীর নামের একাধিক উপাদান -->
<h2 class="city">লন্ডন</h2>
<p>লন্ডন ইংল্যান্ডের রাজধানী</p>
<h2 class="city">প্যারিস</h2>
<p>প্যারিস ফ্রান্সের রাজধানী</p>
<h2 class="city">টোকিও</h2>
<p>টোকিও জাপানের রাজধানী</p>

আপনার নিজেই চেষ্টা করুন

টীকা:আমাদের CSS শিক্ষাক্রম CSS জ্ঞান আরও বাড়াতে জানুন

HTML বুকমার্ককে ID এবং লিঙ্ক দ্বারা বাস্তবায়িত করা হয়

HTML বুকমার্ক, পাঠকদেরকে ওয়েবসাইটের নির্দিষ্ট অংশে সরতে সাহায্য করে。

যদি পৃষ্ঠা খুব দীর্ঘ হোক, তবে বুকমার্ক খুবই উপযোগী হতে পারে。

বুকমার্ক ব্যবহার করতে, প্রথমে তা তৈরি করতে হবে, এবং তারপর তার জন্য লিঙ্ক যোগ করতে হবে。

তারপর, যখন লিঙ্ক ক্লিক করা হয়, পৃষ্ঠা বুকমার্কযুক্ত স্থানে সরতে যাবে。

উদাহরণ

প্রথমে, id অ্যাট্রিবিউট বুকমার্ক সৃষ্টি

<h2 id="C4">চ্যাপটার 4</h2>

এবং, একই পৃষ্ঠাতে, এই বুকমার্কের লিঙ্ক যোগ করুন ("চ্যাপটার 4-এ জুম করুন")

উদাহরণ

<a href="#C4">চ্যাপটার 4-এ জুম করুন</a>

আপনার নিজেই চেষ্টা করুন

বা, অন্য একটি পৃষ্ঠাতে, এই বুকমার্কের লিঙ্ক যোগ করুন ("চ্যাপটার 4-এ জুম করুন")

<a href="html_demo.html#C4">চ্যাপটার 4-এ জুম করুন</a>

id অ্যাট্রিবিউট দ্বারা JavaScript-এর মাধ্যমে

JavaScript-এরও ব্যবহার করা যেতে পারে id অ্যাট্রিবিউট দ্বারা বিশেষ ইলেকট্রনমেন্টের কিছু কাজ করা

JavaScript ব্যবহার করতে পারে getElementById() বিশেষ id-সহ ইলেকট্রনমেন্ট পরিবর্তন

উদাহরণ

id অ্যাট্রিবিউট দ্বারা JavaScript-এর মাধ্যমে টেক্সট হ্যান্ডলিং করুন:

<script>
function displayResult() {
  document.getElementById("myHeader").innerHTML = "Have a nice day!";
}
</script>

আপনার নিজেই চেষ্টা করুন

টীকা:অনুগ্রহ করে HTML JavaScript এই চ্যাপটারে, বা আমাদের JavaScript শিক্ষাক্রম JavaScript শিক্ষাক্রমে শিখুন

এই চ্যাপটারের সারাংশ

  • id অ্যাট্রিবিউটটি হিটলক সহ একক ইলেকট্রনমেন্টকে ইডেন্টিফাই করতে ব্যবহার করা হয়
  • id অ্যাট্রিবিউটের মান HTML ডকুমেন্টে অতিরিক্ত হতে পারে না
  • CSS এবং JavaScript ব্যবহার করতে পারে id অ্যাট্রিবিউট ব্যবহার করে ইলেকট্রনমেন্ট বা বিশেষ ইলেকট্রনমেন্টের স্টাইল সেট করা যেতে পারে
  • id অ্যাট্রিবিউটের মান হাইপারফেক্সক্স সংযোজিত
  • id এই অ্যাট্রিবিউটটি হিটলক সৃষ্টির জন্যও ব্যবহার করা যেতে পারে
  • JavaScript ব্যবহার করতে পারে getElementById() বিশেষ id-সহ ইলেকট্রনমেন্ট পরিবর্তন