HTML

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

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

التاريخ

31 يناير 2022

الدروس

48

المستوى

مبتدئ

اللغة

عربي

المشاهدات

2072

المواضيع

12
الشروحات chevron_left HTML Nested List chevron_left HTML

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

</> HTML nested lists
القوائم المتداخلة في لغة HTML

تُستخدم القوائم المُتداخلة لعمل قوائم رئيسية وفرعية مثل القوائم الوصفية، لكن يمكن هنا عمل مزيج بين القوائم المرقمة والقوائم غير المرقمة، أو عمل قوائم رئيسية مرقمة وفرعية مرقمة كذلك بترقيم آخر.

  • يتم إنشاء العناصر الرئيسية في القوائم المُتداخلة عن طريق عنصر <ul> أو عنصر <ol>.
  • يتم استخدام العنصر <li> لعمل عناصر رئيسية داخل العنصر الرئيسي.
  •  يستخدم العنصر <li> لعمل عناصر فرعية أسفل العنصر الرئيسي.
HTML nested list

عمل قائمة رئيسية غير مرقمة من خلال عنصر <ul> وبداخلها قائمة فرعية مرقمة من خلال عنصر <ol>.

<ul>
    <li>Front-end
      <ol>
        <li>HTML</li>
        <li>CSS </li>
        <li>JS </li>
      </ol>
    </li>
    <li>Back-End</li>
    <li>Mobile Development</li>
  </ul>

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

طريقة إنشاء القوائم المُتداخلة في لغة HTML:

  1.  نقوم بإنشاء عنصر <ul> لبناء حاوية القوائم الرئيسية.
  2. نضع بداخله عنصر <li> لإضافة عناصر رئيسية للقائمة.
  3. نضع أسفل عنصر <ul> قائمة فرعية متداخلة، تكون أسفل كل عنصر من العناصر الرئيسية أو بعض العناصر.
  4. ندخل العناصر المتفرغة داخل عنصر <ul>  عن طريق علامة <li> لبناء العناصر الفرعية أسفل كل عنصر رئيسي.
Unordered list element

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

<ul>

<ul>
Nested list main item

يمكن إنشاء العناصر الرئيسية عن طريق العنصر ol أو العنصر ul، وذلك حسب نوع القائمة الرئيسية التي نريدها، سواءً أكانت مرقمة أم غير مرقمة. نستخدم العنصر <li> لكتابة البيانات التي نريدها داخل القائمة.

<ul>
  <li>Main Item</li>
  <li>Main Item</li>
  <li>Main Item</li>
  <li>ٍMain Item</li>
<ul>
Nested lists sub items

يمكن بناء العناصر الفرعية عن طريق العنصر ul أو العنصر ol.

<ul>
  <li>Main Item</li>
  <ul>
    <li>sub Item</li>
    <li>sub Item</li>
    <li>sub Item</li>
    <li>sub Item</li>
  </ul>
  <li>Main Item</li>
  <li>Main Item</li>
  <li>Main Item</li>
</ul>
Nested lists ul into ol

طريقة كتابة القوائم المتداخلة في لغة HTML، حالة كتابة قائمة غير مرقمة داخل قائمة مرقمة، عن طريق استخدام عنصر <ul> داخل عنصر <ol>.

<ol>
   <li>Front-end
      <ul>
        <li>HTML</li>
        <li>CSS </li>
        <li>JS </li>
      </ul>
    </li>
   <li>Back-End</li>
   <li>Mobile Development</li>
</ol>
Nested lists ol into ul

طريقة كتابة القوائم المتداخلة في لغة HTML، حالة كتابة قائمة مرقمة داخل قائمة غير مرقمة، عن طريق استخدام عنصر <ol> داخل عنصر <ul>.

<ul>
   <li>Front-end
      <ol>
        <li>HTML</li>
        <li>CSS </li>
        <li>JS </li>
      </ol>
    </li>
   <li>Back-End</li>
   <li>Mobile Development</li>
</ul>
Nested lists ul into ul

طريقة كتابة القوائم المتداخلة في لغة HTML، حالة كتابة قائمة غير مرقمة داخل قائمة غير مرقمة، عن طريق استخدام عنصر <ul> داخل عنصر <ul>.

<ul>
   <li>Front-end
      <ul>
        <li>HTML</li>
        <li>CSS </li>
        <li>JS </li>
      </ul>
    </li>
   <li>Back-End</li>
   <li>Mobile Development</li>
</ul>
Nested lists ol into ol

طريقة كتابة القوائم المتداخلة في لغة HTML، حالة كتابة قائمة مرقمة داخل قائمة مرقمة، عن طريق استخدام عنصر <ol> داخل عنصر <ol>.

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

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

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