الفرق بين HTML وCSS وJavaScript ببساطة (بمثال البيت)

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

HTML: هيكل البيت

HTML (اختصار HyperText Markup Language) هي اللي بتحدد إيه الموجود في الصفحة: عنوان، فقرة، صورة، زرار، جدول. زي الطوب والحيطان في البيت: بتقول فين الأوضة وفين الشباك، بس من غير ألوان ولا ديكور.

HTML بتتكتب بحاجة اسمها الوسوم (Tags)، وكل وسم بيتقفل غالباً بوسم شبهه فيه شَرطة:

<h1>أهلاً بيك</h1>
<p>دي أول صفحة ليا.</p>
<button id="btn">اضغط هنا</button>
<p id="msg"></p>

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

CSS: الدهان والديكور

CSS (اختصار Cascading Style Sheets) بتحدد شكل الحاجات: الألوان، والخطوط، والمسافات، ومكان كل عنصر، وشكل الصفحة على الموبايل. زي الدهان والأرضيات والنور في البيت.

#btn {
  background: #0B6BFF;
  color: white;
  padding: 12px 24px;
  border: none;
  border-radius: 12px;
  font-size: 18px;
}
#btn:hover {
  background: #0957d0;
}

الكود ده بيقول: الزرار اللي اسمه btn خليه أزرق، والكلام اللي عليه أبيض، وحواليه مسافة، وحوافه مدوّرة. ولما الماوس يعدّي عليه، يغمق شوية.

JavaScript: الكهرباء

JavaScript هي اللي بتخلّي الصفحة تتفاعل: لما تدوس زرار يحصل حاجة، أو رسالة تظهر، أو حاجة تتحسب، أو بيانات تتجاب من السيرفر. زي الكهرباء: من غيرها البيت شكله حلو بس مفيش حاجة بتشتغل.

const btn = document.getElementById("btn");
const msg = document.getElementById("msg");

btn.addEventListener("click", () => {
  msg.textContent = "أهلاً بيك في بايت لاب!";
});

الكود ده بيقول: هات الزرار والفقرة الفاضية، ولما حد يدوس على الزرار، اكتب جوه الفقرة "أهلاً بيك في بايت لاب!".

نفس الصفحة في 3 مراحل

شوف نفس الصفحة وهي بتكبر خطوة خطوة:

الفرق بينهم في جدول

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

لما تفتح موقع، المتصفح بيستلم من السيرفر ملفات الـ HTML والـ CSS والـ JavaScript. بيقرا الـ HTML علشان يعرف إيه الموجود، ويطبّق الـ CSS علشان يرسم الشكل، ويشغّل الـ JavaScript علشان الصفحة تتفاعل معاك. التلات لغات دول هما اللي بنسميهم الواجهة الأمامية (Front-end)، وده موضوع درس 3-3 أساسيات تكنولوجيا الواجهة الأمامية في الفصل التالت: تطبيقات الويب.

3 أخطاء بيقع فيها الطلبة

1. يقول إن HTML لغة برمجة. هي لغة ترميز، وده سؤال بيتكرر.
2. يخلط بين دور CSS ودور JavaScript. القاعدة: لو الحاجة بتغيّر الشكل بس فهي CSS، ولو بتاخد قرار أو بتستجيب لفعل فهي JavaScript.
3. ينسى يقفل الوسم. <p> من غير </p> ممكن يبوّظ ترتيب الصفحة.

اختبر نفسك

1. عايز تغيّر لون عنوان الصفحة للأحمر. هتستخدم أنهي لغة؟

2. عايز رسالة تظهر لما الطالب يدوس "تسليم". أنهي لغة؟

3. عايز تضيف صورة جديدة في الصفحة. أنهي لغة؟

الإجابات: 1) CSS  ·  2) JavaScript  ·  3) HTML

HTMLCSSJavaScriptالواجهة الأماميةتطبيقات الويب