درس ١: مقدمة شاملة في عالم الويب

الخطوة الأولى لتصبح مطوّر ويب محترف تبدأ من هنا!

تخيّل أنك تستطيع بناء موقعك الخاص، مدونتك، متجرك الإلكتروني، أو حتى تطبيق ويب تفاعلي… كل هذا يبدأ من فهم بسيط: كيف يعمل الإنترنت فعليًا؟

في هذا الدرس سنأخذ يدك خطوة بخطوة لنفهم معًا:

ما هو الـ "ويب" وكيف تصل الصفحة إلى شاشتك؟
ما هي التقنيات الثلاث الأساسية (HTML, CSS, JavaScript)؟
ما هي الأدوات التي ستحتاجها فعليًا لتبدأ الآن؟
نظرة سريعة على تطور الويب حتى وصلنا إلى HTML5

ماهو الويب ؟

الويب، أو الشبكة العنكبوتية العالمية، هو نظام من المستندات المترابطة (صفحات الويب) التي يمكن الوصول إليها عبر الإنترنت باستخدام متصفح ويب. تعمل هذه الصفحات فوق الإنترنت وهي مليئة بالمعلومات النصية والصورية والفيديوهات، وتتيح للمستخدمين الوصول إليها ومشاركتها.

ماهي مكونات الويب؟

1- صفحات الويب: صفحة الويب عبارة عن ملف كأي ملف بجهازك لكن يحتوي على كود برمجي. هذا الكود البرمجي يحتوى على النصوص والصور والفيديوهات التي تراها عندما تتصفح أي موقع الكتروني أو اي صفحة ويب . هذا الكود البرمجي قد يكون مكتوب مثلا بلغة HTML وهي لغة خاصة لكتابة صفحات المواقع الالكترونية.

2- متصفح الويب: هو البرنامج الذي نستخدمه لعرض ملفات الويب أي بمعنى اخر لعرض صفحات المواقع الالكترونية. فبدون هذا المتصفح لن نستطيع تصفح اي موقع الكتروني. ومن اشهر المتصفحات قوقل كروم و فايرفوكس ومايكروسوفت ايدج وسفاري.

3- عنوان URL: هو عنوان خاص لكل صفحة بالانترنت مثل WWW.ABRMJ.COM يعرض الصفحة الرئيسية لمنصة ابرمج.

4- الخادم أو السيرفر: هو جهاز يقوم بتخزين صفحات الويب أي صفحات الانترنت. لذلك عندما نذهب لاي موقع الكتروني مثلا WWWW.ABRMJ.COM نحن نتصل بالخادم أي السيرفر لنطلب منه هذه الصفحة التي مخزنه عنده ثم يقوم الخادم بارسالها لنا ونقوم باستعراض هذه الصفحة عن طريق متصفح الانترنت.

كيف يعمل الويب؟ رحلة الصفحة من الخادم إلى عينيك

عندما تكتب في المتصفح https://google.com وتضغط إنتر، يحدث ما يلي:

أنت ──(طلب HTTP/S)----> خادم جوجل
خادم جوجل ──(يرد بملفات HTML, CSS, JS, صور...)---->المتصفح
المتصفح يقرأ الملفات ---> يبني الصفحة ---> تظهر لك!

🏗️

HTML

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

🎨

CSS

التصميم والألوان

⚙️

JavaScript

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

نلاحظ هنا ثلاث لغات برمجية وهي HTML و CSS و JavaScript.

تخيل الان اننا سنقوم بانشاء موقع الكتروني عبارة عن سؤال وجواب. الاجابة لا تظهر الا عندما يضغط المستخدم على زر اظهر الاجابة. والسؤال يكون باللون الاحمر والاجابة باللون الاخضر.

HTML: نستخدم هذه اللغة لكتابة كود الموقع كامل ويحتوي على جميع الاسئلة والاجوبة والازرة. لكن عند تشغيل الموقع ستظهر الاسئلة والاجوبة معا وجميعها باللون الاسود لماذا ؟ لاننا لم نستخدم بعد CSSو JavaScript.

CSS: نستخدم هذه اللغة لتنسيق الصفحة وتلوينها فمثلا الان بهذه اللغة نستطيع ان نجعل السؤال باللون الاحمر والاجابة باللون الاخضر. ونستطيع ان ننسق الصفحة فمثلا السؤال يكون على يمين الصفحة وهناك زر في نهاسة سطر الاجابة ملون بلون ازرق مثلا. لكن عند تشغيل الصفحة لن يعمل الزر الذي اضفناه لماذا؟ لاننا لم نستخدم الجافاسكربت

JavaScript: مهمتها جعل الموقع الالكتروني متجاوب مع المستخدم. بمعنى اخر الان نستطيع ان نجعل الزر يعمل عند النقر عليه بحيث يقوم باظهر الاجابة للسؤال. وبهذا تعلمنا الفائدة من هذه اللغات الثلاثة التي غالبا تستخدم مع بعض.

الأدوات التي تحتاجها لتبدأ فورًا (مجّانية 100%)

محرر الأكواد

✅ VS Code (الأكثر شهرة)
✅ Replit (بدون تثبيت، تكتب مباشرة في المتصفح)
✅ CodePen (ممتاز لتجربة الأكواد فورًا)

المتصفح + أدوات المطور

🌐 Google Chrome أو Firefox
اضغط F12 أو يمين → "فحص العنصر" لترى كود أي موقع!

من الويب 1.0 إلى الويب الحديث

الويب 1.0 (1990–2005): صفحات ثابتة، قراءة فقط
الويب 2.0 (2005–الآن): تفاعل، يوتيوب، فيسبوك، التعليقات
الويب 3.0 (المستقبل): ذكاء اصطناعي، تطبيقات لا مركزية

أول صفحة HTML في حياتك (جربها الآن!)

انسخ الكود التالي، احفظه باسم index.html وافتحه بأي متصفح:

<!DOCTYPE html>
<html lang="ar" dir="rtl">
<head>
    <meta charset="UTF-8">
    <title>صفحتي الأولى</title>
</head>
<body>
    <h1>مرحباً! أنا أتعلم تطوير الويب 🎉</h1>
    <p>هذه أول صفحة HTML أكتبها بنفسي.</p>
</body>
</html>