إنشاء القوائـــم داخل المقالات بلغة HTML


في هذا الدرس سنكتشف الأنواع المختلفة لقوائم HTML ومعرفة كيفية إنشائها.

مـاهي قـوائـم HTML؟


إن القوائم تسمح لنا في الغالب ببناء  نص جميل و جذاب، وترتيب معلوماتنا بشكل أفضل، و إدراج عدة عناصر من خلال تجميعها تحت قاسم مشترك وهي في حد ذاتها قائمة.

وعند إنشاء القائمة داخل المقالة، ستفهم المتصفحات ومحركات البحث أن هناك علاقة ين عناصر القائمة المختلفة.
سنكتشف هنا نوعين من القوائم:

  •  قوائم غير مرتبة أو قوائم نقطية
  • قوائم مرتبة أو قوائم مرقمة .

قائمة غير مرتبة


تبدو قائمة غير مرتبة كالتالي:

  • صور الطبيعة
  • صور الفواكه
  • صور الحيوانات الأليفة
  • صور الحيوانات المتوحشة

إنه نظام يسمح لنا بإنشاء قائمة بعناصر دون فكرة تنظيمها ، يعني: (لا يوجد “أولاً” ولا “أخيراً”).

إن إنشاء قائمة غير مرتبة بسيط للغاية. ما عليك سوى استخدام العلامة <ul>   التي يتم إغلاقها بعد إتمام إسم القائمة  ب <ul/>

لذا أبدأ في كتابة هذا:

</ul> و <ul>

والآن ، هذا ما سنفعله:  سنكتب كل عنصر في القائمة بين علامتين <li> و </li>   بحيث يجب أن تكون كل من هذه العلامات بين <ul> و </ul>.  

 

المثال هنا سيُوَضِّح لك كل شيء ، ما عليك سوى التركيز بروية:

والنتيجة هي في الشكل التالي:

  • صور الطبيعة
  • صور الفواكه
  • صور الحيوانات الأليفة
  • صور الحيوانات المتوحشة

 هذه قائمة غير مرتبة

تذكـر جيِّـداً:
لاحظ أنه يجب وضع القائمة داخل </ body> و <body>

إذن تذكر جيِّداً هاتين العلامتين:

 <ul> </ ul> لتحديد القائمة بأكملها.

<li> </ li>  لتحديد عنصـر من القائمة .

بإمكانك وضع العديد من العناصر التي تريدها في القائمة النقطية ، ولا تقتصر على  أربعة  عناصر كما في المثال .

والآن ، أنت تعرف كيفية إنشاء قائمة نقطية! أظن أنها ليست صعبة و عليك تطبيقها لمرات كي تستوعب جيداً كم هي سهلة. 💡 

 إعلم أنه من الممكن تمامًا تداخل قائمة في قائمة أخرى باتباع بعض القواعد البسيطة 

إعلم كذلـك:
بالنسبة لأولئك الذين يحتاجون إلى إنشاء قوائم متداخلة بعضها في بعض ، يجب أن يدركوا أنه بإمكانهم تضمين القوائم ذات التعداد النقطي (إنشاء قائمة نقطية في قائمة نقطية). إذا كنت تريد القيام بذلك ، فافتح علامة ثانية <ul> داخل عنصر <li> . و إذا أغلقت العلامات بالترتيب الصحيح ، فلن تواجه أي مشكلة. كن حذراً على الرغم من أن هذه التقنية عقدة بعض الشيء، بالممارسة يمكنك تطبيقها  بدون مشاكل.

وهنا المثال:

  • صور الطبيعة
  • صور الفواكه
    • صور قديمة
    • صور مفبركة
    • صور حديثة
  • صور الحيوانات الأليفة
  • صور الحيوانات المتوحشة

 

قائمة داخل قائمة

هذه قائمة لقوائم متداخلة

ويمكننا إدخال قائمة رقمية في قائمة نقطية:

وهذه النتيجــة:

  • العنصر الأول
  • الخطاطة:
    1. المرحلة 1
    2. المرحلة 2
    3. المرحلة 3
  • العنصر الثاني

قائمة مرتبة


تعمل القائمة المرتبة بنفس الطريقة ، فقط  يتم تغيير علامة واحدة  : استبدل <ul> </ ul> بـ <ol> </ ol>. أما داخل القائمة ، فلا نغير أي شيء:  نحن نستخدم دائماً <li> </ li> لتحديد العناصر.

الترتيب الذي تضع فيه العناصر في القائمة مهم. 

  • <li></ li> سيكون العنصر رقم 1 ، والثاني سيكون رقم  2  وهكذا …

بما أن العملية أصبحت سهلة   ، فسأتركك تستمتع  ببساطة هذا المثال:

برنامجي اليومي

