21/02/2024
تعلم أساسيات HTML

الدرس الرابع – السمات Attributes لعناصر HTML التي تستخدم لإضافة معلومات

تستخدم السمات Attributes لإضافة معلومات لعناصر HTML حيث

  • كل عناصر HTML يمكن أن تحتوى على سمات
  • السمات تقدم معلومات اضافية للعناصر
  • يجب أن يتم إضافة السمات فى وسم البداية فقط (ٍStart tag)
  • السمات عادة تأتى على شكل اسم وقيمة كالتالى name=”value”

السمات Attributes لإضافة معلومات لعناصر HTML – أمثلة على استخدام السمات

مثال 1:

href وهى التى يوضع بها الرابط داخل العنصر <a>

<a href="https://www.gaawy.com">Visit gaawy</a> 

وستتعلم المزيد عن الروابط فى درس الروابط


مثال 2:

src وهى التى يوضع بها (رابط مسار تخزين الصورة على السيرفر) فى العنصر <img>

<img src="img_girl.jpg">

السمات Attributes لإضافة معلومات لعناصر HTML – هناك طريقتات لأضافة السمة src

1– طريقة مطلقة: ويوضع بها المسار كامل وتستخدم عندما تكون الصورة مخزنة على سيرفر آخر بخلاف موقعك وتكون كما فى المثالى التالى
src=”https://www.gaawy.com/images/img_girl.jpg”
ولا يفضل اضافة صور لموقعك من مواقع أخرى لأنها قد تكون محمية بحقوق ملكية ومن جهة أخرى لا يكون لك تحكم فيها حيث قد يتم حذفها أو تغييرها.

2– طريقة نسبية: تستخدم هذه الطريقة فقط عندما تكون الصور مخزنة على نفس سيرفر موقعك ، ولا نستخدم فى هذه الطريقة اسم الدومين ، ولكن فقط المسار كما فى المثال التالى
src=”/images/img_girl.jpg”
يفضل استخدام الطريقة النسبية دائما حيث لن تكون هناك اى مشاكل إذا تم تغيير اسم الدومين


مثال 3:

سمات العرض والارتفاع
فى العنصر <img> يمكن اضافة السمة width لتحديد عرض الصورة ، والسمة height لتحديد ارتفاع الصورة ، وعادة يتم اضافة القيمة بالبكسل

<img src="img_girl.jpg" width="500" height="600">

مثال 4:

فى العنصر <img> يمكن اضافة ايضا السمة alt لعرض النص البديل للصورة ، حيث يظهر هذا النص بدلا من الصورة فى حالة لم يتم عرض الصورة لأى سبب (يكون الاتصال بالانترنت بطئ مثلا ، أو أن يكون هناك خطأ فى سمة src ، أو يكون المستخدم يستخدم قارئ للشاشة .. أو أى سبب آخر) ، كما أن اضافة النص البديل مفيد أيضا لتحسين محركات البحث لموقعك SEO

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

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


مثال 5:

يمكن استخدام سمة style لإضافة تنسيق لأي عنصر (مثل اللون ، أو الحجم ، أو نوع الخط ، وغيرها) وفى هذه السمة نستخدم لغة CSS لإضافة التنسيقات

فى هذا المثال سنقوم بجعل الفقرة مكتوبة باللون الأحمر عن طريق اضافة السمة style إلى العنصر <p> الخاص بالفقرة.

<p style="color:red;">This is a red paragraph.</p> 

وسوف تتعلم المزيد عن التصميمات والتنسيقات فى كورس CSS


مثال 6:

يجب اضافة السمة lang بداخل العنصر html لتحديد اللغة لموقعك (لا تظهر للمستخدم ولكن تكون مفيدة لمحركات البحث والمتصفحات لعرض المحتوى بشكل صحيح) ، فى المثال التالى سنقوم بتحديد اللغة الإنجليزية عن طريق اضافة القيمة “en” للسمة lang

<!DOCTYPE html>
<html lang="en">
<body>
...
</body>
</html>

كما يمكن اضافة ايضا كود الدولة إلى السمة lang ، حيث أول حرفين لتحديد اللغة ، واخر حرفين لتحديد الدولة ، فى المثال التالى سنحدد فى اللغة (اللغة الانجليزية ويرمز لها بـ en) و الدولة (الولايات المتحدة ويرمز لها بـ US)

<!DOCTYPE html>
<html lang="en-US">
<body>
...
</body>
</html>

مثال 7:

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

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

السمات Attributes لإضافة معلومات لعناصر HTML – يفضل دائما استخدام حروف صغيرة Lowercase فى السمات

معايير HTML لا تشترط استخدام حروف صغيرة فى أسماء السمات ، سمات title (وكل السمات) يمكن كتابتها بحروف كبيرة أو صغيرة مثل title أو TITLE ، ولكن نحن دائما نستخدم حروف صغيرة للسمات


السمات Attributes لإضافة معلومات لعناصر HTML – يفضل دائما استخدام أقواس تنصيص ( ” ) لقيم السمات

معايير HTML لا تشترط استخدام أقواس التنصيص لقيم السمات ، ولكن نحن دائما نستخدم أقواس التنصيص

الطريقة الصحيحة كما في المثال التالي:

<a href="https://www.gaawy.com/html/">Visit our HTML tutorial</a> 

بينما الطريقة الخاطئة تكون كالتالي:

<a href=https://www.gaawy.com/html/>Visit our HTML tutorial</a> 

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

<p title=About gaawy> 

السمات Attributes لإضافة معلومات لعناصر HTML – هل نقوم باستخدام القوس الفردى ( ‘ ) أم المزدوج ( ” )؟

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

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

أو العكس

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


روابط أو لينكات كورس تعلم أساسيات البرمجة بلغة HTML باللغة العربية كاملة

  1. مقدمة فى HTML لغة البرمجة الرئيسية لإنشاء صفحات الويب
  2. محرر النصوص الأداة الرئيسية لكتابة أكواد HTML
  3. الأكواد الأساسية فى HTML ومحتويات الملف الرئيسي
  4. االسمات (Attributes) لإضافة معلومات لعناصر HTML
  5. العناوين Headings فى HTML العناصر <h1> حتى <h6>
  6. الفقرات Paragraphs لعمل كتلة من النص فى HTML
  7. تصميم صفحات HTML بواسطة CSS وتنسيقها بطرق مختلفة
  8. تنسيق النص فى HTML باستخدام العناصر لعرض النص بطريقة خاصة
  9. الاقتباس فى HTML بالعنصر blockquote و q و abbr و cite و bdo
  10. كيفية التعليق داخل كود HTML وأهميته للمبرمج
  11. الألوان فى HTML وكيفية اضافتها بـ 6 طرق مختلفة
  12. الروابط أو اللينكات (Links) للتنقل بين صفحات HTML
  13. الصور فى HTML شرح مفصل بالأمثلة
  14. الجداول HTML Tables شرح مفصل باللغة العربية بالأمثلة
  15. القوائم HTML Lists شرح مفصل باللغة العربية بالأمثلة
  16. أنواع العناصر Block و inline فى HTML والفرق بينهما
  17. شرح السمة class والسمة id فى HTMl والفرق بينهما
  18. شرح الإطارات HTML Iframes باللغة العربية
  19. HTML Forms – شرح الفورم باللغة العربية بالتفصيل

admin

المشرف العام على موقع gaawy

View all posts by admin →