إيه الفرق بين HTML وCSS وJavaScript؟ شرح للمبتدئين بمثال واحد

لو لسه داخل عالم تطوير المواقع، أكيد سمعت الأسماء التلاتة دي مع بعض: HTML وCSS وJavaScript. وغالبًا السؤال اللي في دماغك: هم إيه بالظبط؟ وليه تلاتة مش واحدة؟

أسهل تشبيه: تخيّل بيت.

• HTML هي الحيطان والأوض: الهيكل.
• CSS هي الدهان والفرش والإضاءة: الشكل.
• JavaScript هي الكهربا: اللي بتخلي النور يولّع لما تدوس على المفتاح.

وعشان نفهمهم صح، هنبني زرار واحد بسيط بالتلاتة.

HTML: المحتوى والهيكل

HTML بتقول للمتصفح «فيه إيه في الصفحة»: عنوان، فقرة، صورة، زرار. كل حاجة بتتكتب جوه وسوم (tags):

<h1>عدّاد الضغطات</h1>
<p>دوس على الزرار وشوف الرقم بيزيد.</p>
<button id="counter">ضغطت ٠ مرة</button>

لو فتحت الكود ده في المتصفح، هتلاقي عنوان وفقرة وزرار. شغالين، بس شكلهم عادي جدًا، ولو دوست على الزرار مش هيحصل حاجة.

CSS: الشكل

CSS بتقول للمتصفح «الحاجات دي شكلها إيه»: الألوان، والخطوط، والمسافات، ومكان كل حاجة في الصفحة.

button {
  background: #2cadff;
  color: white;
  font-size: 1.2rem;
  padding: 12px 24px;
  border: none;
  border-radius: 12px;
  cursor: pointer;
}

button:hover {
  opacity: 0.85;
}

دلوقتي الزرار بقى أزرق، وكبير، وحوافه مدوّرة، ولما تقف عليه بالماوس بيتغير شوية. بس لسه لو دوست عليه مش هيحصل حاجة.

JavaScript: الحركة والتفاعل

JavaScript هي لغة البرمجة الوحيدة اللي المتصفحات بتشغّلها بشكل مباشر. هي اللي بتخلي الصفحة ترد عليك:

const button = document.getElementById("counter");
let count = 0;

button.addEventListener("click", () => {
  count = count + 1;
  button.textContent = `ضغطت ${count} مرة`;
});

الكود ده بيقول: «لما حد يدوس على الزرار، زوّد العداد واحد، وغيّر الكلام اللي على الزرار». دلوقتي كل ضغطة بتغيّر الرقم.

إزاي بيشتغلوا مع بعض؟

الملف اللي بيجمعهم شكله كده:

<!doctype html>
<html lang="ar" dir="rtl">
  <head>
    <meta charset="utf-8" />
    <title>عدّاد الضغطات</title>
    <link rel="stylesheet" href="style.css" />
  </head>
  <body>
    <h1>عدّاد الضغطات</h1>
    <p>دوس على الزرار وشوف الرقم بيزيد.</p>
    <button id="counter">ضغطت ٠ مرة</button>
    <script src="script.js"></script>
  </body>
</html>

لاحظ حاجتين:

• lang="ar" dir="rtl" بتقول للمتصفح إن الصفحة عربي ومن اليمين للشمال.
• ملف CSS بيتربط فوق، وملف JavaScript تحت، عشان الكود يشتغل بعد ما الزرار يكون اتعمل.

جدول المقارنة

أتعلمهم بأنهي ترتيب؟

1. HTML الأول: أسبوع أو اتنين كفاية للأساسيات.
2. CSS بعدها: هتاخد وقت أطول، خصوصًا ترتيب العناصر (Flexbox وGrid).
3. JavaScript في الآخر: دي اللي فيها برمجة فعلًا، وهتاخد أطول وقت.

وما تستناش لحد ما «تخلص» واحدة عشان تبدأ اللي بعدها. أول ما تعرف تعمل صفحة بسيطة بـ HTML، جرّب تلوّنها، وبعدها جرّب تخليها تتحرك.

جرّب بنفسك دلوقتي

مش محتاج تسطّب أي حاجة. افتح موقع زي CodePen أو أي محرر أونلاين، الصق الأكواد التلاتة اللي فوق، وشوف الزرار بيشتغل. وبعدين غيّر حاجة: اللون، أو الكلام، أو خلي العداد يزيد ٢ بدل ١. أحسن طريقة تتعلم بيها إنك تكسر الكود وتصلّحه.

الخلاصة

HTML بتقول فيه إيه، وCSS بتقول شكله إيه، وJavaScript بتقول بيعمل إيه. التلاتة مع بعض هم أساس كل موقع على النت. ولو عايز تعرف تكمّل منين بعدهم، شوف خريطة تعلم البرمجة للمبتدئين.