النتيـجـة:

    1. أستيقظ باكراً.
    2. أقوم بتمارين رياضية
    3. أشرب قهوتي الصباحية.
    4. أذهب إلى العمل

    القائمة الرقميةهذه قائمة مرتبة

    هذا مثال آخــر:

    النتيـجـة:

    القوائم

    القائمة رقم 1 :

    1. أقلام حبر زرقاء
    2. أقلام الرصاص
    3. أوراق مزدوجة

    القائمة رقم 2 :

    1. كتب الرياضيات
    2. كتب العربية
    3. كتب العلوم الطبيعية
    4. كتب الفيزياء

    👀 كما ترون هنا، يتم عرض الأرقام  أمام كل عنصر في القائمة الافتراضية.

    بالمقارنة مع المثال السابق ، كل ما كان علينا تغييره هو العلامة <ol>.

    📎 كما ذكرت في أكثر من موضوع أن HTML غير مؤهلٍ للقيام بكل شيئ ، فهو يهتم فقط بالهيكل أمَّا المظهر والتَّجميل والتَّنسيق فهو من اختصاص CSS. 

    وهنا سأتناول نوعـاً آخر من القوائم، فقط تذكر أنه يجب أن تفضل دائماً استخدام CSS لتنسيق محتوى HTML .

    لنبدأ بسمة type التي تسمح لنا بتغيير مظهر الرموز النقطية في قائمة مرتبة وهي متنوعة كالتالي:

    •  « 1 »: القيمة الافتراضية. ستظهر الأرقام أمام كل عنصر من عناصر القائمة ؛
    • « I »: ستظهر الأرقام الرومانية بالحروف الكبيرة أمام كل عنصر من عناصر القائمة ؛
    • « i »: ستظهر الأرقام الرومانية بالحروف الصغيرة أمام كل عنصر من عناصر القائمة ؛
    • « A »: ستظهر الأحرف الكبيرة أمام كل عنصر في القائمة ؛
    • « a »: ستظهر الأحرف الصغيرة أمام كل عنصر في القائمة.

    القائمة المـرقمـة المتنوعة

    النتـيجــــة:

    القوائـم

    القائمة الأولى :

    1. أنا أتعلم
    2. أنت تشتغل
    3. هو لا يبالي

    القائمة الثانية :

    1. العنوان
    2. العرض
    3. التفاصيل
    4. الاستنتاج

    من خلال ما تعلمناه في هذا الدرس، سنكون قادرين على تغيير هذا النمط وبدء قائمتنا المرتبة من نقطة محددة وذلك بفضل سمات HTML جديدة start أو value .

    إن سمة start تسمح لنا باختيار نقطة انطلاق لقائمتنا المرتبة. وسنضعها في الرمز المفتوح للعنصر الذي يمثل قائمة ol.

    من ناحية أخرى ، تتيح لنا سمة value اختيار قيمة كل شريحة من عناصر القائمة.

    🔍من فضلك ركز معـي:


       سنكون قادرين على إضافة سمة value  لكل عنصر li لتحديد القيمة بالضبط. وفي حالة عدم وجود سمة value لبعض العناصر li ، فإن قيمة الشريحة الخاصة بهم ستزداد  بشكل طبيعي (أي إضافة 1 اتباعـاً الرمز الرقمي السابق).


    لاحظ أنه في حالة تحديد سمة start في القائمة وتحديد سمة value لعنصر القائمة الأول ، فإن سمة value ، الأكثر دقة ، سوف تكون لها الأسبقية وتفرض قيمتها.

    القوائـم

    القائمة الأولى :

    1. أنا أتعلم
    2. أنت تشتغل
    3. هو لا يبالي

    القائمة الثانية :

    1. أستيقظ باكراً
    2. أقوم بتمارين رياضية
    3. أشرب قهوتي الصباحية
    4. أذهب إلى العمل

    القائمة الثالثة :

    1. أقلام حبر زرقاء
    2. أقلام الرصاص
    3. أوراق مزدوجة

    القائمة الرابعة :

    1. المقدمة
    2. العرض
    3. الخاتمة

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

    1. كتب الرياضيات
    2. كتب العلوم الطبيعية
    3. كتب الفيزياء

    بعض الامثلة لاستعمالات سمات start و value0

    مازلنا نكتشف المزيد من أنواع القوائم المرتبة، لكن هاته المرة سنتعرف على القائمة المرتبة، مُرَتبةٌ عكسياً وذلك باستعمال السّمة reversed . سيحتوي العنصر الأول من الشريحة على القيمة الأعلى، ثم يبدأ بترتيب أرقام القائمة تنازلياً ب 1- .

     مثـــــال:

    القوائـم

    القائمة الأولى 

    1. العنصر الأول
    2. العنصر الثاني
    3. العنصر الثالث

    القائمة الثانية :

    1. العنصر الأول
    2. العنصر الثاني
    3. العنصر الثالث

     

    فقط للمزيد من المعلومات :  هناك نوع ثالث من القائمة ، أكثر ندرة:  قائمة التعريفات. وهي تتضمن العلامات:

     <dl>  لتحديد القائمة   <dt> لتحديد مصطلح   و  <dd>  لتحديد تعريف هذا المصطلح .

    مثــال

    النتـيجــــة:


    تنظيم و ترتيب النّص ب HTML

    لا تَقْرَأْ وتَرْحَل … تَـعْلِيقَـاتُكَ تَـشْجِيعٌ لَـنَـا لِنَسْتَمِرَّ فِــي الْبَحْثِ وَالْعَطَـاء. وإِذَا أعْجَبَتْكَ الْمَقَالَة، شَارِكْهَا مَعَ أصْدِقَائِكَ عَبْرَ مَوَاقِع التَّوَاصُل

     


    jabism

    عبدالرحيم ح.س من شمال المغرب . تقني "الهندسة المدنية" ، مارست البرمجة منذ 2001، خبرتي مع الويب والإعلاميات : تمتد من سنة 2000 ، سائر باستمرار في تحديث معلوماتي والاطلاع على كل جديد.

    0 تعليق

    اترك تعليقاً

    لن يتم نشر عنوان بريدك الإلكتروني. الحقول الإلزامية مشار إليها بـ *