السمات والخصائص HTML attributes

 توفر سمات HTML معلومات إضافية حول عناصر HTML.
الدرس السابق الدرس التالي
سمات HTML
  • يمكن أن تحتوي جميع عناصر HTML على سمات
  • توفر السمات معلومات إضافية حول العناصر
  • يتم تحديد السمات دائمًا في علامة البداية
  • تأتي السمات عادةً في أزواج الاسم / القيمة مثل: الاسم = "القيمة"
سمة الرابط (href)
تحدد العلامة <a> ارتباطًا تشعبيًا. تحدد السمة href عنوان URL للصفحة التي ينتقل إليها الارتباط:
مثال 
<!DOCTYPE html>
<html>
<body>
   <a href="https://itqan7.blogspot.com/">زيارة مدونة itqan7</a>
</body>
</html>
سمة المسار(src)
تُستخدم علامة <img> لتضمين صورة في صفحة HTML. تحدد السمة src المسار إلى الصورة المراد عرضها:
مثال
<!DOCTYPE html>
<html>
<base href='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiRozoWoULV1xz5bECAn2KS1BSUlRxR8D8iY6CiHDVsZgxXm9IzP3iCw7pq5k3slg4-tDC1kbHG1iLt2hLAMT3ndtki5UZlqwqxDU1FCUzFwD8-mDft6oBpHbeaxxCMk0VFY2f_sz9g0GzJ/w800/'>
<body>
  <img src="logo.png">
</body>
</html>
هناك طريقتان لتحديد عنوان URL في سمة src:

1. عنوان URL مطلق - روابط تؤدي إلى صورة خارجية مستضافة على موقع ويب آخر. مثال:  
<!DOCTYPE html>
<html> 
<body>
  <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiRozoWoULV1xz5bECAn2KS1BSUlRxR8D8iY6CiHDVsZgxXm9IzP3iCw7pq5k3slg4-tDC1kbHG1iLt2hLAMT3ndtki5UZlqwqxDU1FCUzFwD8-mDft6oBpHbeaxxCMk0VFY2f_sz9g0GzJ/w800/logo.png">
</body>
</html>
ملاحظات: قد تكون الصور الخارجية محمية بحقوق النشر. إذا لم تحصل على إذن لاستخدامه ، فقد تنتهك قوانين حقوق النشر. بالإضافة إلى ذلك ، لا يمكنك التحكم في الصور الخارجية ؛ يمكن إزالته أو تغييره فجأة.
2. URL النسبي - روابط إلى صورة مستضافة داخل الموقع. هنا ، لا يتضمن عنوان URL اسم المجال. إذا بدأ عنوان URL بدون شرطة مائلة ، فسيكون مرتبطًا بالصفحة الحالية. مثال: 
src = "my_img.jpg"
 إذا بدأ عنوان URL بشرطة مائلة ، فسيكون متعلقًا بالمجال. مثال:  
src = "/images/my_img.jpg"
نصيحة: من الأفضل دائمًا استخدام عناوين URL النسبية. لن تفقد المسار إذا قمت بتغيير المجال.
سمات العرض والارتفاع
يجب أن تحتوي علامة <img> أيضًا على سمات العرض والارتفاع ، والتي تحدد عرض الصورة وارتفاعها (بالبكسل):

مثال
<!DOCTYPE html>
<html>
<base href='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhbtChSlOQYzGdte6ezUlyAV9O-rnC6ah9-D1ga2UdX5CmKOHsOxjT70eaURh3LPDbZtymwAWURbULPAxPFDfNwJTfp20ymHtsiLQleQ6ffDsL4Xfiw3ONQD6VhirbBi9_uyBkjm49VyMlj/s320/'>
<body>
  <img src="05.png" width="500" height="600">
</body>
</html>
سمة النص البديل alt
تحدد سمة النص البديل المطلوبة لعلامة <img> نصًا بديلاً للصورة ، إذا تعذر عرض الصورة لسبب ما. يمكن أن يكون هذا بسبب الاتصال البطيء ، أو خطأ في السمة src ، أو إذا كان المستخدم يستخدم قارئ الشاشة.
مثال
<!DOCTYPE html>
<html>
<body>
  <img src="05.png"  alt="my_image">
