📘 اليوم الرابع · القوائم والجداول

🎯 Lists & Tables

👩‍🏫 من إعداد: فريق عمل جامعة بنها 🧑‍🏫 درس تفاعلي

🎯 أهداف الدرس

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

📋 أولاً: القوائم (Lists)

القوائم تساعدنا على تنظيم المعلومات مثل:

المواد الدراسية
أسماء الطلاب
المهام اليومية

🔘 1. قائمة غير مرتبة (Unordered List)

تظهر بنقاط. نستخدم الوسم <ul> و <li>

<ul>
    <li>HTML</li>
    <li>CSS</li>
    <li>JavaScript</li>
</ul>
            

HTML
CSS
JavaScript

💡 نشاط: أنشئ قائمة لأكلاتك المفضلة.

🔢 2. قائمة مرتبة (Ordered List)

تظهر بأرقام. نستخدم الوسم <ol> و <li>

<ol>
    <li>Wake Up</li>
    <li>Study</li>
    <li>Sleep</li>
</ol>
            

Wake Up
Study
Sleep

💡 نشاط: اكتب خطوات تشغيل الكمبيوتر.

📊 الفرق بين <ul> و <ol>

<ul>	<ol>
نقاط	أرقام
الترتيب غير مهم	الترتيب مهم

📂 3. قوائم داخل قوائم (Nested Lists)

<ul>
    <li>Programming
        <ul>
            <li>HTML</li>
            <li>CSS</li>
        </ul>
    </li>
</ul>
            

Programming
- HTML
- CSS

📊 ثانياً: الجداول (Tables)

الجداول تستخدم لتنظيم البيانات في صفوف وأعمدة.

📝 إنشاء جدول

<table>
    <tr>
        <td>Ahmed</td>
        <td>15</td>
    </tr>
</table>
            

Ahmed

📝 أكثر من صف

<table>
    <tr>
        <td>Ahmed</td>
        <td>15</td>
    </tr>
    <tr>
        <td>Sara</td>
        <td>14</td>
    </tr>
</table>
            

Ahmed	15
Sara	14

📝 عناوين الجدول (Table Header)

نستخدم <th> لعناوين الجدول.

<table>
    <tr>
        <th>Name</th>
        <th>Age</th>
    </tr>
    <tr>
        <td>Ahmed</td>
        <td>15</td>
    </tr>
    <tr>
        <td>Sara</td>
        <td>14</td>
    </tr>
</table>
            

Name	Age
Ahmed	15
Sara	14

📏 إضافة حدود للجدول

نضيف الخاصية border="1" داخل وسم <table>

<table border="1">
    <tr>
        <th>Name</th>
        <th>Age</th>
    </tr>
    <tr>
        <td>Ahmed</td>
        <td>15</td>
    </tr>
    <tr>
        <td>Sara</td>
        <td>14</td>
    </tr>
</table>
            

Name	Age
Ahmed	15
Sara	14

✏️ نشاط عملي

📝 أنشئ جدولاً يحتوي على:

اسم الطالب
العمر
الصف الدراسي

📝 المشروع العملي: Student Information Page

📝 المطلوب:

عنوان رئيسي
قائمة بالمواد الدراسية
جدول درجات

<!DOCTYPE html>
<html>
<head>
    <title>Student Information</title>
</head>
<body>

    <h1>Student Information</h1>

    <h2>Subjects</h2>

    <ul>
        <li>Math</li>
        <li>Science</li>
        <li>English</li>
    </ul>

    <h2>Grades</h2>

    <table border="1">
        <tr>
            <th>Subject</th>
            <th>Grade</th>
        </tr>
        <tr>
            <td>Math</td>
            <td>95</td>
        </tr>
        <tr>
            <td>Science</td>
            <td>90</td>
        </tr>
        <tr>
            <td>English</td>
            <td>98</td>
        </tr>
    </table>

</body>
</html>
            

Student Information

Subjects

Math
Science
English

Grades

Subject	Grade
Math	95
Science	90
English	98

🧪 اختبار تفاعلي · مراجعة سريعة

🌟 درجتك

0 / 0