كيف أعمل صفحة ويب ، صفحة الويب هي مستند رقمي يُعرض من خلال متصفح الإنترنت، ويُكتب غالبًا باستخدام لغات مثل HTML وCSS وJavaScript، تعتبر الوحدة الأساسية لأي موقع إلكتروني.

محتويات المقال

كيف أعمل صفحة ويب

لإنشاء صفحة ويب بسيطة، ستحتاج إلى استخدام ثلاث تقنيات أساسية:

كيف أعمل صفحة ويب
كيف أعمل صفحة ويب

HTML لبناء الهيكل، CSS لتنسيق الشكل، وJavaScript إذا أردت وظائف تفاعلية.

خطوات إنشاء صفحة ويب بسيطة:

1. افتح محرر نصوص بسيط مثل:

  • Notepad (في ويندوز)
  • Visual Studio Code (موصى به)
  • Sublime Text أو أي محرر تفضله

2. أنشئ ملفًا جديدًا واحفظه بالاسم:

plaintextCopierModifierindex.html

3. اكتب الكود التالي:

htmlCopierModifier<!DOCTYPE html>
<html lang="ar">
<head>
    <meta charset="UTF-8">
    <title>صفحتي الأولى</title>
    <style>
        body {
            background-color: #f0f0f0;
            font-family: Arial, sans-serif;
            text-align: center;
        }
        h1 {
            color: #2c3e50;
        }
        p {
            color: #555;
        }
    </style>
</head>
<body>
    <h1>مرحباً بك في صفحتي الأولى!</h1>
    <p>هذه صفحة ويب بسيطة باستخدام HTML و CSS.</p>
</body>
</html>

4. احفظ الملف ثم افتحه باستخدام متصفح الإنترنت:

  • انقر مرتين على الملف index.html
  • أو اسحبه إلى نافذة المتصفح

ماذا يحدث في هذا الكود؟

  • <!DOCTYPE html>: يخبر المتصفح أن هذه صفحة HTML5.
  • <html lang="ar">: يحدد أن اللغة المستخدمة هي العربية.
  • <head>: يحتوي على إعدادات الصفحة (العنوان، الترميز، التنسيق…).
  • <style>: يحتوي على CSS لتنسيق شكل الصفحة.
  • <body>: يحتوي على المحتوى الظاهر للمستخدم.

قد يهمك:

إنشاء صفحة ويب مجانية

لإنشاء صفحة ويب مجانية، يمكنك استخدام أدوات ومنصات تقدم خدمات إنشاء مواقع بدون تكلفة. إليك خطوات مبسطة مع بعض المنصات التي يمكنك البدء بها:

الخطوة 1: اختيار منصة لإنشاء موقعك

فيما يلي بعض الخيارات المجانية والشائعة:

المنصةالميزاتالرابط
Wixتصميم سهل بالسحب والإفلات، قوالب جاهزةwix.com
Google Sitesبسيط وسهل الاستخدام، مثالي للمبتدئينsites.google.com
WordPress.comمرونة عالية، إضافات كثيرةwordpress.com
GitHub Pagesمثالي للمطورين، يدعم HTML/CSS مباشرةpages.github.com
Carrdبسيط وخفيف لإنشاء صفحة واحدةcarrd.co

الخطوة 2: تحديد نوع الصفحة التي تريد إنشاءها

هل تريد:

  • صفحة تعريفية عنك (CV أو بروفايل شخصي)؟
  • صفحة لشركتك أو مشروعك؟
  • صفحة لمعرض أعمال (Portfolio)؟
  • مدونة بسيطة؟
  • صفحة تحتوي فقط على معلومات اتصال أو دعوة؟

الخطوة 3: إنشاء المحتوى

حضّر المعلومات التي تريد عرضها:

  • اسمك أو اسم المشروع
  • نبذة تعريفية
  • صور أو فيديوهات
  • روابط تواصل اجتماعي
  • نموذج تواصل أو بريد إلكتروني

الخطوة 4: التصميم والنشر

  1. افتح المنصة التي اخترتها.
  2. اختر قالب جاهز أو ابدأ من الصفر.
  3. أضف النصوص والصور.
  4. اضبط الألوان والخطوط حسب ذوقك.
  5. انشر الصفحة — ستحصل على رابط مجاني مثل:
    • yourname.wixsite.com/site
    • yourname.github.io

الخطوة 5 (اختياري): تخصيص الدومين

في المنصات المجانية، تحصل على دومين فرعي. إذا أردت دومين خاص مثل www.yourname.com، يمكنك شراؤه وربطه لاحقًا.

إنشاء موقع إلكتروني مجاني على Google

لإنشاء موقع إلكتروني مجاني باستخدام Google Sites، اتبع الخطوات التالية:

خطوات إنشاء موقع إلكتروني مجاني على Google Sites

1. تسجيل الدخول إلى حساب Google

ادخل إلى https://sites.google.com وسجّل الدخول باستخدام حساب Gmail الخاص بك.

2. بدء موقع جديد

  • اضغط على زر “فراغ” (Blank) أو اختر قالبًا جاهزًا من القوالب المعروضة.

