بناء موقع الويب الخاص بك للمبتدئين: 5 خطوات

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

سواء كنت قد حلمت يومًا بأن تكون مبرمجًا للكمبيوتر أو سبق لك استخدام موقع ويب ، فلنواجه الأمر ، نحن جميعًا تقريبًا ، فقد أصبحت تكنولوجيا المعلومات العمود الفقري للأعمال. على الرغم من أن البرمجة قد تبدو مخيفة بعض الشيء في البداية ، إلا أن هدفي هو تعليمك الأساسيات الأساسية لتصميم الويب حتى تتمكن بعد هذا البرنامج التعليمي من إنشاء صفحة الويب الخاصة بك. مع هذا بعيدًا ، دعنا نصل إليه!

اللوازم

• جهاز كمبيوتر يعمل بنظام Macintosh أو Windows (على الرغم من أنه يمكن أيضًا استخدام توزيعات Linux ، إلا أنني أتخطى هذه التوزيعات في الوقت الحالي لأن هذه مقدمة للمبتدئين).
• اختيارك لمحرر النصوص (Notepad على Windows ، TextEdit على Mac) أو اختيارك لـ IDE. من واقع خبرتي ، وجدت أن Visual Studio Code يعمل بشكل أفضل مع نفسي ، لذا أوصي أيضًا بمراجعته هنا: https://code.visualstudio.com/ ناهيك عن أنه يعمل على جميع أنظمة التشغيل الأساسية.

الخطوة 1: العلامات وقليل من التاريخ

بمجرد أن تقرر اختيارك لمحرر النصوص أو IDE ، فلنبدأ بالأساسيات.

صدق أو لا تصدق ، لغة ترميز النص التشعبي أو لغة ترميز النص الفائق موجودة منذ ما يقرب من 30 عامًا حتى الآن ، ومع كل عام تم إدخال المزيد والمزيد من التحسينات على اللغة. الآن ، قد تسأل ، كيف يفسر المتصفح ما يجب وضعه على الشاشة؟ يتم ذلك في أجزاء قليلة:

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

فيما يلي بعض علامات HTML الأساسية:

• العنوان - يستخدم لإخبار المتصفح بعنوان الصفحة. هذا أيضًا ما تراه عندما تنظر إلى علامة تبويب إحدى صفحات الويب.
• h1، h2، h3، h4 - والتي تُستخدم لأحجام رأس مختلفة حيث تكون h1 هي الأكبر و h4 هي الأصغر. سأغطي المزيد عن هذا في القسم التالي.
• p - فقرة ، تستخدم لكتابة فقرات من النص. مثل الفقرات على الورق.
• br - استراحة ، والتي تدخل فاصل في السطر مع النص.
• أ - تستخدم لإنشاء روابط لصفحات أخرى ، مثل ارتباط قابل للنقر.
• - تُستخدم لربط صورة بصفحة الويب.
• ul ، ol ، li - قوائم غير مرتبة ، قوائم مرتبة ، وعناصر قائمة.
• - تُستخدم لعمل تعليقات مضمنة في الشفرة لن يراها المستخدم النهائي.

وإليك بعض علامات CSS (المرئية):

• اللون - يُستخدم لتعيين لون معين لعنصر معين أو تعيينه على صفحة الويب.
• حجم الخط - يُستخدم لتغيير حجم الخط على الصفحة.
• لون الخلفية - يُستخدم لتغيير لون الخلفية لعنصر معين أو الصفحة بأكملها.

لقد أرفقت أيضًا ورقة غش صغيرة لمساعدتك إذا شعرت بالضياع قليلاً ، ولكن لا داعي للقلق ، فستتعطلها في وقت قصير! بالإضافة إلى ذلك ، يعد www.w3schools.com أيضًا مصدرًا رائعًا لأي من أسئلة البرمجة الخاصة بك. لقد وفروا لي بالتأكيد وقتًا أو أيضًا.

