الفصل الثالث: السمات (Attributes) في HTML

1. ما هي السمات؟

السمات (Attributes) هي خصائص تُضاف إلى عناصر HTML لتوفير معلومات إضافية عنها أو لتخصيصها. تأتي السمات داخل وسم العنصر وتكون على شكل أزواج: اسم السمة و قيمتها.

مثال:

<a href="https://example.com">زيارة الموقع</a>

• href هو اسم السمة.
• https://example.com هو قيمتها.

2. السمات الأساسية في HTML

أ) سمة id

• تُستخدم لتحديد معرف فريد (Unique Identifier) للعنصر.
• يساعد في استهداف العنصر باستخدام JavaScript أو CSS.

مثال:

<h1 id="main-title">هذا عنوان رئيسي</h1>

ب) سمة class

• تُستخدم لتحديد فئة (Class) للعنصر.
• يمكن أن تُطبق نفس الفئة على عناصر متعددة.

مثال:

<p class="highlight">هذا نص مميز.</p>

ج) سمة style

• تُستخدم لإضافة تنسيقات CSS مباشرة إلى العنصر.

مثال:

<p style="color: red; font-size: 20px;">هذا نص ملون.</p>

د) سمات الروابط (<a>)

• href: تحدد وجهة الرابط.
• target: تحدد كيفية فتح الرابط.

مثال:

<a href="https://example.com" target="_blank">افتح في نافذة جديدة</a>

هـ) سمات الصور (<img>)

• src: تحدد مصدر الصورة.
• alt: نص بديل يظهر عند عدم تحميل الصورة.

مثال:

<img src="image.jpg" alt="وصف للصورة">

3. سمات إضافية شائعة

أ) سمة title

• تُستخدم لإضافة نص يظهر كشرح عند تمرير المؤشر فوق العنصر.

مثال:

<p title="هذا شرح">مرر المؤشر هنا.</p>

ب) سمة lang

• تُستخدم لتحديد لغة المحتوى داخل العنصر.

مثال:

<p lang="ar">هذا نص باللغة العربية.</p>

ج) سمة data-*

• تُستخدم لتخزين بيانات مخصصة يمكن الوصول إليها باستخدام JavaScript.

مثال:

<div data-user-id="123">بيانات المستخدم</div>

4. كيفية استخدام سمات متعددة

يمكن استخدام أكثر من سمة في عنصر واحد، مع الفصل بين السمات بمسافات.

مثال:

<a href="https://example.com" target="_blank" title="زيارة موقع">زر رابط</a>

5. ممارسات جيدة عند استخدام السمات

• استخدم أسماء سمات واضحة ومفهومة.
• تجنب تكرار المعرفات id في نفس الصفحة.
• حافظ على التناسق عند كتابة القيم (استخدام علامات الاقتباس دائمًا).

تمارين تطبيقية:

1. قم بإنشاء صفحة HTML تحتوي على:
   • عنصر <h1> به سمة id باسم “header-title”.
   • فقرة <p> بها سمة class باسم “intro-text”.
   • رابط <a> يؤدي إلى صفحة تعليمية، يُفتح في نافذة جديدة مع شرح عند تمرير المؤشر.
2. أضف صورة إلى الصفحة مع سمة alt وسمة title توضح وصف الصورة.
3. استخدم سمة data-* لتخزين بيانات مخصصة مثل “data-category” على عنصر <div>.

بهذا تكون قد تعلمت كيفية استخدام السمات لتخصيص عناصر HTML. في الفصل الرابع سنتناول الجداول والقوائم بمزيد من التفصيل.