إنشاء موقع الويب الأول الخاص بك: 10 خطوات

2024 مؤلف: John Day | [email protected]. آخر تعديل: 2024-01-30 07:37

ستتعلم في هذا البرنامج التعليمي إنشاء صفحة ويب أساسية تحتوي على ورقة أنماط مرتبطة وملف جافا سكريبت تفاعلي.

الخطوة 1: إنشاء المجلد الخاص بك

قم بإنشاء مجلد للملفات التي سننشئها ليتم تخزينها. لا تتردد في تسميته كما يحلو لك ، فقط تذكر مكانه لأننا سنحفظ الملفات إليه لاحقًا.

الخطوة الثانية: إنشاء ملفك الأول

افتح محرر النصوص المفضل لديك. في حالتي ، سأستخدم ببساطة المفكرة المضمنة في Windows 10. بمجرد أن يكون لديك ملف جديد ، اكتب ما يلي:

هذه أول صفحة ويب لي ، تم إحضارها لك بواسطة دليل

هذا ما يعرف بعلامة HTML. إنه يرمز إلى العنوان 1. سيظهر النص الذي وضعناه داخل هذه العلامة كعنوان في الصفحة. يتم فتحه وإغلاقه على هذا النحو. النص الموجود بين العلامتين هو ما سيتم عرضه في متصفح الويب الخاص بك. الجزء الذي يشير إلى إعطاء هذه العلامة سمة سنشير إليها في الخطوة x. بمجرد الانتهاء من ذلك ، امض قدمًا واحفظ الملف في المجلد الذي أنشأناه في الخطوة 1 باسم index.html.

الخطوة 3: افتح الملف

الآن وقد أكملنا الانتقال إلى الملف داخل المجلد الذي أنشأناه ، انقر بزر الماوس الأيمن فوق الملف وحدد خيار "فتح باستخدام" وحدد متصفح الويب الذي تستخدمه. في حالتي هذا هو google chrome. شاهد الآن جهود عملك الشاق حتى الآن!

الخطوة 4: تصميم صفحتك

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

h1 {color: blue؛ محاذاة النص: مركز ؛}

ما نقوله للمتصفح هنا هو العثور على أي عنصر في علامة h1 (التي تعلمنا عنها في الخطوة 2) وإعطائه لونًا أزرق ومحاذاة في وسط الصفحة. احفظ هذا الملف في المجلد الذي أنشأناه في الخطوة 1 باسم style.css.

الخطوة 5: قم بربط Style.css بـ Index.html الخاص بك

في هذه المرحلة ، لدينا ملفان منفصلان لا يعرفان بعضهما البعض. نحتاج إلى إخبار ملف index.html لدينا بأن لدينا ملف style.css نريد أن يشير إليه ونحصل على بعض الأنماط منه. للقيام بذلك ، سنفتح ملف index.html الخاص بنا في محرر النصوص الخاص بنا ، وفوق علامة h1 الخاصة بنا ، سنضيف ما يُعرف باسم علامة الارتباط. تعمل علامة الارتباط تمامًا كما يوحي اسمها ، فهي ترتبط بشيء ما. في حالتنا ورقة الأنماط. انطلق واكتب. علامة الارتباط هي علامة إغلاق ذاتي ، لذا فإن علامة النهاية غير مطلوبة. يشير rel إلى العلاقة و href يخبر ملف الفهرس بمكان ملفنا الخارجي الذي نشير إليه. الآن احفظ ملف index.html هذا.

الخطوة 6: عرض صفحتك المصممة حديثًا

راجع الخطوة 3 وأعد تحميل صفحة الويب الخاصة بك وألق نظرة على كيفية انعكاس التغييرات.

الخطوة 7: إنشاء زر

أعد فتح ملف index.html في محرر النصوص واكتب ما يلي:

انقر فوق لي!

واحفظ الملف. يؤدي هذا إلى إنشاء عنصر زر على الصفحة. بمجرد الحفظ ، أعد فتح الملف كما هو موضح في الخطوة 3 وتأكد من أن الزر موجود في الجانب الأيسر السفلي من صفحتك.

الخطوة 8: قم بإنشاء ملف Javascript الخاص بك

أخيرًا ، سنقوم بإنشاء ملف جافا سكريبت الخاص بنا. هذا ما سيجعل موقعنا تفاعليًا. افتح محرر نصوص واكتب ما يلي:

document.querySelector ("# button"). addEventListener ("click" ، الوظيفة () {

document.querySelector ("# العنوان"). innerText = "تغيير العنوان سريعًا"

})

ما نقوم به هو أن نطلب من المستند أن يجد لنا عنصرًا به معرّف الزر ، وسوف نجعل الزر يستجيب لحدث نقرة عن طريق تغيير نص عنصر بمعرف العنوان إلى "تغيير العنوان أثناء التنقل ". احفظ الملف باسم button.js في المجلد الذي أنشأناه في الخطوة 1.

الخطوة 9: اربط ملفات Javascript و Index Files

كما فعلنا مع ملف style.css ، نحتاج إلى إخبار ملف index.html الخاص بنا بملف javascript الخاص بنا. في الجزء السفلي أسفل كل شيء قمنا به حتى الآن ، اكتب ما يلي:

تسمح لنا علامة البرنامج النصي بإضافة لغة برمجة نصية (في حالتنا ، جافا سكريبت) لتوفير وظائف لصفحتنا. نطلب منه البحث عن ملف يسمى button.js وإضافة جميع التعليمات البرمجية الموجودة به إلى ملف الفهرس الخاص بنا. بمجرد كتابة ذلك ، احفظ الملف وافتح الملف مرة أخرى كما هو موضح في الخطوة 3.

الخطوة 10: اختبر الزر الذي تم إنشاؤه حديثًا

الآن انطلق وانقر على الزر وشاهد تغيير العنوان!

تهانينا!! لقد قمت الآن بإنشاء أول صفحة ويب تفاعلية! أتساءل إلى أي مدى يمكنك أن تأخذ الأمر وأنت تعرف ما تعرفه الآن ؟؟