مقدمة في الويب
إذا كنت تتساءل: كيف تصل صفحة الموقع إلى متصفحك؟ ولماذا نستخدم HTML وCSS وJavaScript معًا؟ فهذا الدرس هو البداية الصحيحة. سنشرح الأساسيات بأسلوب بسيط، ثم ستجرب أول صفحة HTML بنفسك خلال دقائق.
ماذا ستتعلم في هذا الدرس؟
- ما هو الويب وكيف تصل الصفحة من الخادم إلى المتصفح
- الفرق بين HTML وCSS وJavaScript بطريقة سهلة
- أدوات البداية التي تحتاجها الآن
- أول ملف HTML عملي ستكتبه وتشغله
ما هو الويب؟
الويب (الشبكة العنكبوتية العالمية) هو نظام من صفحات مترابطة يمكن الوصول إليها عبر الإنترنت باستخدام متصفح. هذه الصفحات قد تحتوي على نصوص وصور وفيديوهات وأزرار وتفاعلات، وتُعرض لك داخل المتصفح مثل Chrome أو Firefox.
ما هي مكوّنات الويب؟
1) صفحات الويب
صفحة الويب هي ملف يحتوي على كود يصف ما سيظهر في المتصفح. من أشهر هذه اللغات HTML وهي اللغة الأساسية لبناء صفحات الويب.
ملفات الكمبيوتر قد تكون نصية أو ملفات رسومية كالصور أو ملفات فيديو أو ملفات صوتية وغيرها... فالفرق بين هذه الملفات هو امتداد الملف .. فمن المعلوم ان لكل ملف اسم وامتداد مثل : mohammed.png هنا اسم الملف mohammed وامتداد الملف png فنعرف الان ان هذا الملف نوعه صورة لان امتداده امتداد ملف صورة .... وقد نجد ملف اخر اسمه وامتداده هكذا omar.html فاسم الملف omar وامتداده html هذا الامتداد يعني ان هذا الملف هو عبارة عن صفحة موقع الكتروني .. وعند الضغط عليها سنتمكن من مشاهدة محتواه عن طريق متصفح الانترنت ... ويمكننا ايضا فتحه عن طريق برنامج المفكرة وسيظهر على شكل نصوص
2) متصفح الويب
هو البرنامج الذي يعرض صفحات الويب. من أشهر المتصفحات: Google Chrome وFirefox وEdge وSafari.
عندما ننشئ ملف على سبيل المثال omar.html فهو ملف صفحة موقع الكتروني ونفتحه عن طريق متصفح الانترنت .. لكن هذا الملف وهذه الصفحة الالكترونية متوفرة فقط على جهازك لا يستطيع الاخرين رؤيتها او الوصول اليها .. لذلك نحتاج المكونات التالية حتى يستطيع الجميع رؤية ومشاهدة واستعراض الصفحة الالكترونية
3) عنوان URL
هو عنوان خاص بكل صفحة على الإنترنت. مثل: www.abrmj.com
4) الخادم (Server)
هو جهاز/خدمة تستضيف ملفات الموقع. عندما تزور موقعًا، يرسل الخادم ملفات الصفحة إلى المتصفح ليقوم بعرضها لك.
كيف يعمل الويب؟ رحلة الصفحة من الخادم إلى عينيك
عندما تكتب في المتصفح
https://google.com
وتضغط Enter، يحدث باختصار:
خادم جوجل ──(يرسل ملفات HTML/CSS/JS + صور)──► المتصفح
المتصفح يقرأ الملفات ──► يبني الصفحة ──► تظهر لك!
HTML
الهيكل والمحتوى
CSS
التصميم والألوان
JavaScript
التفاعل والحركة
مثال سريع يوضح الفرق بين اللغات الثلاث
تخيّل أننا نريد إنشاء صفحة فيها سؤال وجواب. الجواب لا يظهر إلا بعد الضغط على زر "إظهار الإجابة"، ونريد السؤال باللون الأحمر والجواب باللون الأخضر.
HTML: يكتب هيكل الصفحة (السؤال، الجواب، الزر). لكن بدون CSS سيظهر كل شيء بشكل عادي.
CSS: ينسق الشكل (يجعل السؤال أحمر والجواب أخضر، ويجمّل الزر). لكن الزر لن “يعمل” وحده.
JavaScript: تضيف التفاعل (عند الضغط على الزر يتم إظهار/إخفاء الجواب).
الأدوات التي تحتاجها لتبدأ فورًا (مجانية 100%)
محرر الأكواد
- ✅ VS Code (الأكثر شهرة)
- ✅ Replit (بدون تثبيت، من المتصفح)
- ✅ CodePen (ممتاز للتجارب السريعة)
المتصفح + أدوات المطور
- 🌐 Google Chrome أو Firefox
- اضغط F12 أو يمين → فحص العنصر لترى كود أي موقع.
من الويب 1.0 إلى الويب الحديث
- الويب 1.0 (1990–2005): صفحات ثابتة (قراءة فقط)
- الويب 2.0 (2005–الآن): تفاعل + منصات اجتماعية + محتوى المستخدم
أول صفحة 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>
أسئلة شائعة
هل أحتاج إنترنت لأكتب HTML؟
لا. يمكنك كتابة ملف HTML على جهازك وفتحه في المتصفح مباشرة بدون إنترنت.
ما الفرق بين HTML وCSS وJavaScript؟
HTML يبني الهيكل، CSS ينسّق الشكل، وJavaScript يضيف التفاعل.
خلاصة الدرس باختصار
- ✔ الويب = متصفح ↔ خادم ↔ ملفات (HTML, CSS, JS)
- ✔ HTML هو الهيكل، CSS التصميم، JavaScript التفاعل
- ✔ يمكنك البدء الآن بـ VS Code + أي متصفح
- ✔ كل موقع في العالم بدأ بملف HTML بسيط مثل المثال
مهمة اليوم (3 دقائق فقط)
- افتح محرر الأكواد الخاص بمنصة ابرمج اضغط هنا
- اكتب الكود السابق في مربع HTML ثم اضغط تشغيل
- غيّر العنوان إلى اسمك، وأضف فقرة عن نفسك، ثم اضغط تحميل
- افتح الملف… واستمتع بأول صفحة من صنع يديك! 🎉
الدرس القادم: بنية صفحة HTML بالتفصيل 🏗️
استعد… سنبدأ نكتب أكواد حقيقية!