وسوم HTML كاملة | دروس HTML5


جميع اوسمة لغة HTML


توفر السمات معلومات إضافية لعنصر HTML. في هذا الفصل ، سنلقي نظرة على بعض السمات الشائعة في عناصر HTML.


السمات في HTML 

يمكن أن تحتوي جميع علامات HTML على سمات
يتم وضع السمات دائمًا في العلامة الأولية
عادةً ما يتم تعريف السمات على أنها اسم / قيمة: "القيمة" = الاسم 


العنوان 

يتم تحديد سمة العنوان لعنصر الفقرة. يتم عرض قيمة هذه السمة في تلميح أداة (مستطيل صغير مع وصف) عند وضع الماوس على الفقرة:

<p title="I'm a tooltip">
This is a paragraph.
</p>


صفة  href

يتم تعريف الروابط في HTML بواسطة علامة <a>. يتم تحديد عنوان الارتباط بواسطة سمة href:

<a href="http://www.w3schools.com">This is a link</a>


سمات الحجم img

يتم تعريف الصور بتنسيق HTML بواسطة علامة <img>. 

 يتم تحديد عنوان الصورة بواسطة السمة (src) ويتم تحديد أحجام الصورة بواسطة السمات (العرض والارتفاع):

<img src="/Uploads/Images/x01.png" width="210" height="55">

صفة alt

تحدد السمة alt نصًا بديلاً عندما يتعذر عرض الصورة لأي سبب.

 <img src="/Uploads/Images/x01.png" alt="learnsource.net" width="215" height="60">

سمات الكتابة بأحرف كبيرة أو صغيرة 

في HTML5 ، لا يهم ما إذا كانت أحرف السمات صغيرة أم كبيرة ، ويمكن كتابة السمات بطريقتين.

على سبيل المثال ، علامة سمة العنوان صالحة في كل من العنوان و TITLE.

يوصي W3C (World Wide Web Consortium) باستخدام الأحرف الصغيرة.


استخدم علامات الاقتباس لقيم السمات

لا يحتاج HTML5 إلى استخدام علامات الاقتباس ("") لقيم السمات. على سبيل المثال ، لاحظ قيمة السمة href في الكود التالي:

<a href=http://www.arabicness.com>

ومع ذلك ، يوصى دائمًا باستخدام علامات الاقتباس.

في بعض الأحيان يكون من الضروري استخدام علامات الاقتباس ("") ، كما هو الحال عند وجود مسافة بين كلمتين.

المثال التالي هو مثال غير صحيح لا يعرض سمة العنوان بشكل صحيح:

<p title=About W3Schools>

 استخدم علامات الاقتباس المزدوجة أو المفردة 

يعد استخدام علامات الاقتباس المزدوجة ("") أكثر شيوعًا في HTML ، على الرغم من أنه يمكنك استخدام علامات الاقتباس المفردة ("") دون أي مشاكل.

في بعض الحالات ، قد يكون النص نفسه اقتباسًا مزدوجًا أو منفردًا ، ويمكن استخدامه لتجنب الأخطاء في النموذج التالي:

<p title='John "ShotGun" Nelson'>

أو

<p title="John 'ShotGun' Nelson">

كلمات مفتاحية: