مرحبًا بعودتك.
دعونا نبني موقعنا الأول.
لقد قمت الآن بالفعل بإنشاء مجلد يسمى Web Server لأن هذا سيكون خادم الويب الخاص بنا في الوقت الحالي.
وداخل خادم الويب هذا ، لدينا ملف فهرس HTML ، والذي سيكون امتدادًا لإنشاء ملف
HTML.
لدينا سكربت JS ، وهو امتداد لكتابة JavaScript تمامًا كما لدينا py لكتابة Python
ثم لدينا نمط CSS لكتابة أنماط CSS.
الآن في هذا القسم ، سأستخدم نصًا رائعًا ومحطة مصطلح AI الخاصة بي ، ولكن يمكنك استخدام أي
أداة مطورة تريدها.
أنا أحب استخدام هذه فقط لتسجيلات الشاشة.
إنها تساعد لأنها جيدة ونظيفة.
لا يعطيني الكثير من التلميحات حتى أتمكن أيضًا من ارتكاب أخطاء وإظهارها لك بينما أرتكب أخطاء في
كيفية إصلاحها.
لكن مرة أخرى ، يمكنك استخدام كود Visual Studio ، أيًا كان ما تفضله.
الآن ترى هنا أن كل هذه الملفات فارغة.
لكن تذكر أن خادم الويب يعطي ببساطة هذه الملفات الثلاثة للمتصفح حتى يتمكن المتصفح من عرض الصفحة.
لذلك دعونا نبدأ بـ HTML.
كيف نكتب HTML؟
حسنًا ، يتيح لي النص السامي فعل شيء مثير للاهتمام هنا إذا قمت بكتابة HTML ثم ضغطت على علامة التبويب.
إنها تملأها تلقائيًا بالنسبة لي.
حسنا حسنا.
أنا نوع من الغش ، لكن ، مهلا ، لا أريد أن أتحمل حتى الموت.
إذن هذا ملف HTML قياسي لأن لدي امتداد dot html.
إذا كان لدي هذا النوع من بناء الجملة ، يمكنني كتابة HTML وهو ليس بهذه الصعوبة.
لدينا علامات افتتاحية وعلامات إغلاق بشرطة مائلة للخلف هنا.
لذلك لدينا رأس الموقع بعنوان.
إذن هذا ما يظهر في علامة التبويب.
لذلك دعنا نقول.
موقع الكتروني.
مبدع جدا.
إذن هذا هو الرأس ثم الجسد.
هذا ما يتم عرضه على موقع الويب.
لذا يمكنني هنا أن أقول إنني خبير في الويب.
مثل هذا تماما.
وقمنا بإنشاء ملف HTML الخاص بنا.
الآن تحقق من هذا.
إذا فتحت الآن الفهرس. html ، إذا نقرت بزر الماوس الأيمن هنا ودعنا نقول فتح في نافذتك أو يمكنك الانتقال
والنقر نقرًا مزدوجًا فوق هذا الملف.
لذلك إذا قمت بالنقر نقرًا مزدوجًا فوق هذا ، فانظر إليه.
أنا مسؤول موقع.
مجرد نص بسيط.
لا شيء مجنون جدا.
لكنني قمت للتو بإنشاء موقع الويب الأول الخاص بي.
دعنا نواصل مع CSIS.
CSS لها بناء جملة مختلف عن بناء جملة html css.
اذهب إلى شيء من هذا القبيل.
يمكننا أن نعطيه عنصر html الذي نريد إضافة بعض الأنماط إليه.
في حالتنا ، دعنا نقول الجسم.
ويمكنني أن أقول الجسد.
ثم بين قوسين مجعد.
وهنا أريد أن أحصل على خلفية ، دعنا نقول اللون وسنذهب معها.
همم.
دعنا نذهب مع الأخضر.
إذا قمت بحفظ هذا.
وقمت بتحديث الصفحة.
همم.
لم يحدث شيء.
وهذه تفاصيل صغيرة ، مرة أخرى ، هذه ليست دورة تطوير الويب ، لذلك لا داعي للقلق
كثيرًا بشأنها.
لكن أول شيء يحدث بشكل أساسي هو إرسال ملف HTML وملف HTML هو في الواقع الشيء
الوحيد الذي يقرأه المتصفح.
لذا داخل ملف HTML ، يجب أن أقول ، مرحبًا ، HTML.
بالمناسبة ، لدينا أيضًا ملف CSS.
هل يمكنك أيضًا استخدام ذلك في الموقع؟
إذن يمكننا فعل ذلك في علامة الرأس؟
باستخدام شيء يسمى علامة الارتباط.
لذلك علامة الارتباط.
يمكننا بالفعل إزالة بعض من هذا.
علينا ببساطة أن نقول ، إنه نوع من نص CSS وله شيء يسمى H ref.
يقول H المرجع ببساطة ، مرحبًا ، أين يوجد هذا الملف؟
في حالتنا ، نظرًا لوجوده في نفس المجلد مثل HTML المفهرس ، يمكننا ببساطة أن نقول إنه نمط نقطة CSS لأنه
حسنًا ، ابحث فقط عن Solidot CSS وهذا هو مكان ملف النمط.
والآن ، إذا كنت تتذكر ، فلدينا أيضًا ورقة أنماط العلاقة التي نحتاج إلى تضمينها.
لقد أزلته للتو حتى نتمكن من رؤية ما نكتبه هنا.
لذلك إذا قمنا بعمل ورقة نمط وهذا مجرد شيء ، بناء جملة يجب أن تعتاد عليه إذا كنت
تريد تضمين ملف CSS.
إذا قمت بحفظ هذا والعودة والتحديث.
مهلا ، انظر إلى ذلك.
موقع الويب الخاص بي القبيح.
لنجعلها أكبر قليلاً.
موقع الويب الخاص بي القبيح ذو الخلفية الخضراء لديه الآن بعض الأسلوب.
إذا فتحت أدوات المطور مرة أخرى.
وضربت التحديث.
انظر إلى ذلك.
أحصل على ملف HTML وملف CSS.
رائع.
لذلك قمت للتو بإنشاء خادم الويب الخاص بي.
الصحيح.
يمكننا حتى كتابة JavaScript هنا.
لكن مرة أخرى ، هذه ليست دورة JavaScript ، لذلك لا داعي للقلق بشأنها في هذه الحالة.
ها أنت ذا.
لقد كتبت للتو بعض JavaScript ، وهو نوع يشبه الكتابة المطبوعة بلغة Python.
إذا قمت بتحديث الصفحة مرة أخرى.
مرة أخرى ، لا يتم عرض ملف JavaScript لأنه حسنًا ، يتعين علينا إخبار فهرس HTML مرة أخرى أننا بحاجة إلى
ملف JavaScript وعادةً ما يتم تضمين ملفات JavaScript في علامة البرنامج النصي ، عادةً في الجزء السفلي من
الجسم.
لذلك دعونا نغلق ذلك.
ثم هنا ، بدلاً من استخدام المرجع ، علينا فقط أن نقول CRC للمصدر.
ثم مرة أخرى ، أين ملف JavaScript؟
إنه في script JS لذا إذا قمت بحفظ هذا وقمت بتحديث الصفحة.
انظر إلى ذلك.
نقوم الآن بتحميل البرنامج النصي وملف JJ وكل ما يفعله هو إذا نقرنا على علامة تبويب وحدة التحكم ، فهل يمكنك
طباعة شيء ما في وحدة التحكم ووحدة التحكم هي شيء تستخدمه JavaScript.
ولكن كل ما يهمنا هو أننا قادرون على خدمة هذه الملفات الثلاثة.
ما فعلناه هو إنشاء خادمنا الأول.
لكن ربما لاحظت شيئًا.
عندما صعدت إلى هنا.
انظر إلى مسار URL الذي لدينا.
هذا ليس ما تكتبه عادة في موقع الويب ، أليس كذلك؟
أعني أننا رأينا أن موقع الويب هنا xkcd dot com يحتوي على dot com يستخدم http.
هذا عنوان URL حقيقي ، صحيح.
حسنًا ، يؤسفني أن أخبرك أننا لم ننشئ خادم ويب حقيقيًا لأن كل ما فعلناه هو أننا
قدمنا للمتصفح بعض الملفات ، كما ترون ، من جهاز الكمبيوتر الخاص بنا.
لذلك كل ما يفعله المتصفح يقول ، مهلا ، سأعرض هذه الملفات الموجودة هنا على جهاز الكمبيوتر
الخاص بك.
لذلك لدينا خادم ويب يقوم أيضًا بتشغيل متصفح ، ولكن هذا ليس هو الطريقة التي تعمل بها الحياة الواقعية.
لماذا يكون ذلك؟
حسنًا ، تخيل لو كان لديك موقع الويب الخاص بك.
هل تريد حقًا أن يقوم أشخاص من جميع أنحاء العالم بالوصول إلى موقع الويب الخاص بك مباشرة من خلال جهاز الكمبيوتر الخاص بك
، والاستيلاء على الملفات من جهاز الكمبيوتر الخاص بك؟
اعني لا.
الصحيح.
هناك الكثير من القضايا الأمنية.
هناك الكثير من المشكلات المتعلقة بالأداء.
يجب عليك الاحتفاظ بجهاز الكمبيوتر المحمول طوال الوقت حتى يتمكن الأشخاص من الوصول إلى موقع الويب الخاص بك.
بدلاً من ذلك ، نريد خادم ويب ، كما يوحي الاسم ، يخدم الملفات ويتخصص في تقديم الملفات
إلى المتصفحات.
في مكان ما في العالم لا داعي للقلق بشأنه.
إنه ليس على جهاز الكمبيوتر الخاص بي.
شخص ما يمتلك هذا الجهاز ، شخص ما يمتلك هذا الكمبيوتر ، وهو يعمل طوال الوقت ، لذلك
كلما ذهبنا إلى موقع ويب أو رابط ، سيتم تشغيله وإرسال هذه الملفات إلى الخارج.
لذا سنعود أخيرًا إلى Python هنا لأن ما نريد القيام به هو القيام بشيء أكثر تعقيدًا من مجرد وجود
هذه الملفات على أجهزتنا.
بدلاً من ذلك ، نريد إنشاء خادم حقيقي باستخدام Python يمكننا نشره حتى يتمكن الأشخاص من الوصول إلى موقعنا على الويب
في أي مكان في العالم.
الآن قد لا تزال في حيرة من أمرك.
قد لا تكون هذه العملية برمتها منطقية تمامًا بالنسبة لك لأننا بدأنا للتو.
لكن لا تقلق ، في نهاية كل شيء ، سيكون كل شيء منطقيًا.
لذلك دعونا ننسى المستعرض الآن ونبدأ في بناء خادم حقيقي ، شيء أكثر تعقيدًا مما فعلناه حتى الآن ، وهو مجرد مجلد به هذه الملفات
الثلاثة وننقر نقرًا مزدوجًا على الفهرس.
لغة البرمجة.
سأراك في الفيديو التالي.
مع السلامة.