أساسيات HTML وCSS وجافاسكربت: من أين تبدأ

صفحة الويب ثلاث طبقات: HTML للهيكل والمعنى، وCSS للمظهر والتخطيط، وجافاسكربت للتفاعل. تعرّف على دور كل منها وترتيب تعلمها بأمثلة قصيرة.

فريق ثيبس إنترناشيونالنُشر في 19 سبتمبر 20269 دقائق قراءة

أساسيات HTML وCSS وجافاسكربت: من أين تبدأ

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

كيف تعمل الطبقات الثلاث معًا

حين تفتح صفحة، يحمّل المتصفح ملف HTML ويقرؤه من أعلى إلى أسفل، ويبني منه شجرة من العناصر تسمى نموذج كائن المستند (DOM). ثم يحمّل ملفات CSS المرتبطة ويطبق أنماطها على هذه العناصر، ثم يشغّل ملفات جافاسكربت التي تستطيع قراءة الشجرة وتعديلها استجابة لما يفعله الزائر.

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

وفي الأمثلة التالية نبني صفحة صغيرة لمخبز افتراضي، لنرى الطبقات الثلاث تعمل على الصفحة نفسها.

HTML: هيكل الصفحة ومعناها

HTML لغة ترميز لا لغة برمجة: لا تحتوي منطقًا ولا شروطًا، بل تصف أجزاء المحتوى: هذا عنوان، وهذه فقرة، وهذه قائمة تنقل، وهذا زر. تتكون الصفحة من عناصر (Elements) تحددها الوسوم (Tags)، وقد يحمل العنصر سمات (Attributes) تضيف معلومات، مثل السمة href التي تحدد وجهة الرابط، والسمة alt التي تصف الصورة لمن لا يراها.

<!DOCTYPE html>
<html lang="ar" dir="rtl">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>مخبز الحي</title>
  <link rel="stylesheet" href="style.css">
</head>
<body>
  <header>
    <button class="menu-toggle" aria-expanded="false" aria-controls="main-menu" hidden>القائمة</button>
    <nav id="main-menu">
      <a href="products.html">منتجاتنا</a>
      <a href="contact.html">تواصل معنا</a>
    </nav>
  </header>
  <main>
    <h1>خبز طازج كل صباح</h1>
    <p>نخبز يوميًا من السادسة صباحًا، ونوصل الطلبات داخل المدينة.</p>
    <img src="bread.webp" alt="أرغفة خبز عربي طازجة على رف خشبي" width="800" height="533">
  </main>
  <script src="app.js" defer></script>
</body>
</html>

ما الذي يستحق الانتباه في هذا المثال؟

السمتان lang وdir في أول الصفحة تخبران المتصفح وقارئات الشاشة وأدوات الترجمة بأن اللغة عربية والاتجاه من اليمين إلى اليسار. وإن كان موقعك بلغتين فلكل نسخة قيمها، وتفاصيل ذلك في بناء موقع ثنائي اللغة.
وسم viewport ضروري لكي تُعرض الصفحة بعرض شاشة الجوال الفعلي لا بعرض حاسوب مصغّر.
العناصر الدلالية مثل header وnav وmain تصف دور كل جزء، فتفهمها قارئات الشاشة ومحركات البحث، وتسهّل قراءة الشيفرة وصيانتها.
عنوان h1 واحد واضح يلخص الصفحة، وتحته عناوين h2 وh3 بتسلسل منطقي. اختر مستوى العنوان حسب موقعه في الهيكل، لا حسب الحجم الذي تريده؛ فالحجم مهمة CSS.
الزر والرابط ليسا شيئًا واحدًا: الرابط ينقلك إلى صفحة أو موضع، والزر ينفذ إجراء. استخدام عنصر عام قابل للنقر بدل الزر يفسد التنقل بلوحة المفاتيح.
width وheight للصورة يحجزان مساحتها قبل تحميلها فلا تقفز الصفحة، ووصف alt يخدم المكفوفين ويظهر إن تعذر تحميل الصورة.
السمة defer تجعل السكربت يُحمَّل دون أن يوقف قراءة الصفحة، ويُنفَّذ بعد اكتمال بنائها.

