معاينة مجانية من دورة "كورس تعلم البرمجة من الصفر بلغة HTML"

سجّل الآن للوصول الكامل

1.2 كيف يعمل الإنترنت والمواقع؟

أهداف هذا الدرس

  • فهم الفرق بين المتصفح (Browser) والخادم (Server)
  • معرفة ماذا يحدث عند كتابة عنوان موقع والضغط على Enter
  • التعرف على مفهوم الطلب والاستجابة (Request/Response)

الشرح

حين تكتب عنوان موقع في المتصفح وتضغط Enter، تحدث سلسلة من الخطوات في أقل من ثانية واحدة. أولاً، يبحث المتصفح عن "عنوان" الخادم الذي يستضيف هذا الموقع (عبر نظام يُسمى DNS، يشبه دليل الهاتف الذي يحوّل الأسماء إلى أرقام). بعدها يرسل متصفحك طلباً (Request) إلى ذلك الخادم يقول فيه بالمعنى: "أعطني ملفات هذه الصفحة من فضلك". الخادم — وهو مجرد حاسوب قوي متصل بالإنترنت 24 ساعة يومياً — يستقبل الطلب، يبحث عن الملفات المطلوبة (HTML، CSS، JavaScript، الصور)، ويرسلها جميعاً كـاستجابة (Response) إلى متصفحك.

بمجرد وصول هذه الملفات، يبدأ المتصفح بقراءتها وترجمتها بصرياً: يقرأ HTML ليعرف ما هو المحتوى وهيكله، يقرأ CSS ليعرف كيف يُنسّق هذا المحتوى (الألوان والأحجام)، وينفّذ JavaScript لإضافة أي تفاعل. النتيجة النهائية هي الصفحة الملوّنة التفاعلية التي تراها أمامك. يُسمى جهازك في هذه العملية "العميل" (Client)، ولهذا يُطلق على هذا النموذج بأكمله اسم "نموذج العميل والخادم" (Client-Server Model)، وهو الأساس الذي يقوم عليه الإنترنت بأكمله تقريباً — من مواقع الويب إلى تطبيقات الهاتف.

💡 نقطة مهمة: حين يظهر خطأ مثل "404 Not Found"، فهذا يعني أن الخادم استلم طلبك بنجاح، لكنه لم يجد الملف الذي طلبته — الخطأ في العنوان وليس في اتصالك بالإنترنت.

🎯 تمرين عملي

افتح متصفحك، اذهب لأي موقع، واضغط بزر الفأرة الأيمن ثم اختر (عرض مصدر الصفحة)، ولاحظ شكل الكود دون الحاجة لفهمه بعد.

📚 لمزيد من التوسّع

فهرس دروس MDN الأساسية

🖼️ رسم توضيحي: رحلة الطلب والاستجابة

المتصفح (جهازك) الخادم (Server) ② استجابة (الصفحة) ① طلب (اكتب الرابط واضغط Enter)

لاحظ أن العملية تحدث في جزء من الثانية: متصفحك (العميل) يرسل طلباً إلى الخادم يقول فيه "أعطني هذه الصفحة"، والخادم يبحث عن الملفات المطلوبة (HTML, CSS, JS, الصور...) ويرسلها كـاستجابة. المتصفح بعدها يقرأ هذه الملفات ويرسمها أمامك كصفحة ويب متكاملة. هذا بالضبط ما يحدث كل مرة تفتح فيها أي موقع.

✅ نموذج حل مقترح

يجب أن تلاحظ نصاً غير منسّق بألوان غريبة يبدأ عادة بـ <!DOCTYPE html> ثم وسوم متداخلة كثيرة — هذا هو "الهيكل الخام" الذي يقرأه المتصفح ويحوّله للصفحة الملوّنة الجميلة التي اعتدت رؤيتها. لا تقلق إن بدا معقداً الآن؛ الهدف فقط أن ترى أن كل موقع له "كود مصدري" يمكن لأي شخص مشاهدته.

هذه معاينة مجانية جزء من الدورة

سجّل الآن للوصول إلى كل دروس ومشاريع واختبارات الدورة كاملة.

عرض الدورة والتسجيل