الصفات داخل لغة HTML

ما هي HTML Attributes ؟


توفر السمات معلومات إضافية حول عناصر HTML.

HTML Attributes

يمكن أن تحتوي جميع عناصر HTML على سمات.
توفر السمات معلومات إضافية حول العنصر.
يتم دائماً تحديد السمات في علامة البدء.
تأتي السمات عادة في أزواج الاسم أو القيمة مثل: "name = "value".

السمة href

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

<a href="https://www.t3lemonline.com">This is a link</a>

السمة src

يتم تعريف صور HTML بإستخدام العلامة <img>، يتم تحديد إسم ملف مصدر الصورة في السمة src.
مثال:
<img src="img_girl.jpg">

السمتين The width and height

تحتوي الصور في HTML على مجموعة من سمات الحجم، والتي تحدد عرض الصورة وإرتفاعها:
مثال:
<img src="img_girl.jpg" width="500" height="600">

يتم تحديد حجم الصورة بالبكسل: width = "500" يعني عرض 500 بكسل.

السمة alt

تحدد السمة alt نصاً بديلاً ليتم إستخدامه، عندما يتعذر عرض صورة داخل المتصفح.
يُمكن قراءة قيمة السمة بواسطة قارئات الشاشة.
بهذه الطريقة، "يستمع" شخص ما إلى صفحة الويب، على سبيل المثال، شخص ضعيف الرؤية يُمكنه "سماع" العنصر.
مثال:
<img src="img_girl.jpg" alt="Girl with a jacket">

تكون سمة alt مفيدة أيضاً إذا كانت الصورة غير موجودة:
مثال:

<img src="img_typo.jpg" alt="Girl with a jacket">

شاهد ما يحدث إذا حاولنا عرض صورة غير موجودة.

السمة style

يتم إستخدام سمة النمط لتحديد تصميم العنصر، مثل اللون والخط والحجم وما إلى ذلك.
مثال:

<p style="color:red">I am a paragraph</p>

السمة The lang

يُمكن تعريف لغة المستند في العلامة <html>، يتم تعريف اللغة مع سمة lang.
يُعد الإعلان عن لغة أمراً هاماً لتطبيقات إمكانية الوصول "قارئات الشاشة" ومحركات البحث:

<!DOCTYPE html>
<html lang="en-US">

             <body>
...
</body>


</html>


أول حرفين يُحددان اللغة "en"، إذا كانت هناك لهجة إستخدم حرفين آخرين.

السمة title

هنا، تتم إضافة سمة عنوان إلى عنصر <p>،
سيتم عرض قيمة سمة العنوان كتلميح عند تحريك الماوس فوق الفقرة>.
مثال:

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

إقتراح
إستخدام السمات ذات الأحرف الصغيرة.
لا يتطلب معيار HTML5 أسماء سمات صغيرة.
يُمكن كتابة سمة العنوان بحروف كبيرة أو صغيرة مثل title أو TITLE.
تُوصي تعليم أونلاين بالحروف الصغيرة في HTML، وتتطلب أحرفاً صغيرة لأنواع المستندات الأكثر صرامة مثل XHTML.
إقتراح
إقتباس قيم للسمات.
لا يتطلب معيار HTML5 علامات إقتباس حول قيم السمات، يُمكن كتابة سمة href الموضحة أعلاه دون علامات إقتباس.
مثال خاطئ:

<a href=https://www.t3lemonline.com>

مثال صحيح:
<a href="https://www.t3lemonline.com">

تُوصي تعليم أونلاين بالإقتباس داخل لغة HTML، وتتطلب إقتباسات لأنواع المستندات الأكثر صرامة مثل XHTML.
في بعض الأحيان من الضروري إستخدام الإقتباسات، لن يعرض هذا المثال سمة العنوان بشكل صحيح، لأنه يحتوي على مسافة.
مثال:
<p title=About t3lemonline>
إستخدام الإقتباسات هي الأكثر شيوعاً. يُمكن أن يؤدي حذف علامات إقتباس إلى أخطاء،
في تعليم أونلاين، نستخدم دائماً علامات إقتباس حول قيم السمات.

الإقتباسات الفردية أو الزوجية

علامات الإقتباس المزدوجة حول قيم السمات هي الأكثر شيوعاً في HTML، ولكن يُمكن أيضاً إستخدام علامات الإقتباس الفردية.
في بعض الحالات، عندما تحتوي قيمة السمة نفسها على علامات إقتباس مزدوجة، من الضروري إستخدام علامات الإقتباس الفردية.
<p title='Andrew Shotgun to" Adam'>
أو العكس:
<p title="Andrew Shotgun to' Adam">

ملخص الدرس HTML Attributes

  • يُمكن أن تحتوي جميع عناصر HTML على سمات.
  • توفر سمة title معلومات إضافية حول "معلومات الأداة".
  • توفر سمة href معلومات عن العنوان للروابط.
  • توفر سمات العرض والإرتفاع معلومات عن الحجم للصور.
  • توفر سمة alt نصاً لقارئات الشاشة.
  • نستخدم أثناء دروس HTML السمات ونكبتها بإستخدام الأحرف الصغيرة.
  • في تعليم أونلاين نقوم دائماً بنقل قيم السمات مع علامات إقتباس مزودجة.


0 التعليقات

إرسال تعليق