دورة HTML5 للمبتدئين

9 : دورة إحتراف HTML5 بمنهجية أكاديمية ( القوائم أو Lists )

القوائم هي ما يجعل الصفحة أكثر تنظيما، وتضيف إليها CSS و JavaScript إضافات رائعة. فكل القوائم المنسدلة التي تراها هي قوائم html في الأساس مهما كانت رائعة ومنظمة. هناك نوعان من القوائم :

  • قوائم منقطة
  • قوائم مرقمة

سوف تجدون خلال البحث في المحتويات الغير العربية قوائم مرقمة وغير مرقمة، نفس الأمر.

القوائم المنقطة Unordered List

  • الوسم الخاص بالقائمة <ul>
  • الوسم الخاص بالمحتويات <li>

مثال :

<ul>
  <li>Coffee</li>
  <li>Tea</li>
  <li>Milk</li>
</ul>

إضافة خصائص وجمالية على القوائم المنقطة

دائرة Disc

<ul style="list-style-type:disc">
  <li>Coffee</li>
  <li>Tea</li>
  <li>Milk</li>
</ul>

Circle دائرة فارغة

<ul style="list-style-type:circle">
  <li>Coffee</li>
  <li>Tea</li>
  <li>Milk</li>
</ul>

Square مربعات

<ul style="list-style-type:square">
  <li>Coffee</li>
  <li>Tea</li>
  <li>Milk</li>
</ul>

None فارغة

<ul style="list-style-type:none">
  <li>Coffee</li>
  <li>Tea</li>
  <li>Milk</li>
</ul>

القوائم المرقمة Ordered List

  • الوسم الخاص بالقائمة <ol>
  • الوسم الخاص بالمحتويات <li>

مثال :

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

إضافة خصائص وجمالية على القوائم المرقمة

Numbers أرقام

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

Uppercase Letters حروف كبيرة

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

Lowercase Letters حروف صغيرة

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

Uppercase Roman Numbers أرقام رومانية كبيرة

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

Lowercase Roman Numbers أرقام رومانية صغيرة

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

التعليقات داخل القوائم أو القوائم مع وصوف Description Lists

تختلف القائمة الوصفية بقليل عن باقي القوائم لأنها تحمل داخلها وصف لكل عنصر

مثال :

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

القوائم المظمنة Nested Lists

هي قوائم تحمل داخلها قوائم أخرى

مثال :

<ul>
  <li>Coffee</li>
  <li>Tea
    <ul>
      <li>Black tea</li>
      <li>Green tea</li>
    </ul>
  </li>
  <li>Milk</li>
</ul>
السابق
8 : دورة إحتراف HTML5 بمنهجية أكاديمية ( script و noscript )
التالي
10 : دورة إحتراف HTML5 بمنهجية أكاديمية (تطبيق الدروس وتصميم قائمة )

شاركنا برأيك