القوائم في HTML | الدرس 7\37


    السلام عليكم، سنرى في هذا الدرس أنواع القوائم و كيفية إنشائها بكتابتها في ملف HTML.
    هناك ثلاث أنواع قوائم :
* القائمة الغير المرتبة Unordered List
* القائمة المرتبة Ordered List
* القائمة التعريفية Definition List


القوائم | الدرس 7\37 من مدونة ستارتايم للربح عبر الأنترنت

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

كيفية إنشاء القائمة الغير المرتبة

    العنصر المسؤول عن إنشاء القائمة الغير المرتبة هو عنصر 'UL'، و هو عنصر Block و ثنائي الأوسمة، أي لديه وسم فتح و وسم إغلاق، و يوضع داخل عنصر 'BODY'، و UL هي اختصار لجملة Unordered List بالإنجليزية، أي قائمة غير مرتبة.
    داخل عنصر 'UL' يقحم عنصر 'LI'، و هو عنصر Block، و ثنائي الأوسمة، و LI هي اختصار لجملة List Item بالإنجليزية، حيث يمثل هذا العنصر العنصر الذي يظهر في القائمة شريطة أن يحتوي على إسم بين وسميه، فإذا أردنا إظهار عدد n من العناصر في القائمة، يجب إقحام عدد n من العناصر 'LI' داخل عنصر 'UL' على التوالي.
    يمكن إقحام Attribut غير إجبارية في عنصر 'UL' إسمها 'TYPE' حيث لديها ثلاث قيم تحدد نوع النقط المتواجدة في بداية عناصر القائمة الغير المرتبة و هم :
- DISK : تجعل هذه القيمة النقط عبارة عن أقراص سوداء (القيمة التلقائية للنقط المتواجدة في بداية عناصر القائمة الغير المرتبة في HTML)
- SQUARE : تجعل هذه القيمة النقط عبارة عن مربعات سوداء.
- CIRCLE :  تجعل هذه القيمة النقط عبارة عن دوائر.

كيفية إنشاء قائمة المتطلبات غير مرتبة Unordered To Do List

    لإنشاء قائمة المتطلبات غير مرتبة يجب إنشاء قائمة غير مرتبة بعنصر 'LI' واحد بدون إسم، ثم إضافة Attribut بإسم 'CONTENTEDITABLE' و بقيمة 'TRUE'.

القائمة المرتبة Ordered List

كيفية إنشاء القائمة المرتبة

   العنصر المسؤول عن إنشاء القائمة الغير المرتبة هو عنصر 'OL' الذي هو عنصر Block و ثنائي الأوسمة، و يوضع داخل عنصر 'BODY'، و OL هي اختصار لجملة Ordered List بالإنجليزية، أي قائمة مرتبة.
    أيضاً يقحم عنصر 'LI' داخل عنصر 'OL'، حيث أن عنصر 'LI' هو المسؤول عن عدد العناصر للقائمة.
     لدى عنصر 'OL' ثلاث Attribut غير إجبارية و هم :
* TYPE 
    تحدد هذه Attribut نوع الترقيم في القائمة، و لديها خمس قيم :
- 1 : تُظهر عناصر القائمة مرتبة بأرقام (القيمة التلقائية لترقيم عناصر القائمة المرتبة في HTML)
- A : تظهر عناصر القائمة مرتبة بالأحرف الإنجليزية الكبرى.
- a : تظهر عناصر القائمة مرتبة بالأحرف الإنجليزية الصغرى.
- I : تظهر عناصر القائمة مرتبة بالأرقام الرومانية الكبرى.
- i : تظهر عناصر القائمة مرتبة بالأرقام الرومانية الصغرى.
* START
     تحدد هذه Attribut الرقم الذي سيبدأ منه ترتيب القائمة.
* REVERSED
     تجعل هذه Attribut ترتيب القائمة معكوس.
يمكن إنشاء قوائم متداخلة فيما بينها، أي مثلاً قوائم مرتبة داخل قوائم غير مرتبة أو العكس، أو قوائم من نفس النوع متداخلة بينها، و ذلك بإقحام العنصر المسؤول عن إنشاء القائمة داخل عنصر 'LI' للقائمة المراد جعلها محتوية، و إذا كان عنصر 'LI' يحتوي على إسم، يجب وضع العنصر المسؤول عن إنشاء القائمة بعد الإسم مباشرة.


الفيديو التوضيحي للدرس

كيفية إنشاء قائمة المتطلبات مرتبة Ordered To Do List

    لإنشاء قائمة المتطلبات مرتبة يجب إنشاء قائمة مرتبة بعنصر 'LI' واحد بدون إسم، ثم إضافة Attribut بإسم 'CONTENTEDITABLE' و بقيمة 'TRUE'.

القائمة التعريفية Definition List

   العنصر المسؤول عن إنشاء القائمة التعريفية هو عنصر 'DL' الذي هو عنصر Block و ثنائي الأوسمة، أي لديه وسم فتح و وسم إغلاق، و يوضع داخل عنصر 'BODY'، و DL هي اختصار لجملة Definition List بالإنجليزية، أي قائمة تعريفية.
    يوضَع داخل عنصر 'DL' عنصران مهمان و هما :
* عنصر 'DT' : عنصر من نوع Block، و ثنائي الأوسمة، و يقحم في عنصر 'DL' من أجل إضافة إسم الشيء المراد تعريفه الذي يجب عليه أن يكتب داخل وسمي العنصر 'DT'.
* عنصر 'DD' : عنصر من نوع Block، و ثنائي الأوسمة، و يقحم في عنصر 'DL' من أجل إضافة التعريف للشيء الذي أضيف في عنصر 'DT'، و يجب على التعريف أن يكتب بين وسمي العنصر 'DD'.
    يجب دائماً على عنصر 'DT' أن يكون قبل عنصر 'DD'، أي على التوالي معاً في القائمة التعريفية.

See the Pen
القوائم
by osama (@webdesigner7)
on CodePen.
الأكواد المستعملة في هذا الدرس

أتمنى أن تستفيدوا من الدرس

أحدث أقدم