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

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

أهلاً بك! اليوم بنتكلم عن القوائم المرتبة في HTML، أو زي ما نسميها بالإنجليزية "Ordered Lists". هذي القوائم هي اللي تستخدمها لما تحتاج تعرض مجموعة عناصر بترتيب معين، يعني 1، 2، 3 أو أ، ب، ج وهكذا.

العنصر الأساسي: <ol> و <li>

عشان تسوي قائمة مرتبة، تستخدم العنصر <ol> اللي هو اختصار لـ "ordered list". وداخل كل قائمة، تحط العناصر حقتك باستخدام العنصر <li> اللي هو اختصار لـ "list item".

<pre><code>
<ol>
  <li>الخطوة الأولى</li>
  <li>الخطوة الثانية</li>
  <li>الخطوة الثالثة</li>
</ol>
</code></pre>

الناتج بيكون:

  1. الخطوة الأولى
  2. الخطوة الثانية
  3. الخطوة الثالثة

تغيير نوع الترقيم: السمة type

بشكل افتراضي، الترقيم يكون بالأرقام (1, 2, 3). بس تقدر تغيره باستخدام السمة type في العنصر <ol>.

  • type="1": أرقام (افتراضي)
  • type="a": أحرف صغيرة (a, b, c)
  • type="A": أحرف كبيرة (A, B, C)
  • type="i": أرقام رومانية صغيرة (i, ii, iii)
  • type="I": أرقام رومانية كبيرة (I, II, III)
<pre><code>
<ol type="a">
  <li>عنصر أول</li>
  <li>عنصر ثاني</li>
</ol>

<ol type="I">
  <li>مقدمة</li>
  <li>المحتوى</li>
  <li>الخاتمة</li>
</ol>
</code></pre>

الناتج بيكون:

  1. عنصر أول
  2. عنصر ثاني
  1. مقدمة
  2. المحتوى
  3. الخاتمة

البدء من رقم مختلف: السمة start

إذا بغيت القائمة تبدأ من رقم غير 1 (أو A، أو I)، تستخدم السمة start وتعطيها القيمة اللي تبغى تبدأ منها (لازم تكون رقم).

<pre><code>
<ol start="5">
  <li>العنصر الخامس</li>
  <li>العنصر السادس</li>
</ol>

<ol type="a" start="3">
  <li>العنصر الثالث (c)</li>
  <li>العنصر الرابع (d)</li>
</ol>
</code></pre>

الناتج بيكون:

  1. العنصر الخامس
  2. العنصر السادس
  1. العنصر الثالث (c)
  2. العنصر الرابع (d)

عكس الترتيب: السمة reversed

لو احتجت القائمة تكون بترتيب تنازلي (3, 2, 1)، تضيف السمة reversed للعنصر <ol>.

<pre><code>
<ol reversed>
  <li>الأخير</li>
  <li>اللي قبله</li>
  <li>الأول</li>
</ol>
</code></pre>

الناتج بيكون:

  1. الأخير
  2. اللي قبله
  3. الأول
ملاحظة: لما تستخدم reversed، القائمة تبدأ من عدد العناصر وتنزل. لو بغيت تبدأ من رقم معين وتنزلي، استخدم start مع reversed.

تحديد قيمة عنصر معين: السمة value على <li>

تقدر تحدد قيمة ترقيم معينة لعنصر <li> واحد باستخدام السمة value. هذا يغير ترقيم هذا العنصر، والعناصر اللي بعده بتكمل الترقيم من بعده.

<pre><code>
<ol>
  <li>البند الأول</li>
  <li value="5">البند الخامس</li>
  <li>البند السادس</li>
  <li>البند السابع</li>
</ol>
</code></pre>

الناتج بيكون:

  1. البند الأول
  2. البند الخامس
  3. البند السادس
  4. البند السابع

خلاصة

القوائم المرتبة <ol> مع عناصر <li> مفيدة جداً لتنظيم المحتوى اللي يحتاج ترتيب. تذكر تستخدم السمات type، start، reversed، و value عشان تتحكم في طريقة عرضها.

نصيحة: استخدم القوائم المرتبة لما يكون ترتيب العناصر مهم، زي خطوات وصفة أو تسلسل أحداث. إذا الترتيب ما يهم، الأفضل تستخدم القوائم غير المرتبة <ul>.