HTML Attributes | In Arabic
HTML Attributes هى سمات (أو خصائص) تٌستخدم لإعطاء المزيد من المعلومات والتفاصيل حول محتوى كل عنصر من عناصر لغة HTML. وفى هذا الفصل هنتعرف على هذه السمات بالتفصيل، وكيفية إستخدامها مع العناصر.
HTML Attributes
أولًا. ما هي السمات فى لغة HTML؟
السمات (Attributes) هى خصائص إضافية تُستخدم داخل وسم الفتح للتحكم في سلوك العنصر.
تقوم السمة إما بتعديل الوظيفة الافتراضية لنوع عنصر أو توفر وظائف لأنواع عناصر معينة غير قادرة على العمل بشكل صحيح بدونها.
يمكن أن تحتوي جميع عناصر HTML على سمات.
لتفهم أكثر! انظر إلى المثال التوضيحى التالى:

اذا لاحظت فى المثال السابق ستجد أن:
- تم إنشاء سمة بإسم “class” فى فتحة وسم <h1>، وهذه السمة غالبًا ما تٌستخدم لتنسيق العناصر عن طريق الـ CSS.
- تم تمرير قيمة للسمة وهى “main-head“.
إذن نستنتج أن:
- يتم وضع السمات دائمًا في فتحة وسم العُنصر.
- تتكون كل سمة من شقين وهما: [ “attribute_name = “value ].
- يجب دائمًا وضع قيمة السمة بين علامتين تنصيص.
بعض السمات مطلوبة لعناصر معينة، على سبيل المثال ، يجب أن يحتوى وسم <img> على سمة src و alt، ووسم الرابط التشعبي <a> يجب أن يحتوى على سمة href و target، وهكذا.
ثانيًا. أمثلة على السمات فى لغة HTML
فيما يلى أمثلة على بعض السمات الموجوده فى لغة HTML:
1. السمة class
تحدد السمة class اسم فئة واحد أو أكثر للعنصر. هذه السمة غالبًا ما تٌستخدم لتنسيق العناصر عن طريق الـ CSS. ومع ذلك ، يمكن أيضًا استخدامها بواسطة JavaScript لإجراء تغييرات على عناصر HTML بـ class محدد. كالتالى:
<p class="paragraph">Hello World!</p>
Hello World!
2. السمة id
تحدد السمة id معرفًا فريدًا لعنصر HTML. يجب أن تكون قيمة سمة الـ id فريدة داخل مستند HTML. تُستخدم سمة id للإشارة إلى style معين في ملف CSS. يتم استخدامه أيضًا بواسطة JavaScript للوصول إلى العنصر ومعالجته بالمعرف المحدد. كالتالى
<p id="paragraph">Hello World!</p>
Hello World!
ما الفرق بين السمة class و id؟
الاختلاف الوحيد بينهما هو أن الـ “id” فريد في الصفحة ويمكن أن ينطبق فقط على عنصر واحد فقط، بينما يمكن أن ينطبق الـ “class” على أكثر من عنصر.
3. السمة href
تحدد سمة الـ href عنوان URL للصفحة التي ينتقل إليها الرابط. ولإنشاء رابط فى HTML نستخدم وسم <a>، كالتالى:
<a href="example.html">Example Link</a>
4. السمة src و alt
لتضمين صور فى صفحات الويب نستخدم وسم <img>، وهناك سمتين أساسيتين يتم إستخدامهم مع هذا الوسم:
- src (إجبارى) لتحديد مسار الصورة.
- alt نصًا بديلاً لإستخدامه ، إذا تعذر تحميل الصورة.
مثال للتوضيح
<img src="our_logo.jpg" alt="Albashmoparmeg logo">

لتحديد عرض وإرتفاع الصورة يمكنك إستخدام سمة width (لتحديد العرض) و height (لتحديد الإرتفاع)، كالتالى:
<img src="our_logo.jpg" alt="Albashmoparmeg logo" height="200" width="200">

يتم تحديد قيمة العرض والارتفاع بالبكسل pixel افتراضيًا.
5. السمة style
يتم استخدام سمة الـ style لتحديد تصميم عناصر الـ HTML ، مثل اللون وحجم الخط والخلفية وما إلى ذلك. كالتالى:
<h1 style="color: blue">HTML Tutorial</h1>
HTML Tutorial
هناك سمات أخرى كثيرة في لغة HTML سوف تستخدمها مع العناصر! للتعرف على جميع هذه السمات ستجدها فى هذا المرجع: HTML Attribute Reference.
ملاحظات هامة
1. لا يتطلب معيار إصدار HTML5 علامات التنصيص حول قيم السمات؛ على سبيل المثال يمكنك كتابة سمة الـ class بدون علامات التنصيص، كالتالى:
<p class=paragraph>Hello World!</p>
توصي مُنظمة الـ W3C بعلامتين التنصيص، ومن الأفضل استخدام علامات التنصيص لأن حذفهما يمكن أن ينتج عنها أخطاء.
2. في بعض الحالات ، عندما تحتوي قيمة السمة نفسها على علامات تنصيص مزدوجة ، من الضروري استخدام علامات الاقتباس المفردة، كالتالى:
<img src="our_logo.jpg" alt="Albashmoparmeg logo" title="Our website 'Albashmoparmeg' logo">

توفر السمة title معلومات إضافية للصوره. سيتم إظهار النص الموجود بداخلها عند تحريك الماوس فوق الصورة.
قَيم نفسك – Mini quiz
قُم بإجراء هذا الإختبار القصير على درس “HTML Attributes” لمعرفة مدى فهمك وإستيعابك للمعلومات السابقة، ولتثبيت المعلومات.
الإبلاغ عن خطأ
×إذا وجد خطأ وتريد الإبلاغ عن هذا الخطأ، أو إذا كنت تريد تقديم اقتراح على شىء معين، فلا تتردد في إرسال بريد إلكتروني إلينا:
info@albashmoparmeg.com
شكرًا لك على مساعدتك لنا!