في الأساس ، من السهل على المستعرض قراءة الملف. يذهب سطرا سطرا والعمليات تعمل بالوظيفة. يتم استخدام الأحرف للإعلان عن علامة مثل

وتستخدم لإغلاق العلامة مثل

. هذا مهم وإلا فلن يتوقف المتصفح. بين ال

و

العلامات ، حيث يمكنك إدخال ما تريد!

الخطوة 2: إعداد المحرر

الآن بعد أن تناولنا القليل من المعلومات حول العناصر الأساسية لموقع ويب HTML ، دعنا نتعمق ونجربه بأنفسنا. بالنسبة لهذه الخطوة التالية ، سأستخدم Visual Studio Code لبرمجة موقع الويب ، لكن تخطيط الشفرة سيكون هو نفسه إذا كنت تشعر براحة أكبر عند استخدام Notepad أو TextEdit فقط.

داخل المفكرة:

• باستخدام برنامج Notepad ، يتم تشغيل البرنامج بملف فارغ مما يجعل البدء فيه أمرًا سهلاً للغاية. سيسمح لنا هذا أيضًا بالقفز بضع خطوات مقارنة باستخدام VS Code. لنبدأ بحفظ الملف بالتنسيق الصحيح.
• انقر فوق ملف> حفظ
• أدخل اسمًا لملفك متبوعًا بامتداد.html وتحت حفظ بنوع ، حدد جميع الملفات. انقر فوق حفظ.

داخل رمز VS:

• أفضل طريقة للاستفادة من جميع ميزات IDE هي البدء بإنشاء الملف وإخبار IDE بنوع الملف. ويمكن القيام بذلك على النحو التالي:
• انقر فوق ملف> ملف جديد
• يفتح ملف فارغ
• بعد ذلك ، سترغب في البدء بحفظ الملف ، وإن كان فارغًا ، لأن ذلك سيسمح لـ IDE بأن يكون قادرًا على فهم نوع الملف الذي سيكون عليه المنتج النهائي. عند الحفظ تأكد من تضمين امتداد.html في نهاية اسم الملف. انقر فوق حفظ.

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

بعد أن قمت بحفظ ملف filename.html بنجاح ، فلنبدأ بإنشاء إطار عمل لصفحة الويب الخاصة بنا. تذكر من الأعلى الأجزاء الرئيسية من الملف التي نحتاج إلى الإعلان عنها قبل أن نبدأ بإنشاء باقي صفحة HTML. نصيحة احترافية: عند بدء إطار عمل الموقع ، تخبر علامة! DOCTYPE HTML المتصفح أن الملف الذي يقرأه هو ملف html. يمكن أن يكون هذا مفيدًا إذا كان لديك أنواع مختلفة من التعليمات البرمجية في نفس الملف وتريد التبديل بين المترجمين الفوريين. بالنسبة إلى نطاق هذا التوجيه ، لن نتطرق كثيرًا إلى هذا ، ولكن إذا كنت مهتمًا بعد Instructable لمعرفة المزيد حول تطوير HTML ، فلا تتردد في إعطائها فرصة. سأقوم بإدخال علامة! DOCTYPE HTML في أعلى الملف للحصول على أفضل الممارسات. تذكر أن تفتح وتغلق بـ.

هذا هو المكان الذي يكون فيه حفظ الملف قبل بدء البرمجة مفيدًا ، والآن بعد أن عرف IDE أنه يعمل مع ملف HTML ، سيستخدم intellisense لإنهاء التعبير وتقديم اقتراحات حتى لا تنسى عن طريق الخطأ إغلاق علامة. لاحظ أنه بالنسبة لأولئك الذين يستخدمون Notepad ، لا يتوفر intellisense كما هو الحال في IDE. نبدأ بإدخال علامات الرأس والجسم على النحو التالي: (انظر الصورة الثانية).

الآن وقد اكتمل إعداد المستند ، أصبح بإمكاننا الانطلاق إلى السباقات والاستمتاع ببعض المرح!

