← القائمة
LESSON 03 · HTML ATTRIBUTES

سمات HTML
مفاتيح التحكم في كل عنصر

الـ Attributes هي الإعدادات التي تُضاف داخل الـ Tag لتغيير سلوكه وشكله وهويته. تعلّمها وستتحكم في كل شيء.

المفهوم الأساسي

🔑 ما هي السمة (Attribute)؟

السمة (Attribute) هي معلومة إضافية تُضاف داخل الـ tag الافتتاحي لتعديل سلوكه. تكتب دائماً كـ اسم="قيمة".

anatomy-of-attribute.html
1
<!-- ┌── tag name ┌── attribute name ┌── attribute value -->
تشريح السمة
2
<a href = "https://google.com" >جوجل</a>
اسم السمة = قيمة السمة بين ""
3
 
4
<!-- يمكن وضع أكثر من سمة في نفس الـ tag -->
سمات متعددة
5
<img src="photo.jpg" alt="صورتي" width="300" height="200">
4 سمات في نفس الوقت — الترتيب لا يهم
القواعد الأساسية للسمات:
✅ تُكتب دائماً في tag الافتتاح — ليس في tag الإغلاق
✅ القيمة دائماً بين علامتي تنصيص " " (أو ' ')
✅ يمكن وضع أكثر من سمة في نفس الـ tag مفصولة بمسافات
✅ بعض السمات لا تحتاج قيمة — تُكتب وحدها (مثل required و disabled)
القسم الأول

🌐 السمات العامة (Global Attributes)

هذه السمات تعمل مع أي عنصر HTML في العالم — سواء كان div أو p أو h1 أو أي شيء آخر.

global-attributes.html
1
<!-- 1. id — المعرّف الفريد -->
id يجب أن يكون فريداً في الصفحة
2
<div id="main-header">محتوى</div>
id = fingerprint العنصر — لا يتكرر أبداً
3
 
4
<!-- 2. class — الفئة (يمكن تكرارها) -->
class للتنسيق بـ CSS وJS
5
<p class="highlight">فقرة مميزة</p>
كل عناصر .highlight تأخذ نفس التنسيق
6
<p class="highlight">فقرة أخرى مميزة</p>
نفس الـ class — مسموح به ومطلوب
7
<p class="highlight bold warning">...</p>
أكثر من class على نفس العنصر — مفصولة بمسافة
8
 
9
<!-- 3. style — CSS مباشر (Inline) -->
للاختبار السريع فقط — ليس الأفضل
10
<p style="color: red; font-size: 20px;">نص أحمر</p>
كل خاصية CSS تنتهي بـ ; داخل الـ style
11
 
12
<!-- 4. title — نص Tooltip عند التحويم -->
يظهر عند وقوف الماوس
13
<button title="انقر هنا للحفظ">💾</button>
رسالة تظهر عند hover على الزر
14
 
15
<!-- 5. hidden — إخفاء العنصر -->
يخفي العنصر تماماً من الصفحة
16
<p hidden>لن يظهر هذا النص</p>
hidden = لا قيمة لها — مجرد وجودها يخفي العنصر
17
 
18
<!-- 6. data-* — بيانات مخصصة لـ JS -->
لتخزين بيانات مخصصة
19
<div data-user-id="42" data-role="admin">...</div>
data-* = أي اسم تختاره بعد data-
id مقابل class: استخدم id للعناصر الفريدة (الرأس، القسم الرئيسي، النموذج)، واستخدم class للعناصر المتكررة (البطاقات، الأزرار، الفقرات المميزة).
القسم الثاني

🔗 سمات الروابط <a> — بالتفصيل الكامل

link-attributes.html
1
<!-- href: وجهة الرابط — أهم سمة -->
href = hypertext reference
2
<a href="https://example.com">موقع خارجي</a>
https:// للروابط الخارجية الكاملة
3
<a href="contact.html">تواصل معي</a>
بدون https = رابط داخلي نسبي
4
<a href="#section2">القسم الثاني</a>
# = قفز لعنصر بهذا الـ id في نفس الصفحة
5
<a href="#">رابط وهمي</a>
يرجع للأعلى — للاختبار فقط
6
 
7
<!-- target: كيف يُفتح الرابط -->
يتحكم في طريقة الفتح
8
<a href="..." target="_blank">في تبويب جديد</a>
_blank = يفتح في تبويب جديد منفصل
9
<a href="..." target="_self">في نفس التبويب</a>
_self = الافتراضي — نفس التبويب
10
 
11
<!-- rel: العلاقة مع الرابط المقصود -->
مهم للأمان والـ SEO
12
<a href="..." target="_blank" rel="noopener noreferrer">...</a>
noopener = حماية أمنية ضرورية مع _blank
13
 
14
<!-- download: تحميل الملف بدلاً من فتحه -->
يجبر المتصفح على التحميل
15
<a href="resume.pdf" download="سيرتي-الذاتية.pdf">تحميل السيرة</a>
download + قيمة = اسم الملف عند التحميل
⚠️ أمان مهم: دائماً أضف rel="noopener noreferrer" مع target="_blank". بدونها يمكن للصفحة المفتوحة التحكم في صفحتك الأصلية — وهذا ثغرة أمنية معروفة.
القسم الثالث

🖼️ سمات الصور <img> — سطراً سطراً

image-attributes.html
1
<!-- صورة كاملة الخصائص -->
مثال شامل
2
<img
بداية tag الصورة
3
src="images/team-photo.jpg"
src = source. مسار الصورة — إلزامي
4
alt="صورة فريق PhineX Academy"
alt = النص البديل — إلزامي لـ SEO والإتاحة
5
width="800"
العرض بالبكسل — يمنع القفز عند التحميل
6
height="450"
الارتفاع — المتصفح يحجز المساحة مسبقاً
7
loading="lazy"
lazy = لا تحمّل حتى تقترب الصورة من الشاشة
8
title="فريقنا المبدع">
tooltip يظهر عند التحويم
9
 
