يلعب التصميم دورًا رئيسيًا في تحسين مظهر الصفحات وتنسيق المحتوى داخلها. في هذا المقال سنلقي الضوء على كيفية تصميم القسم العلوي من صفحة الويب وكيفية تصميم العنوان وإضافته، وكذلك كيفية إنشاء صفحة ويب إضافية.
كيفية إضافة صورة خلفية إلى القسم العلوي من صفحة الويب الخاصة بك باستخدام HTML
في هذه الفقرة سنوضح كيفية استخدام حاوية <div> لهيكلة القسم العلوي من صفحة الويب. سنستخدم سمة style لتحديد ارتفاع حاوية <div> ولإضافة صورة خلفية وتحديد أن صورة الخلفية يجب أن تغطي كامل مساحة حاوية <div>.
في البداية سنحتاج إلى تحديد صورة خلفية، يمكنك اختيار أي صورة تريدها. كما يمكنك تنزيل صورة الخلفية لموقع العرض التوضيحي الذي ننشئه. (لتعلم كيفية إضافة الصور إلى صفحات الويب باستخدام تعليمات HTML انتقل إلى مقال "بعض العناصر والمفاهيم الهامة في لغة HTML").
بعد اختيار الصورة الخلفية احفظها في مجلد الصور باسم background-image.jpg.
بعد ذلك انسخ الشفرات البرمجية التالية والصقها في ملف index.html أسفل وسم الفتح <body> وفوق وسم الإغلاق <body/>.
<body> <!--First section--> <div style="background-image: url('Image_Location'); background-size: cover; height:480px; padding-top:80px;"> </div> </body>
تأكد من استبدال النص الذي يشير إلى موقع الصورة "Image_Location" بمسار ملف صورتك، ولا تنس إضافة وسم الإغلاق <div/>.
لاحظ أننا أضفنا التعليق للمساعدة في تنظيم شفرة HTML. التعليق هو جزء من التعليمات البرمجية يتجاهلها المتصفح، وتستخدم لمساعدة المطورين في شرح وتوضيح وتنظيم التعليمات البرمجية. يمكن إنشاؤها باستخدام علامة الفتح <! - وعلامة الإغلاق ->.
في المثال السابق حددنا الارتفاع بـ 480 بكسل والحشو العلوي بـ 80 بكسل، مما سيخلق مساحة 80 بكسل بين الجزء العلوي من عنصر <div> وأي محتوى نضعه في الداخل. أما بالنسبة لقيمة الخاصية padding-top فلن تكون قادرًا على رؤية تأثيراتها حتى نضع المحتوى في الداخل في الخطوة التالية.
عند حفظ الملف وإعادة تحميله في المتصفح ستظهر الصفحة التالية:
يمكنك استخدام لون للخلفية بدلًا من صورة الخلفية. ولتنفيذ ذلك استبدل مقطف <div> الذي أنشأته في المثال التالي بالشيفرات البرمجية التالية:
<body> <!--First section--> <div style="background-color: #f4bc01; height:480px; padding-top:80px;"> </div> </body>
احفظ الملف وأعد تحميله للتحقق من النتائج. ستلاحظ استبدال صورة الخلفية بحاوية بنفس الحجم ولكن بلون أصفر.
إذا وازنت حاوية <div> على موقعك مع نفس الحاوية <div> على موقع العرض التوضيحي، ستلاحظ أن حاوية <div> لصفحتك على الويب محاطة بهامش صغير من المساحة البيضاء. ويرجع هذا الهامش إلى حقيقة أن جميع صفحات HTML تُعين تلقائيًا بحيث يكون معها هامش صغير افتراضيًا.
لإزالة هذا الهامش نحتاج إلى إضافة السمة style إلى وسم الفتح <body> وتعيين هامش العنصر <body> لصفحة HTML بـ 0 بكسل. لذلك أضف التعليمة التالية إلى الملف index.html:
<body style=“margin:0;”>
بعد ذلك احفظ الملف وأعد تحميله في متصفحك. يجب أن يزول الهامش الأبيض الذي كان محاطًا بالحاوية <div> العلوية. الآن يجب أن تكون قادرًا على فهم كيفية إضافة حاوية <div> مع صورة خلفية لهيكلة القسم العلوي من صفحة الويب.
كيفية إضافة صورة ملف تعريفي إلى صفحة الويب باستخدام تعليمات HTML
في هذا الجزء سنتعرف على خطوات إضافة وتصميم صورة الملف الشخصي الأعلى كما هو معروض في موقع الويب التوضيحي:
قبل أن نبدأ عليك اختيار صور ملف شخصي لتضمينها في موقعك. وإذا لم يكن لديك صورة للملف الشخصي يمكنك استخدام أي صورة لأغراض توضيحية أو إنشاء صورة رمزية من خلال الاستعانة بأحد المواقع مثل Getavataaars. وإلا يمكنك استخدام صورة موقع العرض التوضيحي الذي ننشئه في هذه السلسة التعليمية.
بعد تحديد الصورة احفظها باسم small-profile.jpg في مجلد الصور الموجود في مجلد المشروع. بعد ذلك أضف العنصر <img> بين وسم فتح العنصر <div> ووسم إغلاقه <div/>. كما توضح التعليمات التالية:
<div style="background-image: url('ImageLocation');background-size: cover; height:480px; padding-top:80px;"> <img src="ImageFilePath" style="height:150px"> </div>
تأكد من استبدال عنوان src بمسار ملف صورة ملفك الشخصي. ولاحظ أننا نستخدم السمة style لتحديد ارتفاع الصورة إلى 150 بكسل. ولاحظ أيضًا أن العنصر <img> لا يتطلب وسم إغلاق.
احفظ الملف وأعد تحميل صفحة الويب في المتصفح للتحقق من النتائج. وستحصل على النتيجة التالية:
ستظهر صورة ملفك الشخصي بطول 150 بكسل نظرًا للارتفاع الذي حددناه باستخدام السمة style. ويوجد 80 بكسل أسفل الجزء العلوي من حاوية <div>، بالنظر إلى خاصية الحشو العلوي التي حددناها في الحاوية.
الآن سنضيف خصائص إلى السمة style، لتمنح الصورة شكلًا دائريًا أصفر اللون. كما أننا سنضيف نصًا بديلًا لتحسين إمكانية وصول زوار الموقع الذين يستخدمون برامج قراءة الشاشة.
<img src="ImageFilePath" style="height:150px; border-radius: 50%; border: 10px solid #FEDE00;" alt="This is a small profile image of Digital Ocean’s mascot, a blue smiling shark.">
تأكد من استخدام مسار الملف الصحيح لصورتك مدرجًا كعنوان src. ثم احفظ الملف وأعد تحميله في المتصفح. وستحصل على شيئًا كهذا:
الآن سنتوقف قليلًا لدراسة تعديلات الشيفرة التي أضفناها. يؤدي تعيين نصف قطر الحد إلى 50% إلى منح الصورة شكلًا دائريًا. وضبط قيمة الحد على 10 بكسل سيعطي الصورة حدًا صلبًا بعرض 10 بكسل وله قيمة اللون السداسي العشري #FEDE00.
بعد أن تعرفنا على كيفية إضافة وتصميم صورة ملف تعريف إلى موقع الويب باستخدام تعليمات HTML. أصبحنا جاهزين لإضافة عنوان أساسي وعنوان فرعي إلى صفحة الويب في الفقرات التالية.
كيفية تصميم العنوان وإضافته إلى صفحة الويب باستخدام تعليمات HTML
تعد العناوين جزءًا أساسيًا من أي صفحة ويب. باستخدام تعليمات لغة HTML يمكننا إضافة العناوين الأساسية والعناوين الفرعية وهذه الفقرة مخصصة لتوضيح كيفية تنفيذ ذلك.
في مثالنا التوضيحي سنستخدم اسم Sammy والمسمى الوظيفي لـ Sammy، ولكن يمكنك إضافة أي محتوى تريده. سنستخدم عنصر العنوان <h1> وعنصر الفقرة <p> وعنصر التركيز <em>.
انسخ مقتطف الشفرات التالية بعد عنصر صورة ملفك الشخصي <img> وقبل وسم إغلاق العنصر <div>:
<img src="https://html.sammy-codes.com/images/small-profile.jpeg" style="height:150px; border-radius: 50%; border: 10px solid #FEDE00; padding-top:80px;"> <h1>Sammy the Shark</h1> <p><em>Senior Selachimorpha at DigitalOcean</em></p> </div>
عدل المحتوى النصي وفقًا لمعلوماتك الخاصة، واحفظ الملف وأعد تحميله في المتصفح وستحصل على النتيجة التالية:
في المثال السابق استخدمنا بعض ميزات التصميم لتعديل شكل العنوان والعنوان الفرعي. ولكننا سنحتاج إلى إضافة قيم وخصائص إضافية إذا أردنا أن يتطابق نمط العنوان والعنوان الفرعي مع نمط موقع العرض التوضيحي.
لإجراء هذه التعديلات سنضيف السمة style إلى هذه العناصر لتعيين خصائص إضافية. كما يلي:
<h1 style="font-size:100px; color:white; margin:10px;">Sammy the Shark</h1> <p style="font-size:30px; color: white;"><em>Senior Selachimorpha at DigitalOcean</em></p>
احفظ الملف وأعد تحميله في المتصفح وستحصل على الصفحة التالية:
تعمل الخصائص المضافة إلى النمط style على ضبط حجم الخط إلى 30 بكسل وتغيير لون الخط إلى اللون الأبيض. كما أننا أضفنا هامشًا قدره 10 بكسل إلى العنصر <h1>.
الآن أصبت قادرًا على فهم كيفية إضافة وتصميم العنوان الرئيسي والعنوان الفرعي إلى صفحة الويب باستخدام تعليمات HTML. وفي الفقرة التالية ستتعلم كيفية إنشاء صفحة ويب إضافية وربطها بموقعك الإلكتروني.
كيفية إنشاء صفحات ويب إضافية على موقعك الإلكتروني باستخدام تعليمات HTML
عند إنشاء موقع ويب ستحتاج غالبًا إلى إنشاء أكثر من صفحة ويب. إذا كنت ترغب بإنشاء صفحات إضافية وربطها فستحتاج أولًا إلى إنشاء ملف html جديد في دليل مشروع موقع الويب الذي تعمل على تطويره.
يتضمن موقعنا الإلكتروني التوضيحي صفحة الويب "حول"، والتي تتضمن معلومات حول الموقع، وفيما يلي سنوضح كيفية إنشاء هذه الصفحة وربطها بموقعك الإلكتروني وسنوضح ما هي العناصر التي تتضمنها.
لإضافة صفحة جديدة إلى موقعك الإلكتروني عليك أولًا إنشاء ملف جديد باسم about.html وحفظه في دليل المشروع html-Practice. (إذا لم تتابع سلسلة مقالاتنا التعليمية فيمكنك مراجعة إرشادات إعداد ملف html جديد في مقالنا "كيفية إعداد مشروع موقع ويب HTML وتنسيقه").
ملاحظة: إذا قررت اختيار اسمك كاسم للملف، فتأكد من تجنب استخدام مسافات الأحرف أو الأحرف الخاصة (مثل ! أو # أو % وغيرها من الرموز). وتجنب أيضًا استخدام الأحرف الكبيرة لأنها قد تسبب مشاكل لاحقًا. ولا تنس تضمين الامتداد ".html".
بعد ذلك ستحتاج إلى تنسيق الملف عن طريق إضافة معلومات تساعد المتصفح في تفسير محتوى الملف. لتنسيق الملف أضف مقتطف الشيفرة التالية:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <title>About</title> </head> </html>
تأكد من تغيير النص المميز بالعنوان الذي تريده لصفحتك. قبل إضافة أي محتوى إلى هذه الصفحة سنوضح خطوات إضافة ارتباط إلى هذه الصفحة في الصفحة الرئيسية.
ارجع إلى ملف index.html وأضف المقتطف التالي أسفل العنوان الفرعي لموقعك وفوق وسم إغلاق العنصر <div/>.
<p style="font-size: 20px; color:#1F9AFE;"> <a href="Webpage_FilePath">About this site</a> </p>
سنعدل مسار الملف المميز إلى المسار النسبي للملف about.html الذي أنشأناه منذ قليل. يشير المسار النسبي إلى موقع الملف بالنسبة إلى دليل العمل الحالي (على عكس المسار المطلق، والذي يشير إلى موقع الملف بالنسبة إلى الدليل الجذر).
إذا كنت تستخدم محرر نصوص Visual Studio Code، فيمكنك نسخ مسار الملف النسبي عن طريق النقر بزر الفأرة الأيمن فوق رمز الملف وتحديد "Copy Relative Path" إذا كنت تستخدم نظام التشغيل ويندوز، أما إذا كنت تستخدم نظام التشغيل Mac فاضغط Ctrl مع زر الفأرة الأيسر.
لاحظ أننا حددنا أيضًا حجم الخط واللون باستخدام السمة style. احفظ ملف index.html وأعد تحميله في المتصفح.
الآن أضيف ارتباط يوجه المستخدم إلى صفحة الويب about.html وسيظهر في الصفحة كما يلي:
إذا ظهر خطأ فتأكد أن الملف موجود في نفس دليل المشروع (نفس المجلد الذي يحتوي ملف index.html) وأنه لا توجد أخطاء في مسار المشروع.
حتى الآن أصبحت قادرًا على إنشاء صفحة ويب جديدة وإضافة ارتباط لها على موقع الويب. ويمكنك استخدام نفس هذه الخطوات لإنشاء صفحات ويب إضافية. كما يمكنك إضافة محتوى إلى أي صفحة ويب جديدة بنفس الطريقة التي تعلمنا فيها إضافة المحتوى إلى الصفحة الرئيسية.
ترجمة -وبتصرّف- للأجزاء من الخامس عشر وحتى الثامن عشر من سلسلة المقالات How To Build a Website with HTML.
أفضل التعليقات
لا توجد أية تعليقات بعد
انضم إلى النقاش
يمكنك أن تنشر الآن وتسجل لاحقًا. إذا كان لديك حساب، فسجل الدخول الآن لتنشر باسم حسابك.