في هذا الدرس التمهيدي من سلسلة "مطور الويب من الصفر إلى الاحتراف"، ستكتشف كيف تُبنى المواقع الإلكترونية، وما الفرق الحقيقي بين المواقع الثابتة والديناميكية. ستتعلم بطريقة عملية كيف تصنع صفحتك الأولى بـ HTML، وتفهم متى تستخدم كل نوع في مشاريعك المستقبلية.
أهداف التعلم
بنهاية هذا الدرس، ستكون قادرًا على:
- فهم الفرق بين المواقع الثابتة (Static) والمواقع الديناميكيه (Dynamic).
- تحديد متى يُستخدم كل نوع ولماذا.
- بناء صفحة HTML ثابتة بسيطة (About Page).
- تحليل محتوى موقع وتخمين نوعه من خلال المخرجات الظاهرة.
خارطة التعلم
- لحظة البداية – فكرة المحتوى الثابت والمحتوى المتغير
- شرح المفهوم (Static vs Dynamic)
- تمثيل بصري
- التطبيق العملي (Building a Static Page)
- تحليل النتيجة
- التحدي المصغّر
- زاوية السوق
- التقييم الذاتي
- ما وراء الكود
- لوحة الإنجاز
لحظة البداية
✨ تخيّل أنك تدخل موقعًا إلكترونيًا كل الناس حول العالم يرون نفس المحتوى بالضبط. ثم تدخل موقعًا آخر يعرض لك اسمك وصورتك ومحتوى مختلف عن الآخرين. 🤔 هل لاحظت الفرق؟ الأول ثابت (Static)، والثاني ديناميكي (Dynamic). لكن ما الذي يجعل أحدهما يتغيّر بينما الآخر يبقى كما هو؟ هنا تبدأ أول خطوة لفهم "أنواع المواقع" 👇
مقدمة الدرس
المواقع الإلكترونية ليست كلها بنفس الطريقة. بعضها مثل “كُتيّب إلكتروني” — يعرض نفس النصوص والصور دائمًا. وبعضها مثل “تطبيق حي” — يتفاعل معك، يخزّن بياناتك، ويعرض لك محتوى خاص بك.
هنا نفرّق بين نوعين رئيسيين:
- Static Website – موقع ثابت.
- Dynamic Website – موقع ديناميكي متفاعل.
شرح المفهوم خطوة بخطوة
أولاً: الموقع الثابت (Static Website)
هو موقع بسيط يتكوّن من ملفات HTML و CSS فقط، يتم عرضه كما هو لجميع الزوار.
مثال: ملف about.html يحتوي على نص وصورة، وكل
من يفتح هذا الملف يرى نفس النتيجة.
الخصائص:
- لا يعتمد على قاعدة بيانات.
- سريع التحميل.
- مناسب للمواقع التعريفية الصغيرة.
- يتم تحديثه يدويًا (بتعديل الكود فقط).
أمثلة واقعية:
- موقع سيرة ذاتية (Portfolio).
- صفحة هبوط (Landing Page).
ثانيًا: الموقع الديناميكي (Dynamic Website)
هو موقع يعتمد على لغة برمجة في الخلفية (Backend) مثل PHP, Node.js, Python... لإنتاج محتوى متغيّر حسب المستخدم أو الحدث.
مثال: ملف “profile” في موقع مثل Facebook يعرض معلومات مختلفة لكل مستخدم.
الخصائص:
- يعتمد على قاعدة بيانات (Database).
- يولّد الصفحات لحظة الطلب.
- يمكن أن يعرض محتوى شخصيًا (مثل Dashboard).
أمثلة واقعية:
- Facebook – كل مستخدم يرى بيانات مختلفة.
- Amazon – المنتجات تتغير حسب البحث أو الموقع الجغرافي.
مقارنة بين النوعين
| المعيار | Static Website | Dynamic Website |
|---|---|---|
| المحتوى | ثابت لجميع المستخدمين | متغيّر حسب المستخدم |
| التقنية | HTML / CSS فقط | HTML + Backend (مثل Node.js, PHP) |
| السرعة | أسرع | أبطأ قليلًا |
| التحديث | يدوي | تلقائي من قاعدة البيانات |
| التكلفة | منخفضة | أعلى قليلًا |
| الأمثلة | صفحة “About Me” | صفحة “User Profile” |
تمثيل بصري
[ Static Website ]
+---------------------------+
| index.html |
| about.html |
| contact.html |
+---------------------------+
⬇ نفس المحتوى دائمًا ⬇
[ Dynamic Website ]
+---------------------------+
| index.php (or .js) |
| Database Connection |
| User Login / Profile Page |
+---------------------------+
⬇ محتوى متغيّر حسب المستخدم ⬇التطبيق العملي
🎯 الهدف: إنشاء صفحة HTML ثابتة بسيطة (About Page). افتح VS Code واكتب الكود التالي:
<!DOCTYPE html>
<html lang="ar">
<head>
<meta charset="UTF-8" />
<title>About Me</title>
<style>
body { font-family: Arial; background: #fafafa; color: #333; text-align: center; }
img { width: 150px; border-radius: 50%; margin-top: 20px; }
</style>
</head>
<body>
<h1>Hi, I'm Sara👋</h1>
<p>Web developer passionate about designing simple websites.</p>
<img src="https://via.placeholder.com/150" alt="My Photo" />
<p>I enjoy experimenting with new languages such as HTML, CSS, and JavaScript.</p>
</body>
</html>🧠 تحليل الكود:
- السطر
<!DOCTYPE html>يعرّف نوع الملف. -
داخل
<head>نضع المعلومات العامة (العنوان، التنسيقات). - داخل
<body>نكتب المحتوى الظاهر للزائر.
النتيجة: كل من يفتح هذا الملف سيرى نفس النص والصورة → موقع ثابت.
تحليل النتيجة
-
عندما تحفظ الملف باسم
about.htmlوتفتحه في المتصفح: المتصفح يقرأ الكود كما هو. - لا توجد قاعدة بيانات.
- لا يوجد كود يتغير بناءً على المستخدم.
بالتالي: الموقع Static. لكن لو كنت ستعرض لكل مستخدم محتوى مختلف، فأنت تحتاج إلى Backend + Database — وهنا يصبح الموقع Dynamic.
تحدّي مصغّر
✨ Challenge: انشئ صفحتك الشخصية
my_personal.html تتضمن:
- اسمك وصورتك.
- فقرة قصيرة عن هواياتك.
- رابط إلى حساب GitHub أو LinkedIn.
ثم حاول أن تتخيّل: كيف يمكن تحويلها لاحقًا إلى موقع Dynamic (مثل صفحة تسجيل دخول أو مدونة تفاعلية).
زاوية السوق
في بيئات العمل الحديثة، أغلب المواقع تبدأ Static في البداية ثم تتحوّل تدريجيًا إلى Dynamic. مثلًا:
- شركات التصميم تبني صفحات تعريفية ثابتة للعملاء.
- ثم يُضاف إليها Backend لاحقًا عند الحاجة (نظام تسجيل – لوحة تحكم – تعليقات).
تتبّع التنفيذ
| الخطوة | نوع الموقع | التقنية المستخدمة | هل المحتوى يتغير؟ |
|---|---|---|---|
| فتح ملف about.html | Static | HTML فقط | ❌ لا |
| زيارة صفحة Facebook Profile | Dynamic | HTML + Backend | ✅ نعم |
| صفحة GitHub Repo | Dynamic | HTML + API | ✅ نعم |
اختبار تطبيقي
🔍 السؤال:
موقع يعرض قائمة منتجات ثابتة لجميع الزوار بدون تسجيل دخول، هل هو موقع Static أم Dynamic؟
✅ الإجابة الصحيحة: (1) Static
💡 ملاحظة: لو أضفنا زر “أضف إلى السلة” أو “تسجيل دخول”، سيتحوّل إلى Dynamic فورًا!
تقييم ذاتي
| المهارة | أتقنها ✅ | أحتاج مراجعة 🔄 |
|---|---|---|
| أميّز بين الموقع Static وDynamic | ☐ | ☐ |
| أشرح مزايا وعيوب كل نوع | ☐ | ☐ |
| أنشأت صفحة HTML ثابتة | ☐ | ☐ |
| أستطيع تحديد نوع موقع من أمثلة حقيقية | ☐ | ☐ |
ما وراء الكود
تذكّر: كل موقع إلكتروني ناجح في العالم بدأ من صفحة HTML واحدة فقط. فيسبوك، تويتر، يوتيوب… جميعها كانت Static في بدايتها. ما جعلها تتطور هو الفهم العميق لفكرة التفاعل والديناميكية.
ملخص الدرس
- المواقع الثابتة تُبنى بـ HTML وCSS فقط، تعرض نفس المحتوى للجميع.
- المواقع الديناميكية تستخدم لغات Backend وقواعد بيانات لعرض محتوى متغير.
- يمكنك بدء رحلتك بـ HTML بسيط ثم التطور تدريجيًا نحو التفاعل (Dynamic).
- الفهم الصحيح للفرق بينهما هو أساس كل مشروع ويب ناجح.
لوحة الإنجاز
🏅 شهادة الإنجاز: Web Explorer – Level 2
لقد تعلّمت الفرق بين المواقع الثابتة والديناميكية، وأنشأت أول صفحة ثابتة خاصّة بك. مبروك! أنت الآن جاهز لتبدأ إعداد أدواتك كمطور حقيقي.
