القوائم (Lists) في HTML



8 نوفمبر، 2021 | تيتو 4 تك


  • يوفر HTML لمبرمجي الويب ثلاث طرق لتحديد قوائم المعلومات. يجب أن تحتوي جميع القوائم على عنصر قائمة واحد أو أكثر. قد تحتوي القوائم على -

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

    <ol> - قائمة مرتبة. سيستخدم هذا مخططات مختلفة من الأرقام لسرد العناصر الخاصة بك.

    <dl> - قائمة تعريف. يقوم هذا بترتيب العناصر الخاصة بك بنفس طريقة ترتيبها في القاموس.

     

     

    enlightened  قوائم HTML غير مرتبة (Unordered)

     

    القائمة غير المرتبة هي مجموعة من العناصر ذات الصلة التي ليس لها ترتيب أو تسلسل خاص. يتم إنشاء هذه القائمة باستخدام علامة <ul> . يتم تمييز كل عنصر في القائمة برمز نقطي.

     

    <!DOCTYPE html>
    <html>
    
       <head>
          <title> قوائم غير مرتبة </title>
       </head>
    	
       <body>
          <ul>
             <li>Tito</li>
             <li>Mido</li>
             <li>Ahmed</li>
             <li>Hussien</li>
          </ul>
       </body>
       
    </html>

     

    سيؤدي هذا إلى النتيجة التالية :

     

     

    Tito •

      Mido •

      Ahmed •

      Hussien •

     

    yes  سمة النوع (type)

     

    يمكنك استخدام سمة النوع لعلامة <ul> لتحديد نوع الرمز النقطي الذي تريده. بشكل افتراضي ، هو يكون قرص أوdisc . فيما يلي الخيارات الممكنة :

     

    <ul type = "square">
    <ul type = "disc">
    <ul type = "circle">

     

    فيما يلي مثال استخدمنا فيه <"ul type = "circle>

     

    <!DOCTYPE html>
    <html>
    
       <head>
          <title> قائمة غير مرتبة </title>
       </head>
    
       <body>
          <ul type = "circle">
             <li>Tito</li>
             <li>Mido</li>
             <li>Ahmed</li>
             <li>Hussien</li>
          </ul>
       </body>
    
    </html>

     

    سيؤدي هذا إلى النتيجة التالية :

     

    o Tito

    o Mido

    o Ahmed

    o Hussien

     

     

    enlightened  قوائم HTML المرتبة (Ordered)

     

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

     

    <!DOCTYPE html>
    <html>
    
       <head>
          <title> المرتبة HTML قوائم </title>
       </head>
    
       <body>
          <ol>
             <li>Tito</li>
             <li>Mido</li>
             <li>Ahmed</li>
             <li>Hussien</li>
          </ol>
       </body>
    
    </html>

     

    سيؤدي هذا إلى النتيجة التالية :

     

    1. Tito

    2. Mido

    3. Ahmed

    4. Hussien

     

    yes  سمة النوع (type)

     

    يمكنك استخدام سمة النوع لعلامة <ol> لتحديد نوع الترقيم الذي تريده. بشكل افتراضي ، هي رقم. فيما يلي الخيارات الممكنة :

     

      أرقام الحالة الافتراضية <ol type = "1"> -
    أرقام الأحرف الكبيرة <ol type = "I"> -
    أرقام صغيرة <ol type = "i"> -
    الأحرف الكبيرة <ol type = "A"> -
    الأحرف الصغيرة <ol type = "a"> -

     

    مثال
    فيما يلي مثال استخدمنا فيه <"ol type = "1>

     

    <!DOCTYPE html>
    <html>
    
       <head>
          <title> المرتبة HTML قوائم </title>
       </head>
    
       <body>
          <ol type = "1">
             <li>Tito</li>
             <li>Mido</li>
             <li>Ahmed</li>
             <li>Hussien</li>
          </ol>
       </body>
    
    </html>

     

    سيؤدي هذا إلى النتيجة التالية :

     

    1. Tito
    2. Mido
    3. Ahmed
    4. Hussien

     

    مثال
    فيما يلي مثال استخدمنا فيه
    <"ol type = "I>

     

    <!DOCTYPE html>
    <html>
    
       <head>
          <title> المرتبة HTML قوائم </title>
       </head>
    	
       <body>
          <ol type = "I">
             <li>Beetroot</li>
             <li>Ginger</li>
             <li>Potato</li>
             <li>Radish</li>
          </ol>
       </body>
    	
    </html>

     

    سيؤدي هذا إلى النتيجة التالية :

     

    I . Tito
    II . Mido
    III . Ahmed
    IV . Hussien

     

    مثال
    فيما يلي مثال استخدمنا فيه <"ol type = "i>

     

    <!DOCTYPE html>
    <html>
       
       <head>
          <title> المرتبة HTML قوائم </title>
       </head>
    	
       <body>
          <ol type = "i">
             <li>Beetroot</li>
             <li>Ginger</li>
             <li>Potato</li>
             <li>Radish</li>
          </ol>
       </body>
    	
    </html>

     

    سيؤدي هذا إلى النتيجة التالية :

     

    i . Tito
    ii . Mido
    iii . Ahmed
    iv . Hussien

     

    yes  سمة البداية (start)

     

    يمكنك استخدام سمة البداية لعلامة <ol> لتحديد نقطة البداية للترقيم الذي تحتاجه. فيما يلي الخيارات الممكنة :

     

    <ol type = "1" start = "4">   - تبدأ الارقام بالرقم 4
    <ol type = "I" start = "4">   - IV تبدأ الارقام بــ
    <ol type = "i" start = "4">   - iv تبدأ الارقام  بــ
    تبدأ الأحرف بحرف d <ol type = "a" start = "4">   -
    تبدأ الأحرف بحرف D <ol type = "A" start = "4">   -

     

     

    yes  قوائم التعريف HTML

     

    يدعم HTML و XHTML نمط قائمة يسمى قوائم التعريف حيث يتم سرد الإدخالات كما هو الحال في قاموس أو موسوعة. قائمة التعريفات هي الطريقة المثلى لتقديم مسرد أو قائمة بالمصطلحات أو قائمة اسم / قيمة أخرى.

    قائمة التعريفات تستخدم العلامات الثلاثة التالية.

    <dl> - يحدد بداية القائمة
    <dt> - مصطلح
    <dd> - تعريف المصطلح
    </dl> - يحدد نهاية القائمة

     

    <!DOCTYPE html>
    <html>
    
       <head>
          <title> قوائم التعريف </title>
       </head>
    	
       <body>
          <dl>
             <dt><b>HTML</b></dt>
             <dd>This stands for Hyper Text Markup Language</dd>
             <dt><b>HTTP</b></dt>
             <dd>This stands for Hyper Text Transfer Protocol</dd>
          </dl>
       </body>
    	
    </html>

     

    سيؤدي هذا إلى النتيجة التالية :

     

    HTML
            This stands for Hyper Text Markup Language           
    HTTP
            This stands for Hyper Text Transfer Protocol