الدروس

  • قوائم الـ HTML

    تحتوي لغة HTML على مجموعة من الوسوم الخاصة بتنظيم البيانات في قوائم وباستخدام عدة خيارات. والقوائم الأكثر شيوعاً هي القوائم المتسلسلة/المرتّبة/المنظّمة (ordered) والغير متسلسلة (unordered).
    قوائم الـ HTML

    قائمة متسلسلة:

    1. العنصر الأول في القائمة
    2. العنصر الثاني في القائمة
    3. العنصر الثالث في القائمة

    قائمة غير متسلسلة:

    • عنصر للقائمة
    • عنصر للقائمة
    • عنصر للقائمة

    أمثلة جربه بنفسك - أمثلة

    قائمة غير متسلسة
    كيفية عمل قائمة غير متسلسلة في صفحة الـ HTML.

    قائمة متسلسلة
    كيفية عمل قائمة متسلسلة في صفحة الـ HTML.

    (يمكنك الحصول على مزيد من الأمثلة في أسفل هذه الصفحة).


    القوائم الغير متسلسة

    تبدأ القائمة الغير متسلسة بالوسم <ul>. كل عنصر أو بند (List Item) في القائمة يبدأ بالوسم <li>.

    تُعلّم عناصر القائمة الغير متسلسلة بالنقاط (هي عبارة عن دائرة سوداء صغيرة).

    كود HTML:
    <ul>
      <li>قهوة</li>
      <li>حليب</li>
    </ul>

    كيف يعمل كود الـ HTML بالأعلى في المتصفّح:

    • قهوة
    • حليب

    القوائم المتسلسة

    تبدأ القائمة المتسلسة بالوسم <ol>. كل عنصر أو بند (List item) في القائمة يبدأ بالوسم <li>.

    تُعلّم عناصر القائمة المتسلسلة بالأرقام.

    كود HTML:
    <ol>
      <li>قهوة</li>
      <li>حليب</li>
    </ol>

    كيف يعمل كود الـ HTML بالأعلى في المتصفّح:

    1. قهوة
    2. حليب

    قوائم الشرح أو التعريفات

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

    الوسم <dl> يعرّف القائمة التعريفية.

    الوسم <dl> يستخدم بالإقتران مع الوسم <dt> (لتعريف عنصر المصطلح في القائمة) و <dd> (يعرّف وصف المصطلح في القائمة):

    كود HTML:
    <dl>
      <dt>قهوة</dt>
      <dd>- شرابٌ أسود ساخن</dd>
      <dt>حليب</dt>
      <dd>- شرابٌ أبيض بارد</dd>
    </dl>

    كيف يعمل كود الـ HTML بالأعلى في المتصفّح:

    قهوة
    - شرابٌ أسود ساخن
    حليب
    - شرابٌ أبيض بارد

    الخاصية type لأنواع قوائم الـ HTML

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

    فعند وضعها ضمن تعريف القوائم المتسلسلة تأخذ القيم: A ، a ، I ، i التي تغيّر رموز الترقيم من الأرقام العادية الإفتراضية إلى ترقيم باستخدام الأحرف اللاتينية الكبيرة أو الصغيرة، أو باستخدام الأرقام الرومانية.

    وعند وضعها ضمن تعريف القوائم الغير متسلسلة وتأخذ القيم: disc ، circle ، square ، حيث أنت ترى أن الرمز الموجود عند كل بند أو عنصر في القائمة هو عبارة عن نقطة سوداء يطلق عليها اسم Disc وهي المعرفة ضمناً في خاصية type. لكن هناك رموز أخرى يمكن إظهارها وهي المربع، والدائرة المفرغة كما سترى في الأمثلة في أسفل الصفحة.


    ملاحظات أساسية - معلومات مفيدة

    معلومة: في عناصر القائمة يمكنك أن تضع النصوص، الأسطر الفاصلة، الصور، الوصلات، قوائم أخرى، إلخ.


    أمثلة المزيد من الأمثلة

    أنواع مختلفة من القوائم المتسلسلة
    يعرض لك أنواع مختلفة من القوائم المتسلسة.

    أنواع مختلفة من القوائم الغير متسلسلة
    يعرض لك أنواع مختلفة من القوائم الغير متسلسة.

    قوائم متداخلة
    يعرض كيف يمكنك أن تعمل القوائم المتداخلة.

    قوائم متداخلة 2
    يعرض كيف يمكنك أن تعمل قوائم متداخلة أكثر تعقيداً.

    قوائم التعريف
    يعرض قوائم المصطلحات والتعريفات.


    وسوم قوائم الـ HTML

    الوسم الوصف
    <ol> تعريف قائمة متسلسلة
    <ul> تعريف قائمة غير متسلسلة
    <li> تعريف بند أو عنصر للقائمة
    <dl> تعريف قائمة تعريفية
    <dt> تعريف عنصر في القائمة التعريفية
    <dd> تعريف وصف لعنصر القائمة التعريفية