سننشئ ثلاث صفحات جديدة: صفحة واحدة لمدونتنا ، وواحدة للمشاريع ، وواحدة لمعلومات الاتصال .
معظم مواقع الويب لديها أكثر من صفحة واحدة بالطبع. في هذا الجزء سنضيف صفحات إضافية.
إنشاء صفحة جديدة
سننشئ ثلاث صفحات جديدة: صفحة واحدة لمدونتنا ، وواحدة للمشاريع ، وواحدة لمعلومات الاتصال .
تمثل هذه المواقع الثلاثة "صفحاتنا الرئيسية". يجب أن نضع في اعتبارنا أننا قد نرغب لاحقًا في إضافة صفحات فرعية إضافية. على سبيل المثال ، ستكون هناك صفحة فرعية لكل إدخال مدونة. للحصول على هيكل جيد ، من المنطقي إنشاء مجلدات فرعية لكل صفحة .
سيحصل كل مجلد فرعي على index.html ملفه الخاص الذي يتم عرضه تلقائيًا عند فتح المجلد في المستعرض.
من السهل إنشاء صفحة جديدة. من الأفضل نسخ السابق index.html بحيث يكون لديك بالفعل البنية الأساسية. ثم ، بالطبع ، يجب أن نجري بعض التعديلات على كل صفحة جديدة.
صفحة المدونة
قم بإنشاء مجلد فرعي في مجلد المحفظة الخاص بك باسم blog. انسخ index.htmlالملف إلى المجلد الفرعي الجديد. الآن يجب أن تبدو بنية ملفك كما يلي:
افتح الملف المنسوخ blog/index.htmlفي متصفحك. ستلاحظ أن شيئين لا يعملان:
- الصورة غير معروضة.
- لا يتم تطبيق الألوان المحددة في CSS.
نظرًا لأننا في مجلد فرعي ، فإن المسار إلى الملفات غير صحيح. للصورة لتظهر سنكون في حاجة إلى استخدام ../marco.jpgأو /marco.jpgبدلا من marco.jpgفي srcالسمة. لكن ربما لن ترغب في الحصول على نفس الصورة على صفحة المدونة. حتى تتمكن من إزالة imgالعنصر بأكمله .
في CSS أنه من الشائع أن تحديد قواعد CSS للمشروع بأكمله . وبالتالي من المهم أن نشير إلى نفس ملف CSS في صفحة المدونة. نحقق ذلك من خلال تغيير عنوان URL من main.cssإلى /main.css. /عمليات البحث الرائدة عن الملف في المجلد الجذر. يوضح ما يلي linkالعنصر بأكمله :
blog / index.html
<link rel = "stylesheet" href = "/main.css" >يجب أن يتسبب هذا التغيير في تطبيق التصميم من CSS أيضًا على صفحة المدونة.
بعد ذلك نقوم بتغيير العنوان والمحتوى.
blog / index.html - نظرة عامة على المدونة
<! DOCTYPE html>
<html>
<head>
<meta charset = "utf-8" >
<link rel = "stylesheet" href = "/main.css" >
<title> المدونة - محفظة الويب لماركو </title>
</head>
< body>
<h1 class = "title" > مدونة </ h1>
<p> أكتب عن الأشياء التي أواجهها أثناء تعلم برمجة الويب. </p>
<h2> مقالات المدونة </ h2>
<! - فيما يلي قائمة بجميع إدخالات المدونة. ->
</body>
</html>
في كود HTML أعلاه ، يمكنك رؤية بعض العلامات الخاصة: <!--و -->. بين هذه العلامات يمكننا كتابة تعليق في HTML. التعليقات مخصصة للقراءة فقط للمبرمجين ويتم تجاهلها من قبل المتصفح.
إدخال مدونة كصفحة فرعية
تحتاج مدونتنا إلى بعض الإدخالات. نقوم بإنشاء صفحة HTML منفصلة لكل إدخال مدونة. قم بإنشاء مجلد فرعي داخل blogالمجلد بالاسم first-entry. استخدم مستكشف الملفات لنسخ الملف blog/index.htmlإلى المجلد الفرعي الجديد.
افتح إدخال المدونة وقم بتغيير المحتوى على النحو التالي:
blog / first-entry / index.html
<! DOCTYPE html>
<html>
<head>
<meta charset = "utf-8" >
<link rel = "stylesheet" href = "/main.css" >
<title> الإدخال الأول - محفظة الويب لماركو </title>
</head>
<body>
<h1 class = "title" > أول دخول </ h1>
<p> 7 أبريل 2015 </p>
<hr>
<p> هذه أول مدونة لي. </p>
</body>
</html>هنا قمت بتضمين عنصر HTML جديد ( hr). يمكنك بسهولة معرفة ما يفعله من خلال تجربته أو عن طريق إجراء بحث سريع على الإنترنت.
ابدأ بإدخالات مدونتك!
أوصي بأن تبدأ على الفور في كتابة إدخالات المدونة الخاصة بك. يمكنك كتابة إدخال قصير في كل مرة تتعلم فيها شيئًا جديدًا عن البرمجة. للإلهام ، أدرج بعض الأشياء التي يمكنك الكتابة عنها:
-
ماذا تعلمت اليوم؟
- أدخل لقطات
- روابط لمواقع مفيدة
- ما هي المشاكل التي واجهتها؟
- كيف حللت هذه المشاكل؟
- ما الذي يجب أن أعمل عليه في المرة القادمة؟
مع إدخالات المدونة هذه سوف تتقدم بشكل أسرع في إتقان البرمجة. هذا هو السبب:
- سوف تكون على دراية بما تعلمته ← تحفيز أعلى!
- يمكنك البحث عن أشياء في وثائقك الشخصية ، على سبيل المثال روابط لمواقع مفيدة.
- سوف تتدرب على HTML و CSS أثناء كتابة الإدخالات.
- إذا قمت بنشر موقع الويب الخاص بك على الإنترنت ، يمكنك جعل مدونتك في متناول الآخرين. يمكّنك هذا من مشاركة معرفتك أو مطالبة شخص ما بمساعدتك في حل مشكلة ما.
- إذا قمت بنشر محفظتك ، سأكون مهتمًا جدًا بإلقاء نظرة عليها! يرجى مشاركة الرابط الخاص بك في مكان ما في التعليقات أدناه.
لا تنتظر كثيرًا وابدأ على الفور. الأمر يستحق ذلك!
دخول المدونة الثاني
صفحة المشاريع
إذا قمنا لاحقًا بتصميم مواقع الويب أو تطبيقات الويب المختلفة ، فسيكون من الجيد أن يكون لديك صفحة منفصلة لعرض مشاريعنا. سنقوم بإعداد صفحة مشاريع كهذه ، وإن لم يكن بها محتوى حتى الآن.
تابع كما فعلنا مع صفحة المدونة أعلاه وأنشئ مجلدًا فرعيًا projectsبملف index.html.
المشاريع / index.html
<! DOCTYPE html><html>
<head>
<meta charset = "utf-8" >
<link rel = "stylesheet" href = "/main.css" >
<title> المشاريع - محفظة الويب لماركو </title>
</head>
< body>
<h1 class = "title" > المشاريع </ h1>
<p> هنا ستجد قريبًا مشاريع الويب الخاصة بي. </p>
</body>
</html>صفحة الاتصال
آخر صفحاتنا الرئيسية هي صفحة الاتصال. قم بإنشاء مجلد فرعي contactبملف index.html.
جهة الاتصال / index.html
<! DOCTYPE html>
<html>
<head>
<meta charset = "utf-8" >
<link rel = "stylesheet" href = "/main.css" >
<title> جهة الاتصال - محفظة الويب لماركو </title>
</head>
< body>
<h1 class = "title" > جهة اتصال </ h1>
<p> ويمكنك الاتصال بي عن طريق البريد الإلكتروني: <a أ href = "mailto:spammails@gmx.ch">spammails@gmx.ch </a>
</ P>
<p>
ماركو جاكوب <br>
سويسرا
</p>
</body>
</html>في العنوان ستجد بند جديد: <br>. يتسبب في فاصل الأسطر. لاحظ أيضًا الارتباط الخاص بـ mailto:وعنوان البريد الإلكتروني. يفتح هذا الارتباط برنامج البريد الإلكتروني القياسي وينشئ بريدًا إلكترونيًا جديدًا بعنوان مملوء مسبقًا.
الآن لدينا بالفعل خمس صفحات HTML.
ماذا بعد؟
ما ينقصنا هو التنقل حتى نتمكن من التبديل بسهولة بين صفحاتنا.
→ هذا ما سنتناوله في الجزء 6: التنقل .
wesam developer
إذا أعجبك المقال أو كان مفيدًا - ضع "أعجبني". اشترك في المدونة اوشارك برأيك في التعليقات! أراك لاحقا
COMMENTS