الخطوة 4: الكود ؛ الشفرة؛ الشفرة؛

يمكننا أن نبدأ بإدخال عنوان للملف الذي تم إنشاؤه حديثًا. أدخل ما تريد. تذكر أن هذا هو الاسم الذي يظهر في علامة تبويب المتصفح. لنبدأ أيضًا بإدخال عنوان لموقعنا. تذكر من قبل كيف نفعل هذا. هل سمعت h1 / 2/3/4؟ هذا صحيح!

قبل أن نواصل ، أجد أنه من المفيد فتح ملفنا في نافذة متصفح حتى نتمكن من رؤية كيف تنعكس تغييراتنا في المتصفح في الوقت الفعلي. يمكنك القيام بذلك عن طريق النقر فوق ملف> حفظ لحفظ الملف ، والانتقال إلى المجلد الذي تم حفظ ملف HTML فيه ، بالنسبة لي ، هذا هو سطح المكتب ، واستخدام المتصفح الذي تختاره لفتح الملف وهل ستنظر في ذلك ، هذه صفحة الويب الخاصة بك! ملاحظة: أنا شخصياً أستخدم Safari كمتصفح مفضل على جهاز الكمبيوتر الخاص بي ، ومع ذلك ، في تطوير الويب ، يعد Firefox المتصفح القياسي الذهبي للاختبار لأنه يعمل مع كل لغة برمجة نصية للويب تقريبًا.

كما ترى ، يظهر العنوان على علامة التبويب ، بالإضافة إلى رؤية عنوان h1 الخاص بنا. أفضل فتح نافذة المتصفح للملف جنبًا إلى جنب مع IDE ، فعند إجراء تغيير في IDE والحفظ ، تكون التغييرات فورية في المتصفح.

لا تتردد في محاولة إضافة العلامات والتلاعب بالأشياء المختلفة التي يمكنك القيام بها باستخدام HTML. كما ترى أدناه ، لقد أضفت بضع فقرات وفواصل وارتباط تشعبي خارجي إلى Instructables.com ، وهي صورة (يمكن ربطها إما من مصدر خارجي أو داخل نفس الدليل حيث يتم تخزين ملف HTML) ، مثال على قائمة غير مرتبة وقائمة مرتبة وأخيرًا تعليق.

إذا كنت ترغب في محاولة إضافة بعض خيارات الألوان والترتيب ، يمكنك إدخال علامة نمط في رأس الملف. هذه هي النقطة التي ينتقل عندها هذا من HTML إلى CSS ولكن من أجل الرؤية المرئية ، سأدخل بضعة أسطر حتى تتمكن من رؤية كيفية عمل ذلك. كيفية عمل CSS بشكل أساسي هو أنه يسمح لك بالتحكم في عناصر HTML داخل الوظائف باستخدام الأقواس {} لإدخال التعليمات البرمجية الخاصة بك لعنصر HTML معين.

الخطوة 5: الأفكار النهائية

وهناك لديك؛ لقد نجحت في إنشاء أول صفحة ويب لك! نظرًا لأن هذا دليل المبتدئين ، أود أن أجعل تجربتك الأولى مع HTML تجربة ممتعة. أفضل طريقة للتعلم في تجربتي هي الغوص في الأشياء وتجربتها بشكل عملي ، ومعرفة ما يمكنك القيام به مع التعليمات البرمجية الخاصة بك وكذلك معرفة كيف يمكنك كسر التعليمات البرمجية الخاصة بك. هذا يبني النزاهة ويساعدك على فهم أفضل لكيفية ولماذا تعمل الكود بالطريقة التي تعمل بها. تذكر أن www. W3Schools.com هو مورد رائع للأسئلة ، بل إنه يوفر أيضًا وضع حماية افتراضيًا داخل المتصفح لتجربة التعليمات البرمجية الخاصة بك. أتمنى أن تكون قد تعلمت شيئًا وأن تكون سعيدًا في البرمجة!