HTML Attributes
خصائص العناصر في لغة HTML
سنتعلم في هذا الدرس ما هي الخصائص "attributes" في لغة HTML، ومسميات الخصائص الثلاث، بالإضافة إلى طريقة كتابتها، وأين تكتب، ولماذا نستخدم هذه الخصائص، وسنتعرف أيضًا على علامات التنصيص الفردية "single quotes" وعلامات التنصيص المزدوجة "double quotes" مع الخصائص العامة والخصائص المنطقية في لغة HTML.
التاريخ
الدروس
المستوى
اللغة
المشاهدات
المواضيع
HTML Attributes
خصائص العناصر في لغة HTML
</>
HTML attributes
خصائص العناصر في لفة HTML
HTML attribute هي خاصية تُضاف على العنصر "element"، لكي تزود متصفحات الويب "web browsers" بمعلومات إضافية حول العنصر "HTML element".
فمثلاً لدينا جهاز حاسوب وقمنا بإخبار متصفح الويب أن يرسم حاسوب عن طريق لغة HTML!
فكيف سيقوم برسمه دون أن نعطيه معلومات حول الحاسوب؟
هل سوف يرسم جهاز سطح مكتب أم جهاز محمول؟
وكم سيكون حجم الشاشة؟ وما لون الحاسوب؟
يعتبر جهاز الحاسوب في هذا المثال هو element، واللون والحجم والنوع هنا هي الـattributes أو الخصائص الإضافية حول العنصر.
مسميات HTML attributes:
نطلق على HTML attributes ثلاث مسميات هي:
- خصائص العنصر.
- سمات العنصر.
- تفاصيل العنصر.
</>
HTML attribute syntax
طريقة كتابة الخصائص في لغة HTML
- 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>
سمات HTML
سمات
متصفحات الإنترنت
عناصر HTML
عناصر
علامة الفتح
بناء جملة السمات
بناء الجملة
إسم
قيمة
علامة الاقتباس
إقتباس مزدوج
إقتباس مفرد
يساوي أو يعادل
بدون اقتباسات
Hypertext Markup Language
لغة توصيف النص الفائق الخاصة ببناء صفحة الإنترنت
CLOSETAG
منصة كلوز تاج التعليمية المتخصصة في تعليم البرمجة. نسعى لتقديم تجربة تعلم فريدة من خلال معسكراتنا العملية والمنظمة والمتسلسلة كما نهدف إلى تقليص الفجوة بين النظرية والتطبيق العملي؛ لذا فإننا نركز على التعليم القائم على المشاريع والتطبيقات الحقيقية. ننقل لك سنوات من الخبرة في أقل وقت ممكن تحت إشراف مهندسين عباقرة عملوا في أكبر الشركات العربية والعالمية في مجال البرمجة. مهمتنا ليست فقط تعليم البرمجة، بل نسعى أيضًا لتزويدك بمجموعة من المهارات التي تتوافق مع احتياجات سوق العمل.
