الدرس الحادي عشر: السمات في HTML

مقدمة

في برمجة صفحات الويب، تعتبر السمات (Attributes) جزءًا مهمًا وأساسيًا من عناصر HTML. السمات تُستخدم لتحديد خصائص إضافية للعناصر والتحكم في سلوكها وتصميمها بطريقة معينة. بعبارة أخرى، السمات تسمح لك بتخصيص العناصر الفردية بناءً على الاحتياجات الخاصة لكل عنصر.

في هذا الدرس، سنتعمق في مفهوم السمات في HTML ونشرح كيفية استخدامها لتحديد معلومات إضافية للعناصر المختلفة. سنستعرض أيضًا بعض السمات الشائعة مثل id و class و style و title. هذه السمات تُستخدم لتحديد هوية العنصر، تطبيق الأنماط المخصصة، وتنظيم المحتوى بشكل أكثر فعالية. كما سنوضح أمثلة عملية لتوضيح كيفية استخدام هذه السمات بشكل مناسب في صفحات الويب.

ما هي السمات (Attributes) في HTML؟

السمات هي خصائص تضاف إلى عناصر HTML لتقديم معلومات إضافية أو تخصيص سلوك العنصر. تتكون السمات من اسم السمة وقيمة، ويتم إضافتها داخل الوسم الافتتاحي للعنصر.

التركيب الأساسي للسمات

كل سمة في HTML تتبع تركيبًا موحدًا، ويجب أن تكون مكتوبة داخل الوسم الافتتاحي لأي عنصر HTML:

<element attribute="value"> المحتوى </element>

• element: هو العنصر الذي ترغب في إضافة السمة إليه.
• attribute: اسم السمة.
• value: قيمة السمة، وهي التي تحدد الخاصية التي تريد تطبيقها على العنصر.

مثال:

<a href="https://www.example.com" title="رابط إلى موقع مثال">اضغط هنا</a>

في هذا المثال:

• href: تحدد عنوان URL للصفحة التي سيرتبط بها الرابط.
• title: تضيف تلميحًا يظهر عند تمرير الفأرة فوق الرابط.

السمات الشائعة في HTML

هناك العديد من السمات التي يمكن استخدامها في HTML، وكل منها يوفر نوعًا من التخصيص أو الوظيفة للعناصر التي تطبق عليها. دعونا نركز على السمات الشائعة التي يتم استخدامها بكثرة في تطوير الويب.

1. سمة id

سمة id تُستخدم لتعريف عنصر HTML بمعرف فريد. هذا المعرف يجب أن يكون مميزًا ولا يتكرر داخل نفس الصفحة. السبب وراء ذلك هو أن المعرف id يمكن استخدامه للإشارة إلى عنصر محدد في الصفحة باستخدام CSS أو JavaScript.

مثال:

<p id="intro">مرحبًا بكم في صفحتنا الرئيسية.</p>

في هذا المثال، تم إعطاء عنصر الفقرة معرفًا فريدًا وهو “intro”. يمكن استخدام هذا المعرف لاحقًا لتطبيق تنسيقات CSS أو استدعاء العنصر باستخدام JavaScript.

استخدام id مع CSS

#intro {
  color: blue;
  font-size: 20px;
}

في هذا المثال، تم استخدام id لتغيير لون وحجم النص الخاص بالفقرة التي تحمل المعرف “intro”.

استخدام id مع JavaScript

document.getElementById("intro").innerHTML = "تم تحديث النص!";

هنا، يُستخدم المعرف id لتحديد الفقرة وتغيير محتواها باستخدام JavaScript.

2. سمة class

سمة class تُستخدم لتطبيق نمط مشترك على مجموعة من العناصر. يمكن أن تحمل العناصر المختلفة نفس الفئة، مما يتيح لك التحكم في تنسيقها أو سلوكها بشكل جماعي باستخدام CSS أو JavaScript.

مثال:

