السلام عليكم ورحمة الله وبركاته
سيكون درسنا اليوم حول طريقة عمل القوائم المرقمية عددياً أو نقطياً في لغة برمجة الويب HTML

أولاً : القوائم العددية ordered lists

ربما ترجمة الاسم غير دقيقة و لكن سأتعمد هذه التسمية لتكون أوضح في المعنى
مثال تطبيقي:
لإظهار القائمة التالية :


فإن الكود الموافق يكون كالتالي:

الأول


الثاني

لاحظ أننا بدأنا بالوسم ol من أجل عمل القائمة من النوع العددي ordered lists
وعند كل عنصر وضعنا الوسم li للدلالة على أن هذا أحد عناصر القائمة
** تجريب الأكواد كالعادة على الصفحة : http://www.tahasoft.com/code.htm أو أحد البرامج المثبتة على جهازك

مزيد من التوضيح :
وأكيد لكل وسم tag فتح و إغلاق

العناصر هنا

فالوسم ol يتم فتحه و إغلاقه
وبين وسمتي الفتح و الإغلاق نضع المحتوى و الذي هو العناصر
ولكل عنصر وسم فتح و إغلاق خاص هو li

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

وبين وسمتي الفتح و الإغلاق لـ li نضع المحتوى

ملاحظة :
لإظهار العناصر بشكل مرتب من اليمين إلى اليسار في حالة لغتنا العربية
يمكن إضافة الخاصة dir إلى الوسم ol لتصبح كالتالي

الأول


الثاني

علماً أنه إذا كانت الصفحة كاملة موجهة من اليمين إلى اليسار فلن نحتاج لتطبيق هذه الخاصة هنا
rtl : right to left: من اليمين إلى اليسار
ltr: left to right : من اليسار إلى اليمين

ثانياً: القوائم النقطية unordered lists

الوسمين الذين سنتعامل معها هذه المرة هما ul , li
و تكون القائمة مشابهة للتالي


ويكتب الكود كالتالي:

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

وعناصر القائمة تكتب باستخدام الوسم li

عنصر أول


عنصر ثاني

الكود الكامل يصبح كمايلي:

عنصر أول


عنصر ثاني

ربما لاحظت أن شكل القوائم يظهر على شكل نقط في ماسبق من القوائم النقطية
ويمكن جعلها بأشكال أخرى باستعمال الخاصة type مع الوسم ul
فمثلاً نستعمل النمط square لتصبح القائمة منقطة بمربعات
جرب الكود التالي لتتوضح الفكرة أكثر

عنصر أول


عنصر ثاني


عنصر ثالث

ويمكن أن تكون على شكل دوائر مفرغة كما يلي مع النمط circle

عنصر أول


عنصر ثاني


عنصر ثالث

والوضع الافتراضي هو النمط disc حيث يمكن إهماله أو كتابته :

عنصر أول


عنصر ثاني


عنصر ثالث

وهناك عدة أشكال أخرى يمكنكم معرفتها من خلال الكود التالي:

قائمة رقمية




 
تفاح


 
موز


 
ليمون


 
برتقال


  



قائمة بأحرف كبيرة




 
تفاح


 
موز


 
ليمون


 
برتقال


  



قائمة بأحرف صغيرة




 
تفاح


 
موز


 
ليمون


 
برتقال


  



قائمة بأرقام رومانية




 
تفاح


 
موز


 
ليمون


 
برتقال


  



قائمة بأرقام رومانية صغيرة




 
تفاح


 
موز


 
ليمون


 
برتقال


  

حيث ينتج مايلي:

ثالثاً : القوائم المعرفة Definition Lists

صراحةً هذا النوع من القوائم لم أستخدمه عملياً مسبقاً
ولكن سنذكره من باب الإلمام بصناعة القوائم في لغة html
باختصار لإنشاء قائمة لها الشكل التالي:

فإننا نكتب الكود التالي:

شراب ساخن


قهوة


حليب


شراب بارد


عصير


كولا


 

حيث كما تلاحظ :
استعملنا الوسم dt لعنوان القائمة
والوسم dd لمحتويات القائمة
و قد وضعت الخاصة dir لتغيير الجهة إلى اليمين

رابعاً : تركيب قائمة في قائمة :

في هذه الفقرة ليس من جديد في الوسوم ولكن كتفكير في استعمالهم
وكمثال لعمل قائمة كالتالي:








فإننا نكتب الكود التالي:

قسم برامج الكمبيوتر و الانترنت



البرامج العامة و الخدمية


برامج التصميم و الجرافيك


برامج الحماية من الفيروسات








القسم التعليمي



المكتبة الالكترونية


الدورات

ختاماً : أذكر بالأوسمة tags التي درسناها اليوم وهي
ol , ul , li , dl , dt dd