شرح HTML Attributes للمبتدئين | استخدام السمات داخل الوسوم
ازيكم يا أصحابي عاملين إيه؟ معاكم م صموئيل غالي، وفي موضوع النهاردة هنتعرف على السمات أو الـ Attributes في لغة HTML، وهنشوف مع بعض إزاي نستخدمها بشكل صحيح، وده ضمن كورس البرمجة العملي للمبتدئين.
يعني إيه Attribute في HTML؟
السِمة (Attribute) في HTML هي معلومة إضافية بنكتبها داخل الوسم علشان نحدد خصائص أو سلوك معين للعنصر. مش كل وسم بيشتغل لوحده، أحيانًا لازم نحط له سِمات علشان يشتغل صح.
مثال على رابط باستخدام سِمة href:
<a href="https://w3schools.com">ادخل على الموقع</a>
- <a> = وسم الرابط
- href = السِمة اللي بتحدد عنوان اللينك
- النص = اللي بيظهر للمستخدم
مثال على صورة باستخدام السمات:
<img src="photo.jpg" alt="وصف الصورة">
- src = بيحدد مصدر الصورة
- alt = وصف بديل لو الصورة ما ظهرتش
شكل السِمة بيكون كده:
اسم_السِمة="القيمة"
بنكتبها دايمًا جوه الوسم الافتتاحي، وبين اسم الوسم والسِمة لازم في مسافة.
أشهر السمات اللي لازم تعرفها:
- href – لتحديد رابط التنقل
- src – لتحديد مصدر الصورة أو الفيديو
- alt – لوصف الصورة البديل
- title – لعرض وصف عند تمرير الماوس
- style – لتحديد تنسيق داخلي مباشر
- width / height – لتحديد أبعاد الصور أو الفيديو
مثال مركّب:
<img src="logo.png" alt="شعار الموقع" width="200" height="100">
في المثال ده بنستخدم 4 سمات مرة واحدة داخل نفس الوسم: مصدر، وصف، عرض، طول.
نصائح مهمة:
- اكتب أسماء السمات بالإنجليزي بدقة
- حط علامات تنصيص حول القيمة:
"القيمة" - السِمات دايمًا بتكتب داخل الوسم الافتتاحي فقط
- جرب الكود بنفسك علشان تفهم تأثير كل سِمة
الخاتمة
وبكده نكون اتعرفنا على مفهوم السمات أو الـ HTML Attributes، وشفنا إزاي نستخدمها مع الوسوم المختلفة.
حاول تجرب كل سِمة بنفسك، وشوف تأثيرها في المتصفح.
لو استفدت من الشرح، متنساش تعمل لايك وتشترك في القناة، وتفعل الجرس علشان توصلك باقي دروس الكورس أول بأول.
كان معاكم م صموئيل غالي، أشوفكم في الدرس الجاي ✌️