10
<!-- srcset: صور مختلفة لأحجام شاشات مختلفة -->
متقدم: للاستجابة
11
<img
12
src="photo-800.jpg"
الصورة الافتراضية للمتصفحات القديمة
13
srcset="photo-400.jpg 400w, photo-800.jpg 800w"
المتصفح يختار المناسب حسب حجم الشاشة
14
alt="صورة متجاوبة">
alt إلزامي دائماً
لماذا تحديد width و height مهم؟
عندما لا تحدد الأبعاد، يقوم المتصفح بتحميل الصفحة ثم يُعيد حساب التخطيط عند تحميل الصورة — مما يجعل الصفحة "تقفز". تحديد الأبعاد يجعل المتصفح يحجز المساحة مسبقاً ويمنع هذا القفز (يُحسّن مقياس CLS في Core Web Vitals).
القسم الرابع

📝 سمات حقول الإدخال <input>

هذه السمات تتحكم في كيفية عمل حقول النموذج وما يُسمح بإدخاله.

input-attributes.html
1
<!-- type: نوع الحقل — الأهم -->
type يحدد ماذا يقبل الحقل
2
<input type="text"> <!-- نص عادي -->
الافتراضي — يقبل أي نص
3
<input type="email"> <!-- بريد إلكتروني -->
يتحقق من صيغة @ تلقائياً
4
<input type="password"> <!-- كلمة مرور -->
يخفي الكتابة بنقاط ●●●
5
<input type="number"> <!-- أرقام فقط -->
أزرار +/- ولا يقبل حروفاً
6
<input type="date"> <!-- منتقي التاريخ -->
يعرض calendar للاختيار
7
<input type="range"> <!-- شريط منزلق -->
Slider — مثالي للحجم والصوت
8
<input type="checkbox"> <!-- مربع تحديد -->
true/false — يمكن اختيار أكثر من واحد
9
<input type="radio"> <!-- زر اختيار وحيد -->
اختيار واحد من مجموعة
10
<input type="file"> <!-- رفع ملف -->
يفتح مستعرض الملفات
11
<input type="color"> <!-- منتقي اللون -->
Color Picker بصري
12
 
13
<!-- سمات التحكم في السلوك -->
سمات إضافية مهمة
14
<input type="text"
حقل نصي متكامل
15
name="username"
name = مفتاح البيانات عند الإرسال للسيرفر
16
id="username"
لربط label بالحقل
17
placeholder="أدخل اسمك هنا..."
نص رمادي يختفي عند الكتابة
18
value="أحمد"
قيمة مسبقة تظهر في الحقل
19
required
إجباري — لا يرسل النموذج بدون ملئه
20
disabled
يعطّل الحقل — لا يمكن التفاعل معه
21
readonly
للقراءة فقط — لا يمكن التعديل
22
maxlength="50"
أقصى عدد أحرف مسموح به
23
minlength="3"
أقل عدد أحرف مطلوب
24
autocomplete="name">
يساعد المتصفح في الإكمال التلقائي
✅ نصيحة: دائماً استخدم <label> مع كل input. اربط الـ label بالـ input عن طريق for="id-الحقل". هذا يجعل النقر على النص يُفعّل الحقل — وهو أفضل لتجربة المستخدم وإمكانية الوصول.

🛠️ جرب الحقول المختلفة:

اكتب هنا:
النتيجة:
القسم الخامس

🗄️ سمات data-* المخصصة

تُتيح لك تخزين بيانات مخصصة في HTML لاستخدامها لاحقاً في JavaScript — بدون التأثير على الشكل.

data-attributes.html
1
<!-- بطاقة منتج مع بيانات مخصصة -->
2
<div class="product-card"
بطاقة منتج
3
data-product-id="PRD-001"
data-* = أضف أي اسم تريده بعد "data-"
4
data-price="299"
تخزين السعر بدون إظهاره مباشرة
5
data-category="electronics">
أي بيانات تريدها
6
<h3>سماعات لاسلكية</h3>
المحتوى الظاهر
7
<button onclick="addToCart(this)">أضف للسلة</button>
this = مرر العنصر نفسه للدالة
8
</div>
9
 
10
<!-- في JavaScript نقرأ data-* هكذا -->
JavaScript يقرأها بسهولة
11
<script>
12
function addToCart(btn) {
الدالة تستقبل العنصر
13
const card = btn.parentElement;
ارتقِ للـ div الأب
14
const id = card.dataset.productId;
dataset.productId يقرأ data-product-id
15
const price = card.dataset.price;
data-price → dataset.price
16
alert(`أضفت ${id} بسعر ${price} ريال`);
17
}
18
</script>
قاعدة تحويل أسماء data-*:
في HTML تكتب: data-product-id (بالشرطة)
في JavaScript تقرأ: dataset.productId (بـ camelCase)
المتصفح يحوّل تلقائياً: data-my-custom-value → dataset.myCustomValue

🧠 اختبار السمات

5 أسئلة تغطي جميع أنواع السمات

س1: ما الفرق بين id و class؟

س2: ما سمة الـ input التي تجعله إجبارياً؟

س3: لماذا يجب إضافة rel="noopener" مع target="_blank"؟

س4: أي نوع من الـ input يُظهر شريطاً منزلقاً (Slider)؟

س5: كيف تقرأ data-user-id في JavaScript؟