مدونه وصفحات أخرى

فى صفحتنا لا يوجد حتى الآن سوى الصفحة الرئيسية. معظم المواقع لديها أكثر من صفحة واحدة ، بالطبع.

في هذا الجزء سوف نضيف صفحات إضافية

إنشاء صفحة جديدة

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

سيحصل كل مجلد فرعي على ملف index.html خاص به يتم عرضه تلقائيًا عند فتح المجلد في المستعرض.

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

نتنيه: هام: تأكد من عدم استخدام أي أحرف خاصة أو مسافات عند تسمية المجلدات الفرعية والملفات. كأفضل الممارسات ، يجب عليك فقط استخدام الحروف القياسية الصغيرة. يمكنك فصل كلمات متعددة بشرطة (`-`).

إنشاء صفحة المدونة

قم بإنشاء مجلد فرعي في مجلد ملفك باسم المدونة blog . انسخ ملف index.html إلى المجلد الفرعي الجديد. الآن يجب أن تبدو بنية ملفك كما يلي:

افتح blog/index.html الملف المنسوخ في متصفحك. ستلاحظ أن شيئين لا يعملان:

• لا يتم عرض الصورة .
• لا يتم تطبيق الألوان المعرفة في CSS

نظرًا لأننا في مجلد فرعي ، فإن المسار إلى الملفات غير صحيح. لكي تظهر الصورة ، نحتاج إلى استخدام index-1.png/.. أو index-1.png/ بدلاً من index-1.png في سمة src . لكن ربما لن ترغب في الحصول على نفس الصورة في صفحة المدونة. حتى تتمكن من إزالة عنصر img بأكمله.

في CSS ، من الشائع تحديد قواعد CSS للمشروع بأكمله. وبالتالي ، من المهم أن نشير إلى نفس ملف CSS في صفحة المدونة.

نحقق ذلك عن طريق تغيير عنوان URL من main.css إلى main.css/ يؤدي / الى البحث عن الملف في المجلد الجذر.

فيما يلي نعرض عنصر الارتباط بأكمله

blog/index.html

<link rel = "stylesheet" href = "/ main.css">

يجب أن يتسبب هذا التغيير في تطبيق التعليمات التى وضعناها فى ملف CSS أيضًا على صفحة المدونه الخاصه بنا.

بعد ذلك نقوم بتغيير العنوان والمحتوى

نظرة عامة على المدونة والمحتوى

blog/index.html

في رمز HTML أعلاه ، يمكنك رؤية بعض العلامات الخاصة :

<! - ----------- -> بين هذه العلامات ، يمكننا كتابة تعليق في HTML. تهدف التعليقات إلى أن تقرأ فقط للمبرمجين لنا ويتم تجاهلها من قبل المتصفح.

إدخالات المدونة كصفحة فرعية

تحتاج مدونتنا إلى بعض الإدخالات. نقوم بإنشاء صفحة HTML منفصلة لكل إدخال مدونة. قم بإنشاء مجلد فرعي داخل مجلد المدونة باسم first-entry استخدم مستكشف الملفات الخاص بك لنسخ blog/index.html للملف في المجلد الفرعي الجديد.

افتح إدخال المدونة وقم بتغيير المحتوى كما يلي:

لقد قمنا هنا بأدخال عنصر HTML جديد (hr). سوف تكتشف بسهولة ما تفعله من خلال تجربة ذلك أو عن طريق إجراء بحث سريع عبر الإنترنت.

البدء في إدخالات بلوق الخاص بك

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

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

مع إدخالات المدونة هذه ، سوف تتقدم بشكل أسرع بكثير في إتقان البرمجة و هذا هو السبب.

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

لا تنتظر اللغة الإنجليزية بشكل كبير وابدأ على الفور. الأمر يستحق ذلك!

إدخالات المدونة الثانية

تنبيه: قم بإنشاء مجلد فرعي لكل منشور في المدونة (مع صفحة index.html). سيعطيك هذا ترتيبًا جيدًا حيث يمكنك وضع الصور والملفات الأخرى لإدخالات المدونة في مجلدات فرعية منفصلة.

صفحة المشاريع

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

تابع كما فعلنا في صفحة المدونة أعلاه وقم بإنشاء مجلد فرعي باسم projects و بها ملف index.html

هكذا يكون ملف projects/index.html

صفحة الاتصال

آخر صفحاتنا الرئيسية هي صفحة الاتصال

تابع كما فعلنا في صفحة المدونة أعلاه وقم بإنشاء مجلد فرعي باسم contact و بها ملف index.html

هام: ضع في اعتبارك بعناية ما هي المعلومات التي تريد نشرها على الملأ! على سبيل المثال ، لا تنشر عنوان بريدك الإلكتروني الأساسي ، لأنك قد تتلقى بعض رسائل البريد العشوائي.

هكذا يكون ملف contact/index.html

الآن لدينا بالفعل خمس صفحات HTML

ما ينقصك هو التنقل حتى نتمكن من التبديل بسهولة بين صفحاتنا → هذا ما سنأخذه في الجزء 6: التنقل Navigation

هذاالمقال مترجم عن مقال Marco Jakob code.makery

نرجو الرجوع الى المقاله السابقه للاطلاع على بعض المعلومات المهمه لتعلم برمجه الوب

المصادر