এইচটিএমএল আইডি - HTML ID



একটি আইডি বা ID এট্রিবিউট ব্যবহার করে প্রতিটি এইচটিএমএল এলিমেন্টের জন্য ইউনিক আইডি নির্ধারণ করা হয়। আইডি সিলেক্টর ব্যবহার করে কোন নির্দিষ্ট এইচটিএমএল এলিমেন্টে সিএসএস বা জাভাস্ক্রিপ্ট ব্যবহার করা যায়।


আইডি এট্রিবিউট ব্যবহার

একটি আইডি এট্রিবিউট হল কোন এইচটিএমএল এলিমেন্টের জন্য নির্ধারিত একটি সতন্দ্র নাম। আইডি এট্রিবিউটের মান অর্থাৎ নামটি একদম ইউনিক হতে হয়। আইডি ব্যবহার করে কোন নির্দিষ্ট এইচটিএমএল এলিমেন্টে সিএসএস বা জাভাস্ক্রিপ্টের কাজগুলো সুনির্ধারিত ভাবে নির্ধারণ করে সম্পন্ন করা যায়।

সিএসএস এ আইডি ব্যবহার করতে হলে একটি হ্যাস ছিনহ ( # ) ব্যবহার করতে হয় এবং তারপর আইডির নাম লিখতে হয়। নিচে উদাহরণ দেখুন।

উদাহরণ

<style>
#myHeader {
background-color: silver;
color: teal;
padding: 40px;
text-align: center;
}
</style>

<h1 id="myHeader">My Header</h1>


নোট - আইডি এট্রিবিউট সকল এইচটিএমএল এলিমেন্টে ব্যবহার করা যায়। আইডি এট্রিবিউটের নাম কেজ সেন্সিটিভ। আইডি এট্রিবিউটের মান হিসেবে কমপক্ষে একটি বর্ণ থাকতে হবে এবং আইডি নামে কোন হোয়াইটস্পেস (যেমন - স্পেস, ট্যাব, ইত্যাদি) থাকতে পারবে না।

নোট - আইডি সিলেক্টর সম্পর্কে আরও জানতে আমাদের সিএসএস ক্লাস ও আইডি টিউটোরিয়াল পেজটি ব্রাউজ করুন।


ক্লাস এবং আইডি এর পার্থক্য

একটি আইডি বা ID এট্রিবিউট ব্যবহার করে প্রতিটি এইচটিএমএল এলিমেন্টের জন্য একটি ইউনিক আইডি নির্ধারণ করা হয়, যেখানে কোন ক্লাস ব্যবহার করে একাধিক এলিমেন্টে একই ধরনের স্টাইল ব্যবহার করা যায়।

উদাহরণ

<style>
/* Style the element with the id "myHeader" */
#myHeader {
background-color: lightblue;
color: black;
padding: 40px;
text-align: center;
}

/* Style all elements with the class name "city" */
.city {
background-color: tomato;
color: white;
padding: 10px;
}
</style>

<!-- A unique element -->
<h1 id="myHeader">My Cities</h1>

<!-- Multiple similar elements -->
<h2 class="city">London</h2>
<p>London is the capital of England.</p>

<h2 class="city">Paris</h2>
<p>Paris is the capital of France.</p>

<h2 class="city">Tokyo</h2>
<p>Tokyo is the capital of Japan.</p>


জাভাস্ক্রিপ্টে আইডি এট্রিবিউট ব্যবহার

getElementById() মেথড ব্যবহার করে জাভাস্ক্রিপ্ট নির্দিষ্ট কোন নামের আইডি যুক্ত এলিমেন্টে কাজ করতে পারে। নিচে এর উদাহরণ দেখুন।

উদাহরণ

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


নোট - জাভাস্ক্রিপ্ট সম্পর্কে জানতে আমাদের জাভাস্ক্রিপ্ট টিউটোরিয়াল দেখুন।


আইডি এবং লিংক ব্যবহার করে বুকমার্ক তৈরি

কোন ওয়েব পেজের নির্দিষ্ট কোন অংশে যেতে বুকমার্ক ব্যবহার করা হয়। বিশেষ করে ওয়েব পেজ যদি খুব দিরঘ হয়, তবে বুকমার্ক ভাল একটি সুবিধা। আইডি এবং লিংক ব্যবহার করে বুকমার্ক তৈরি করা হয়। এর জন্য প্রথমে একটি বুকমার্ক তৈরি করতে হয় এবং তারপরে এতে লিংক যুক্ত করতে হয়। নিচে একটি উদাহরন দেখুন।

প্রথমে আইডি আত্ত্রিবুতে ব্যবহার করে একটি বুকমার্ক তৈরি করতে হবে।

এইচটিএমএল কোড

<h2 id="C4">Chapter 4</h2>


তারপর একই ওয়েব পেজের মাঝে বুকমার্কে একটি "Jump to Chapter 4" নামে লিংক যোগ করি।

এইচটিএমএল কোড

<a href="#C4">Jump to Chapter 4</a>


অথবা, বুকমার্কে অন্য কোন ওয়েব পেজের লিংকটি "Jump to Chapter 4" নামে যোগ করি।

এইচটিএমএল কোড

<a href="html_demo.html#C4">Jump to Chapter 4</a>


নিচে একটি সম্পুরন উদাহরন দেখুন।

উদাহরণ

<!DOCTYPE html>
<html>
<body>

<p><a href="#C4">Jump to Chapter 4</a></p>

<h2>Chapter 1</h2>
<p>This chapter explains ba bla bla</p>

<h2>Chapter 2</h2>
<p>This chapter explains ba bla bla</p>

<h2>Chapter 3</h2>
<p>This chapter explains ba bla bla</p>

<h2 id="C4">Chapter 4</h2>
<p>This chapter explains ba bla bla</p>

<h2>Chapter 5</h2>
<p>This chapter explains ba bla bla</p>

</body>
</html>









এই ওয়েব সাইট এর সমস্ত টিউটোরিয়াল, সার্কিট ডায়াগ্রাম, উদাহরণ ইত্যাদি খুব সহজ ও সাধারণ ভাবে তৈরি করা হয়েছে। টিউটোরিয়াল, সার্কিট ডায়াগ্রাম, উদাহরণ ইত্যাদির ভুল পরিহার করার জন্য বার বার যাচাই করা হয়েছে, কিন্তু আমরা এর পূর্ণ নিশ্চয়তা ও দায়ভার বহন করি না। যখন আপনি এই সাইটটি ব্যবহার করেন, আমরা ধরে নেই যে আপনি পড়েছেন এবং সম্মত আছেন আমাদের টার্মস অফ ইউস (Terms of use) এবং প্রাইভেসি পলিসি( Privacy policy) সম্পর্কে।

Copyright 2016-2018 by websschool.com, All Rights Reserved.