الخصائص Attributes في HTML بطريقة مبسطة

في الدروس السابقة تعلمنا أهم الوسوم الأساسية المستخدمة في لغة HTML لبناء صفحات المواقع الإلكترونية ، والآن سنفهم كيفية التحكم بهذه الوسوم ونجعلها تعمل كما نريد وذلك باستخدام الخصائص attributes التي لابد من استخدامها لجعل مظهر وتنسيق صفحة الموقع الالكتروني يظهر كما نريد.

في الدرس السابق تعلمنا ما هو الوسم (Tag)، والآن سنتعرف على شيء لا يقل أهمية وهو الخصائص (Attributes).

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

فكر في الأمر بهذا الشكل:

🚗 الوسم (Tag) هو السيارة نفسها.
⚙️ أما الخصائص (Attributes) فهي كل ما يجعل السيارة تعمل وتختلف عن غيرها، مثل:

🔑 المفتاح لتشغيل السيارة.
⛽ البنزين الذي يجعلها تتحرك.
🎨 لون السيارة.
⚡ السرعة القصوى.
📍 لوحة الأرقام.

السيارة بدون هذه الأشياء قد تكون موجودة، لكنها لن تعمل بالشكل المطلوب. وبنفس الفكرة، الوسم في HTML يمكن أن يوجد بمفرده، لكن الخصائص تمنحه قدرات إضافية وتجعله أكثر فائدة.

بدون خصائص (Attributes)

العنصر موجود، لكن إمكانياته محدودة.

مع الخصائص (Attributes)

يصبح العنصر أكثر ذكاءً ويمكنه تنفيذ وظائف مختلفة حسب الخصائص التي تضيفها.

ستلاحظ أثناء تعلم HTML أن معظم الوسوم تستخدم خصائص، مثل href للروابط، وsrc للصور، وclass لإضافة التنسيقات. لذلك، فهم الخصائص يعتبر خطوة أساسية قبل الانتقال إلى CSS وJavaScript.

ما هي الخصائص (Attributes)؟

الخاصية (Attribute) هي معلومة إضافية تُكتب داخل وسم الافتتاح، وتُستخدم لإضافة معلومات أو إعطاء العنصر وظائف وإعدادات إضافية. وتتكون الخاصية غالبًا من ثلاثة أجزاء:


    <اسم_الوسم
    اسم_الخاصية="القيمة"
    >المحتوى</اسم_الوسم>

🔑

اسم الخاصية

وهو اسم يحدد وظيفة الخاصية.

أمثلة: href، src، class، id

علامة يساوي

تربط بين اسم الخاصية وقيمتها.

لا تنسَ كتابتها، وإلا فلن تعمل الخاصية بشكل صحيح.

قيمة الخاصية

وهي المعلومات التي تحتاجها الخاصية.

يُنصح دائمًا بكتابتها بين علامتي تنصيص " ".

💡 قاعدة سهلة للحفظ

كل خاصية تُكتب دائمًا بهذا الترتيب:

اسم الخاصية ← = ← "القيمة"

href="https://example.com"

📌 ملاحظة مهمة

ليست جميع الخصائص متشابهة، فكل خاصية لها وظيفة معينة. فمثلًا: href يحدد الرابط، وsrc يحدد مصدر الصورة، وclass يُستخدم لتطبيق تنسيقات CSS، وid يمنح العنصر اسمًا مميزًا يمكن الوصول إليه بسهولة. سنتعرف على أشهر هذه الخصائص بالتفصيل في الدروس القادمة.

ما فائدة الخصائص؟

الخصائص هي التي تمنح عناصر HTML إمكانيات إضافية. فمن خلالها نستطيع إنشاء الروابط، وعرض الصور، وإضافة المعرفات (id) والفئات (class)، والتحكم في سلوك العناصر وشكلها. لذلك ستلاحظ أثناء تعلم HTML أن معظم الوسوم تستخدم خاصية واحدة أو أكثر، لأنها تجعل العنصر يؤدي وظيفته بالشكل الصحيح.

أهم 15 خصيصة في HTML (ستحتاجهم في كل صفحة الكترونية)

