HTML

HTML Attributes
خصائص العناصر في لغة HTML

سنتعلم في هذا الدرس ما هي الخصائص "attributes" في لغة HTML، ومسميات الخصائص الثلاث، بالإضافة إلى طريقة كتابتها، وأين تكتب، ولماذا نستخدم هذه الخصائص، وسنتعرف أيضًا على علامات التنصيص الفردية "single quotes" وعلامات التنصيص المزدوجة "double quotes" مع الخصائص العامة والخصائص المنطقية في لغة HTML.

التاريخ

25 يناير 2020

الدروس

48

المستوى

مبتدئ

اللغة

عربي

المشاهدات

11467

المواضيع

12
الشروحات chevron_left HTML Attributes chevron_left HTML

HTML Attributes
خصائص العناصر في لغة HTML

</> HTML attributes
خصائص العناصر في لفة HTML

HTML attribute هي خاصية تُضاف على العنصر "element"، لكي تزود متصفحات الويب "web browsers" بمعلومات إضافية حول العنصر "HTML element".


فمثلاً لدينا جهاز حاسوب وقمنا بإخبار متصفح الويب أن يرسم حاسوب عن طريق لغة HTML!

فكيف سيقوم برسمه دون أن نعطيه معلومات حول الحاسوب؟

هل سوف يرسم جهاز سطح مكتب أم جهاز محمول؟

وكم سيكون حجم الشاشة؟ وما لون الحاسوب؟

يعتبر جهاز الحاسوب في هذا المثال هو element، واللون والحجم والنوع هنا هي الـattributes أو الخصائص الإضافية حول العنصر.


مسميات HTML attributes:

نطلق على HTML attributes ثلاث مسميات هي:

  •  خصائص  العنصر.
  •  سمات  العنصر.
  •  تفاصيل  العنصر.
على سبيل المثال: الصورة في صفحة HTML هي عنصر "element"، أما طولها وعرضها فهي attributes أي خصائص حول الصورة.

</> HTML attribute syntax
طريقة كتابة الخصائص في لغة HTML

تتكون الخصائص "attributes" من ثلاثة أجزاء، وهي:
  • name اسم الخاصية مثل "color" لون جهاز الحاسوب.
  • value القيمة وتأتي القيمة بين علامات التنصيص المزدوجة "double quotes" [" "] أو علامات التنصيص الفردية 'single quotes' [' '].
  • equal علامة يساوي "="، وتكون بين "name="value  أو 'name='value.
Paragraph attributes

خاصية align وخاصية id وخاصية class كل هذه تسمى خصائص "attributes"، حيث تقوم بإعطاء المتصفحات معلومات إضافية حول العنصر.

<p align="right" id="paragraph" class="3"> </p>

هذا المثال توضيحي، وسنقوم بشرح عنصر <p> في الدروس اللاحقة.

</> General attributes in HTML
خصائص عامة في لغة HTML

  • HTML attributes تكتب خصائص العناصر  دائمًا بداخل علامة البداية "open tag" لأي عنصر، سواءٌ كان من النوع المتداخل "nested element"، أو من النوع الفارغ "empty element".
  • HTML attributes أغلب الخصائص تُكتب دائمًا على هيئة "name="value باستثناء بعض الخصائص التي يمكن اختصارها بدون value والاكتفاء بالاسم فقط.
  • case sensitive اسم الخاصية "name" وقيمة الخاصية "value" حساسين لحالة الأحرف، أي أن كلمة [ ATTRIBUTE ] مختلفة عن كلمة [ attribute ]، فالحروف الكبيرة لا تساوي الحروف الصغيرة، بعكس العناصر "HTML elements".
  • small letters الطريقة الصحيحة والسليمة والتي ينصح بها عند كتابة اسم الخاصية "name" وقيمة الخاصية "value" هي كتابتهم بأحرف صغيرة.
  • common & unique في لغة HTML هناك خصائص "attributes" مشتركة بين العناصر وهناك خصائص فريدة لكل عنصر.
Open tag in nested elements

تُكتب الخصائص بداخل علامة البداية "open tag" في العناصر المُتداخلة "nested elements".

