سمات HTML توفر معلومات إضافية عن عناصر HTML.
سمات HTML :
- جميع عناصر HTML يمكن أن تمتلك سمات
- توفر السمات معلومات إضافية عن العناصر
- يتم تعريف السمات دائمًا داخل علامة البداية
- عادةً ما تأتي السمات على شكل أزواج اسم/قيمة مثل:
name="value"
السمه href:
يحدد عنصر <a> رابطًا تشعبيًا. تحدد السمة href عنوان URL للصفحة التي يذهب إليها الرابط.
<a href="https://menoufy.me/">Visit menoufy</a>
ستتعرف على المزيد حول الروابط في فصل “روابط HTML” الخاص بنا.
السمه src :
يتم استخدام العنصر <img> لتضمين صورة في صفحة HTML. تحدد السمة src المسار إلى الصورة التي سيتم عرضها.
<img src="img_girl.jpg">
طريقتان لتحديد عنوان URL في سمة src :
- عنوان URL المطلق: يربط بصورة خارجية مستضافة على موقع ويب آخر. مثال:
src="https://www.w3schools.com/images/img_girl.jpg".
ملاحظات:
- قد تكون الصور الخارجية محمية بحقوق الطبع والنشر. إذا لم تحصل على إذن لاستخدامها، فقد تنتهك قوانين حقوق الطبع والنشر.
- بالإضافة إلى ذلك، لا يمكنك التحكم في الصور الخارجية؛ يمكن حذفها أو تغييرها فجأة.
- عنوان URL النسبي: يربط بصورة مستضافة داخل موقع الويب. هنا، لا يتضمن عنوان URL اسم النطاق. إذا بدأ عنوان URL بدون شرطة مائلة، فسيكون نسبيًا إلى الصفحة الحالية. مثال:
src="img_girl.jpg". إذا بدأ عنوان URL بعلامة مائلة، فسيكون نسبيًا إلى النطاق. مثال:src="/images/img_girl.jpg".
نصيحة:
- غالبًا ما يكون استخدام عناوين URL النسبية هو الأفضل. لن تتعطل إذا قمت بتغيير النطاق.
السمات width و height :
يجب أن يحتوي عنصر <img> أيضًا على السمتين width و height، اللتين تحددان عرض وارتفاع الصورة (بالبكسل):
<img src="img_girl.jpg" width="500" height="600">
السمة alt :
السمة alt المطلوبة لعلامة <img> تحدد نصًا بديلاً للصورة، إذا تعذر عرض الصورة لسبب ما. يمكن أن يكون ذلك بسبب بطء الاتصال أو وجود خطأ في السمة src أو إذا كان المستخدم يستخدم قارئ شاشة
<img src="img_girl.jpg" alt="Girl with a jacket">
ماذا يحدث إذا حاولنا عرض صورة غير موجودة؟
<img src="img_typo.jpg" alt="Girl with a jacket">
ستتعلم المزيد عن الصور في فصل “صور HTML” الخاص بنا.
سمة style :
تُستخدم سمة style لإضافة أنماط إلى عنصر، مثل اللون والخط والحجم والمزيد.
<p style="color:red;">This is a red paragraph.</p>
ستتعلم المزيد عن الأنماط في فصل “أنماط HTML” الخاص بنا.
سمة lang :
يجب عليك دائمًا تضمين سمة lang داخل علامة <html>، لتحديد لغة صفحة الويب. الغرض من ذلك هو مساعدة محركات البحث والمتصفحات.
المثال التالي يحدد اللغة الإنجليزية كلغة:
<!DOCTYPE html>
<html lang="en">
<body>
...
</body>
</html>يمكن أيضًا إضافة رموز الدول إلى رمز اللغة في سمة lang. لذلك ، تحدد الحرفان الأولان لغة صفحة HTML ، وتحدد الحرفان الأخيران الدولة.
المثال التالي يحدد اللغة الإنجليزية والولايات المتحدة كدولة:
<!DOCTYPE html>
<html lang="en-US">
<body>
...
</body>
</html>يمكنك الاطلاع على جميع رموز اللغات في مرجع رموز لغات HTML الخاص بنا.
سمة title :
تُستخدم سمة title لتحديد بعض المعلومات الإضافية حول عنصر.
سيتم عرض قيمة السمة title كنافذة منبثقة صغيرة عند تمرير الماوس فوق العنصر.
<p title="I'm a tooltip">This is a paragraph.</p>
نوصي دائمًا باستخدام الأحرف الصغيرة للصفات
نوصي دائمًا باستخدام الأحرف الصغيرة للصفات
لا يشترط معيار HTML استخدام أسماء صفات بأحرف صغيرة.
يمكن كتابة سمة العنوان (وكل الصفات الأخرى) بأحرف كبيرة أو صغيرة مثل “title” أو “TITLE”.
ومع ذلك ، يوصي W3C باستخدام صفات بأحرف صغيرة في HTML ، ويطالب باستخدام صفات بأحرف صغيرة لأنواع المستندات الأكثر صرامة مثل XHTML.
نستخدم دائمًا أسماء صفات بأحرف صغيرة.
نوصي دائمًا بوضع علامات اقتباس على قيم الصفات
لا يشترط معيار HTML وجود علامات اقتباس حول قيم الصفات.
ومع ذلك ، يوصي W3C باستخدام علامات اقتباس في HTML ، ويطالب باستخدام علامات اقتباس لأنواع المستندات الأكثر صرامة مثل XHTML.
يجعل استخدام علامات اقتباس حول قيم الصفات HTML الخاص بك أكثر سهولة في القراءة وأقل عرضة للخطأ. كما أنه يجعل HTML الخاص بك أكثر توافقًا مع معايير
جيد:
<a href="https://www.w3schools.com/html/">Visit our HTML tutorial</a>
سيء:
<a href=https://www.w3schools.com/html/>Visit our HTML tutorial</a>
أحيانًا يتعين عليك استخدام علامات اقتباس. لن يعرض هذا المثال سمة العنوان بشكل صحيح ، لأنه يحتوي على مسافة:
<p title=About W3Schools>
نستخدم دائمًا علامات اقتباس حول قيم الصفات.
علامات اقتباس مفردة أو مزدوجة؟
في HTML، علامات الاقتباس المزدوجة حول قيم الصفات هي الأكثر شيوعًا، ولكن يمكن أيضًا استخدام علامات الاقتباس المفردة.
في بعض الحالات، عندما تحتوي قيمة السمة نفسها على علامات اقتباس مزدوجة، يلزم استخدام علامات اقتباس مفردة:
<p title='John "ShotGun" Nelson'>
أو بالعكس:
<p title="John 'ShotGun' Nelson">
ملخص الفصل
- يمكن لجميع عناصر HTML أن تحتوي على صفات.
- تحدد سمة
hrefلعلامة<a>عنوان URL للصفحة التي يذهب إليها الرابط. - تحدد سمة
srcلعلامة<img>المسار إلى الصورة المراد عرضها. - توفر صفتي
widthوheightلعلامة<img>معلومات عن حجم الصور. - توفر سمة
altلعلامة<img>نصًا بديلًا للصورة. - تُستخدم سمة
styleلإضافة أنماط إلى عنصر، مثل اللون والخط والحجم والمزيد. - تحدد سمة
langلعلامة<html>لغة صفحة الويب. - تحدد سمة
titleبعض المعلومات الإضافية عن عنصر.
