HTML Unordered & Ordered Lists | In Arabic

سوف نتعلم فى هذا الفصل “HTML Lists” كل المعلومات والتفاصيل حول القوائم المرتبة والغير مرتبة والوصفية فى HTML وكيفية إستخدامها بطريقة صحيحة وفعالة + القوائم المتداخلة.

القوائم في HTML

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

<h2>Orderd List</h2>
<ol>
 <li>HTML</li>
 <li>CSS</li>
 <li>JavaScript</li>
 <li>Jquery</li>
 <li>PHP</li>
</ol>

<h2>UnOrderd List</h2>
<ul>
 <li>HTML</li>
 <li>CSS</li>
 <li>JavaScript</li>
 <li>Jquery</li>
 <li>PHP</li>
</ul>

انواع القوائم –  HTML List Types

هناك 3 انواع من القوائم توفرهم HTML، وهم:

• Ordered Lists القوائم المرتبة – تُستخدم لتجميع مجموعة من العناصر ذات الصلة في ترتيب معين.
• Unordered Lists القوائم غير المرتبة – تُستخدم لتجميع مجموعة من العناصر ذات الصلة في أي ترتيب معين.
• Description Lists قوائم الوصف – تُستخدم لعرض أزواج الاسم/القيمة مثل المصطلحات والتعريفات.

القوائم المرتبة Ordered Lists

لإنشاء القوائم المُرتبة نستخدم وسم <ol>، ويستخدم بداخلة وسم <li> لتعريف عنصر قائمة، كالتالى:

<ol>
 <li>HTML</li>
 <li>CSS</li>
 <li>JavaScript</li>
 <li>Jquery</li>
 <li>PHP</li>
</ol>

سمة النوع Type Attribute

تحدد السمة type للوسم <ol> نوع علامة عنصر القائمة، كالتالى:

<ol type="a">
 <li>HTML</li>
 <li>CSS</li>
 <li>JavaScript</li>
 <li>Jquery</li>
 <li>PHP</li>
</ol>

قيم السمة type:

القوائم الغير مرتبة Unordered Lists

نستخدم وسم <ul> لإنشاء القوائم الغير مُرتبة، ويستخدم بداخلة وسم <li> لتعريف عنصر قائمة ايضًا، كالتالى:

<ul>
 <li>HTML</li>
 <li>CSS</li>
 <li>JavaScript</li>
 <li>Jquery</li>
 <li>PHP</li>
</ul>

قوائم الوصف Description Lists 

لكى نُعرف قوائم الوصف نستخدم هذه العناصر:

1. <dl>: تحديد قائمة وصف.
2. <dt>: يعرّف مصطلحًا في قائمة الوصف.
3. <dd>: يصف المصطلح في قائمة الوصف.

مثال للتوضيح:

<dl>
  <dt>HTML</dt>
  <dd>It's Easy!</dd>
  <dd>Any person can learn it!</dd>
  <dd>bla! bla! bla!</dd>

  <dt>CSS</dt>
  <dd>It's Easy!</dd>
  <dd>Any person can learn it!</dd>
  <dd>bla! bla! bla!</dd>
</dl>

القوائم المتداخلة Nested Lists

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

مثال على قائمة متداخلة (مستوى واحد):

<ul>
    <li>Category 1</li>
    <li>Category 2
        <ul>
        <li>Child Category 1</li>
        <li>Child Category 2</li>
        <li>Child Category 3</li>
        <li>Child Category 4</li>
        </ul>
    </li>
    <li>Category 3</li>
    <li>Category 4
        <ul>
        <li>Child Category 1</li>
        <li>Child Category 2</li>
        <li>Child Category 3</li>
        <li>Child Category 4</li>
        </ul>
    </li>
</ul>

مثال على قائمة متداخلة (أكثر من مستوى واحد):

<ul>
    <li>Category 1</li>
    <li>Category 2
        <ul>
        <li>Child cat 1 from Category 2
            <ul>
            <li>Child Cat 1 from child Cat 1</li>
            <li>Child Cat 2 from child Cat 1</li>
            <li>Child Cat 2 from child Cat 1</li>
            </ul>
        </li>
        <li>Child cat 2 from Category 2</li>
        </ul>
    </li>
    <li>Category 3</li>
    <li>Category 4
        <ul>
        <li>Child cat 1 from Category 4
            <ul>
            <li>Child Cat 1 from child Cat 1</li>
            <li>Child Cat 2 from child Cat 1</li>
            <li>Child Cat 2 from child Cat 1</li>
            </ul>
        </li>
        <li>Child cat 2 from Category 4</li>
        </ul>
    </li>
</ul>