عند تعلّم تطوير الويب ستقابل ثلاث لغات أساسية: HTML و CSS و JavaScript. كثيرون يخلطون بينها، لكن لكل واحدة دور مختلف تمامًا. لنوضّحها بأبسط طريقة.
HTML — الهيكل 🏗️
HTML (اختصار لـ HyperText Markup Language) هي لغة الترميز التي تبني هيكل الصفحة: العناوين، الفقرات، الصور، الروابط، والأزرار.
فكّر فيها كـهيكل المبنى: الجدران والغرف والأبواب — موجودة لكن بلا دهان ولا أثاث.
<h1>مرحبًا</h1>
<p>هذه فقرة نصّية.</p>
CSS — التصميم 🎨
CSS (اختصار لـ Cascading Style Sheets) هي لغة الأنماط التي تتحكّم في الشكل: الألوان، الخطوط، المسافات، والتخطيط (Layout).
فكّر فيها كـالدهان والديكور والأثاث: تحوّل الهيكل الفارغ إلى مكان جميل.
h1 { color: purple; font-size: 32px; }
JavaScript — التفاعل ⚡
JavaScript هي لغة البرمجة التي تضيف الحياة: ماذا يحدث عند الضغط على زر؟ كيف تتغيّر البيانات دون إعادة تحميل الصفحة؟
فكّر فيها كـالكهرباء والأجهزة الذكية: تجعل المبنى يتفاعل معك.
button.addEventListener("click", () => alert("تم الضغط!"));
جدول المقارنة السريع
| الجانب | HTML | CSS | JavaScript |
|---|---|---|---|
| النوع | لغة ترميز | لغة أنماط | لغة برمجة |
| الدور | الهيكل | التصميم | التفاعل |
| السؤال الذي يجيب عنه | ماذا يوجد؟ | كيف يبدو؟ | ماذا يحدث؟ |
| مثال | عنوان، صورة | لون، خط | زر يستجيب للضغط |
ما الترتيب الصحيح للتعلّم؟
- HTML — تعلّم بناء الهيكل أولًا.
- CSS — ثم نسّق هذا الهيكل وزيّنه.
- JavaScript — وأخيرًا أضف التفاعل والمنطق.
هذا الترتيب ليس عشوائيًّا — كل لغة تبني على سابقتها، ولا يمكن تنسيق هيكل غير موجود، ولا برمجة تفاعل بلا عناصر تتفاعل معها.
الخلاصة
الثلاثة ليست بدائل بل شركاء: HTML يبني، CSS يجمّل، و JavaScript يحرّك. أي موقع تتصفّحه الآن يستخدمها معًا.