دورة HTML الشاملة: الدرس الثاني

القوائم والجداول في HTML: تنظيم المحتوى بفعالية

مرحبًا بك في الدرس الثاني من دورتنا الشاملة لتعلم لغة HTML! بعد أن تعرفنا في الدرس السابق على أساسيات HTML وهيكلها العام، سنتعمق اليوم في كيفية تنظيم المحتوى بشكل فعال باستخدام القوائم (Lists) والجداول (Tables). هذان العنصران ضروريان لعرض المعلومات بطريقة منظمة وسهلة القراءة، سواء كانت قائمة بمنتجات، خطوات وصفة، أو بيانات إحصائية.

القوائم في HTML

تُستخدم القوائم في HTML لعرض مجموعات من العناصر. هناك ثلاثة أنواع رئيسية من القوائم:

1. القوائم غير المرتبة (Unordered Lists) - <ul>

تُستخدم القوائم غير المرتبة لعرض عناصر لا يهم ترتيبها. يتم تمييز كل عنصر في القائمة بنقطة (bullet point) افتراضيًا. يتم تعريف القائمة غير المرتبة باستخدام وسم <ul> (unordered list)، وكل عنصر داخلها يتم تعريفه باستخدام وسم <li> (list item).

<h3>قائمة التسوق</h3>
<ul>
  <li>حليب</li>
  <li>خبز</li>
  <li>بيض</li>
  <li>فواكه</li>
</ul>

النتيجة في المتصفح:

• حليب
• خبز
• بيض
• فواكه

ملاحظة: يمكنك تغيير نوع النقطة (bullet style) باستخدام CSS، ولكن هذا خارج نطاق HTML البحتة.

2. القوائم المرتبة (Ordered Lists) - <ol>

تُستخدم القوائم المرتبة لعرض عناصر يهم ترتيبها (مثل خطوات وصفة، أو قائمة بأفضل 10 أفلام). يتم ترقيم كل عنصر في القائمة افتراضيًا. يتم تعريف القائمة المرتبة باستخدام وسم <ol> (ordered list)، وكل عنصر داخلها يتم تعريفه باستخدام وسم <li>.

<h3>خطوات تحضير القهوة</h3>
<ol>
  <li>سخن الماء.</li>
  <li>أضف القهوة المطحونة إلى الكوب.</li>
  <li>اسكب الماء الساخن.</li>
  <li>أضف السكر أو الحليب حسب الرغبة.</li>
</ol>

النتيجة في المتصفح:

1. سخن الماء.
2. أضف القهوة المطحونة إلى الكوب.
3. اسكب الماء الساخن.
4. أضف السكر أو الحليب حسب الرغبة.

يمكنك التحكم في نوع الترقيم (أرقام، حروف، أرقام رومانية) باستخدام السمة type في وسم <ol>، أو باستخدام CSS.

<h3>قائمة مرقمة بالحروف</h3>
<ol type="a">
  <li>العنصر الأول</li>
  <li>العنصر الثاني</li>
  <li>العنصر الثالث</li>
</ol>

النتيجة في المتصفح:

1. العنصر الأول
2. العنصر الثاني
3. العنصر الثالث

3. قوائم الوصف (Description Lists) - <dl>

تُستخدم قوائم الوصف لسرد المصطلحات وتعريفاتها. يتم تعريف قائمة الوصف باستخدام وسم <dl> (description list). كل مصطلح يتم تعريفه باستخدام وسم <dt> (description term)، وكل وصف للمصطلح يتم تعريفه باستخدام وسم <dd> (description description).

<h3>مصطلحات الويب</h3>
<dl>
  <dt>HTML</dt>
  <dd>لغة ترميز النص التشعبي، تستخدم لبناء هيكل صفحات الويب.</dd>

  <dt>CSS</dt>
  <dd>أوراق الأنماط المتتالية، تستخدم لتصميم وتنسيق صفحات الويب.</dd>

  <dt>JavaScript</dt>
  <dd>لغة برمجة تستخدم لجعل صفحات الويب تفاعلية وديناميكية.</dd>
</dl>

النتيجة في المتصفح:

HTML

لغة ترميز النص التشعبي، تستخدم لبناء هيكل صفحات الويب.

CSS

أوراق الأنماط المتتالية، تستخدم لتصميم وتنسيق صفحات الويب.

JavaScript