</body>
</html>
سمة النمط style
تُستخدم سمة النمط لإضافة أنماط انسيابية وتنسيق  إلى  عنصر، مثل اللون والخط والحجم والمزيد.
مثال
<!DOCTYPE html>
<html>
<body>
  <p style="color:red;">هذه فقرة باللون الاحمر.</p> 
</body>
</html>
سمة اللغة lang
يجب عليك دائمًا تضمين سمة lang داخل علامة <html> للإعلان عن لغة صفحة الويب. هذا يهدف إلى مساعدة محركات البحث والمتصفحات.
يحدد المثال التالي اللغة الإنجليزية كلغة: 

<!DOCTYPE html>
<html lang="en">
<body>
...المحتوى يكتب هنا
</body>
</html>
يمكن أيضًا إضافة رموز البلدان إلى رمز اللغة في سمة lang. لذا ، فإن أول حرفين يحددان لغة صفحة HTML ، ويحدد الحرفان الأخيران البلد.
يحدد المثال التالي اللغة الإنجليزية كلغة والولايات المتحدة هي الدولة: 
<!DOCTYPE html>
<html lang="en-US">
<body>
...المحتوى يكتب هنا
</body>
</html>
سمة العنوان title 
تحدد سمة العنوان بعض المعلومات الإضافية حول العنصر.
سيتم عرض قيمة سمة title كتلميح أداة عند تحريك الماوس فوق العنصر:
مثال 
<!DOCTYPE html>
<html> 
<body> 
  <p title="عند مرور الفأرة فوقي ستشاهد قيمتي"> مرر الفأرة فوقي لمشاهدة محتوى (title)</p>
</body>
</html>
نقترح: استخدام السمات بالاحرف الصغير دائمًا
لا يتطلب معيار HTML أسماء سمات صغيرة.
يمكن كتابة سمة العنوان (وجميع السمات الأخرى) بأحرف كبيرة أو صغيرة مثل العنوان أو TITLE.
ومع ذلك ، توصي W3C باستخدام سمات الأحرف الصغيرة في HTML ، وتتطلب سمات أحرف صغيرة لأنواع المستندات الأكثر صرامة مثل XHTML.
نقترح: اقتباس قيم السمات دائمًا
لا يتطلب معيار HTML علامات اقتباس حول قيم السمات.
ومع ذلك ، توصي W3C بعلامات اقتباس بتنسيق HTML ، وتطالب باقتباسات لأنواع المستندات الأكثر صرامة مثل XHTML.
جيد 
<a href="https://itqan7.blogspot.com/">Visit </a>
سيىء 
<a href=https://itqan7.blogspot.com/>Visit </a>
في بعض الأحيان عليك استخدام الاقتباسات. لن يعرض هذا المثال سمة العنوان بشكل صحيح ، لأنها تحتوي على مسافة:
مثال 
<p title=اتصل بنا>
من الافضل استخدام علامات الاقتباس في السمات
اقتباسات مفردة أو مزدوجة؟
علامات الاقتباس المزدوجة حول قيم السمات هي الأكثر شيوعًا في HTML ، ولكن يمكن أيضًا استخدام علامات الاقتباس المفردة.
في بعض الحالات ، عندما تحتوي قيمة السمة نفسها على علامات اقتباس مزدوجة ، من الضروري استخدام علامات الاقتباس المفردة: 
<p title='John "ShotGun" Nelson'>
<p title="John 'ShotGun' Nelson">
ملخص الدرس
  • يمكن أن تحتوي جميع عناصر HTML على سمات (attributes)
  • تحدد سمة href لـ <a> عنوان URL للصفحة التي ينتقل إليها الارتباط
  • تحدد السمة src الخاصة بـ <img> المسار إلى الصورة المراد عرضها
  • توفر سمتا العرض والارتفاع لـ <img> معلومات عن حجم الصور
  • توفر سمة alt لـ <img> نصًا بديلاً للصورة
  • تُستخدم سمة النمط style لإضافة أنماط إلى عنصر ، مثل اللون والخط والحجم والمزيد
  • تحدد السمة lang للعلامة <html> لغة صفحة الويب
  • تحدد سمة العنوان title بعض المعلومات الإضافية حول العنصر
القسم: