شرح جميع أنواع القوائم


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

القائمة غير المرتبة (Unordered List)


تستخدم القوائم غير المرتبة لعرض عناصر القائمة بطريقة غير مرتبة، مع تعيين نقطة أو رمز لكل عنصر في القائمة. لإنشاء قائمة غير مرتبة في HTML، يتم استخدام عنصر "ul"، ويتم إدراج كل عنصر في القائمة داخل عنصر "li". على سبيل المثال:

HTML 
<ul>
    <li>عنصر 1</li>
    <li>عنصر 2</li>
    <li>عنصر 3</li>
</ul>

مثال لنتيجة الكود:

  • عنصر 1
  • عنصر 2
  • عنصر 3

يمكن تخصيص نقاط العناصر في القائمة غير المرتبة باستخدام CSS، ويمكن أيضًا إضافة رموز أخرى بدلاً من النقاط الافتراضية.

القائمة المرتبة (Ordered List)


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

HTML 
<ol>
    <li>عنصر 1</li>
    <li>عنصر 2</li>
    <li>عنصر 3</li>
</ol>

مثال لنتيجة الكود:

  1. عنصر 1
  2. عنصر 2
  3. عنصر 3

يمكن تخصيص رقم العناصر في القائمة المرتبة باستخدام CSS، ويمكن أيضًا تغيير نوع الحرف المستخدم لترقيم العناصر، مثل استخدام حروف بدلاً من الأرقام.

القائمة الفرعية (Nested List)


يمكن إنشاء قوائم فرعية داخل قوائم أخرى في HTML، وتسمى هذه القوائم الفرعية بالقوائم المتداخلة أو القائمة الشجرية. يتم إنشاء القوائم الفرعية باستخدام عنصر "ul" أو "ol" داخل عنصر "li" في القائمة الأم، على النحو التالي:

HTML 
<ul>
    <li>عنصر 1</li>
    <li>عنصر 2</li>
    <li>
        <ul>
            <li>عنصر 3.1</li>
            <li>عنصر 3.2</li>
        </ul>
    </li>
</ul>

مثال لنتيجة الكود:

  • عنصر 1
  • عنصر 2
    • عنصر 3.1
    • عنصر 3.2

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

الآن سنتعرف على عنصر آخر خاص بالقوائم وهو عنصر القوائم "dl" في HTML هو أحد العناصر التي تستخدم لتنظيم المحتوى على صفحة الويب، ويستخدم عادةً لعرض البيانات والمعلومات بشكل منظم ومفهوم، سنتحدث عن عنصر القوائم "dl" بشكل أكثر تفصيلاً ونوضح كيفية استخدامه وتخصيصه.

مفهوم عنصر القوائم dl


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

بناء قائمة بعنصر القوائم dl


لبناء قائمة بعنصر القوائم "dl" في HTML، يجب عليك استخدام عناصر القائمة الفرعية "dt"و "dd". يجب وضع العنصر في عنصر "dt" والقيمة في عنصر "dd". يمكنك إضافة العناصر الجديدة إلى القائمة باستخدام عنصر "dt" و "dd" الجديدين.
على سبيل المثال، يمكن إنشاء قائمة ببعض التعريفات والمفاهيم باستخدام عنصر القوائم "dl"، على النحو التالي:

HTML 
<dl>
    <dt>التعريف 1</dt>
    <dd>المفهوم 1</dd>
    
    <dt>التعريف 2</dt>
    <dd>المفهوم 2</dd>
</dl>

مثال لنتيجة الكود:

التعريف 1
المفهوم 1
التعريف 2
المفهوم 2

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

في لغة HTML، تُستخدم القوائم لعرض البيانات والمعلومات بطريقة منظمة ومفهومة. تتضمن القوائم ثلاثة أنواع رئيسية: القائمة المرتبة (ordered list)، والقائمة غير المرتبة (unordered list)، وقائمة الإيضاح (definition list). يُمكن استخدام السمة type لتغيير شكل وترتيب العناصر في القوائم. في هذه المقالة، سنتحدث عن السمة type في القوائم وسنوضح كيفية استخدامها مع الأمثلة.

القائمة المرتبة والسمة type


تُستخدم القوائم المرتبة في HTML لترتيب البيانات بطريقة تبعًا للترتيب الرقمي، حيث يتم ترتيب العناصر بشكل تصاعدي بحسب الرقم الذي تحمله كل عنصر. وتستخدم السمة type في القوائم المرتبة لتحديد النوع الذي يتم عرض الأرقام به.

النوع الافتراضي (type="1")


النوع الافتراضي للقائمة المرتبة هو ترتيب تصاعدي للأرقام، حيث يبدأ الترتيب بالرقم 1 ويستمر حتى آخر عنصر في القائمة. يتم تحديد هذا النوع بواسطة السمة type، والتي يمكن إضافتها داخل عنصر القائمة المرتبة كما يلي:

HTML 
<ol type="1">
    <li>عنصر 1</li>
    <li>عنصر 2</li>
    <li>عنصر 3</li>
</ol>

مثال لنتيجة الكود:

  1. عنصر 1
  2. عنصر 2
  3. عنصر 3


ترتيب الحروف (type="a", type="A", type="i", type="I")


يمكن استخدام السمة type في القائمة المرتبة لترتيب العناصر باستخدام الحروف بدلاً من الأرقام. توفر HTML أربعة أنواع مختلفة لترتيب الحروف في القوائم المرتبة، وهي:

ترتيب الحروف الصغيرة (type="a")


في هذا النوع، يتم ترتيب العناصر باستخدام الحروف الصغيرة، حيث يبدأ الترتيب بالحرف "a" ويستمر حتى آخر عنصر في القائمة. يمكن إضافة هذا النوع بواسطة السمة type كالتالي:

HTML 
<ol type="a">
    <li>عنصر 1</li>
    <li>عنصر 2</li>
    <li>عنصر 3</li>
</ol>

مثال لنتيجة الكود:

  1. عنصر 1
  2. عنصر 2
  3. عنصر 3


ترتيب الحروف الكبيرة (type="A")


في هذا النوع، يتم ترتيب العناصر باستخدام الحروف الكبيرة، حيث يبدأ الترتيب بالحرف "A" ويستمر حتى آخر عنصر في القائمة. يمكن إضافة هذا النوع بواسطة السمة type كالتالي:

HTML 
<ol type="A">
    <li>عنصر 1</li>
    <li>عنصر 2</li>
    <li>عنصر 3</li>
</ol>

مثال لنتيجة الكود:

  1. عنصر 1
  2. عنصر 2
  3. عنصر 3


ترتيب الأرقام الرومانية الصغيرة (type="i")


في هذا النوع، يتم ترتيب العناصر باستخدام الأرقام الرومانية الصغيرة، حيث يبدأ الترتيب بالرقم "i" ويستمر حتى آخر عنصر في القائمة. يمكن إضافة هذا النوع بواسطة السمة type كالتالي:

HTML 
<ol type="i">
    <li>عنصر 1</li>
    <li>عنصر 2</li>
    <li>عنصر 3</li>
</ol>

مثال لنتيجة الكود:

  1. عنصر 1
  2. عنصر 2
  3. عنصر 3


ترتيب الأرقام الرومانية الكبيرة (type="I")

في هذا النوع، يتم ترتيب العناصر باستخدام الأرقام الرومانية الكبيرة، حيث يبدأ الترتيب بالرقم "I" ويستمر حتى آخر عنصر في القائمة. يمكن إضافة هذا النوع بواسطة السمة type كالتالي:

HTML 
<ol type="A">
    <li>عنصر 1</li>
    <li>عنصر 2</li>
    <li>عنصر 3</li>
</ol>

مثال لنتيجة الكود:

  1. عنصر 1
  2. عنصر 2
  3. عنصر 3


ترتيب الأرقام الرومانية الصغيرة (type="i")


في هذا النوع، يتم ترتيب العناصر باستخدام الأرقام الرومانية الصغيرة، حيث يبدأ الترتيب بالرقم "i" ويستمر حتى آخر عنصر في القائمة. يمكن إضافة هذا النوع بواسطة السمة type كالتالي:

HTML 
<ol type="I">
    <li>عنصر 1</li>
    <li>عنصر 2</li>
    <li>عنصر 3</li>
</ol>

مثال لنتيجة الكود:

  1. عنصر 1
  2. عنصر 2
  3. عنصر 3


وهكذا إنتهينا من درسنا أو مقالتنا المتواضعة أتمنى أنك فهمت و وفقك الله أتمنى دعمنا بمشاركة الدرس لكي تعم الفائدة يوجد العديد من الأنواع الأخرى تعرفنا في هذا الدرس على أهمها وهي type=1, type=a, type=A, type=i, type=I,
يمكنك البحث عن المزيد و وفقك الله.