albashmoparmeg.com

اتعلم البرمجة صح وبسهولة وباللغة العربية مع موقع الباشمبرمج

الكورس
Advertisements

HTML Id Attribute | In Arabic

HTML Id Attribute – فى هذا الفصل هنتعرف على سمة الـ id ثانى اهم سمة بعد الـ class فى لغة HTML. وهنعرف الفرق بين الـ class والـ id. وكيفية إستخدامها؟ وكل المعلومات حولها، مع بعض الأمثلة التوضيحية.

 

Id Attribute

 

يتم استخدام سمة الـ id لتحديد عنصر بشكل فريد عن عناصر أخرى فى الصفحة. سمة id اختصار لـ identify (المُعرف).

يمكن أن يحمل كل عنصر HTML سمة الـ id، يتم استخدام سمة الـ id لتحديد عنصر بشكل فريد unique عن عناصر اخرى فى الصفحة.

يجب أن تبدأ قيمة الـ id بـ ( حرف letter او علامة ( _ )underscore )، ولا يُسمح بـ رقم أو أي حرف آخر.

 

مثال للتوضيح

استخدام الـ id لإعطاء لون للـ h2

English

English is a West Germanic language spoken by the inhabitants of early medieval England. It is named after the Angles.

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>HTML ID</title>

    <style>
       #lang {
          color: blue;
       }
    </style>

  </head>
  <body>

     <h2 id="lang">English</h2>
     <p>English is a West Germanic language spoken by the inhabitants of early medieval England. It is named after the Angles.</p>

  </body>
</html>

English

English is a West Germanic language spoken by the inhabitants of early medieval England. It is named after the Angles.

فى المثال السابق: تم استخدام علامة (#) لتحديد عنصر بإستخدام id ، هذا يعنى أن لتحديد عنصر بإستخدام id نستخدم هذه العلامة (#) > متبوعًا بقيمة الـ id.

من المُهم الا يتواجد اكثر من عنصر له نفس قيمة id ، لأنه إذا وُجد ذلك لم تعد قيمة الـ id فريدة.

 

الفرق بين الـ id والـ class

 

idclass
يمكن استخدام الـ id لتعريف عنصر فقط.
يجب أن تحتوي كل صفحة على عنصر واحد فقط بهذا الـ id.		 يمكن استخدام الـ class لتعريف أكثر من عنصر.
يمكن أن تحتوي كل صفحة على أكثر من عنصر بهذا الـ class.
في CSS ، محدد الـ id هو اسم يسبقه حرف التجزئة (“#“). في CSS ، محدد الـ class هو اسم يسبقه نقطة (“.”)
يفضل استخدام الـ id مع الدوال البرمجية في JavaScript ولغات البرمجة الأخرى.يُفضل استخدام الـ class مع التنسيقات CSS.

يمكنك استخدام كلاً من الـ class والـ id مع لغتى CSS و JavaScript ، ولكن إذا تريد وضع كل شىء فى مكانة الصح استخدم الـ (id) مع لغات برمجة مثل JavaScript ، واستخدم (class) مع تنسيقات CSS.

Advertisements

 

إستخدام سمة class و id معًا

 
<style>
    #mylanguage {
       font-size: 20px;
       font-weight: bold;
    }

    .other-language {
       font-size: 15px;
       font-weight: normal;
    }
</style>

<h2 id="mylanguage">Arabic</h2>
<h2 class="other-language">English</h2>
<h2 class="other-language">French</h2>

Arabic

English

French

فى المثال السابق:

  1. استخدمت الـ id مع لُغتى الأساسية (Arabic) لأنها فريدة، واستخدمت مع اللغات الأخرى الـ class، لأن هذه اللغات ليست فريدة او اساسية بالنسبة لى ويمكن ان يكون هناك لغات أخرى.
  2. وقمت بتنسيق كل من الـ id عن طريق علامة التجزئة (#) والـ class عن طريق النقطة (.).

 

لا تقلق سوف تتعلم كل شىء عن التصميم ولغة CSS فى هذا البرنامج التعليمي المُتكامل + فى سلسلة الـ JavaScript هتتعرف على كيفية استخدام سمة id مع عناصرها.

 

ملاحظات – Id Attribute:

 

بعض الملاحظات حول الـ id:

  • يمكن استخدام سمة الـ id على أي عنصر HTML.
  • قيمة الـ id حساسة لحالة الأحرف.
  • يجب أن تحتوي قيمة الـ id على حرف واحد على الأقل، ويجب الا تحتوي على whitespace (مسافات – tabs ، …إلخ).
  • من المُهم الا يتواجد اكثر من عنصر له نفس قيمة id ، لأنه إذا وُجد ذلك لم تعد قيمة id فريدة.

 

قَيم نفسك – Mini quiz


قُم بإجراء هذا الإختبار القصير على درس “HTML Id Attribute” لمعرفة مدى فهمك وإستيعابك للمعلومات السابقة، ولتثبيت المعلومات.


إجراء الإختبار
HTML Tags Reference
HTML Code Examples
الإبلاغ عن خطأ

الإبلاغ عن خطأ

×

إذا وجد خطأ وتريد الإبلاغ عن هذا الخطأ، أو إذا كنت تريد تقديم اقتراح على شىء معين، فلا تتردد في إرسال بريد إلكتروني إلينا:

info@albashmoparmeg.com

شكرًا لك على مساعدتك لنا!

Advertisements