صفة id في HTML تستخدم لتحديد هوية فريدة (ID) لعنصر HTML. لا يمكن أن يكون هناك أكثر من عنصر واحد بنفس الهوية داخل نفس الصفحة.
استخدام صفة id:
- تحدد هوية فريدة لعنصر HTML.
- يجب أن تكون قيمة الهوية فريدة داخل الصفحة.
- تستخدم للإشارة إلى تنسيق محدد في ملف CSS.
- تستخدم أيضًا بواسطة JavaScript للوصول إلى العنصر والتحكم فيه.
صياغة id:
- اكتب علامة رقم (#) يليها اسم الهوية.
- عِقب ذلك، عرّف خصائص CSS داخل أقواس مفتوحة وغلق { }.
مثال:
<!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>
ملاحظات إضافية:
- حساسية اسم الهوية: اسم الهوية حساس لحالة الأحرف، أي أن “myHeader” يختلف عن “MyHeader”.
- شروط اسم الهوية:
- يجب أن يحتوي على حرف واحد على الأقل.
- لا يمكن أن يبدأ برقم.
- لا يمكن أن يحتوي على فراغات (مسافات، TABs، إلخ).
الفرق بين الفئة والهوية في HTML:
الفئة (class):
- يمكن استخدام اسم الفئة من قبل عدة عناصر HTML في نفس الصفحة.
- تستخدم لتحديد مجموعة من العناصر التي تشترك في نفس الخصائص.
- مثال: يمكنك استخدام فئة “city” لجميع عناصر
<p>التي تحتوي على معلومات عن المدن.
الهوية (id):
- يجب أن يكون اسم الهوية فريدًا داخل الصفحة، ولا يمكن استخدامه إلا من قبل عنصر واحد فقط.
- تستخدم لتحديد عنصر محدد بشكل فريد.
- مثال: يمكنك استخدام هوية “main-heading” لعنصر
<h1>الذي يمثل عنوان الصفحة الرئيسي.
<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>
<!-- An element with a unique id -->
<h1 id="myHeader">My Cities</h1>
<!-- Multiple elements with same class -->
<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>
العلامات المرجعية (Bookmarks) في لغة HTML باستخدام الهويات والروابط
تُستخدم العلامات المرجعية في HTML لإتاحة الفرصة للقارئين بالانتقال إلى أجزاء محددة من الصفحة، وهو أمر مفيد جدًا للصفحات الطويلة.
لإنشاء علامة مرجعية وربطها:
<h2 id="C4">Chapter 4</h2>بعد إنشاء علامة مرجعية للفصل 4 باستخدام صفة id (مثل <h2 id="chapter4">الفصل 4</h2>), يمكنك إضافة رابط إلى هذه العلامة المرجعية في أي مكان آخر بالصفحة باستخدام الخاصية href.
<a href="#C4">Jump to Chapter 4</a>بدلًا من استخدام اسم الهوية فقط (#chapter4)، اكتب مسار الصفحة التي تحتوي على الفصل 4 تليها اسم الهوية. على سبيل المثال، إذا كان الفصل 4 موجودًا في الصفحة chapter4.html:
<a href="html_demo.html#C4">Jump to Chapter 4</a>
استخدام صفة id في JavaScript
يمكن استخدام صفة id في JavaScript للتعامل مع عنصر HTML محدد. توفر JavaScript طريقة getElementById() للوصول إلى أي عنصر يحمل هوية معينة.
مثال: استخدام صفة id لتغيير النص باستخدام JavaScript:
<script>
function displayResult() {
document.getElementById("myHeader").innerHTML = "Have a nice day!";
}
</script>
ملخص الفصل:
- صفة
idفي HTML: تستخدم لتحديد هوية فريدة (ID) لعنصر HTML. لا يمكن أن يكون هناك أكثر من عنصر واحد بنفس الهوية داخل نفس الصفحة. - حصرية قيمة الهوية: يجب أن تكون قيمة الهوية فريدة ومختلفة عن أي هوية أخرى في الصفحة.
- استخدامات متعددة: تستخدم صفة
idفي:- التنسيق باستخدام CSS: تستهدف الهويات عناصر معينة لتطبيق أنماط CSS عليها.
- الاختيار في JavaScript: تستخدم طريقة
getElementById()للوصول إلى عنصر محدد بهوية معينة. - إنشاء العلامات المرجعية (Bookmarks): تسمح العلامات المرجعية بالتنقل إلى أجزاء محددة من الصفحة.
- حساسية اسم الهوية: اسم الهوية حساس لحالة الأحرف، أي أن “myHeader” يختلف عن “MyHeader”.
- استخدامات إضافية: بالإضافة لما سبق، يمكن استخدام الهويات في مجالات أخرى مثل:
- تفعيل/تعطيل عناصر معينة.
- تسجيل بيانات محددة لعناصر محددة.
- إنشاء تفاعلية ديناميكية.
