انتقل إلى محتوى الدرس
ابدأ رحلتك
الدرس 03
دورة لغة HTML

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

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

ابدأ التعلّم استكشف الأمثلة
THE BUILDING BLOCKS OF THE WEBHTML
index.html
1<h1>Hello, web.</h1>
وسم الفتحالمحتوىوسم الإغلاق
النتيجة في المتصفح Hello, web.
كل صفحة رائعة تبدأ بعنصر.
أقسام الدرس
5
الأمثلة
11
اللغة
العربية
تاريخ النشر
غير محدد
المشاهدات
17,050
محتوى الدرس
في هذا الدرس 5تصفّح المواضيع

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

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

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

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

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

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

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

مسميات HTML Attributes:

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

  •  خصائص  العنصر.
  •  سمات  العنصر.
  •  تفاصيل  العنصر.
خصائص العناصر في لفة HTML

HTML Attribute Syntax طريقة كتابة الخصائص في لغة HTML

تتكون الخصائص [attributes] في HTML من ثلاثة أجزاء، وهي:


  • name: اسم الخاصية، مثل [title] لإضافة نص وصفي إلى العنصر.

  • equal: علامة يساوي [=]، تربط بين الاسم والقيمة، وتأتي خارج علامتي تنصيص القيمة، مثل ⁦name="value"⁩ أو ⁦name='value'⁩.

  • value: القيمة التي تُحدد للخاصية، وتُكتب بين علامات التنصيص المزدوجة "double quotes" [" "]، أو علامات التنصيص الفردية 'single quotes' [' '].

نضع القيمة بين علامتي تنصيص لتجنب الالتباس. يسمح HTML أيضًا بقيم غير مقتبسة بشروط محددة، وبالصيغة المختصرة للخصائص المنطقية كما سيأتي.

طريقة كتابة الخصائص في لغة HTML

Paragraph Attributes

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

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

General Attributes In HTML خصائص عامة في لغة HTML

  • تُكتب خصائص عناصر HTML دائمًا داخل علامة الفتح open tag للعنصر، سواء كان عنصرًا متداخلًا أو عنصرًا فارغًا. تُحدد أغلب الخصائص في صيغة ["name="value]، باستثناء بعض الخصائص التي يمكن اختصارها باستخدام الاسم فقط دون الحاجة إلى قيمة.

  • أسماء خصائص HTML غير حساسة لحالة أحرف ASCII؛ مثلًا TITLE وtitle اسم واحد. أما القيم فتتبع قواعد الخاصية: قيم مثل id وclass قد تختلف باختلاف حالة الأحرف، وكذلك قد تختلف مسارات الملفات بحسب الخادم.

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

  • HTML هي لغة ترميز تهدف إلى بناء صفحات الويب، وتتيح للمصممين إضافة عناصر متعددة مثل الصور والنصوص والأزرار. يتم التحكم في هذه العناصر عبر خصائص معينة تحدد مظهرها وسلوكها.

align في المثال القديم خاصية متقادمة في HTML الحديث؛ لتحقيق المحاذاة استخدم CSS مثل ⁦style="text-align: right"⁩. المثال يوضح البنية التاريخية فقط.

خصائص عامة في لغة HTML

Open tag In Nested Elements

تُكتب الخصائص بداخل علامة الفتح [open tag] في العناصر المُتداخلة [nested elements] بهذا النمط:

HTML 
<p align="right"></p>

Open tag In Empty Elements

تُكتب الخصائص بداخل علامة الفتح [open tag] في العناصر الفارغة [empty elements] بهذا النمط:

HTML 
<img src="image_path">

Logical Attributes In HTML الخصائص المنطقية في لغة HTML

تُكتب الخصائص في معظم الأحيان بصيغة ["name="value]. يمكن في بعض الحالات الاكتفاء بكتابة الاسم فقط إذا كانت الخاصية منطقية [boolean]، حيث إن وجود الاسم وحده يعني أنها مفعلة، مثل [controls] و [disabled]. 


