دورة html | الدرس الثالث |HTML Attributes سمات
توفر سمات HTML معلومات إضافية حول عناصر HTML.
HTML Attributes
يمكن أن تحتوي جميع عناصر HTML على سمات
توفر السمات معلومات إضافية حول العناصر
يتم تحديد السمات دائمًا في علامة البداية
تأتي السمات عادةً في أزواج الاسم / القيمة مثل: الاسم = “القيمة”. name=”value”
The href Attribute
تحدد العلامة a الارتباط التشعبي. تحدد السمة href عنوان URL للصفحة التي ينتقل إليها الارتباط:
<a href="https://alashkar.net/">Go to alashkar.net</a>
The src Attribute
تُستخدم علامة img لتضمين صورة في صفحة HTML. تحدد السمة src مسار الصورة المراد عرضها:
<img src="img_girl.jpg">هناك طريقتان لتحديد عنوان URL في سمة src:
- URL مطلق – روابط إلى صورة خارجية مستضافة على موقع ويب آخر. مثال: src = “https://alashkar.net//images/img_girl.jpg”.
ملاحظات: قد تكون الصور الخارجية محمية بحقوق النشر. إذا لم تحصل على إذن لاستخدامه ، فقد تكون قد انتهكت قوانين حقوق النشر. بالإضافة إلى ذلك ، لا يمكنك التحكم في الصور الخارجية ؛ يمكن إزالته أو تغييره فجأة.
- URL النسبي – روابط لصورة مستضافة داخل الموقع. هنا ، لا يتضمن عنوان URL اسم المجال. إذا بدأ عنوان URL بدون شرطة مائلة ، فسيكون متعلقًا بالصفحة الحالية. مثال: src = “img_girl.jpg”. إذا بدأ عنوان URL بشرطة مائلة ، فسيكون مرتبطًا بالمجال. مثال: src = “/ images / img_girl.jpg”.
نصيحة: من الأفضل دائمًا استخدام عناوين URL النسبية. لن ينكسر إذا قمت بتغيير المجال.
The width and height Attributes
يجب أن تحتوي علامة img أيضًا على سمات العرض والارتفاع ، والتي تحدد عرض الصورة وارتفاعها (بالبكسل):
<img src="img_girl.jpg" width="500" height="600">The alt Attribute
تحدد سمة alt المطلوبة لعلامة img نصًا بديلاً للصورة ، إذا تعذر عرض الصورة لسبب ما. قد يكون هذا بسبب الاتصال البطيء ، أو خطأ في السمة src ، أو إذا كان المستخدم يستخدم قارئ الشاشة.
<img src="img_girl.jpg" alt="Girl with a jacket">The style Attribute
تُستخدم سمة النمط style لإضافة أنماط إلى عنصر ، مثل اللون والخط والحجم والمزيد.
مثال
<p style="color:red;">This is a red paragraph.</p>The lang Attribute
يجب عليك دائمًا تضمين سمة lang داخل علامة html للإعلان عن لغة صفحة الويب. هذا يهدف إلى مساعدة محركات البحث والمتصفحات.
يحدد المثال التالي اللغة العربية كلغة:
<!DOCTYPE html>
<html lang="ar">
<body>
...
</body>
</html>يمكن أيضًا إضافة رموز البلدان إلى رمز اللغة في سمة lang. لذا ، فإن أول حرفين يحددان لغة صفحة HTML ، ويحدد الحرفان الأخيران البلد.
يحدد المثال التالي اللغة العربية كلغة و سوريا هي الدولة:
<!DOCTYPE html>
<html lang="en-SY">
<body>
...
</body>
</html>The title Attribute
تحدد سمة العنوان بعض المعلومات الإضافية حول العنصر.
سيتم عرض قيمة سمة العنوان كتلميح أداة عند تحريك الماوس فوق العنصر:
<p title="I'm a tooltip">This is a paragraph.</p>
