كيفية إعداد مشروع موقع ويب HTML وتنسيقه

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

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

ملاحظة: إذا قررت اختيار اسمك كاسم للدليل فتأكد من تجنب استخدام المسافات الفارغة والأحرف الخاصة (مثل ! أو # أو٪ أو غيرها) والأحرف الكبيرة، لأنها قد تسبب في مشاكل لاحقًا.

سننسق ملف index.html ليكون بمثابة الصفحة الرئيسية لموقع الويب. وتتمثل الخطوة الأولى في تنسيق مستند الويب في إضافة إعلان <DOCTYPE html!> إلى السطر الأول.

يخبر هذا الإعلان المتصفح بنوع إصدار HTML الذي تستخدمه ومن المهم الإعلان عنه نظرًا لوجود إصدارات متعددة من HTML. في هذا الإعلان يحدد html معيار الويب الحالي لـ HTML وهو HTML5.

بعد ذلك سنضيف عنصر html من خلال إضافة وسوم الفتح والإغلاق <html>. يخبر العنصر <html> المتصفح أن كل المحتوى الذي يحتويه يهدف إلى قراءته بتنسيق HTML. وداخل هذا الوسم سنضيف السمة lang والتي تحدد لغة صفحة الويب. في المثال التالي سنحدد اللغة الإنجليزية كلغة للموقع باستخدام الخاصية en.

<!DOCTYPE html>
<html lang="en">
</html>

ملاحظة: إذا أردت استخدام اللغة العربية في موقعك أضف الخاصية lang="ar".

من الآن وصاعدًا سنكتب كل المحتوى الذي نريد إضافته إلى موقعنا الإلكتروني بين وسمي الفتح والإغلاق للعنصر <html>.

كيفية إضافة الارتباطات التشعبية إلى صفحة الويب

يمكن إضافة الارتباطات التشعبية Hyperlinks إلى النص أو الصور باستخدام العنصر <a>، والذي يتطلب استخدام السمة href لتحديد الارتباط. ويستخدم هذا العنصر على النحو التالي:

<a href="www.DestinationLink.com">The text you want to link</a>

ولتجربة ذلك عمليًا انتقل إلى ملف index.html وعدّل نموذج النص المميز برابط حقيقي مثل: https://academy.hsoub.com ثم انسخ التعليمة التالية:

<a href="https://academy.hsoub.com/">The text you want to link</a>

يجب أن تظهر النتيجة في صفحة الويب كما توضح لقطة الصورة التالية:

يمكنك أيضًا إضافة ارتباط تشعبي إلى الصور بالطريقة التالية:

<a href="https://www.digitalocean.com/community">The text you want to link
<img src="https://html.sammy-codes.com/images/small-profile.jpeg">
</a>

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

طريقة عمل عنصر تقسيم المحتوى `div` في لغة HTML

يعمل عنصر تقسيم محتوى <div> في لغة HTML كحاوية لتنظيم صفحة الويب وتقسيمها إلى مكونات منفصلة لكل منها تصميم مخصص.

عمومًا، إن لعنصر <div> تأثير ضئيل على تخطيط صفحة الويب، وعادةً ما يسند إليه سمات لضبط حجمها أو لونها أو موضعها. وفي الواقع يستخدم عنصر <div> كعنصر أساسي من عناصر CSS، ولكن في هذا المقال سنركز على كيفية عمل عناصر <div> من خلال تصميمها مباشرةً في مستند HTML.

في المثال التالي صمم العنصر <div> مع السمة style، يمكنك أن تلاحظ أنه يمكن للعنصر <div> أم يحتوي على خصائص style متعددة.

<div style="property: value; property: value;"></div>

لاحظ أن العنصر <div> يحتوي على وسوم فتح وإغلاق ولكن لا يتطلب أي محتوى. ولفهم كيفية عمل عنصر <div> في مثال عملي. امسح محتويات ملف index.html واستبدله بالتعليمات البرمجية التالية:

<div style="width:300px; height:200px; background-color:red;">
</div>

احفظ الملف وأعد تحميله في المتصفح. يجب أن يظهر في صفحة الويب صندوق أحمر بعرض 300 بكسل وارتفاع 200، كما توضح لقطة الشاشة التالية:

يمكنك إضافة محتوى نصي إلى العنصر <div> من خلال إضافة المحتوى بين وسوم الفتح والإغلاق. كما يوضح المثال التالي:

<div style="width:300px; height:300px; background-color:red;">
  This is text inside a div.
</div>

وعند حفظ الملف وإعادة تحميله في المتصفح ستحصل على النتيجة التالية:

تسمح لك لغة HTML بوضع حاويات <div> داخل حاويات <div> أخرى. في المثال التالي سنضيف حاوية صفراء داخل الحاوية الحمراء التي أنشأناها في المثال السابق:

<div style="width:300px; height:300px; background-color:red;">
  <div style="width:100px; height:100px; background-color:yellow;">
  </div> 
</div>

وعند حفظ الملف وإعادة تحميله سنحصل على الصفحة التالية:

لاحظ أن العنصر <div> هو عنصر من النوع Block-level، بالتالي تشغل كامل مساحة السطر وتدفع العناصر اللاحقة إلى السطر التالي. ولفهم هذه الفكرة سنضيف عنصر <div> آخر إلى الملف.

انسخ التعليمات التالية والصقها في ملف المشروع:

<div style="width:300px;height:300px;background-color:red;">
  <div style="width:100px;height:100px; background-color:yellow;">
  </div>
</div>
<div style="width:100px;height:100px; background-color:blue;">
</div>

احفظ الملف وأعد تحميله في المتصفح وستحصل على النتيجة التالية:

لاحظ كيفية دفع العنصر الجديد إلى السطر التالي على الرغم من وجود مساحة كافية تناسبه جوار العنصر السابق. يستخدم العنصر <div> كثيرًا عند بناء مواقع الويب، ويعد عنصرًا أساسيًا لأنه يساعد على تقسيم المحتوى وإضافة تصاميم مخصصة لكل جزء.

كيفية تعديل الألوان في عناصر HTML

يمكنك استخدام لغة HTML لتعديل ألوان العناصر وقطع محتوى صفحة الويب. على سبيل المثال يمكنك تغيير لون النص أو حدود الصورة أو عناصر <div>، وتختلف طريقة تغيير قيم الألوان لهذه الأجزاء من المحتوى من عنصر إلى آخر.

فيما يلي سنوضح كيفية تغيير لون النص وحدود الصور وعناصر <div> باستخدام أسماء الألوان.

يمكن تعديل لون عناصر النص مثل <h1> أو <p> باستخدام السمة style والخاصية color. وتضاف هذه الخصائص كما هو موضح في المثال التالي:

<p style="color:blue;">This is blue text.</p>

افتح ملف المشروع وأضف التعليمة السابقة واحفظ الملف، ثم أعد تحميله في المتصفح. ستلاحظ تغير لون النص إلى اللون الأزرق.

بالنسبة للصور يمكن تعديل لون حدود الصورة باستخدام السمة style والخاصية border.

مثال:

<img src="https://html.sammy-codes.com/images/small-profile.jpeg" style="border: 10px solid green"/>

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

يمكن تعديل لون الحاوية <div> باستخدام السمة style والخاصية background-color، كما يوضح المثال التالي:

<div style="width:200px;height:200px;background-color:yellow;"></div>

ستكون النتيجة على النحو الآتي:

في الأمثلة السابقة عرفنا قيم الألوان بأسماء الألوان. تدرّب تغيير لون النص وحدود الصور وعناصر

باستخدام أسماء الألوان التالية: black, white, gray, silver, purple, red, fuchsia, lime, olive, green, yellow, teal, navy, blue, maroon, aqua.

يمكنك تحديد قيمة اللون من خلال القيم السداسية للون. يتكون اللون من 6 أرقام أبجدية رقمية يسبقها الرمز #. مثل: #0000FF أزرق، #40E0D0 فيروزي، #C0C0C0 فضي.

في هذه السلسلة التعليمية سنستمر في استخدام أسماء الألوان.

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

ترجمة -وبتصرّف- للأجزاء من السابع وحتى العاشر من سلسلة المقالات How To Build a Website with HTML.