3. تخصيص الموقع

بمجرد فتح المحرر، يمكنك:

تعديل المحتوى

  • انقر على النص لتعديله (مثلاً: عنوان الموقع، وصف، معلومات شخصية…).
  • اضف صورًا أو فيديوهات.
  • أدرج روابط أو ملفات من Google Drive.

تعديل التصميم

  • من الشريط الجانبي:
    • اختر القسم (نص، صورة، شبكة…).
    • اختر السِمة لتغيير الألوان والخطوط.

إضافة صفحات

  • من الأعلى، اضغط على “الصفحات” ثم اختر “+” لإضافة صفحة جديدة (مثل: “من نحن”، “معرض الأعمال”، “اتصل بنا”…).

4. معاينة الموقع

  • اضغط على رمز “المعاينة 👁️” من الأعلى لرؤية كيف سيبدو الموقع على الهاتف أو الكمبيوتر.

5. نشر الموقع

  • اضغط على زر “نشر” في الأعلى.
  • اختر اسمًا للرابط، مثلاً:
    yourname.site.google.com
  • يمكنك مشاركة الرابط مع الآخرين أو تخصيص من يمكنه مشاهدته (عام أو خاص).

6. تعديل الموقع لاحقًا

في أي وقت، يمكنك الرجوع إلى https://sites.google.com وتحرير موقعك وتحديثه.

نصائح

  • يمكنك ربط الموقع مع بريدك الإلكتروني أو Google Forms لتلقي رسائل.
  • مثالي لإنشاء ملف تعريفي (CV)، معرض أعمال، أو صفحة معلومات بسيطة.

تشغيل صفحة الويب

بما أنك تريد إنشاء صفحة ويب جديدة باستخدام HTML/CSS/JavaScript، فإليك مثالًا بسيطًا لصفحة ويب أساسية يمكنك تشغيلها محليًا على جهازك:

مثال على صفحة ويب بسيطة:

htmlCopierModifier<!DOCTYPE html>
<html lang="ar">
<head>
  <meta charset="UTF-8">
  <title>صفحتي الأولى</title>
  <style>
    body {
      font-family: Arial, sans-serif;
      background-color: #f2f2f2;
      text-align: center;
      padding: 50px;
    }
    h1 {
      color: #333;
    }
    button {
      padding: 10px 20px;
      font-size: 16px;
      cursor: pointer;
    }
  </style>
</head>
<body>
  <h1>مرحبًا بك في صفحتي الأولى!</h1>
  <p>اضغط الزر لرؤية رسالة ترحيب</p>
  <button onclick="showMessage()">اضغط هنا</button>

  <script>
    function showMessage() {
      alert("أهلاً وسهلاً! 🌟");
    }
  </script>
</body>
</html>

طريقة تشغيل الصفحة:

  1. افتح محرر نصوص مثل Notepad (ويندوز) أو VS Code أو أي محرر تفضّله.
  2. انسخ الكود أعلاه والصقه في الملف.
  3. احفظ الملف باسم مثل: index.html
  4. انقر مزدوجًا على الملف أو افتحه من المتصفح.

هل ترغب أن أضيف ميزات معينة للصفحة؟ مثل:

  • نموذج تسجيل دخول؟
  • صفحة معرض صور؟
  • صفحة تعريفية (نبذة عنك)؟

قوقل سايت بالجوال

يبدو الآن أنك تقصد تشغيل أو إنشاء موقع باستخدام Google Sites من الهاتف المحمول.

إليك خطوات استخدام Google Sites على الجوال:

إذا كنت تريد زيارة موقع Google Sites:

  1. افتح متصفح الإنترنت على جوالك (Chrome أو Safari).
  2. اذهب إلى: https://sites.google.com
  3. قم بتسجيل الدخول باستخدام حساب Gmail الخاص بك.
  4. سترى قائمة بالمواقع التي أنشأتها مسبقًا، أو يمكنك الضغط على علامة + (جديد) لإنشاء موقع جديد.

ملاحظات مهمة:

  • موقع Google Sites ليس لديه تطبيق مخصص للجوال، ولكن يمكن استخدامه من خلال المتصفح.
  • في بعض الأحيان، ستحتاج إلى تفعيل “عرض إصدار سطح المكتب” من إعدادات المتصفح حتى تتمكن من تعديل المواقع بسهولة.
    • على Chrome، اضغط على الثلاث نقاط > اختر “عرض بإصدار سطح المكتب”.

مواقع جوجل

كيفية استخدام Google Sites من الجوال:

الخطوات:

  1. افتح المتصفح على الجوال (مثل Chrome أو Safari).
  2. ادخل إلى: https://sites.google.com
  3. سجّل الدخول بحساب Google (Gmail).
  4. ستظهر لك لوحة التحكم، ويمكنك:
    • مشاهدة المواقع السابقة.
    • الضغط على “+” في أسفل الصفحة لبدء موقع جديد.

نصيحة: لتحصل على تجربة أفضل على الجوال، اضغط على القائمة في المتصفح واختر “عرض إصدار سطح المكتب” (Show desktop version).