الـ Attributes هي "الإعدادات" اللي بنحطها جوه التاج عشان نتحكم في سلوكه وشكله.
دي سمات "جوكر"، تنفع تتحط في أي تاج HTML في الدنيا:
| السمة | بتعمل إيه؟ |
|---|---|
id | اسم فريد للتاج (ممنوع يتكرر في نفس الصفحة). بنحتاجه في الـ JS. |
class | اسم فئة، بنستخدمه عشان ندي نفس التنسيق لكذا عنصر بالـ CSS. |
style | عشان تكتب كود CSS جوه التاج مباشرة (بس مش أحسن طريقة). |
title | بيظهر رسالة صغيرة (Tooltip) لما تقف بالماوس على العنصر. |
hidden | بيخفي العنصر تماماً من الصفحة. |
تاجات معينة ما تشتغلش من غير سماتها الخاصة:
| التاج | السمة | الشرح بالبلدي |
|---|---|---|
<a> | href | عنوان الموقع اللي اللينك هيوديك ليه. |
<a> | target="_blank" | بيفتح اللينك في صفحة (Tab) جديدة. |
<img> | src | مسار أو لينك الصورة. |
<img> | alt | نص بديل بيظهر لو الصورة ما حملتش (مهم جداً للـ SEO). |
دي اللي بتخلي المستخدم يتفاعل مع الموقع:
| السمة | الوظيفة |
|---|---|
placeholder | كلام توضيحي جوه الخانة بيختفي لما تبدأ تكتب. |
value | القيمة الحقيقية اللي جوه الخانة. |
required | بيجبر المستخدم إنه ما يسيبش الخانة فاضية. |
disabled | بيخلي الخانة موجودة بس ما تقدرش تدوس عليها أو تكتب فيها. |
type | بيحدد نوع المدخل (text, password, email, checkbox). |
جرب تغير الـ placeholder أو الـ src وشوف التغيير:
1. أنهي سمة بنستخدمها عشان نخلي اللينك يتفتح في صفحة جديدة؟
2. إيه السمة اللي بتعرض نص لو الصورة ما ظهرتش؟
3. الـ id لازم يكون فريد وما يتكررش في نفس الصفحة؟
4. السمة اللي بتخلي خانة الكتابة إجبارية هي:
5. لو عايز تدي كذا عنصر "نفس التنسيق" بالـ CSS، بتستخدم سمة الـ:
الخطوة الجاية هي إزاي نربط الـ HTML بالـ CSS.
الرجوع للقايمة