HTML

HTML Ordered Lists
القوائم المرقمة في لغة HTML

سوف تتعلم في هذا الدرس بناء عدة عناصر نصية مترابطة مرقمة عن طريق عنصر ol في لغة HTML.

التاريخ

31 يناير 2022

الدروس

48

المستوى

مبتدئ

اللغة

عربي

المشاهدات

1599

المواضيع

12
الشروحات chevron_left HTML Ordered Lists chevron_left HTML

HTML Ordered List
القوائم المرقمة في لغة HTML

</> HTML ordered lists
القوائم المرقمة في لغة HTML

تُستخدم ordered lists القوائم المرقمة في لغة HTML، في صف وترتيب مجموعة العناصر نصية ترتيباً تسلسلياً، حيث يبدأ عد العناصر من رقم واحد، كما يمكن تغيير الأرقام إلى عناصر أو حروف أخرى.

  • عنصر <ol> هو العنصر المسؤول عن إنشاء ordered list قائمة مرقمة، وهو من نوع nested elements العناصر المُتداخلة.
  • يتم إنشاء كل عنصر نصي داخل القائمة عن طريق عنصر <li> في لغة HTML، وهو من نوع nested elements العناصر المُتداخلة.
  • يمكن إضافة عدد غير محدود من العناصر النصية داخل ordered lists القوائم المرقمة.
Ordered list

تُستخدم ordered list قائمة العناصر المرتبة في لغة HTML، عندما تريد جمع المعلومات والبيانات النصية في قائمة مرتبة- أي أن ترتيب العناصر وتسلسلها مهم في هذا النوع من القوائم-، كما في المثال التالي:

<ol>
    <!-- List Items -->
    <li>HTML</li>
    <li>CSS</li>
    <li>JavaScript</li>
   <li>PHP</li>
  </ol>

</> HTML ordered lists syntax
طريقة كتابة القوائم المرقمة في لغة HTML

في البداية نقوم بإنشاء عنصر <ol> لبناء حاوية القائمة المرقمة، ثم نضع بداخله عنصر <li> لإضافة عناصر القائمة.

أي نضع كل تعداد نريد إضافته ضمن القائمة داخل عنصر <li>  </li>.

Order list element

عنصر <ol> المسؤول عن بناء القوائم المرقمة.

<ol>

</ol>
Order list item element

عنصر <li> المسؤول عن إضافة عناصر داخل القوائم المرقمة.

<ol>
  <li>List Item</li>
</ol>
Ordered lists syntax

طريقة كتابة القوائم المرقمة في لغة HTML.

<ol>
  <li>HTML</li>
  <li>CSS</li>
  <li>JavaScript</li>
  <li>PHP</li>
</ol>
ملاحظة
  • يُمكنكَ وضع أي نصوص أو عناصر HTML أخرى داخل القائمة المُرتبة.
  • عن طريق لغة CSS يُمكنكَ التحكم في تنظيم الأرقام داخل القائمة المُرتبة وتغييرها.  
معلومات تهمك
  • لا تنسى تقييم الدروس لكي نُحدّث المُحتوى باستمرار حتى ينال إعجابك.
  • لا تنسى مشاركة الموقع مع أصدقاءك حتى تعمّ الفائدة وتكون سبب في نفعهم.
مشاركة
0
0
0
0
عدد المشاركات
هل هذه المعلومات نالت إعجابك ؟
0
0
عدد التقييمات

لديك استفسار ؟

يسعدنا كثيرا مساعدتك في استيعاب افضل للأمور, فلا تترد مطلقا في الاتصال بنا في حال كانت لديك اية اسئله او استفسارات.