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

يستخدم الوسوم <ol> في HTML لتعريف قائمة مرتبة. يمكن أن تكون القائمة المرتبة رقمية أو أبجدية.

قائمة مرتبة في HTML:

• تبدأ القائمة المرتبة باستخدام الوسوم <ol>.
• يمثل كل عنصر في القائمة باستخدام الوسوم <li>.
• بشكل افتراضي، تُرقّم العناصر في القائمة تلقائيًا بأرقام متسلسلة (1، 2، 3، إلخ).

مثال:

<ol>
  <li>Coffee</li>
  <li>Tea</li>
  <li>Milk</li>
</ol>

تحديد نوع الترقيم في القوائم المرتبة باستخدام الخاصية type

في HTML، يمكنك استخدام الخاصية type داخل الوسوم <ol> لتحديد نوع العلامة المستخدمة في ترقيم عناصر القائمة المرتبة. وتوفر هذه الخاصية خيارات مختلفة لتناسب احتياجاتك:

ارقام

<ol type="1">
  <li>Coffee</li>
  <li>Tea</li>
  <li>Milk</li>
</ol>

الأحرف الكبيرة

<ol type="A">
  <li>Coffee</li>
  <li>Tea</li>
  <li>Milk</li>
</ol>

أحرف صغيرة:

<ol type="a">
  <li>Coffee</li>
  <li>Tea</li>
  <li>Milk</li>
</ol>

الأرقام الرومانية الكبيرة:

<ol type="I">
  <li>Coffee</li>
  <li>Tea</li>
  <li>Milk</li>
</ol>

الأرقام الرومانية الصغيرة:

<ol type="i">
  <li>Coffee</li>
  <li>Tea</li>
  <li>Milk</li>
</ol>

التحكم في بداية العد في القوائم المرتبة

في HTML، تبدأ القوائم المرتبة (المحددة بوسم <ol>) عادةً بالعد من الرقم 1. ولكن، يمكنك التحكم في بداية العد باستخدام الخاصية start داخل الوسوم <ol>. هذه الخاصية تتيح لك تحديد أي رقم تريد أن يبدأ منه العد في القائمة.

مثال:

<ol start="50">
  <li>Coffee</li>
  <li>Tea</li>
  <li>Milk</li>
</ol>

القوائم المتداخلة في HTML

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

مثال:

<ol>
  <li>Coffee</li>
  <li>Tea
    <ol>
      <li>Black tea</li>
      <li>Green tea</li>
    </ol>
  </li>
  <li>Milk</li>
</ol>

ملاحظة: يمكن لعناصر القائمة (<li>) احتواء قوائم جديدة وعناصر HTML أخرى مثل الصور والروابط، إلخ.

ملخص الفصل:

• استخدم الوسوم <ol> في HTML لتحديد قائمة مرتبة.
• استخدم الخاصية type داخل الوسوم <ol> لتحديد نوع الترقيم (أرقام، حروف، إلخ).
• استخدم الوسوم <li> في HTML لتحديد عنصر في القائمة.
• يمكن أن تكون القوائم متداخلة، أي قائمة داخل قائمة أخرى.
• يمكن لعناصر القائمة أن تحتوي على عناصر HTML أخرى مثل الصور والروابط والأزرار.

قوائم الوصف (Description Lists) في HTML

يدعم HTML أيضًا قوائم الوصف، وهي عبارة عن قوائم تحتوي على مصطلحات، ويوضع شرح لكل مصطلح.

• الوسوم <dl> تُعرّف قائمة الوصف.
• الوسوم <dt> تُعرّف المصطلح (الاسم).
• الوسوم <dd> تصف كل مصطلح.

مثال:

<dl>
  <dt>Coffee</dt>
  <dd>- black hot drink</dd>
  <dt>Milk</dt>
  <dd>- white cold drink</dd>
</dl>

علامات القوائم في HTML