1.3 التعرف على المثلث: HTML و CSS و JavaScript

الشرح

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

الأهم أن تدرك أن هذا الترتيب ليس اختيارياً: لا يمكنك "تزيين" هيكل غير موجود، ولا "توصيل كهرباء" ببيت بلا جدران. لهذا يبدأ كل مبرمج ويب بتعلّم HTML أولاً — فهو الأساس الذي يُبنى عليه كل شيء آخر. هذا الكورس يركّز بعمق على HTML لأنه الأساس الأهم، مع مقدمة عملية كافية في CSS وJavaScript لتفهم الصورة الكاملة وتكون قادراً على بناء صفحات حقيقية متكاملة وليس فقط هياكل عارية.

<!-- هذا HTML: يحدد الهيكل فقط -->
<button>اضغطني</button>

/* هذا CSS: يحدد الشكل */
button { background: gold; border-radius: 8px; }

// هذا JavaScript: يحدد السلوك عند التفاعل
button.addEventListener('click', () => alert('تم الضغط!'));

💡 نقطة مهمة: يمكن لصفحة أن تعمل بـ HTML فقط (بلا تنسيق ولا تفاعل)، لكن لا يمكن لـ CSS أو JavaScript أن يعملا بمفردهما بلا هيكل HTML يرتبطان به.

🎯 تمرين عملي

شاهد أي موقع تحبه، وحدد بعينك: ما الذي تعتقد أنه هيكل (نص وصور)؟ وما الذي تعتقد أنه تنسيق (ألوان وأحجام)؟ وما الذي يتحرك أو يتفاعل عند الضغط؟

📚 لمزيد من التوسّع

فهرس دروس MDN الأساسية

✅ نموذج حل مقترح

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