القوائم والجداول في HTML — إنشاء قوائم مرتبة وغير مرتبة وجداول بسيطة — الإعلام الآلي — السنة الرابعة متوسط — المنهاج الجزائري

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

\n\n

الأهداف التعليمية

\n

\n
• أن يتعرف المتعلم على وسوم القوائم في HTML

\n

• أن يتمكن من إنشاء قوائم مرتبة وغير مرتبة

\n

• أن يتعرف على وسوم إنشاء الجداول

\n

• أن يتمكن من إنشاء جدول بسيط في صفحة ويب

\n

\n\n

الشرح المبسط

\n

أولاً: القوائم في HTML — هناك نوعان رئيسيان من القوائم: القوائم غير المرتبة (Unordered List) وتستخدم الوسم <ul> مع كل عنصر باستخدام <li>، وتظهر على شكل نقاط. القوائم المرتبة (Ordered List) وتستخدم الوسم <ol> مع <li>، وتظهر على شكل أرقام أو حروف أبجدية.

\n\n

ثانياً: الجداول في HTML — تستخدم الجداول لعرض البيانات في صفوف وأعمدة. يتكون الجدول من: الوسم <table> لتعريف الجدول، <tr> لكل صف (Table Row)، <td> لكل خلية بيانات (Table Data)، <th> لخلايا الرأس (Table Header). يمكن إضافة حدود للجدول باستخدام خاصية border.

\n\n

ثالثاً: مثال على جدول بسيط — لإنشاء جدول يحتوي على درجات الطلاب: نستخدم <table border=”1″> ثم نضيف صف الرأس <tr> بخلايا <th> (الاسم، الرياضيات، الفيزياء)، ثم نضيف صفوف البيانات <tr> مع <td> لكل قيمة.

\n\n

أمثلة محلولة

\n

المثال 1: اكتب كود HTML لإنشاء قائمة غير مرتبة لمكونات الحاسوب.

\n

<h3>مكونات الحاسوب الأساسية</h3>
<ul>
<li>وحدة المعالجة المركزية (CPU)</li>
<li>الذاكرة العشوائية (RAM)</li>
<li>القرص الصلب (Hard Disk)</li>
<li>لوحة الأم (Motherboard)</li>
</ul>

\n\n

المثال 2: اكتب كود HTML لجدول يوضح جدول الحصص الأسبوعي.

\n

<table border=”1″>
<tr><th>اليوم</th><th>الحصة 1</th><th>الحصة 2</th></tr>
<tr><td>السبت</td><td>رياضيات</td><td>فيزياء</td></tr>
<tr><td>الأحد</td><td>عربية</td><td>إنجليزية</td></tr>
</table>

\n\n

تمارين تطبيقية

\n

\n
1. أنشئ صفحة HTML تحتوي على قائمة مرتبة بأفضل 5 كتب قرأتها.

\n

2. أنشئ جدولاً يعرض بيانات 4 طلاب (الاسم، العمر، المعدل).

\n

3. أضف خاصية colspan لدمج خلايا في جدول.

\n

4. أنشئ قائمة متداخلة (قائمة داخل قائمة) لتصنيف الحيوانات.

\n

\n\n

نشاط منزلي

\n

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

---

◆ دروس مشابهة

• قواعد البيانات — إنشاء الجداول والعلاقات بينها — الإعلام الآلي — السنة الرابعة متوسط — المنهاج الجزائري
• مقدمة في لغة HTML (بناء صفحة ويب بسيطة) — الإعلام الآلي السنة الرابعة متوسط — المنهاج الجزائري