السلام عليكم ورحمة الله وبركاته
سيكون درسنا اليوم حول طريقة عمل القوائم المرقمية عددياً أو نقطياً في لغة برمجة الويب HTML
أولاً : القوائم العددية ordered lists
ربما ترجمة الاسم غير دقيقة و لكن سأتعمد هذه التسمية لتكون أوضح في المعنى
مثال تطبيقي:
لإظهار القائمة التالية :
- الأول
- الثاني
فإن الكود الموافق يكون كالتالي:
كود HTML:
<ol> <li>الأول</li> <li>الثاني</li> </ol>
وعند كل عنصر وضعنا الوسم li للدلالة على أن هذا أحد عناصر القائمة
مزيد من التوضيح :
وأكيد لكل وسم tag فتح و إغلاق
كود HTML:
<ol> العناصر هنا </ol>
وبين وسمتي الفتح و الإغلاق نضع المحتوى و الذي هو العناصر
ولكل عنصر وسم فتح و إغلاق خاص هو li
كود HTML:
<li>عنصر من عناصر القائمة</li>
ملاحظة :
لإظهار العناصر بشكل مرتب من اليمين إلى اليسار في حالة لغتنا العربية
يمكن إضافة الخاصة dir إلى الوسم ol لتصبح كالتالي
كود HTML:
<ol dir="rtl"> <li>الأول</li> <li>الثاني</li> </ol>
rtl : right to left: من اليمين إلى اليسار
ltr: left to right : من اليسار إلى اليمين
ثانياً: القوائم النقطية unordered lists
الوسمين الذين سنتعامل معها هذه المرة هما ul , li
و تكون القائمة مشابهة للتالي
- الأول
- الثاني
ويكتب الكود كالتالي:
كود HTML:
<ul> عناصر القائمة هنا </ul>
كود HTML:
<li>عنصر أول</li> <li>عنصر ثاني</li>
كود HTML:
<ul> <li>عنصر أول</li> <li>عنصر ثاني</li> </ul>
ويمكن جعلها بأشكال أخرى باستعمال الخاصة type مع الوسم ul
فمثلاً نستعمل النمط square لتصبح القائمة منقطة بمربعات
جرب الكود التالي لتتوضح الفكرة أكثر
كود HTML:
<ul type="square"> <li>عنصر أول</li> <li>عنصر ثاني</li> <li>عنصر ثالث</li> </ul>
كود HTML:
<ul type="circle"> <li>عنصر أول</li> <li>عنصر ثاني</li> <li>عنصر ثالث</li> </ul>
كود HTML:
<ul type="disc"> <li>عنصر أول</li> <li>عنصر ثاني</li> <li>عنصر ثالث</li> </ul>
كود HTML:
<html dir="rtl"> <body> <h4>قائمة رقمية</h4> <ol> <li>تفاح</li> <li>موز</li> <li>ليمون</li> <li>برتقال</li> </ol> <h4>قائمة بأحرف كبيرة</h4> <ol type="A"> <li>تفاح</li> <li>موز</li> <li>ليمون</li> <li>برتقال</li> </ol> <h4>قائمة بأحرف صغيرة</h4> <ol type="a"> <li>تفاح</li> <li>موز</li> <li>ليمون</li> <li>برتقال</li> </ol> <h4>قائمة بأرقام رومانية</h4> <ol type="I"> <li>تفاح</li> <li>موز</li> <li>ليمون</li> <li>برتقال</li> </ol> <h4>قائمة بأرقام رومانية صغيرة</h4> <ol type="i"> <li>تفاح</li> <li>موز</li> <li>ليمون</li> <li>برتقال</li> </ol> </body> </html>
ثالثاً : القوائم المعرفة Definition Lists
صراحةً هذا النوع من القوائم لم أستخدمه عملياً مسبقاً
ولكن سنذكره من باب الإلمام بصناعة القوائم في لغة html
باختصار لإنشاء قائمة لها الشكل التالي:
فإننا نكتب الكود التالي:
كود HTML:
<dl dir="rtl"> <dt>شراب ساخن</dt> <dd>قهوة</dd> <dd>حليب</dd> <dt>شراب بارد</dt> <dd>عصير</dd> <dd>كولا</dd> </dl>
استعملنا الوسم dt لعنوان القائمة
والوسم dd لمحتويات القائمة
و قد وضعت الخاصة dir لتغيير الجهة إلى اليمين
رابعاً : تركيب قائمة في قائمة :
في هذه الفقرة ليس من جديد في الوسوم ولكن كتفكير في استعمالهم
وكمثال لعمل قائمة كالتالي:
- قسم برامج الكمبيوتر و الانترنت
- البرامج العامة و الخدمية
- برامج التصميم و الجرافيك
- برامج الحماية من الفيروسات
- القسم التعليمي:
- المكتبة الالكترونية
- الدورات
فإننا نكتب الكود التالي:
كود HTML:
<ol dir="rtl"> <li> قسم برامج الكمبيوتر و الانترنت <ul type="disc"> <li>البرامج العامة و الخدمية</li> <li>برامج التصميم و الجرافيك</li> <li>برامج الحماية من الفيروسات</li> </ul> </li> <li> القسم التعليمي <ul type="disc"> <li>المكتبة الالكترونية</li> <li>الدورات</li> </ul> </li> </ol>
ol , ul , li , dl , dt dd
ليست هناك تعليقات:
إرسال تعليق