في هذا الدرس سنتعرف على القوائم , والقوائم هي عبارة عن سلسلة من العناصر مثلا :
دول عربية :
1- اليمن
2- مصر
3- فلسطين
4- العراق
المثال في الاعلى يوضح معنى القوائم ولا يحتاج لشرح اكثر , فلننتقل الان الى طريقة عمل القوائم وسنستخدم الوسومين <ul> و <li> لعمل القوائمة ويستخدم بالشكل التالي :
<ul>
<li>عنصر 1</li>
<li>عنصر 2</li>
<li>عنصر 3</li>
<li>عنصر 4</li>
</ul>
لنأخذ مثال تطبيقي
ولنقم بصنع قائمة لمجموعة من الحيوانات وسنكتب الوسم كالتالي :
<html dir="rtl">
<head><title>موقع التقنية اليوم </title></head>
<body>
<ul>
<li>اسد </li>
<li>نمر</li>
<li>ذئب</li>
<li>فهد</li>
</ul>
</html>
وستكون النتيجة :
هذا بالنسبة للقوائم الغير متسلسلة , ماذا عن القوائم المتسلسلة ؟
القوائم المتسلسلة هي قائمة مكونة من عدة عناصر مرقمة من 1 الى الرقم الذي ينتهي به اخر عنصر مثلا :
1-شمس
2-قمر
3-نجم
4-كوكب ....
ولعمل مثل هذه القوائمة نستخدم الوسمين السابقين مع تغيير <ul> بالوسم <ol> لتكون بالشكل التالي :
<ol>
<li>عنصر 1</li>
<li>عنصر 2</li>
<li>عنصر 3</li>
<li>عنصر 4</li>
</ol>
لنأخذ مثال تطبيقي
سنعمل قائمة متسلسلة لمجموعة من الفواكه بحيث يكون الوسم بالشكل التالي :
<html dir="rtl">
<head><title>موقع التقنية اليوم </title></head>
<body>
<ol>
<li>تفاح</li>
<li>برتقال</li>
<li>خوخ</li>
<li>مشمش</li>
</ol>
</html>
والنتيجة ستكون :
ملاحظة : يمكنك اضافة عنوان للقوائم وذلك بكتابة العنوان بجوار الوسم <ul> او <ol> ومثال على ذلك الوسم التالي :
<html dir="rtl">
<head><title>موقع التقنية اليوم </title></head>
<body>
<ol>مجموعة فواكه :
<li>تفاح</li>
<li>برتقال</li>
<li>خوخ</li>
<li>مشمش</li>
</ol>
</html>
حيث ستكون النتيجة كالتالي :
وفي نهاية الدرس نتمنى ان تكونوا قد استفدتم ولو القليل , لاي استفسار اترك تعليقا ً.
الانتقال الى فهرس الدروس ...
الانتقال الى فهرس الدروس ...
اترك تعليقك على الموضوع