الدرس 1: حجر الأساس.. ما هي HTML وكيف يعمل الويب؟
تعلم أساسيات HTML واكتشف كيف يعمل الويب خلف الكواليس. فرق بين HTML وCSS وJS، وافهم علاقة العميل بالخادم مع بناء أول صفحة ويب حقيقية لك.
مرحباً بك في أولى خطواتك في عالم تطوير الويب على منصة "الشيفرة". اليوم سنكتشف السر الكامن خلف كل صفحة تزورها على الإنترنت. هل تساءلت يوماً كيف يفهم متصفحك (Chrome أو Safari) تلك الأزرار والنصوص؟ الإجابة تكمن في لغة واحدة: HTML.
1. ما هي HTML؟
اختصاراً لـ (HyperText Markup Language)، وهي ليست لغة برمجة بالمعنى التقليدي (أي لا تقوم بعمليات حسابية)، بل هي لغة توصيف. وظيفتها هي إخبار المتصفح عن "هيكل" الصفحة؛ أين يوجد العنوان؟ أين الفقرة؟ وأين الصورة؟
2. مثلث بناء الويب (HTML, CSS, JS)
لنتخيل أننا نبني منزلاً:
HTML: هي الطوب والأعمدة (الهيكل العظمي).
CSS: هي الطلاء، الديكور، والألوان (المظهر).
JavaScript: هي تمديدات الكهرباء، المصعد، والأجهزة الذكية (الحركة والتفاعل).
3. كيف يرى المتصفح صفحتك؟
عندما تفتح موقعاً، يقوم المتصفح بدور "المترجم". هو يقرأ أكواد HTML من الأعلى إلى الأسفل، ثم يقوم برسمها (Rendering) على الشاشة لتظهر لك بشكلها النهائي. إذا قمت بالضغط على زر Ctrl + U في أي صفحة الآن، سترى "الشيفرة" الحقيقية التي يراها المتصفح.
4. رحلة البيانات: العميل vs الخادم (Client vs Server)
بأسلوب مبسط جداً، تخيل أنك في مطعم:
العميل (Client): هو أنت (المتصفح)، تطلب "وجبة" (صفحة ويب).
الخادم (Server): هو المطبخ، حيث يتم تخزين وتجهيز الوجبات.
الإنترنت: هو "النادل" الذي ينقل طلبك للمطبخ ويعود لك بالوجبة الساخنة.
5. أول صفحة HTML لك (Hello World)
لننتقل من النظرية إلى التطبيق. افتح محرر الأكواد الخاص بك، وأنشئ ملفاً جديداً باسم index.html وضع فيه الكود التالي:
مثال برمجى
شرح الكود:
<!DOCTYPE html>: تخبر المتصفح أننا نستخدم أحدث إصدار (HTML5).
<html>: هي الحاوية الكبرى التي تضم كل شيء.
<head>: يحتوي على معلومات "خلف الكواليس" (مثل عنوان الصفحة).
<body>: هو "جسد" الصفحة، أي شيء تكتبه هنا سيراه الزائر فعلياً.
💡 تحدي "الشيفرة"
قم بتغيير النص الموجود داخل وسم <h1> واكتب فيه اسمك، ثم افتح الملف في المتصفح. هل رأيت اسمك يتصدر الصفحة؟ تهانينا، لقد أصبحت مطور ويب رسمياً!