من المرجح أنك تزور مواقع الويب كل يوم تقريبًا ، سواء للتفاعل مع الأصدقاء على وسائل التواصل الاجتماعي أو للتسوق أو القيام بعمل أو آلاف الأنشطة الأخرى. لكن كيف تصنع المواقع؟ سينقلك هذا المنشور من البداية إلى إنشاء موقع ويب بسيط لمساعدتك في طريق التعلم!
كيف يعمل المتصفح
إذا كنت تقرأ هذه المقالة ، فقد استخدمت متصفح ويب من قبل. تتيح لك المتصفحات مثل Google Chrome و Mozilla Firefox و Microsoft Edge و Apple Safari الوصول إلى الإنترنت.
أولاً ، يختار المستخدم عنوان URL الذي يريد الانتقال إليه - على سبيل المثال ، يمكنه كتابة " https://twitter.com" في شريط URL والضغط على مفتاح الإدخال ، أو يمكنه النقر فوق ارتباط في مكان آخر عبر الإنترنت. هذا يجعل طلب إلى الخادم .
الخادم هو جهاز كمبيوتر يمكنه التعامل مع هذه الطلبات ثم إعادة المعلومات إلى المتصفح. هذه البيانات تسمى الاستجابة . غالبًا ما تحتوي هذه الاستجابة على صفحة HTML يمكن للمتصفح عرضها لهذا المستخدم.
تسمى هذه العملية دورة الطلب والاستجابة.
مثال: تويتر
دعنا نتعمق قليلاً مع مثال. أولاً ، يقوم المستخدم بتقديم طلب إلى Twitter عن طريق كتابة " https://twitter.com" في شريط URL. بعد ذلك ، يقرر خادم Twitter المعلومات التي يجب إرجاعها إلى مقدم الطلب.دعنا نناقش عنوان URL أكثر قليلاً: يعرض " https://twitter.com" صفحة الخلاصة الرئيسية. إذا انتقل المستخدم إلى "https://twitter.com/HcouchD" بدلاً من ذلك ، فمن المتوقع أن يرى ملفي الشخصي وتغريداتي بدلاً من ذلك. الخادم مسؤول عن الحصول على المعلومات المناسبة بناءً على طلب المستخدم. يتم تخزين بيانات موقع الويب ، مثل التغريدات والمستخدمين ، في قاعدة بيانات. يستعلم الخادم عن قاعدة البيانات هذه عن البيانات المناسبة للصفحة وينفذ منطقًا آخر لمعالجة تلك البيانات.
أخيرًا ، يستجيب الخادم بالاستجابة ، والتي ستكون صفحة HTML مع توصيل البيانات الصحيحة بها.
[next]
الواجهة الأمامية مقابل تطوير الواجهة الخلفية
عادةً ما يستخدم مطورو الواجهة الأمامية HTML و CSS و JavaScript - والتي سنناقشها أكثر في هذا المنشور. يمتلك مطورو الواجهة الخلفية الكثير من اللغات للاختيار من بينها مثل Python و PHP و Java و C #.
للبدء ، دعنا نكتب موقع ويب للواجهة الأمامية.
[next]
تقنيات الواجهة الأمامية
تنتقل ثلاث لغات أساسية إلى مواقع الويب: HTML و CSS و JavaScript.
HTML هي المسؤولة عن محتوى صفحات الويب - يتم التحكم في أشياء مثل النصوص والصور ومقاطع الفيديو والعناوين بواسطة HTML.
CSS مخصص لتصميم مواقع الويب ، لذلك الألوان والخطوط وتحديد مواضع العناصر. يمكننا استخدام CSS لتصميم المحتوى الذي ننشئه باستخدام HTML.
أخيرًا ، تجعل JavaScript صفحات الويب تفاعلية. قد تكون بعض الأمثلة النوافذ المنبثقة والبيانات التي تتغير. يمكنك أيضًا استخدام JavaScript لكتابة HTML أو تحديثه ، لذلك تتم كتابة بعض مواقع الويب بالكامل بلغة JavaScript الآن!
دعنا نتعلم أساسيات هذه اللغات الأمامية ، وننشئ موقعًا "about me" باستخدام HTML و CSS.
[next]
لنقم بإنشاء موقع على شبكة الإنترنت
أول شيء يتعين علينا القيام به هو تنزيل محرر نصوص ، والذي سيسمح لنا بكتابة التعليمات البرمجية. هناك الكثير من الخيارات التي يمكن استخدامها ، ولكن المفضل لدى أغلب المبرمجين هو Visual Studio Code . انطلق وقم بتنزيله على جهاز الكمبيوتر الخاص بك.
بمجرد تنزيله ، افتح التطبيق. أيضًا ، قم بإنشاء مجلد على جهاز الكمبيوتر الخاص بك. على جهاز Mac ، يمكنك فتح finderالتطبيق ثم النقر فوق file > new folder. على جهاز كمبيوتر يعمل بنظام Windows ، يمكنك فعل الشيء نفسه مع File Explorerالتطبيق. اتصل بالمجلد about-meأو أيًا كان ما تريد تسميته!
الآن ، انتقل مرة أخرى إلى VS Code. انقر فوق Open folder...الارتباط الموجود أسفل Start. ثم حدد المجلد الذي أنشأته للتو.
الآن ، سننشئ ملفين ، index.htmlو style.css. يمكنك القيام بذلك في VS Code بالنقر فوق الرمز الذي يشبه قطعتين من الورق على الشريط الأيسر.
ثم انقر فوق new file الزر الموجود بجوار اسم المجلد. قد تحتاج إلى التمرير فوق قسم المستكشف الموجود على اليسار والذي تم فتحه عند النقر فوق زر قطعتين من الورق. ثم أدخل اسم الملف واضغط على enter المفتاح.
يمكنك أيضًا إنشاء الملفات في جهازك finder أو file explorer إذا كنت تشعر براحة أكبر مع ذلك!
[next]
لغة البرمجة
نكتب HTML باستخدام العلامات التي تصف نوع المحتوى بينهما. على سبيل المثال:
<h1>Hello World</h1><h1> هي العلامة المفتوحة ، فهي تشير إلى أن Hello World ، المحتوى الخاص بنا ، هو رأس المستوى الأول. </h1> هي علامة الإغلاق ، والتي تنتهي بالرأس.
دعنا نمضي قدمًا ونضيف رمزًا إلى موقعنا على الويب.
في VS Code ، انقر فوق index.html الملف الذي قمت بإنشائه لفتحه.
أضف الكود التالي في الملف:
<html></html>
تشير هذه العلامات إلى أن أي شيء بينهما هو HTML - قد يكون هذا واضحًا لنا ، ولكن من الجيد إخبار المتصفح بذلك أيضًا.
دعونا المضي قدما وإضافة <head> و <body> العلامة داخل <html> علامات:
<html>
<head></head>
<body></body>
</html>داخل head العلامات ، سنضيف title علامة وداخل body العلامة سنضيف h1 علامة.
<html>
<head>
<title>About Me</title>
</head>
<body>
<h1>Hello World</h1>
</body>
</html>الآن ، احفظ الملف. يمكنك القيام بذلك باستخدام الاختصار cmd + s أو ctrl + s أو عن طريق النقر file > save على شريط القوائم من جهاز الكمبيوتر الخاص بك.
الآن ، دعنا نفتح موقع الويب هذا على جهاز الكمبيوتر الخاص بك. في أداة البحث الخاصة بك ، انقر بزر الماوس الأيمن فوق الملف وانقر فوق open with > Chrome أو المتصفح الذي تختاره. على جهاز Mac ، يمكنك أيضًا النقر نقرًا مزدوجًا فوق الملف.
يجب أن يفتح متصفحك بصفحة ويب:
يعد تطوير الويب مسارًا وظيفيًا رائعًا ، وهناك الكثير الذي يمكنك تعلمه من خلاله. نأمل أن يكون هذا البرنامج التعليمي قد جعلك مهتمًا بمعرفة المزيد! فيما يلي بعض مواردنا المفضلة للبدء.
تعليقات