الكورس

Advertisements

HTML Attributes | In Arabic


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


 

HTML Attributes

 

أولًا. ما هي السمات فى لغة HTML؟

 

السمات (Attributes) هى خصائص إضافية تُستخدم داخل وسم الفتح للتحكم في سلوك العنصر.

تقوم السمة إما بتعديل الوظيفة الافتراضية لنوع عنصر أو توفر وظائف لأنواع عناصر معينة غير قادرة على العمل بشكل صحيح بدونها.

يمكن أن تحتوي جميع عناصر HTML على سمات.

 

لتفهم أكثر! انظر إلى المثال التوضيحى التالى:

html attributes - الباشمبرمج

اذا لاحظت فى المثال السابق ستجد أن:

  1. تم إنشاء سمة بإسم “class” فى فتحة وسم <h1>، وهذه السمة غالبًا ما تٌستخدم لتنسيق العناصر عن طريق الـ CSS.
  2. تم تمرير قيمة للسمة وهى “main-head“.

 

إذن نستنتج أن:

  • يتم وضع السمات دائمًا في فتحة وسم العُنصر.
  • تتكون كل سمة من شقين وهما: [ “attribute_name = “value ].
  • يجب دائمًا وضع قيمة السمة بين علامتين تنصيص.

 

بعض السمات مطلوبة لعناصر معينة، على سبيل المثال ، يجب أن يحتوى وسم <img> على سمة src و alt، ووسم الرابط التشعبي <a> يجب أن يحتوى على سمة href و target، وهكذا.


Advertisements

 

ثانيًا. أمثلة على السمات فى لغة 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” على أكثر من عنصر.

 


Advertisements

 

3. السمة  href

 

تحدد سمة الـ href عنوان URL للصفحة التي ينتقل إليها الرابط. ولإنشاء رابط فى HTML نستخدم وسم <a>، كالتالى:

<a href="example.html">Example Link</a>

 

4. السمة src و alt

 

لتضمين صور فى صفحات الويب نستخدم وسم <img>، وهناك سمتين أساسيتين يتم إستخدامهم مع هذا الوسم:

  1. src (إجبارى) لتحديد مسار الصورة.
  2. alt نصًا بديلاً لإستخدامه ، إذا تعذر تحميل الصورة.

 

مثال للتوضيح

<img src="our_logo.jpg" alt="Albashmoparmeg logo">
Albashmoparmeg logo

لتحديد عرض وإرتفاع الصورة يمكنك إستخدام سمة width (لتحديد العرض) و height (لتحديد الإرتفاع)، كالتالى:

<img src="our_logo.jpg" alt="Albashmoparmeg logo" height="200" width="200">
Albashmoparmeg logo

يتم تحديد قيمة العرض والارتفاع بالبكسل 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">
Albashmoparmeg logo

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


 

قَيم نفسك – Mini quiz


قُم بإجراء هذا الإختبار القصير على درس “HTML Attributes” لمعرفة مدى فهمك وإستيعابك للمعلومات السابقة، ولتثبيت المعلومات.




الإبلاغ عن خطأ

×

إذا وجد خطأ وتريد الإبلاغ عن هذا الخطأ، أو إذا كنت تريد تقديم اقتراح على شىء معين، فلا تتردد في إرسال بريد إلكتروني إلينا:

[email protected]

شكرًا لك على مساعدتك لنا!

Advertisements