ما هي Attributes في HTML؟ 🧩

في الدروس السابقة، تعلمنا عن العناصر الأساسية في HTML مثل الفقرات <p> والعناوين <h1>. اليوم، سنتعلم سراً صغيراً يجعل هذه العناصر أكثر ذكاءً وقوة: الـ Attributes أو الخصائص.

ببساطة، الـ Attributes هي معلومات إضافية نضعها داخل وسم الفتح للعنصر لتغيير سلوكه أو تعريفه بطريقة معينة. تخيلها كصفات تضيفها للعنصر، مثل لون السيارة أو حجمها. 🚗

شكل وتركيب الـ Attribute 📐

لكل Attribute شكل ثابت يجب اتباعه:

<element_name attribute_name="attribute_value">
    element content
</element_name>

لاحظ أن:

  1. اسم الخاصية يأتي بعد اسم العنصر مباشرة.
  2. قيمة الخاصية توضع بين علامتي اقتباس " ".
  3. يمكن أن يحتوي العنصر على أكثر من خاصية واحدة.

أهم Attributes شائعة الاستخدام ⭐

1. خاصية href للروابط 🔗

تحدد عنوان الصفحة التي سننتقل إليها عند النقر على الرابط. لا يمكن أن يعمل رابط <a> بدونها!

<!-- Creating a link to Codex Academy website -->
<a href="https://www.codexacademy.org">Visit Codex Academy</a>
<!--
   Explanation: The href attribute here holds the link that will be opened.
   The text "Visit Codex Academy" is what appears to the user to click on.
-->

2. خاصية src للصور 🖼️

تحدد مسار أو عنوان الصورة التي نريد عرضها. مثل href، لا يمكن أن تعمل صورة <img> بدونها!

<!-- إدراج صورة من موقع على الإنترنت -->
<img src="https://www.example.com/logo.png" alt="شعار الموقع">
<!--
   الشرح: الخاصية src تحدد مكان وجود ملف الصورة على الويب.
-->

3. خاصية alt للصور (هام جداً) 👁️

تقدم وصفاً نصياً للصورة. هذه الخاصية ضرورية جداً للأسباب التالية:

  • للمكفوفين الذين يستخدمون قارئات الشاشة.
  • تظهر إذا فشل تحميل الصورة.
  • مفيدة لمحركات البحث (SEO).
<img src="cat.jpg" alt="قطة بيضاء لطيفة تلعب بكرة من الصوف">
<!--
   الشرح: إذا لم تظهر الصورة 'cat.jpg'،
   سيظهر النص "قطة بيضاء لطيفة..." بدلاً منها.
-->

4. خاصيتا width و height 📏

تتحكمان في عرض وارتفاع العنصر (مثل الصور) بالبكسل.

<img src="photo.jpg" alt="صورة شخصية" width="300" height="200">
<!--
   الشرح: عرض الصورة سيكون 300 بكسل، وارتفاعها 200 بكسل.
-->

Attributes للتعريف والتصميم 🎨

1. خاصية title 🛎️

تضيف تلميحاً نصياً يظهر عندما يمرر المستخدم مؤشر الفأرة فوق العنصر.

<p title="هذا تلميح مفيد!">مرر مؤشر الفأرة فوق هذا النص.</p>
<!--
   الشرح: جرب تشغيل الكود ومرر الفأرة فوق الفقرة لترى التلميح يظهر.
-->

2. خاصية style 🖌️

تسمح لك بتطبيق تنسيقات CSS مباشرة على العنصر (سنتعلم CSS لاحقاً بالتفصيل).

<p style="color: blue; font-size: 20px;">هذه فقرة زرقاء وكبيرة.</p>
<!--
   الشرح: الخاصية style غيرت لون النص إلى الأزرق وحجم الخط إلى 20 بكسل.
-->

3. خاصية class 🏷️

تعطي العنصر اسم فئة، مما يسمح لك بتحديد مجموعة من العناصر وتصميمها أو التحكم بها عبر CSS أو JavaScript لاحقاً. يمكن أن يكون للعنصر أكثر من فئة واحدة.

<p class="important-text highlight">هذه فقرة مهمة.</p>
<!--
   الشرح: هذا العنصر ينتمي لفئتين: 'important-text' و 'highlight'.
-->

4. خاصية id 🔑

تعطي العنصر هوية فريدة داخل الصفحة. يجب أن يكون id واحداً لكل عنصر ولا يتكرر.

<h1 id="main-title">عنوان الصفحة الرئيسي</h1>
<!--
   الشرح: هذا العنصر له المعرف الفريد 'main-title'.
-->

مثال شامل يجمع أكثر من Attribute 🧪

لنرى كيف نستخدم عدة خصائص معاً في عنصر واحد:

<a href="https://www.google.com"
   title="اذهب إلى محرك بحث جوجل"
   class="external-link"
   id="google-link"
   style="color: green;">
    اضغط هنا للبحث على جوجل
</a>
<!--
   الشرح:
   - href: الرابط المستهدف.
   - title: التلميح الذي يظهر عند المرور بالفأرة.
   - class: فئة للتصميم.
   - id: معرف فريد لهذا الرابط.
   - style: تنسيق لجعل لون النص أخضر.
-->

ملخص الدرس 📝

  • الـ Attributes هي خصائص نضيفها داخل وسم فتح العنصر.
  • تكتب بالشكل: name="value".
  • بعض الخصائص ضرورية لعمل العنصر مثل href للروابط و src للصور.
  • بعض الخصائص تحسن الوصولية والتجربة مثل alt و title.
  • خصائص مثل class و id تساعدنا في التعريف على العناصر للتعامل معها لاحقاً.
  • خاصية style تتيح تغيير المظهر المباشر للعنصر.