<p align="right"></p>
Open tag in empty elements

تُكتب الخصائص بداخل علامة البداية "open tag" في العناصر الفارغة "empty elements".

<img src="image_path">

</> Logical attributes in HTML
الخصائص المنطقية في لغة HTML

تُكتب الخصائص في معظم الأحيان على هيئة "name="value ولكن في بعض الأحيان يُكتب name فقط إذا كانت القيمة نفس الاسم.

فعلى سبيل المثال "name="name يتم اختصارها إلى name فقط، و "type="type تكتب type فقط.

أما إذا كانت القيمة مختلفة عن الاسم، فيجب كتابتها على هيئة "name="value.


أنواع الخصائص "attribute" في لغة HTML:

  • Logical attribute الخصائص المنطقية "color="red لا يمكن اختصارها.
  • Illogical attribute الخصائص غير المنطقية "disabled="disabled تُختصر إلى disabled فقط.
Logical attribute

عندما تختلف قيمة الخاصية عن الاسم.

<p align="right"></p>
Illogical attribute

كتابة الخصائص attributes بنفس اسم attribute إذا كان الاسم والقيمة متساويين، تعتبر طريقة صحيحة ولكن يفضل اختصارها إلى اسم الخاصية فقط.

<audio controls="controls"></audio>
Illogical attribute

تُكتب الخصائص attributes في لغة HTML بهذا الشكل _بدون قيم_ إذا كانت القيمة نفس الاسم.

<audio controls></audio>

هذا المثال توضيحي، وسيتم شرح العناصر أعلاه، مثل: <p> و <audio> بشكل تفصيلي في الدروس اللاحقة.

</> Single or double quotes ؟
علامات تنصيص فردية أم مزدوجة ؟

تُكتب قيم الخصائص "values attributes" بين علامات التنصيص سواءٌ كانت علامات مزدوجة أو علامات فردية:

  •  double quotes علامات التنصيص المزدوجة [" "] هي الأكثر شيوعًا واستخدامًا.
  • single quotes علامات التنصيص الفردية  [' '] استخدامها صحيح ولكنها أقل استخدامًا.


في بعض الحالات عندما نقوم باستخدام علامات التنصيص المزدوجة "double quotes"، نستخدم بداخلها علامات تنصيص فردية "single quotes".

كذلك عندما نقوم باستخدام علامات التنصيص الفردية "single quotes"، قد نستخدم بداخلها علامات تنصيص مزدوجة "double quotes".

Double quotes

استخدمنا في هذا المثال علامات تنصيص مزدوجة "double quotes" مع قيم الخصائص "HTML values attributes".

<p title="This computer designed by Apple Company"> </p>
Single quotes

استخدمنا في هذا المثال علامات تنصيص فردية "single quotes" مع قيم الخصائص "HTML values attributes".

<p title='This computer designed by Apple Company'> </p>
Single with double

استخدمنا في هذا المثال علامات تنصيص فردية "single quotes" بداخل علامات تنصيص مزدوجة "double quotes"، مع قيم الخصائص "HTML values attributes".

<p title="This 'computer' designed by Apple Company">This computer laptop designed by Apple Company </p>
Double with single

استخدمنا في هذا المثال علامات تنصيص مزدوجة "double quotes" بداخل علامات تنصيص فردية "single quotes"، مع قيم الخصائص "HTML values attributes".

<p title='This "computer" designed by Apple Company'>This computer laptop designed by apple company </p>
Without quotes

يعد استخدم القيم "values" بدون علامات تنصيص طريقة خاطئة؛ لذلك تعتبر علامات التنصيص أساسية مع قيم الخصائص "HTML values attributes".

<p title=This computer designed by Apple Company> </p>
معلومات تهمك
  • لا تنس تقييم الدروس لكي نُحدّث المُحتوى باستمرار حتى ينال إعجابك.
  • لا تنس مشاركة الموقع مع أصدقائك حتى تعمّ الفائدة وتكون سببًا في نفعهم.
مشاركة
0
0
0
0
عدد المشاركات
هل هذه المعلومات نالت إعجابك ؟
0
0
عدد التقييمات