السمات
توفر السمات معلومات إضافية حول عناصر HTML.
سمات HTML
يمكن أن تحتوي جميع عناصر HTML على سمات
توفر السمات معلومات إضافية حول عنصر
يتم تحديد السمات دائمًا في علامة البدء
عادة ما تأتي السمات في أزواج الاسم / القيمة مثل: name = “value”
السمة href
يتم تعريف روابط HTML باستخدام العلامة <a>. عنوان الرابط محدد في سمة href:
<a href="https://www.platformspot.com">رابط</a>ستتعلم المزيد عن الروابط وعلامة <a> لاحقًا في هذا البرنامج التعليمي.
سمة src
يتم تعريف صور HTML بالعلامة <img>
يتم تحديد اسم ملف مصدر الصورة في سمة src:
<img src="platformspot.jpg">سمات العرض والارتفاع
تحتوي الصور في HTML على مجموعة من سمات الحجم ، والتي تحدد عرض الصورة وارتفاعها:
<img src="platformspot.jpg" width="500" height="600">يتم تحديد حجم الصورة بالبكسل: width = “500” يعني 500 بكسل.
سوف تتعلم المزيد عن الصور في الفصل الخاص بصور HTML.
السمة alt
تحدد السمة alt نصًا بديلاً لاستخدامه ، عندما يتعذر عرض صورة.
يمكن قراءة قيمة السمة بواسطة قارئات الشاشة. بهذه الطريقة ، شخص ما “يستمع” إلى صفحة الويب ، على سبيل المثال الشخص ضعاف البصر ، يمكن أن “يسمع” العنصر.
<img src="platformspot.jpg" alt="platformspot">تكون سمة alt مفيدة أيضًا في حالة عدم وجود الصورة:
تعرف على ما يحدث إذا حاولنا عرض صورة غير موجودة:
<img src="platformspot.jpg" alt="platformspot">سمة النمط
يتم استخدام سمة النمط لتحديد تصميم عنصر ، مثل اللون والخط والحجم وما إلى ذلك.
<p style="color:red">فقرة باللون الاحمر</p>سوف تتعلم المزيد عن التصميم لاحقًا في هذا البرنامج التعليمي ، وفي برنامج CSS التعليمي الخاص بنا.
السمة lang
يمكن الإعلان عن لغة المستند في العلامة <html>.
تم إعلان اللغة باستخدام السمة lang.
يعد إعلان اللغة أمرًا مهمًا لتطبيقات إمكانية الوصول (قارئات الشاشة) ومحركات البحث:
<!DOCTYPE html>
<html lang="en-US">
<body>
...
</body>
</html>تحدد أول حرفين اللغة (en). إذا كانت هناك لهجة ، فاستخدم حرفين آخرين على سبيل المثال (us).
عنوان السمة
هنا ، تتم إضافة سمة العنوان إلى العنصر <p>. سيتم عرض قيمة السمة title باعتبارها تلميح أدوات عند تحريك الماوس فوق الفقرة:
<p title="منصة">
فقرة
</p>نقترح: استخدام سمات الاحرف الصغيرة
لا يتطلب معيار HTML5 أسماء سمات احرف صغيرة.
يمكن كتابة سمة العنوان بأحرف كبيرة أو صغيرة.
نوصي بالأحرف الصغيرة بتنسيق HTML ، وتطلب الأحرف الصغيرة لأنواع المستندات الأكثر صرامة مثل XHTML.
نقترح: اقتباس قيم السمة
لا يتطلب معيار HTML5 علامات اقتباس حول قيم السمات.
يمكن كتابة سمة href الموضحة أعلاه دون علامات اقتباس:
سيء
<a href=https://www.platformspot.com>ممتاز
<a href="https://www.platformspot.com">نوصي بالاقتباسات بلغة HTML ، وتتطلب علامات الاقتباس لأنواع المستندات الأكثر صرامة مثل XHTML.
في بعض الأحيان يكون من الضروري استخدام علامات الاقتباس. لن يعرض هذا المثال سمة العنوان بشكل صحيح ، لأنه يحتوي على مسافة:
<p title=About platformspot>باستخدام علامات الاقتباس هي الأكثر شيوعا. حذف علامات الاقتباس يمكن أن ينتج عنه أخطاء.
اقتباس احادي او مزدوج؟
علامات الاقتباس المزدوجة حول قيم السمات هي الأكثر شيوعًا في HTML ، ولكن يمكن أيضًا استخدام علامات الاقتباس المفردة.
في بعض الحالات ، عندما تحتوي قيمة السمة نفسها على علامات اقتباس مزدوجة ، من الضروري استخدام علامات الاقتباس المفردة:
<p title='John "ShotGun" Nelson'>أو العكس:
<p title="John 'ShotGun' Nelson">ملخص الفصل
- يمكن أن تحتوي جميع عناصر HTML على سمات
- توفر سمة العنوان معلومات إضافية حول “تلميح الأداة”
- توفر السمة href معلومات العنوان للارتباطات
- توفر سمات العرض والارتفاع معلومات عن حجم الصور
- توفر السمة alt نصًا لقارئات الشاشة
- نوصي دائمًا بأستخدام أسماء السمات الصغيرة
- نقتبس دائمًا قيم السمات باستخدام علامات اقتباس مزدوجة
سمات HTML
فيما يلي قائمة أبجدية لبعض السمات التي تستخدم غالبًا في HTML ، والتي ستتعلم المزيد عنها في هذا البرنامج التعليمي:
| السمة | الوصف |
| alt | يحدد نصًا بديلًا لصورة ، عندما يتعذر عرض الصورة |
| disabled | يحدد أنه يجب تعطيل عنصر الإدخال |
| href | يحدد عنوان URL (عنوان الويب) للرابط |
| id | يحدد معرفًا فريدًا لأحد العناصر |
| src | يحدد عنوان URL (عنوان الويب) لصورة |
| style | يحدد نمط CSS مضمّن لأحد العناصر |
| title | لتحديد معلومات إضافية حول عنصر (يتم عرضه على هيئة تلميح للأداة) |
يتم سرد قائمة كاملة بجميع السمات لكل عنصر HTML أضغط هنا.
One Comment