🌟 مقدمة تحفيزية : أهلاً بك يا مبرمج المستقبل! في الدرس السابق جهزنا أدواتنا ، والآن حان الوقت لنبني “الهيكل العظمي” لموقعنا . كما أن لجسم الإنسان نظاماً وترتيباً ، فإن لصفحات الويب هيكلاً ثابتاً لا يتغير ، وبدونه لا يمكن للمتصفح أن يفهم موقعك بشكل صحيح .
📋 الكود السحري (الهيكل الأساسي) :
عندما تفتح ملف index.html في برنامج VS Code ، انسخ هذا الكود وضعه بداخله . هذا هو “القالب الأساسي” لكل صفحة ويب في العالم :
html
<DOCTYPE html!><html lang="ar" dir="rtl"><head>
<meta charset="UTF-8">
<title>أكاديمية قياوي | أول صفحة لي</title>
</head>
<body>
<h1>مرحباً بكم في أكاديمية قياوي</h1>
<p>هذا هو بيتي البرمجي الأول.</p>
</body>
</html>
🔍 شرح المكونات (ببساطة) :
1 . <!DOCTYPE html>: هي رسالة للمتصفح تقول له : “انتبه ، أنا أتحدث لغة HTML الحديثة (إصدار 5)” .
2 . <html> : هو الحاوية الكبرى ، كل شيء يخص الموقع يجب أن يكون داخل هذا الوسم .
• lang="ar” : لتعريف المتصفح أن لغة الموقع هي العربية .
• dir="rtl" : لتوجيه النص من اليمين إلى اليسار (Right-to-Left) .
3 . <head> (الرأس) : هذا الجزء مخصص للمتصفح ومحركات البحث . ما يُكتب هنا لا يظهر للزائر داخل الصفحة ، بل يظهر في “عنوان التبويب” في الأعلى أو يُستخدم لتعريف الموقع .
• <title> : هنا نكتب الاسم الذي يظهر في شريط المتصفح العلوي .
4 . <body> (الجسم) : هذا هو الجزء الأهم للزائر . كل ما تضعه هنا من نصوص ، صور ، أزرار، وفيديوهات هو ما سيراه الناس عند زيارة موقعك .
💡 نصيحة “أكاديمية قياوي” للسرعة :
في برنامج VS Code ، لا تتعب نفسك بكتابة هذا الهيكل يدوياً في كل مرة . فقط قم بما يلي :
اكتب علامة التعجب ! في الملف .
اضغط على زر Enter أو Tab .
سحر ! سيقوم البرنامج بكتابة الهيكل كاملاً لك في ثانية واحدة .
🎯 التحدي التطبيقي (تحدي التأسيس) : قم بنسخ الكود أعلاه، وغير ما بداخل وسم <title> ليكون “اسمي في عالم البرمجة” ، وغير ما بداخل <h1> ليكون “أهلاً بك في أكاديميته الخاصة” . ثم احفظ الملف وشاهده في المتصفح .
🚀 الخطوة القادمة : بعد أن بنينا الهيكل ، سنبدأ في الدرس القادم (الرابع) بتعلم كيف نملأ هذا الهيكل بالعناوين والفقرات ونرسم ملامح المحتوى الحقيقي .