<p class="highlight">هذا النص مظلل</p>
<p class="highlight">وهذا النص مظلل أيضًا</p>

في هذا المثال، تم استخدام الفئة class لتحديد الفقرات التي نريد تطبيق نمط مشترك عليها. يمكننا تطبيق التنسيق المحدد على جميع الفقرات التي تحمل نفس الفئة.

استخدام class مع CSS

.highlight {
  background-color: yellow;
  font-weight: bold;
}

النتيجة ستكون أن كل الفقرات التي تحتوي على الفئة highlight ستظهر بخلفية صفراء ونص عريض.

استخدام class مع JavaScript

document.getElementsByClassName("highlight")[0].style.color = "red";

هذا المثال يوضح كيفية استخدام الفئة class لتحديد مجموعة من العناصر وتعديل أحدها باستخدام JavaScript. في هذه الحالة، سيتم تغيير لون النص الخاص بأول فقرة تحمل الفئة highlight إلى اللون الأحمر.

3. سمة style

سمة style تُستخدم لتطبيق أنماط CSS مباشرةً على عنصر HTML. بدلاً من استخدام ورقة أنماط خارجية أو داخلية، يمكنك إدراج الأنماط داخل العنصر باستخدام سمة style.

مثال:

<p style="color: red; font-size: 18px;">هذا النص باللون الأحمر وحجمه 18px.</p>

في هذا المثال، تم تطبيق الأنماط مباشرةً على الفقرة لتحديد لون النص وحجمه. ومع ذلك، يُفضل دائمًا استخدام CSS خارجي أو داخلي بدلاً من الاعتماد على سمة style لتجنب تعقيد الكود.

4. سمة title

سمة title تُستخدم لإضافة تلميحات أو معلومات إضافية تظهر عند تمرير المستخدم الفأرة فوق العنصر. يمكن أن تكون هذه السمة مفيدة في توفير معلومات إضافية دون الحاجة إلى إظهارها في النص مباشرة.

مثال:

<img src="image.jpg" alt="صورة" title="هذه صورة توضيحية">

عند تمرير الفأرة فوق الصورة في المثال السابق، سيظهر التلميح “هذه صورة توضيحية” كفقاعة تلميحية.

سمات إضافية في HTML

سمة alt

سمة alt تُستخدم مع عنصر <img> لتوفير نص بديل يظهر في حالة عدم قدرة المتصفح على تحميل الصورة. هذه السمة مهمة جدًا لتحسين تجربة المستخدم ولضمان وصول الأشخاص الذين يستخدمون برامج قراءة الشاشة إلى المحتوى.

مثال:

<img src="image.jpg" alt="وصف للصورة">

سمة href

سمة href تُستخدم في عنصر <a> لتحديد الوجهة التي سيتم توجيه المستخدم إليها عند النقر على الرابط.

مثال:

<a href="https://www.example.com">زيارة الموقع</a>

سمة target

سمة target تُستخدم لتحديد كيفية فتح الرابط. على سبيل المثال، يمكن فتح الرابط في نفس النافذة أو في نافذة جديدة.

مثال:

<a href="https://www.example.com" target="_blank">افتح في نافذة جديدة</a>

الفرق بين سمات id و class

غالبًا ما يحدث بعض الارتباك بين id و class، إلا أن الاختلاف بينهما بسيط:

• id: هو معرف فريد يجب ألا يتكرر في الصفحة. يُستخدم لتعريف عنصر واحد بشكل محدد.
• class: يمكن تكراره واستخدامه لتجميع عدة عناصر تشترك في نفس الأنماط أو السلوكيات.

الخاتمة

السمات في HTML تُعد أداة قوية لإضافة تفاصيل إضافية للعناصر وتحسين تنظيم الصفحة. سواء كنت تستخدم سمة id لتحديد عنصر فريد أو سمة class لتطبيق نمط مشترك على مجموعة من العناصر، فإن السمات تُعد جزءًا أساسيًا من هيكلة صفحات الويب.