أخطاء HTML الشائعة: بناء كل شيء بعناصر عامة بلا معنى، وحقول نماذج بلا عناوين مرتبطة بها، وصور بلا وصف. وكلها تمس إمكانية الوصول مباشرة.

CSS: المظهر والتخطيط

تتكون CSS من قواعد، ولكل قاعدة مُنتقٍ (Selector) يحدد العناصر المستهدفة، ومجموعة إعلانات من خاصية وقيمة. هذه أنماط صفحة المخبز:

:root { --brand: #0b6e4f; --text: #1f2933; }
body { margin: 0; font-family: system-ui, sans-serif; line-height: 1.7; color: var(--text); }
main { max-width: 42rem; margin-inline: auto; padding: 1rem; }
img { max-width: 100%; height: auto; }
.menu-toggle { background: var(--brand); color: #fff; padding: 0.75rem 1.25rem; border: 0; border-radius: 8px; }

المفاهيم التي تحتاج إلى فهمها جيدًا:

المنتقيات: باسم العنصر مثل main، أو بالصنف (Class) ويُكتب بنقطة قبله، أو بالمعرّف (ID) ويُكتب بعلامة # قبله. اعتمد على الأصناف غالبًا، فهي مرنة وقابلة لإعادة الاستخدام.
التتالي والأولوية (Cascade and Specificity): حين تستهدف أكثر من قاعدة العنصر نفسه، يقرر المتصفح أيها يُطبَّق حسب دقة المنتقي وترتيب القواعد. أكثر حيرة المبتدئين في CSS مصدرها هنا، ففهمه مبكرًا يوفر ساعات.
نموذج الصندوق (Box Model): كل عنصر صندوق له محتوى، ثم حشوة داخلية (padding)، ثم إطار (border)، ثم هامش خارجي (margin).
التخطيط بـFlexbox وGrid: الأول لترتيب العناصر في اتجاه واحد، صفًّا أو عمودًا، والثاني لشبكات من صفوف وأعمدة معًا. وكلاهما يتبع اتجاه الصفحة تلقائيًا، فينعكس الترتيب في الصفحات العربية دون جهد إضافي.
الخصائص المنطقية (Logical Properties): لاحظ margin-inline في المثال بدل الهامشين الأيسر والأيمن. هذه الخصائص تعني «بداية السطر ونهايته» فتعمل صحيحة بالعربية والإنجليزية معًا، وهي أنسب خيار للمواقع ثنائية اللغة.
المتغيرات (Custom Properties): مثل --brand، تعرّف اللون مرة وتستعمله في كل مكان، فيصبح تغيير الهوية تعديلًا لسطر واحد.
الوحدات: الوحدة rem نسبية إلى حجم الخط الأساسي، فتحترم إعدادات الزائر إن كبّر الخط، بخلاف البكسل الثابت في كثير من الحالات.
استعلامات الوسائط (Media Queries): تغيّر التخطيط حسب عرض الشاشة، وهي أساس التصميم المتجاوب.

جافاسكربت: السلوك والتفاعل

جافاسكربت لغة برمجة كاملة فيها متغيرات وشروط وحلقات ودوال. وفي المتصفح تستمع إلى الأحداث مثل النقر والإرسال والتمرير، وتقرأ عناصر الصفحة وتعدّلها، وتجلب البيانات من الخادم دون إعادة تحميل الصفحة. هذا السكربت يحوّل قائمة التنقل في صفحة المخبز إلى قائمة تُفتح وتُغلق بزر:

const toggle = document.querySelector('.menu-toggle');
const menu = document.querySelector('#main-menu');

toggle.hidden = false;
menu.hidden = true;

toggle.addEventListener('click', () => {
  const isOpen = toggle.getAttribute('aria-expanded') === 'true';
  toggle.setAttribute('aria-expanded', String(!isOpen));
  menu.hidden = isOpen;
});

يختار السطران الأولان الزر والقائمة، ثم يُظهر السكربت الزر ويخفي القائمة. لاحظ أن الزر مخفي في HTML والقائمة ظاهرة، فإن لم يعمل السكربت لأي سبب بقيت الروابط متاحة، وهذا تطبيق عملي للتحسين التدريجي. وعند كل نقرة تنقلب حالة القائمة، وتتغير السمة aria-expanded لتخبر مستخدمي قارئات الشاشة هل القائمة مفتوحة أم مغلقة. وفي موقع حقيقي ستضيف استعلام وسائط يُبقي القائمة ظاهرة كاملة على الشاشات الكبيرة.

ثلاث قواعد تحفظك من أخطاء مكلفة:

استعمل ما توفره HTML أولًا. التحقق من الحقول المطلوبة وصيغة البريد متاح بسمات HTML مثل required، وعنصرا details وsummary يصنعان قسمًا قابلًا للطي دون أي سكربت.
جافاسكربت من أثقل موارد الصفحة على الجوال، لأنها تُحمَّل ثم تُحلَّل ثم تُنفَّذ على معالج الهاتف. لا تضف مكتبة كاملة لمهمة من عشرة أسطر، وراجع سرعة الموقع.
التحقق في المتصفح لتحسين التجربة لا للحماية. أي شخص يستطيع تجاوزه، فالتحقق الحقيقي من البيانات يجري على الخادم، كما يشرح أمان المواقع.

ترتيب التعلم: من أين تبدأ فعلًا

تعلّم اللغات الثلاث بالترتيب، واربط كل مرحلة بمشروع صغير تنهيه:

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

الأدوات التي تحتاجها قليلة: محرر شيفرة مثل VS Code، ومتصفح حديث تستخدم أدوات المطور فيه لفحص العناصر وقراءة الأخطاء في وحدة التحكم (Console) وتجربة مقاسات الشاشات، ونظام Git لحفظ نسخ عملك. أما المصادر فاختر مرجعًا توثيقيًا مفتوحًا من المراجع التي يحررها مجتمع مطوري المتصفحات، ففيها شرح كل عنصر وخاصية بأمثلة ومعلومات دعم المتصفحات، وأضف إليه دورة تفاعلية مجانية تكتب فيها الشيفرة داخل المتصفح، وأداة للتحقق من صحة HTML تنبهك إلى الأخطاء. مرجع واحد مع تطبيق مستمر أنفع من جمع عشر دورات. وللخطة الأوسع التي تشمل ما بعد هذه المرحلة، راجع كيف تتعلم البرمجة من الصفر.

أخطاء شائعة تبطئ المبتدئين

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

متى تنتقل إلى الأطر وأنظمة إدارة المحتوى؟

حين تستطيع بناء موقع متعدد الصفحات متجاوب مع الشاشات، فيه تفاعلات بجافاسكربت الخالصة، وتفهم لماذا تعمل شيفرتك، تكون مستعدًا للخطوة التالية. أطر الواجهات مثل React وVue وSvelte مفيدة للواجهات المعقدة كلوحات التحكم والتطبيقات، وأنظمة إدارة المحتوى مناسبة لمواقع المحتوى والشركات، كما يوضح دليل أنظمة إدارة المحتوى. وحتى إن عملت على نظام جاهز، فإن فهمك لـHTML وCSS هو ما يسمح لك بتعديل القالب وإصلاح المشكلات بدل انتظار غيرك. ولترى أين تقع هذه المهارات في مشروع موقع كامل، ارجع إلى الدليل الشامل لبناء موقع شركتك.

خلاصة عملية

HTML للهيكل والمعنى، وCSS للمظهر والتخطيط، وجافاسكربت للسلوك، وابدأ بها بهذا الترتيب.
اكتب HTML دلالية: عناصر تصف دور كل جزء، وعناوين مرتبة، وأزرار حقيقية، ووصف لكل صورة.
افهم التتالي ونموذج الصندوق وFlexbox وGrid قبل أي شيء آخر في CSS، واستخدم الخصائص المنطقية من البداية.
اجعل جافاسكربت طبقة تحسين لا شرطًا لعمل الصفحة، واستعمل إمكانات HTML المدمجة أولًا.
تحقق من البيانات على الخادم دائمًا، مهما كان التحقق في المتصفح جيدًا.
أنهِ مشروعًا صغيرًا في كل مرحلة، واختبره على هاتف حقيقي.

شارك المقالةWhatsApp LinkedIn X