الخصيصة	لأي وسم؟	مثال	وظيفتها باختصار
class	كل الوسوم	`"class="btn red`	للتنسيق بـ CSS (أهم خصيصة!)
id	كل الوسوم (فريد)	`"id="header`	معرّف فريد للجافاسكربت و CSS
src	img, video, audio, script	`"src="photo.jpg`	مكان الملف
alt	img, area	`"قطة جميلة"=alt`	نص بديل + سيو + ذوي الإعاقة
href	a, link	`href="https://google.com"=href`	الرابط اللي يروح له
target	a, form	`"target="_blank`	_blank = تبويب جديد
style	كل الوسوم	`";style="color:red`	تنسيق مباشر (للتجربة)
title	معظم الوسوم	`"تلميح"=title`	نص يظهر عند التمرير
width & height	img, video, table...	`"width="500`	العرض والارتفاع (بكسل)
lang	html	`"lang="ar`	لغة الصفحة
dir	html أو أي وسم	`"dir="rtl`	اتجاه الكتابة
placeholder	input, textarea	`"اكتب اسمك"=placeholder`	نص تلميح داخل الحقل
type	input, button	`"type="submit`	نوع الحقل أو الزر
name	input, form	`"name="email`	اسم الحقل للخادم
disabled	input, button...	`disabled`	تعطيل العنصر (بدون قيمة)

قبل استخدام الخصائص vs بعد استخدام الخصائص

بدون خصائص (ضعيف جدًا)

انظر الى المثال التالي لم نستخدم الخصائص في كتابة أكواد ال html لذلك الصورة لن تكون موجودة لاننا لم نسخدم الخاصية التي تخبرنا بمكان الصورة وأيضا الرابط لن ينقلنا الى اي مكان لاننا لم نستخدم الخاصية التي تخبرنا اين نضهب عند الضغط على الرابط . ايضا نص القطعة غير منسق لعدم وجود خاصية تنسيق الخط

<img>
<a>اضغط هنا</a>
<p>نص عادي</p>

مع الخصائص (قوي 100%)

بينما بالمثال التالي تم استخدام الخصائص لذلك ستظهر الصفحة بشكل واضح وجميل ومرتب ، تم استخدام الخصائص التالية:

خاصية src لعرض مكان الصورة ( موقع تخزين الصورة حتى يتمكن المتصفحة من جلبها وعرضها بالمتصفح)
خاصية alt وهي التي تعرض رسالة نصية عن الصورة المستخدمة وذلك في حال تعذر الوصول للصورة اما لحذفها او لأي مشكلة أخرى.
خاصية href ,وهي تستخدم مع الروابط ونذكر بها عنوان الصفحة المطلوب الانتقال اليها
خاصية target وهي التي نستخدمها لتحديد اذا كان الانتقال للصفحة الاخرى بنفس الصفحة الحالية او فتح تبويب جديد بالمتصفح.
خاصية class وهي التي نستخدمها لتنسيق الصفحة . سيتم شرحها بالتفصيل في دورة CSS

<img src="cat.jpg" alt="قطة"
     width="400" class="myclass">

<a href="https://youtube.com" target="_blank" class="btn">
  شاهد الفيديو
</a>

<p class="myclass2" title="فقرة مهمة">
  نص منسق وجميل
</p>

تمرين اليوم: اكتب لي هذه العناصر مع كل الخصائص الصحيحة!

1. صورة شخصية كاملة المواصفات

 <img src="my-photo.jpg"
alt="صورة أحمد الشخصية"
width="300"
height="300"
class="myclass"
title="أحمد - مطور ويب">

2. رابط يفتح في تبويب جديد مع تنسيق

<a href="https://github.com/ahmed"
target="_blank"
class="myclass">
  حسابي على جيت هب
</a>

مهمتك الآن:

افتح محرر النصوص
اكتب صفحة HTML كاملة
استخدم 10 خصائص على الأقل من اللي فوق
افتحها في المتصفح… واستمتع بالنتيجة!

خلاصة الدرس في ٦ نقاط ذهبية

الخصائص تُكتب في وسم الافتتاح فقط

class و id هما الأهم للـ CSS

دائمًا ضع alt للصور

القيم دائمًا بين علامتي تنصيص

يمكنك وضع أكثر من class

الخصائص تحول الوسم من عادي إلى خارق!

الدرس القادم: الجداول والنماذج في HTML

سنتعلم كيف نبني جداول بيانات ونماذج تسجيل/اتصال حقيقية!