سمات HTML

  • يمكن أن تحتوي كافة عناصر HTML على سمات او attributes
  • توفر السمات معلومات إضافية حول العنصر او خصائصة
  • يتم تحديد السمات دائما في علامة البدء فقط
  • عادة ما تأتي السمات في أزواج الاسم و القيمة مثل ذلك

قيمة السمة"=السمة


سمة href

يتم تعريف روابط HTML في العلامة <a> بواسطة السمة href ويضع الرابط بين علامتين التنصيص

يبدو بهذا الشكل في العادة

<a href="الرابط هنا"></a>

مثال

<!DOCTYPE html>
<html>
<body>
<!--  هذا الكود يصف مكان ملف يرجي وضع المصار الصحيح    -->
<a href="index.html">اضغط هنا</a>
<!--  هذا الكود يصف رابط لموقع    -->
<a href="arschools.com">اضغط هنا</a>
</body>
</html>

سوف تتعلم المزيد عن الروابط والعلامة <a> في وقت لاحق


سمة src

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

يتم تحديد اسم الملف او رابط الملف لمصدر الصورة في السمة:src

يبدو بهذا الشكل في العادة

<a href="الرابط هنا"></a>

مثال

<!DOCTYPE html>
<html>
<body>
<!--  هذا الكود سيعرض الصورة بابعادها الطبيعيه  -->
<img src="https://arschools.com/arwebschools.png">
</body>
</html>

سمات width / height

تحتوي الصور في HTML على مجموعة من السمات التي تحدد الحجم الخاص بالصورة

 والتي تحدد عرض الصورة وارتفاعها
width = عرض

height = ارتفاع

يبدو بهذا الشكل في العادة

<img src="مسار الصورة او الرابط" width="هنا الحجم" height="هنا الحجم">

مثال

<!DOCTYPE html>
<html>
<body>
<!--  في هذه الحالة يتم تحديد ابعاد الصورة حسب رغبتك  -->
<img src="https://arschools.com/arwebschools.png" width="500" height="600">
</body>
</html>

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

سوف تتعلم المزيد عن الصور في درس الصور


سمة alt

تحدد السمة alt نصا بديلا لاستخدامه في حال ان لم تعمل الصورة او تم تغيير مكانها يوفر هذا النص البديل بعض المعلومات حيث تمكنك السمة من كتابة معلومات عن الصورة

يمكن قراءة قيمة السمة بواسطة قارئات الشاشة. وبهذه الطريقة، يمكن لشخص ما “يستمع” إلى صفحة الويب، مثل شخص أعمى، أن “يسمع” شرح قصير عن العنصر او ماهو

مثل

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

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

مثل

شاهد ما يحدث إذا حاولنا عرض صورة غير موجودة:<img src=”img_typo.jpg” alt=”Girl with a jacket”>جربه بنفسك »



سمة style

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

مثل

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

سوف تتعلم المزيد عن التصميم في كورس css


سمة lang

يمكن تعريف لغة المستند في العلامة.<html>

يتم تعريف اللغة باستخدام السمة.lang

الإعلان عن اللغة مهم لتطبيقات إمكانية الوصول (قارئات الشاشة او برامج الوصول لمساعدة المكفوفين) ومحركات البحث

مثال

<!DOCTYPE html>
<html lang="ar-EG">
<body>
<!--  فارغ   -->
</body>
</html>

يحدد الحرفان الأولان اللغة(ar) يحدد الحرفان الثانيان البلد او اللكنة التي تستعمل في اللغة (EG)


سمة title

هنا تتم إضافة سمة title إلى العنصر. سيتم عرض قيمة سمة العنوان ك تلميح عند التأشير بالماوس علي النص

مثال

قم بالتاشير بالماوس علي النص بعد تشغيل الكود

<p title="مرحبا هذه قطعة من النص">
قطعة النص الاولي لي
</p>


نقترح: اقتبس قيم السمة اي ضع القيمة داخل علامات تنصيص “هنا”

لا تقم بفعلة بذلك الشكل قد يعمل احيانا لكن قد يتسبب في ظهور مشكلات

<a href=https://arscools.com>

اجعلة هكذا دائما
<"a href="https://www.w3schools.com>

<!-- هذا سئ قد ينتج عنة مشكلات -->
<a href=https://arschools.com>
  <!-- هذا افضل  -->
<a href="https://arschools.com">

توصي W3C بعلامات اقتباس مزدوجة في HTML ، وتطالب باقتباسات لأنواع مستندات أكثر صرامة مثل XHTML.

في بعض الأحيان من الضروري استخدام علامات الاقتباس. لن يعرض هذا المثال سمة العنوان بشكل صحيح، لأنه يحتوي على مسافة

قم بالتاشير بالماوس علي النتيجة ar web schools بعد تشغيل الكود

مثل

<p title=هذا نص هام>ar web schools</p>

استخدام علامات الاقتباس هي الأكثر شيوعا. يمكن أن يؤدي حذف علامات الاقتباس إلى حدوث أخطاء.

في W3Schools نستخدم دائما علامات الاقتباس حول قيم السمة.


ايهما افضل علامات تنصيص مزدوجة او منفردة ؟ ” ” | ‘ ‘

علامات الاقتباس المزدوجة مثل هذا في قيم السمات او attributes هي الأكثر شيوعا واستعمالا في HTML، ولكن يمكن أيضا استخدام علامات الاقتباس المفردة. مثل هذا

في بعض الحالات، عندما تحتوي قيمة السمة نفسها على علامات اقتباس مزدوجة، من الضروري استخدام علامات الاقتباس المفردة والعكس

<!-- بعني اخر ان كانت الاطراف تحوي علامات تنصيص منفردة
استعمل في الوسط ان كنت تريد الاشيارة لاحد النصوص علامات مزدوجة
-->
<p title='عرب سكول "هو" الافضل'>ar web schools</p>
  <!-- وان كانت الاطراف تحوي علامات تنصيص مزدوجة
استعمل في الوسط ان كنت تريد الاشيارة لاحد النصوص علامات منفردة
-->
<p title="عرب سكول 'هو' الافضل">ar web schools</p>


ملخص الفصل

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