سمات HTML
توفر سمات HTML معلومات إضافية حول عناصر HTML.
سمات HTML
- يمكن أن تحتوي جميع عناصر HTML على سمات
- توفر السمات معلومات إضافية حول العناصر
- يتم تحديد السمات دائمًا في علامة البداية
- تأتي السمات عادةً في أزواج الاسم / القيمة مثل: الاسم = "القيمة"
سمة href
<a>تحدد العلامة الارتباط التشعبي . تحدد السمة
hrefعنوان URL للصفحة التي ينتقل إليها الارتباط:
مثال
<a href="https://www.w3schools.com">Visit W3Schools</a>
سوف تتعلم المزيد حول الروابط في فصل روابط HTML الخاص بنا .
سمة src
تُستخدم <img>العلامة لتضمين صورة في صفحة HTML. تحدد السمة srcمسار الصورة المراد عرضها:
مثال
<img src="img_girl.jpg">
هناك طريقتان لتحديد عنوان URL في src
السمة:
1. عنوان URL مطلق - روابط تؤدي إلى صورة خارجية مستضافة على موقع ويب آخر. مثال: src = "https://www.w3schools.com/images/img_girl.jpg" .
ملاحظات: قد تكون الصور الخارجية محمية بحقوق النشر. إذا لم تحصل على إذن لاستخدامه ، فقد تنتهك قوانين حقوق النشر. بالإضافة إلى ذلك ، لا يمكنك التحكم في الصور الخارجية ؛ يمكن إزالته أو تغييره فجأة.
2. URL النسبي - روابط إلى صورة مستضافة داخل الموقع. هنا ، لا يتضمن عنوان URL اسم المجال. إذا بدأ عنوان URL بدون شرطة مائلة ، فسيكون مرتبطًا بالصفحة الحالية. مثال: src = "img_girl.jpg". إذا بدأ عنوان URL بشرطة مائلة ، فسيكون متعلقًا بالمجال. مثال: src = "/ images / img_girl.jpg".
نصيحة: من الأفضل دائمًا استخدام عناوين URL النسبية. لن ينكسر إذا قمت بتغيير المجال.
سمات العرض والارتفاع
يجب أن تحتوي <img>العلامة أيضًا على
السمات widthو
height، والتي تحدد عرض الصورة وارتفاعها (بالبكسل):
مثال
<img src="img_girl.jpg" width="500" height="600">
سمة النص البديل
altتحدد السمة المطلوبة <img>
للعلامة نصًا بديلاً للصورة ، إذا تعذر عرض الصورة لسبب ما. يمكن أن يكون هذا بسبب الاتصال البطيء ، أو خطأ في srcالسمة ، أو إذا كان المستخدم يستخدم قارئ الشاشة.
مثال
<img src="img_girl.jpg" alt="Girl
with a jacket">
مثال
انظر ماذا يحدث إذا حاولنا عرض صورة غير موجودة:
<img src="img_typo.jpg" alt="Girl
with a jacket">
سوف تتعلم المزيد عن الصور في فصل صور HTML .
سمة النمط
تُستخدم styleالسمة لإضافة أنماط إلى عنصر ، مثل اللون والخط والحجم والمزيد.
مثال
<p style="color:red;">This is a red paragraph.</p>
سوف تتعلم المزيد عن الأنماط في فصل أنماط HTML .
سمة lang
يجب عليك دائمًا تضمين langالسمة داخل <html>العلامة للإعلان عن لغة صفحة الويب. هذا يهدف إلى مساعدة محركات البحث والمتصفحات.
يحدد المثال التالي اللغة الإنجليزية كلغة:
<!DOCTYPE html>
<html lang="en">
<body>
...
</body>
</html>
يمكن أيضًا إضافة رموز البلدان إلى رمز اللغة في lang
السمة. لذا ، فإن الحرفين الأولين يحددان لغة صفحة HTML ، ويحدد الحرفان الأخيران البلد.
يحدد المثال التالي اللغة الإنجليزية كلغة والولايات المتحدة كدولة:
<!DOCTYPE html>
<html lang="en-US">
<body>
...
</body>
</html>
يمكنك رؤية جميع رموز اللغة في مرجع رمز لغة HTML الخاص بنا .
سمة العنوان
تحدد السمة titleبعض المعلومات الإضافية حول العنصر.
سيتم عرض قيمة سمة العنوان كتلميح أداة عند تحريك الماوس فوق العنصر:
مثال
<p title="I'm a tooltip">This is a paragraph.</p>
نقترح: استخدام السمات الصغيرة دائمًا
لا يتطلب معيار HTML أسماء سمات صغيرة.
يمكن كتابة سمة العنوان (وجميع السمات الأخرى) بأحرف كبيرة أو صغيرة مثل العنوان أو TITLE .
ومع ذلك ، توصي W3C باستخدام سمات الأحرف الصغيرة في HTML ، وتتطلب سمات أحرف صغيرة لأنواع المستندات الأكثر صرامة مثل XHTML.
في W3Schools ، نستخدم دائمًا أسماء السمات الصغيرة.
نقترح: اقتباس قيم السمات دائمًا
لا يتطلب معيار HTML علامات اقتباس حول قيم السمات.
ومع ذلك ، توصي W3C بعلامات اقتباس بتنسيق HTML ، وتطالب باقتباسات لأنواع المستندات الأكثر صرامة مثل XHTML.
حسن:
<a href="https://www.w3schools.com/html/">Visit our HTML tutorial</a>سيئة:
<a href=https://www.w3schools.com/html/>Visit our HTML tutorial</a>في بعض الأحيان عليك استخدام الاقتباسات. لن يعرض هذا المثال سمة العنوان بشكل صحيح ، لأنها تحتوي على مسافة:
مثال
<p
title=About W3Schools>
في W3Schools ، نستخدم دائمًا علامات الاقتباس حول قيم السمات.
اقتباسات مفردة أو مزدوجة؟
علامات الاقتباس المزدوجة حول قيم السمات هي الأكثر شيوعًا في HTML ، ولكن يمكن أيضًا استخدام علامات الاقتباس المفردة.
في بعض الحالات ، عندما تحتوي قيمة السمة نفسها على علامات اقتباس مزدوجة ، من الضروري استخدام علامات الاقتباس المفردة:
<p title='John "ShotGun" Nelson'>
أو العكس:
<p title="John 'ShotGun' Nelson">
ملخص الفصل
- يمكن أن تحتوي جميع عناصر HTML على سمات
hrefتحدد سمة عنوان<a>URL للصفحة التي ينتقل إليها الارتباطsrcتحدد سمة المسار<img>إلى الصورة المراد عرضها- سمات
widthوسماتheightتوفير<img>معلومات الحجم للصور - توفر
altالسمة الخاصة<img>بـ نصًا بديلاً للصورة - تُستخدم
styleالسمة لإضافة أنماط إلى عنصر ، مثل اللون والخط والحجم والمزيد langتحدد سمة العلامة<html>لغة صفحة الويب- تحدد السمة
titleبعض المعلومات الإضافية حول العنصر
تمارين HTML
مرجع سمة HTML
يتم سرد قائمة كاملة بجميع السمات لكل عنصر HTML في: مرجع سمة HTML .