السمات Attributes - تعلم Html
أهلا بيكم يا شباب، عاملين إيه؟ يا رب تكونوا بخير دايمًا.
في فيديو النهاردة هنتكلم عن
السمات أو الـ Attributes الخاصة بعناصر HTML، وهنعرف
بنستخدمها إزاي وليه بتكون مهمة جدًا في تطوير صفحات الويب.
يعني إيه Attribute في HTML؟
الـ Attributes أو السمات هي عبارة عن معلومات إضافية بنضيفها للعناصر أو
التاجز بتاعتنا في HTML علشان نتحكم في سلوك العنصر أو نحدد خصائص ليه.
ودي بنكتبها دايمًا في وسم الفتح (Opening tag) مش وسم
الغلق.
مثال سريع:
لو عندنا تاج HTML، فإحنا بنكتب السمة في وسم الفتح كده:
<html lang="en">
نفس الكلام مع أي عنصر زي <head>،
<title>،
<img>، <a>...
كلهم بنضيف السمات في الوسم الافتتاحي بتاعهم.
شكل السمة (Attribute Syntax)
السمة بتتكتب بالطريقة دي:
name="value"يعني:
-
الاسم (name) هو اسم السمة.
-
القيمة (value) هي القيمه اللي إحنا بنحددها علشان نتحكم في سلوك العنصر.
مثال:
<input type="text">-
هنا
typeهو اسم السمة. -
و
textهي القيمة بتاعتها.
القيمة دايمًا بنكتبها بين علامتين تنصيص:
-
ممكن تستخدم تنصيص مزدوج
" "، وده الأكثر شيوعًا. -
أو تنصيص مفرد
' '، وده بيشتغل برضه.
تعالوا نطبق عملي شوية
ندخل على جسم الصفحة في <body> ونبدأ نضيف
شوية عناصر وسمات علشان نشوف النتيجة.
1. رابط (Anchor Tag)
لو كتبنا عنصر رابط:
<a>Welcome</a>
ده كده مش هيشتغل لأنه ناقصه سمة مهمة وهي
href اللي بتحدد عنوان الرابط. فهنكتبها كده:
<a href="#">Welcome</a>
-
كده الرابط بقى شغال.
-
لو ضغطت عليه هيحاول ينقلك، بس لإننا كتبنا
#مش هيروح في أي مكان.
2. صورة (Image Tag)
عنصر <img> من العناصر اللي بتقفل نفسها،
يعني مفيش وسم غلق:
<img>
لكن كده مش هيعرض صورة. لازم نضيف السمة
src:
<img src="image.jpg">-
هنا
srcبتحدد مصدر الصورة.
ولو الصورة مش موجودة أو مش بتتحمل، نقدر نضيف سمة تانية اسمها
alt علشان نظهر نص بديل:
<img src="image.jpg" alt="صورة ترحيبية">نقدر كمان نضيف سمات زي:
-
width="200": لتحديد عرض الصورة. -
height="100": لتحديد الطول. -
style="border: 1px solid red": لتطبيق تنسيقات CSS مباشرة على العنصر.
3. عنصر العنوان (Heading)
لو عندنا عنصر <h1>، نقدر نضيفله سمة
style لتغيير اللون:
<h1 style="color: blue;">أهلا بيكم</h1>-
هنا استخدمنا CSS داخل السمة
style.
4. لغة الصفحة
لو عايز تحدد لغة الموقع، بنضيف سمة lang في وسم
الـ <html> نفسه:
<html lang="en">-
enللإنجليزي. -
arللعربي.
السمة دي بتساعد المتصفح ومحركات البحث يعرفوا لغة المحتوى.
سؤال سريع في نهاية الفيديو
إيه هي الصيغة الصحيحة لكتابة سمة في HTML؟
اختار الإجابة الصح من الاختيارات اللي قدامك على الشاشة:
A) alt-'text'
B) src:text
C) name="value"
D) type=value
الإجابة الصح طبعًا هي:name="value"
الخلاصة
-
السمات بتكتب دايمًا في وسم الفتح.
-
بتكون على شكل:
name="value". -
ممكن نضيف أكتر من سمة في نفس العنصر.
-
السمات بتساعدنا نحدد سلوك العنصر أو شكله أو وظيفته.
تابعونا في الفيديو الجاي، هنتكلم فيه عن إزاي نحدد اللغة العربية بشكل صحيح داخل موقع HTML، ونعرف تأثيرها على الصفحة بالكامل.
شاهد الفيديو
وفي النهاية اتمني يكون الموضوع افادكم فلا تنسي متابعتي علي قناة اليوتيوب
ولكم جزيل الشكر ❤️❤️