لغة برمجة تستخدم لجعل صفحات الويب تفاعلية وديناميكية.

الجداول في HTML

تُستخدم الجداول في HTML لعرض البيانات في شكل صفوف وأعمدة. على الرغم من أن CSS تُستخدم بشكل كبير لتصميم الجداول، إلا أن HTML توفر الهيكل الأساسي لإنشائها.

العناصر الأساسية لإنشاء جدول هي:

• <table>: يحدد الجدول بأكمله.
• <tr>: يحدد صفًا في الجدول (table row).
• <th>: يحدد خلية رأس للجدول (table header). عادةً ما تظهر النصوص داخلها بخط عريض ومركزة.
• <td>: يحدد خلية بيانات للجدول (table data).

مثال على جدول بسيط

<h3>جدول بسيط</h3>
<table border="1">
  <tr>
    <th>الاسم</th>
    <th>العمر</th>
    <th>المدينة</th>
  </tr>
  <tr>
    <td>أحمد</td>
    <td>30</td>
    <td>القاهرة</td>
  </tr>
  <tr>
    <td>فاطمة</td>
    <td>25</td>
    <td>الرياض</td>
  </tr>
</table>

النتيجة في المتصفح:

ملاحظة: السمة border="1" تُستخدم لإضافة حدود للجدول والخلايا. في الممارسات الحديثة، يُفضل استخدام CSS للتحكم في مظهر الحدود.

دمج الخلايا في الجداول (colspan و rowspan)

يمكنك دمج الخلايا في الجداول باستخدام السمتين colspan (لدمج الخلايا أفقيًا عبر عدة أعمدة) و rowspan (لدمج الخلايا رأسيًا عبر عدة صفوف).

<h3>جدول مع دمج خلايا</h3>
<table border="1">
  <tr>
    <th colspan="2">معلومات شخصية</th>
    <th rowspan="2">ملاحظات</th>
  </tr>
  <tr>
    <th>الاسم</th>
    <th>العمر</th>
  </tr>
  <tr>
    <td>علي</td>
    <td>28</td>
    <td>طالب جامعي</td>
  </tr>
  <tr>
    <td>سارة</td>
    <td>35</td>
    <td>مهندسة برمجيات</td>
  </tr>
</table>

النتيجة في المتصفح:

أقسام الجدول (thead, tbody, tfoot)

لتحسين هيكل الجداول الكبيرة، يمكن تقسيمها إلى أقسام دلالية باستخدام الوسوم التالية:

• <thead>: لمجموعة صفوف الرأس (table head).
• <tbody>: لمجموعة صفوف جسم الجدول (table body).
• <tfoot>: لمجموعة صفوف تذييل الجدول (table foot).

هذه الأقسام مفيدة لتحسين الوصولية، وللسماح للمتصفحات بتمرير جسم الجدول بشكل مستقل عن الرأس والتذييل.

<h3>جدول مع أقسام</h3>
<table border="1">
  <thead>
    <tr>
      <th>المنتج</th>
      <th>الكمية</th>
      <th>السعر</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>لابتوب</td>
      <td>1</td>
      <td>1200$</td>
    </tr>
    <tr>
      <td>ماوس</td>
      <td>2</td>
      <td>25$</td>
    </tr>
  </tbody>
  <tfoot>
    <tr>
      <td colspan="2">الإجمالي</td>
      <td>1250$</td>
    </tr>
  </tfoot>
</table>

النتيجة في المتصفح:

خلاصة الدرس الثاني

في هذا الدرس، تعلمنا كيفية استخدام القوائم والجداول في HTML لتنظيم المحتوى بشكل فعال. لقد استعرضنا الأنواع المختلفة للقوائم (غير المرتبة، المرتبة، والوصف)، وكيفية بناء الجداول، ودمج الخلايا، وتقسيم الجداول إلى أقسام دلالية. هذه الأدوات أساسية لعرض المعلومات بطريقة منظمة وواضحة على صفحات الويب.

تذكر أن الممارسة هي أفضل طريقة للتعلم. حاول إنشاء صفحات HTML خاصة بك باستخدام القوائم والجداول، وجرب دمج الخلايا، وتغيير المحتوى. في الدرس القادم، سنتناول موضوعًا حيويًا آخر في HTML: النماذج (Forms)، والتي تُستخدم لجمع المدخلات من المستخدمين.