🏆 أساسيات HTML : من الصفر إلى بناء أول صفحة ويب

🌟 مقدمة تحفيزية : أهلاً بك مجدداً  ! هل تساءلت يوماً كيف تعرض الشركات قوائم أسعارها ؟ أو كيف تعرض الأكاديميات جداول الحصص والدروس ؟ السر يكمن في الجداول . اليوم ستتعلم كيف ترتب معلوماتك في صفوف وأعمدة ، لتجعل موقعك يبدو منظماً كالمحترفين . 🏗️ 1.  هيكل الجدول الأساسي لبناء جدول في HTML ، نستخدم عائلة من الوسوم تعمل معا :

•    <table> : الحاوية الرئيسية للجدول .

•  <tr>  : لإنشاء صف (Table Row) .

•  <th> : لإنشاء رأس العمود (Table Header) – ويكون الخط فيه عريضاً تلقائياً .

•  <td> : لإنشاء خلية البيانات (Table Data) .

📊 2.  مثال تطبيقي (جدول مسارات أكاديمية قياوي)  : انسخ هذا الكود وجربه في ملفك لتشاهد السحر :

HTML
<table border="1">
    <thead>
        <tr>
            <th>المسار التعليمي</th>
            <th>المستوى</th>
            <th>الحالة</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>برمجة الويب (HTML)</td>
            <td>مبتدئ</td>
            <td>متاح الآن</td>
        </tr>
        <tr>
            <td>برمجة بايثون</td>
            <td>متوسط</td>
            <td>قريباً</td>
        </tr>
    </tbody>
</table>

(ملاحظة للمتعلم : استخدمنا border=”1″ فقط لنرى الحدود، لاحقاً سنتعلم كيف نجعلها أجمل باستخدام CSS) .

💡 لماذا نستخدم الجداول ؟

في “أكاديمية قياوي”، نستخدم الجداول ليس فقط للأرقام ، بل لعرض :

    1 .   مقارنات بين الدورات .

    2 .  جداول المواعيد .

     3 .  توزيع الدرجات والنتائج .

🎯 تحدي المبرمج المنظم : قم بإنشاء جدول بسيط في صفحتك يعرض “جدولك الدراسي الأسبوعي” . اجعل العمود الأول لـ “اليوم” . والعمود الثاني لـ “المادة البرمجية” . أضف 3 صفوف على الأقل .

Scroll to Top