الكورس

Advertisements

HTML Unordered & Ordered Lists | In Arabic


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


 

القوائم في HTML

 

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

 

مثال للتوضيح

يوضح المثال التالي شكل القوائم المرتبة والغير مرتبة:

Orderd List

  1. HTML
  2. CSS
  3. JavaScript
  4. Jquery
  5. PHP

UnOrderd List

  • HTML
  • CSS
  • JavaScript
  • Jquery
  • PHP
<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>

Orderd List

  1. HTML
  2. CSS
  3. JavaScript
  4. Jquery
  5. PHP

UnOrderd List

  • HTML
  • CSS
  • JavaScript
  • Jquery
  • PHP

 

انواع القوائم –  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>
  1. HTML
  2. CSS
  3. JavaScript
  4. Jquery
  5. PHP

 

سمة النوع Type Attribute

 

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

<ol type="a">
 <li>HTML</li>
 <li>CSS</li>
 <li>JavaScript</li>
 <li>Jquery</li>
 <li>PHP</li>
</ol>
  1. HTML
  2. CSS
  3. JavaScript
  4. Jquery
  5. PHP

قيم السمة type:

القيمةما تقوم به
Aتقوم بترقيم عناصر القائمة بأحرف كبيرة.
aتقوم بترقيم عناصر القائمة بأحرف صغيرة.
I تقوم بترقيم عناصر القائمة بأرقام رومانية كبيرة.
iتقوم بترقيم عناصر القائمة بأرقام رومانية صغيرة.
1تقوم بترقيم عناصر القائمة بأرقام (القيمة الافتراضية).

Advertisements

 

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

 

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

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

يتم إضافة مسافة فى بادئة القوائم افتراضيًا من قِبل المتصفحات.


 

قوائم الوصف 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>
HTML
It’s Easy!
Any person can learn it!
bla! bla! bla!
CSS
It’s Easy!
Any person can learn it!
bla! bla! bla!

 

القوائم المتداخلة 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>
  • Category 1
  • Category 2
    • Child Category 1
    • Child Category 2
    • Child Category 3
    • Child Category 4
  • Category 3
  • Category 4
    • Child Category 1
    • Child Category 2
    • Child Category 3
    • Child Category 4

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

<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>
  • Category 1
  • Category 2
    • Child cat 1 from Category 2
      • Child Cat 1 from child Cat 1
      • Child Cat 2 from child Cat 1
      • Child Cat 2 from child Cat 1
    • Child cat 2 from Category 2
  • Category 3
  • Category 4
    • Child cat 1 from Category 4
      • Child Cat 1 from child Cat 1
      • Child Cat 2 from child Cat 1
      • Child Cat 2 from child Cat 1
    • Child cat 2 from Category 4

 

قَيم نفسك – Mini quiz


قُم بإجراء هذا الإختبار القصير على درس “HTML Lists” لمعرفة مدى فهمك وإستيعابك للمعلومات السابقة، ولتثبيت المعلومات.




الإبلاغ عن خطأ

×

إذا وجد خطأ وتريد الإبلاغ عن هذا الخطأ، أو إذا كنت تريد تقديم اقتراح على شىء معين، فلا تتردد في إرسال بريد إلكتروني إلينا:

[email protected]

شكرًا لك على مساعدتك لنا!

Advertisements