HTML وCSS وJavaScript: مهمة كل طبقة
افهم ما يضيفه كل من HTML وCSS وJavaScript إلى صفحة الويب، ولماذا يجعل فصل المسؤوليات المواقع أسهل في الصيانة.
HTML وCSS وJavaScript: مهمة كل طبقة درس مجاني في Frontend Academy على CoddyKit. هذا هو الدرس 2 من أصل 4. يمكنك قراءة الدرس كاملاً أدناه مجاناً — ثم تمرن عليه مباشرة في المتصفح باستخدام محرر أكواد مدمج ومدرس ذكاء اصطناعي متاح 24/7. هذا الدرس جزء من مسار التعلم في Frontend Academy، وتقدمك يتزامن عبر الويب وتطبيق CoddyKit. تتضمن دورة Frontend Academy 4 دروس في المجموع.
الركائز الثلاث للويب
تُبنى كل صفحة ويب من ثلاث تقنيات متكاملة: HTML للبنية، وCSS للعرض، وJavaScript للسلوك. ويُعد إبقاء هذه التقنيات منفصلة أحد أهم المبادئ في تطوير الواجهات الأمامية.
HTML — البنية والمعنى
تصف HTML (HyperText Markup Language) ماهية المحتوى. فالعنوان، والفقرة، والقائمة، والنموذج — تمنح HTML المحتوى معنى دلاليًا تفهمه المتصفحات ومحركات البحث وقارئات الشاشة جميعًا.
<!DOCTYPE html>
<html lang="en">
<head><title>My Page</title></head>
<body>
<h1>Hello World</h1>
<p>This is a paragraph.</p>
</body>
</html>CSS — العرض والتنسيق
تصف CSS (Cascading Style Sheets) كيفية ظهور المحتوى. فالألوان والخطوط والمسافات والتخطيط والرسوم المتحركة كلها تُكتب في CSS. ويعني إبقاء التنسيق في CSS أنكم تستطيعون إعادة تصميم الموقع بأكمله عبر تعديل ملف واحد.
body {
font-family: system-ui, sans-serif;
background: #f0f4f8;
color: #1a202c;
}
h1 {
color: #2b6cb0;
}JavaScript — السلوك والتفاعل
تصف JavaScript ما يحدث استجابةً لإجراءات المستخدم أو للبيانات. فالنقر على زر، وإرسال نموذج، وتحديث عدّاد، وجلب منشورات جديدة — كلها سلوكيات تقع ضمن نطاق JavaScript.
document.querySelector('button').addEventListener('click', () => {
document.querySelector('#count').textContent++;
});لماذا نفصل الطبقات الثلاث؟
يعني فصل الاهتمامات أن مصممًا يستطيع تغيير CSS دون المساس بـ JavaScript، وأن مهندسًا يستطيع إضافة ميزة دون إعادة كتابة HTML، وأن HTML نفسها يمكن أن تستخدم سمات CSS متعددة. يصبح الكود أسهل في الصيانة والاختبار وإعادة الاستخدام.
HTML من دون CSS
قبل تحميل CSS، يعرض المتصفح HTML الخام: نصًا عاديًا، وروابط تعمل، وعناصر تحكم أصلية للنماذج. وهذه هي التجربة الأساسية للمستخدمين الذين لديهم اتصالات بطيئة أو عطّلوا JavaScript. وتجعل HTML الجيدة هذه التجربة مقبولة.
التحسين التدريجي
التحسين التدريجي: ابدأوا بـ HTML تعمل، ثم أضيفوا CSS لتحسين المظهر، ثم أضيفوا JavaScript لإضافة السلوك. تحسّن كل طبقة الطبقة السابقة، ولذلك إذا تعطلت إحدى الطبقات تتدهور التجربة تدريجيًا وبصورة سليمة.
الملفات المضمّنة مقابل الملفات الخارجية
يمكنكم تضمين CSS داخل وسوم <style> وJavaScript داخل وسوم <script>، لكن ملفات .css و.js الخارجية أفضل. إذ يستطيع المتصفح تخزينها مؤقتًا، كما يمكن تقسيمها إلى ملفات أصغر وصيانتها بشكل مستقل.
يطبّق المتصفح التقنيات الثلاث كلها
يقرأ المتصفح HTML لبناء DOM، ويقرأ CSS لبناء CSSOM، ثم يطبّق الأنماط وينفّذ JavaScript التي يمكنها تعديل كليهما. يساعدكم فهم هذا الترتيب على كتابة كود يعمل في الوقت المناسب.
أخطاء شائعة: خلط الطبقات
يؤدي وضع التنسيق في HTML (سمات style="")، ووضع HTML في JavaScript (عبر دمج السلاسل النصية)، ووضع السلوك في CSS (باستخدام أساليب display:none) إلى خلط الطبقات. ويجعل كل أسلوب من هذه الأساليب تصحيح الكود واختباره وتسليمه إلى أعضاء الفريق أكثر صعوبة.
الأطر البرمجية لا تغيّر الأساسيات
ما تزال React وVue وAngular تنتج HTML وCSS وJavaScript في المتصفح. ويعني فهم الطبقات الثلاث أنكم تفهمون مخرجات كل إطار، وتستطيعون تصحيح المشكلات التي تخفيها مستويات التجريد.
تحقق سريع
ما الطبقة المسؤولة عن تحديد تخطيط صفحة الويب ومظهرها المرئي؟
مراجعة: دور كل طبقة
HTML = البنية والمعنى. CSS = المظهر والتخطيط. JavaScript = السلوك والتفاعل. افصلوا هذه الطبقات الثلاث بوضوح في قاعدة الكود، وسيشكركم أعضاء فريقكم — وأنتم في المستقبل — على ذلك.
الأسئلة الشائعة
هل درس «HTML وCSS وJavaScript: مهمة كل طبقة» مجاني؟
نعم — نص درس «HTML وCSS وJavaScript: مهمة كل طبقة» كامل متاح مجاناً هنا على الويب. لتمرينه بشكل تفاعلي (محرر أكواد مدمج ومدرس ذكاء اصطناعي متاح 24/7) وفتح باقي دورة Frontend Academy، انتقل إلى CoddyKit PRO. تتضمن دورة Frontend Academy 4 دروس في المجموع.
ماذا ستتعلم في «HTML وCSS وJavaScript: مهمة كل طبقة»؟
افهم ما يضيفه كل من HTML وCSS وJavaScript إلى صفحة الويب، ولماذا يجعل فصل المسؤوليات المواقع أسهل في الصيانة. تتمرن على Frontend Academy مع أكواد عملية تشغلها مباشرة في المتصفح، ومدرس ذكاء اصطناعي متاح 24/7 يجيب على أسئلتك أثناء عملك.
هل أحتاج إلى خبرة سابقة لأبدأ Frontend Academy؟
لا تُشترط خبرة سابقة. Frontend Academy على CoddyKit منظم للمبتدئين حتى المتقدمين، لذا يمكنك البدء من هنا أو من البداية والتقدم بسرعتك الخاصة. هذا هو الدرس 2 من أصل 4.
كم من الوقت يستغرق درس «HTML وCSS وJavaScript: مهمة كل طبقة»؟
معظم دروس CoddyKit تستغرق حوالي 5–10 دقائق. كل منها موجز وتفاعلي، لذا تحرز تقدماً مستمراً وتستأنف من حيث توقفت عبر الويب والتطبيق.
هل يمكنني كتابة وتشغيل أكواد في درس Frontend Academy هذا؟
نعم. كل درس في Frontend Academy يتضمن محرر أكواد مدمج، لذا تكتب وتشغل أكواداً حقيقية مباشرة في متصفحك وتحصل على تعليقات فورية من الذكاء الاصطناعي — بدون إعداد محلي.
جميع الدروس في هذه الدورة
- المتصفحات وDNS وHTTP: دورة حياة الطلب
- HTML وCSS وJavaScript: مهمة كل طبقة
- كيف تُصيّر الصفحة: تحليل DOM وCSSOM والتخطيط والرسم
- أدوات المطور: فتح DevTools واستخدامها