ما هي الـ Attributes؟ أو السمات
في HTML، العناصر (Elements) ليست مجرد وحدات بناء بسيطة.
يمكن تخصيصها بشكل أكبر باستخدام ما يُعرف بالـ “Attributes” أو السمات.
السمات تُضاف إلى العناصر لتقديم معلومات إضافية أو لتعديل سلوكها.
في هذه المقالة، سنتناول مفهوم السمات في HTML، كيفية استخدامها، وبعض السمات الشائعة.
ما هي الـ Attributes؟ أو السمات
الـ Attributes هي خصائص تُضاف إلى علامات HTML لتحديد معلومات إضافية حول العنصر. تتكون السمة من جزئين:
1. اسم السمة (Attribute Name): يحدد نوع السمة.
2. القيمة (Attribute Value): تحدد قيمة السمة.
تُكتب السمات داخل العلامة الافتتاحية (Opening Tag) للعنصر وتُفصل عن اسم العنصر بمسافة.
أمثلة على سمات HTML
إليك بعض السمات الأساسية التي تُستخدم بشكل شائع في HTML:
1. سمة `href`
تُستخدم مع عنصر `<a>` لإنشاء رابط إلى صفحة أخرى.
html <a href="https://example.com">Visit Example</a>
– href: تحدد الرابط الذي سيتم الانتقال إليه عند النقر على النص “Visit Example”.
2. سمة `src`
تُستخدم مع عنصر `<img>` لتحديد مصدر الصورة التي سيتم عرضها.
<img src="image.jpg" alt="An example image">
– src: تحدد موقع الصورة.
– alt: توفر نصًا بديلاً يتم عرضه إذا لم تتمكن الصورة من التحميل.
3. سمة `style`
تُستخدم لإضافة تنسيق (CSS) مباشر إلى العنصر.
html <p style="color: red; font-size: 20px;">This is a styled paragraph.</p>
-style: تحدد تنسيق النص داخل العنصر.
4. سمة `title`
تُستخدم لإضافة نص تلميحي يظهر عند مرور المؤشر فوق العنصر.
```html <p title="This is a tooltip">Hover over this text.</p> ```
– **title**: تعرض نصًا عند وضع المؤشر على العنصر.
5. سمة `class`
تُستخدم لتحديد فئة (CSS Class) يمكن استخدامها لتطبيق تنسيقات CSS على مجموعة من العناصر.
<p class="highlight">This text is highlighted.</p>
– class: تُستخدم لتطبيق تنسيقات محددة على العنصر.
6. سمة `id`
تُستخدم لتحديد معرّف فريد للعنصر، والذي يمكن استخدامه للتحكم فيه باستخدام CSS أو JavaScript.
<p id="unique-paragraph">This paragraph has a unique ID.</p>
– id: معرف فريد يُستخدم لتحديد العنصر.
كيفية استخدام السمات
يمكنك إضافة سمات إلى أي عنصر HTML من خلال كتابتها داخل العلامة الافتتاحية. يمكنك أيضًا استخدام عدة سمات في نفس العنصر.
<a href="https://example.com" target="_blank" title="Visit Example">Visit Example</a>
في هذا المثال:
– href: تحدد الرابط.
– target: تحدد مكان فتح الرابط (في نافذة جديدة).
– title: تعرض نص تلميحي عند المرور فوق الرابط.
سمات عامة
بعض السمات يمكن إضافتها إلى أي عنصر في HTML، مثل:
– class
– id
– style
– title
السمات في HTML تضيف المزيد من المرونة والتحكم إلى العناصر، مما يسمح لك بتخصيص صفحة الويب وفقًا للاحتياجات الخاصة بك.
من خلال استخدام السمات، يمكنك تحديد كيفية تفاعل العناصر مع المستخدمين ومعالجة البيانات بشكل أكثر فعالية.
في المقالات القادمة، سنتعمق في استخدام السمات مع CSS وJavaScript لتعزيز تجربة المستخدم.
مصادر مهم تذاكر منها :
