هذا الدّرس كما يبدو لنا من العنوان، سيُفصّل كيف يمكن للواحد منا كتابة قائمة أو عمل جدول بواسطة لغة HTML
القوائم تُقسم إلى نوعين بشكلٍ رئيسي : عددية ( Ordered List ) ونقطية (Unordered List) ، وإلى
قائمة تعريفات (Definition list) .. وسيتم شرح الأنواع الثلاثة
القوائم تُقسم إلى نوعين بشكلٍ رئيسي : عددية ( Ordered List ) ونقطية (Unordered List) ، وإلى
قائمة تعريفات (Definition list) .. وسيتم شرح الأنواع الثلاثة
- مثال - 1 - : القوائم العددية | Ordered Lists
هناكَ نسَق مُعين أو هيكل موحّد يتم بناء القوائم عليه
لاحظوا الشكل التوضيحي التّالي الذي سيعرض شكل القائمة الذي نرغب بعمله ، ودلالة كل عنصر برمجياً :

<ol> : اختصار لـ Ordered List أي قائمة عددية
<li> : اختصار لـ List item أي عنصر في القائمة
برمجيّاً :

النتيجة :

- مثال - 2 - : القوائم النقطية | Unordered Lists
هاكم الشكل التوضيحي التّالي الذي سيعرض شكل القائمة الذي نرغب بعمله ، ودلالة كل عنصر برمجياً :

<ul> : اختصاراً لـ Unordered List
تابعوا المثال :

والنتيجة

- مثال - 3 - : قائمة التعريفات | Definition list
تحتوي هذه القائمة على مُصطلحات وتعريفاتها
هاكم الشكل التوضيحي التّالي الذي سيعرض شكل القائمة الذي نرغب بعمله ، ودلالة كل عنصر برمجياً :

تابعوا المثال :

والنتيجة :

- مثال - 4 - : الجداول | Tables
كما القوائم ، يوجد للجداول هيكل موّحد خاص بها تُبنى عليه
لاحظوا شكل الجدول وتكوينه البرمجي :

<caption> تعني عنوان ، وبها نقوم بإضافة عنوان للجدول
<table> وسم البداية، يُستخدم للتعريف أن الجدول يبدأ من هنا ، وعند انتهائنا من كتابة الجدول نختم بوسم النهاية
<tr> اختصاراً لـ Table Row ونعني بها أننا الآن قمنا بفتح سطر جديد
<td> اختصاراً لـ Table Cell ونعني بها أننا قمنا بفتح خليّة جديدة
كيف نستخدم كلّ هذه الأمور ؟
تابعوا المثال :

النتيجة :

من الممكن إضافة المزيد من الـ attributes على وسم الـ <table>
مثلاً:

Border : يقوم بإضافة إطار حول الجدول والقيمة المُسندة إليه تعبّر عن عرض الإطار بالبكسل
align : تقوم بإزاحة النص ، وفي المثال اعلاه تقوم بإزاحته للوسط
cellpadding : تستخدم لإنشاء مساحة بين النصّ داخل الجدول والإطار الذي يحيط الخلية ، يقوم بما يشبه التوسعة
للجدول والقيمة المُسندة إليه تعبر عن المساحة بالبكسل
bordercolordark : يغير لون الجهة السفلية وجهة اليمين من الجدول
bordercolorlight : يغير لون الجهة العلوية والشمالية من الجدول
لاحظوا النتيجة :

::
كله تمام ؟

بانتظار أسئلتكم واستفساراتكم
1:25 ص
رامي و قصي


