একটি আইডি বা 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>
নিচে একটি সম্পুরন উদাহরন দেখুন।
<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>
শেয়ার করুন
