❮
Programming Basics SQL HTML CSS JavaScript React Python C++ Java JavaFX Swing Problem Solving English English Conversations Computer Fundamentals Linux Learn Typing
❯
الدرس التالي❯ ❮الدرس السابق

HTMLالقوائم المرتبة

  • مفهوم القوائم المرتبة
  • إضافة قائمة مرتبة في الصفحة
  • أنواع الترقيم
  • تحديد من أين يبدأ الترقيم
  • قطع الترقيم الحالي
  • وضع قائمة بداخل قائمة

مفهوم القوائم المرتبة

القائمة المرتبة ( Ordered List ) يقصد بها عرض مجموعة عناصر مع إظهار رقم كل عنصر تم إدخاله فيها.

أهم ما يميز هذه القوائم أنه يمكنك عرض ترقيم عناصرها بالشكل الذي تريده. فمثلاً يمكنك عرضه كأعداد عادية، أحرف أبجدية، أعداد رومانية إلخ..

في هذا الدرس ستتعرف على وسوم و خصائص القوائم المرتبة بالإضافة إلى كيفية وضع قائمة بداخل قائمة.

إضافة قائمة مرتبة في الصفحة

بشكل عام، نستخدم الوسم <ol> </ol> لإعلام المتصفح أننا نريد عرض قائمة مرتبة في الصفحة.
أي عنصر نريد إضافته فيها يجب وضعه بداخل الوسم <li> </li>.

الكلمة ol هي إختصار لكلمة Ordered List و التي تعني قائمة مرتبة.
الكلمة li هي إختصار لكلمة List Item و التي تعني عنصر في القائمة.

في المثال التالي قمنا بإضافة قائمة مرتبة و بداخلها ثلاث عناصر.

مثال

<ol>
<li>Apple</li>
<li>Orange</li>
<li>Mango</li>
</ol>
<ol> <li>Apple</li> <li>Orange</li> <li>Mango</li> </ol>
جرب الكود

أنواع الترقيم

لتحديد نوع الترقيم الذي سيظهر في بداية كل عنصر يمكنك إضافة الخاصية type للوسم <ol> و تمرير إحدى الأحرف التالية لها كقيمة:

  • type="A" لإظهار ترقيم أبجدي بأحرف كبيرة قبل كل عنصر.
  • type="a" لإظهار ترقيم أبجدي بأحرف صغيرة قبل كل عنصر.
  • type="I" لإظهار ترقيم روماني بأحرف كبيرة قبل كل عنصر.
  • type="i" لإظهار ترقيم روماني بأحرف صغيرة قبل كل عنصر.
  • type="1" لإظهار ترقيم عادي قبل كل عنصر و هذه القيمة الإفتراضية التي يتم وضعها في حال لم تحدد القيمة بنفسك.

في المثال التالي قمنا بتغيير نوع الترقيم إلى ترقيم أبجدي بأحرف كبيرة.

المثال الأول

<ol type="A">
<li>Apple</li>
<li>Orange</li>
<li>Mango</li>
</ol>
<ol type="A"> <li>Apple</li> <li>Orange</li> <li>Mango</li> </ol>
جرب الكود

في المثال التالي قمنا بتغيير نوع الترقيم إلى ترقيم أبجدي بأحرف صغيرة.

المثال الثاني

<ol type="a">
<li>Apple</li>
<li>Orange</li>
<li>Mango</li>
</ol>
<ol type="a"> <li>Apple</li> <li>Orange</li> <li>Mango</li> </ol>
جرب الكود

في المثال التالي قمنا بتغيير نوع الترقيم إلى ترقيم روماني بأحرف كبيرة.

المثال الثالث

<ol type="I">
<li>Apple</li>
<li>Orange</li>
<li>Mango</li>
</ol>
<ol type="I"> <li>Apple</li> <li>Orange</li> <li>Mango</li> </ol>
جرب الكود

في المثال التالي قمنا بتغيير نوع الترقيم إلى ترقيم روماني بأحرف صغيرة.

المثال الرابع

<ol type="i">
<li>Apple</li>
<li>Orange</li>
<li>Mango</li>
</ol>
<ol type="i"> <li>Apple</li> <li>Orange</li> <li>Mango</li> </ol>
جرب الكود

في المثال التالي قمنا بتحديد أن نوع الترقيم هو ترقيم عادي و بالطبع لن نلاحظ أي فرق لأن نوع الترقيم الإفتراضي في الأساس هو عددي.

المثال الخامس

<ol type="1">
<li>Apple</li>
<li>Orange</li>
<li>Mango</li>
</ol>
<ol type="1"> <li>Apple</li> <li>Orange</li> <li>Mango</li> </ol>
جرب الكود

تحديد من أين يبدأ الترقيم

في حال أردت تحديد من أي رقم ستبدأ القائمة في إظهار الترقيم يمكنك إضافة الخاصية start للوسم <ol> و تمرير الرقم الذي تريدها أن تبدأ من عنده.


في المثال التالي قمنا بتحديد أن الترقيم سيبدأ من الرقم 5.

المثال الأول

<ol start="5">
<li>Apple</li>
<li>Orange</li>
<li>Mango</li>
</ol>
<ol start="5"> <li>Apple</li> <li>Orange</li> <li>Mango</li> </ol>
جرب الكود

في المثال التالي قمنا بتحديد أن الترقيم سيبدأ من الرقم 3 و أن نوع الترقيم سيكون أحرف إنجليزية صغيرة.

المثال الثاني

<ol start="3" type="a">
<li>Apple</li>
<li>Orange</li>
<li>Mango</li>
</ol>
<ol start="3" type="a"> <li>Apple</li> <li>Orange</li> <li>Mango</li> </ol>
جرب الكود

قطع الترقيم الحالي

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

الترقيم الجديد الذي يتم إعطاؤه للعنصر يجعل العناصر الموضوعة بعده تترقم على أساسه.

في المثال التالي قمنا بتغيير الترقيم عند العنصر الرابع إلى 7.
ملاحظة: العنصر الخامس سيكون ترقيمه 8 لأن ترقيمه يتحدد نسبةً لترقيم العنصر الذي يسبقه.

مثال

<ol>
<li>Apple</li>
<li>Orange</li>
<li>Mango</li>
<li value="7">Carrot</li>
<li>Banana</li>
<li>Peach</li>
</ol>
<ol> <li>Apple</li> <li>Orange</li> <li>Mango</li> <li value="7">Carrot</li> <li>Banana</li> <li>Peach</li> </ol>
جرب الكود

وضع قائمة بداخل قائمة

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

في المثال التالي قمنا بتعريف عنصرين و كل عنصر وضعنا فيه قائمة أخرى.

مثال

<ol>
<!-- العنصر الأول وضعنا فيه قائمة فيها ثلاث عناصر -->
<li>Front-End
<ol>
<li>HTML</li>
<li>CSS</li>
<li>Javascript</li>
</ol>
</li>
<!-- العنصر الثاني وضعنا فيه قائمة فيها عنصرين -->
<li>Back-End
<ol>
<li>MySQL</li>
<li>Aspnetcore</li>
</ol>
</li>
</ol>
<ol> <!-- العنصر الأول وضعنا فيه قائمة فيها ثلاث عناصر --> <li>Front-End <ol> <li>HTML</li> <li>CSS</li> <li>Javascript</li> </ol> </li> <!-- العنصر الثاني وضعنا فيه قائمة فيها عنصرين --> <li>Back-End <ol> <li>MySQL</li> <li>Aspnetcore</li> </ol> </li> </ol>
جرب الكود
الدرس التالي❯ ❮الدرس السابق