تخيّل أن الوسم (Tag) هو السيارة، والخصائص (Attributes) هي المفتاح + البنزين + لون السيارة + السرعة القصوى + حتى لوحة الأرقام!
بدون خصائص → الوسم موجود لكن "مشلول"
مع الخصائص → الوسم يشتغل بذكاء ويصير قوي جدًا!
ما هي الخصائص (Attributes)؟ 🏷️
الخصيصة هي معلومة إضافية تُكتب داخل وسم الافتتاح، وتتكون دائمًا من:
<اسم_الوسم/> المحتوى < "قيمة"=خصيصةاسم_الوسم>
اسم الخصيصة
مثل: src, href, class, id
علامة يساوي
ممنوع نسيانها!
القيمة بين علامتي تنصيص
حتى لو رقم، لازم تنصيص
أهم 15 خصيصة في HTML (احفظهم = صرت محترف!)
| الخصيصة | لأي وسم؟ | مثال | وظيفتها باختصار |
|---|---|---|---|
| class | كل الوسوم | "class="btn red | للتنسيق بـ CSS (أهم خصيصة!) |
| id | كل الوسوم (فريد) | "id="header | معرّف فريد للجافاسكربت و CSS |
| src | img, video, audio, script | "src="photo.jpg | مكان الملف |
| alt | img, area | "قطة جميلة"=alt | نص بديل + سيو + ذوي الإعاقة |
| href | a, link | href="https://google.com"=href | الرابط اللي يروح له |
| target | a, form | "target="_blank | _blank = تبويب جديد |
| style | كل الوسوم | ";style="color:red | تنسيق مباشر (للتجربة) |
| title | معظم الوسوم | "تلميح"=title | نص يظهر عند التمرير |
| width & height | img, video, table... | "width="500 | العرض والارتفاع (بكسل) |
| lang | html | "lang="ar | لغة الصفحة |
| dir | html أو أي وسم | "dir="rtl | اتجاه الكتابة |
| placeholder | input, textarea | "اكتب اسمك"=placeholder | نص تلميح داخل الحقل |
| type | input, button | "type="submit | نوع الحقل أو الزر |
| name | input, form | "name="email | اسم الحقل للخادم |
| disabled | input, button... | disabled | تعطيل العنصر (بدون قيمة) |
قبل الخصائص vs بعد الخصائص (الفرق صدمة!)
بدون خصائص (ضعيف جدًا)
<img>
<a>اضغط هنا</a>
<p>نص عادي</p>مع الخصائص (قوي 100%)
<img src="cat.jpg" alt="قطة" width="400" class="rounded-xl shadow-lg">
<a href="https://youtube.com" target="_blank" class="btn">
شاهد الفيديو
</a>
<p class="text-xl text-blue-600" title="فقرة مهمة">
نص منسق وجميل
</p>تمرين اليوم: اكتب لي هذه العناصر مع كل الخصائص الصحيحة!
1. صورة شخصية كاملة المواصفات
<img src="my-photo.jpg"
alt="صورة أحمد الشخصية"
width="300"
height="300"
class="rounded-full shadow-2xl mx-auto"
title="أحمد - مطور ويب">2. رابط يفتح في تبويب جديد مع تنسيق
<a href="https://github.com/ahmed"
target="_blank"
class="bg-gray-800 text-white px-6 py-3 rounded-lg hover:bg-gray-700">
حسابي على جيت هب
</a>مهمتك الآن:
- افتح محرر النصوص
- اكتب صفحة HTML كاملة
- استخدم 10 خصائص على الأقل من اللي فوق
- افتحها في المتصفح… واستمتع بالنتيجة!
خلاصة الدرس في ٦ نقاط ذهبية
الخصائص تُكتب في وسم الافتتاح فقط
class و id هما الأهم للـ CSS
دائمًا ضع alt للصور
القيم دائمًا بين علامتي تنصيص
يمكنك وضع أكثر من class
الخصائص تحول الوسم من عادي إلى خارق!
الدرس القادم: الجداول والنماذج في HTML
سنتعلم كيف نبني جداول بيانات ونماذج تسجيل/اتصال حقيقية!