أنواع الخصائص في لغة HTML تشمل:


    • الخصائص المنطقية Boolean Attributes: هذه الخصائص لا تحتاج إلى [value]، بل يكتفى بكتابة الاسم فقط.
      مثل: [controls] 
    • الخصائص غير المنطقية Non-Boolean Attributes: تتطلب كتابة اسم وقيمة.
      مثل: [⁦title="Description"⁩]

    في الخاصية المنطقية تكون القيمة عند كتابتها فارغة أو مساوية لاسم الخاصية دون حساسية لحالة أحرف ASCII. وجود ⁦disabled="false"⁩ يظل تفعيلًا لها، وهذه القيمة ليست صياغة صحيحة للتعطيل؛ لحالة false احذف الخاصية.

    Non-Boolean Attributes

    مثال تاريخي لخاصية غير منطقية تأخذ قيمة. تساوي الاسم والقيمة أو اختلافهما لا يحدد نوع الخاصية؛ تعريفها في HTML هو الذي يحدده.

    HTML 
    <p align="right"></p>

    Boolean Attributes With a Value

    controls خاصية منطقية؛ يجوز كتابتها بقيمة مساوية لاسمها أو بقيمة فارغة، كما يجوز اختصارها إلى الاسم فقط.

    HTML 
    <audio controls="controls"></audio>

    Boolean Attributes Without a Value

    في الخاصية المنطقية مثل controls يكفي وجود الاسم لتفعيلها. إزالة الخاصية تعني false؛ هذا المثال يوضح ظهور أدوات الصوت ولا يحدد ملفًا صوتيًا للتشغيل.

    HTML 
    <audio controls></audio>

    ?Single Or Double Quotes علامات تنصيص فردية أم مزدوجة ؟

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


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

    Double Quotes

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

    HTML 
    <p title="This computer designed by Apple Company"> </p>
    جرّب بنفسك

    Single Quotes

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

    HTML 
    <p title='This computer designed by Apple Company'> </p>

    Single With Double

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

    HTML 
    <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].

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

    Without quotes

    يسمح HTML بقيمة غير مقتبسة إذا لم تكن فارغة ولم تتضمن مسافة ASCII أو أيًا من ⁦" ' ` = < >⁩. في المثال التالي تنتهي قيمة title عند أول مسافة؛ لذلك لن تشمل الجملة كاملة. اقتباس القيمة هو الأسلوب الأوضح.

    HTML 
    <p title=This computer designed by Apple Company> </p>

    مشاركة

    هل كان هذا الدرس مفيدًا؟

    جارٍ تحميل الآراء…

    ابنِ لغتك البرمجية

    المصطلحات13

    راجع المعنى، اشرحه لنفسك، ثم علّم البطاقة كمفهومة.

    0 / 13 مفهومةأول بطاقة، أول خطوة
    01 HTML Attributes سمات HTML
    للمراجعة
    02 Attributes سمات
    للمراجعة
    03 Web Browsers متصفحات الإنترنت
    <p><a href="https://www.closetag.com/tutorial/internet/browsers">المزيد عن Web Browsers</a></p>
    للمراجعة
    04 HTML Element عناصر HTML
    للمراجعة
    05 Element عناصر
    للمراجعة
    06 Open Tag علامة الفتح
    للمراجعة
    07 Attribute Syntax بناء جملة السمات
    للمراجعة
    08 Syntax بناء الجملة
    للمراجعة
    09 Quotation علامة الاقتباس
    للمراجعة
    10 Double Quotation إقتباس مزدوج
    للمراجعة
    11 Single Quotation إقتباس مفرد
    للمراجعة
    12 Equal يساوي أو يعادل
    للمراجعة
    13 Without quotes بدون اقتباسات
    للمراجعة

    اقرأ البطاقات بحرية. سجّل الدخول لحفظ تقدم مراجعتك.

    مساحة التحدي

    اختبر فهمك.
    ووصلها للإتقان.

    كل سؤال خطوة لقدّام. اختار، اكتب كود، وشوف نتيجتك فورًا.

    3أسئلة 3أنواع تحديات 100%هدف الإتقان
    تصحيح تلقائي. فرص بلا حدود.

    أكمل المهام، واجمع كل الإجابات الصحيحة. أقل من 100%؟ راجع وأعد المحاولة.

    الأسئلة متاحة للاطلاع. سجّل الدخول للتفاعل وحفظ تقدمك.

    لمحة عن التحدي3 أسئلة تنتظرك
    01

    ماهو ال Attribute ؟

    02

    اي مما يلي هو من أجزاء تكوين Attribute ؟

    03

    هل يجب وضع قيمة ال attribute بداخل علامات تنصيص double quotation ؟