كيفية بناء قسم الترويسة في موقعك الإلكتروني باستخدام CSS

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

هذه المقالة هي واحدة من مقالات السلسلة التعليمية لكيفية إنشاء موقع إلكتروني بواسطة CSS وتتضمن هذه السلسلة المقالات التالية:

المتطلبات

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

إضافة عنوان وعنوان فرعي لترويسة صفحة الويب الخاصة بك

تتضمن ترويسة الموقع العنوان Sammy the Shark وعنوان فرعي SENIOR SELACHIMORPHA AT DIGITALOCEAN وصورة حساب شخصي صغيرة، جميع هذه العناصر موجودة ضمن حاوية <div> مُصممة باستخدام صنف مُعرف ضمن ملف CSS. سوف تُعيد بناء هذا القسم من خلال إضافة المحتوى النصي والصور وإنشاء صنف للحاوية <div> ثم تغليف المحتوى النصي والصور بحاوية <div> اُسند لها الصنف الذي أنشأته حديثًا.

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

<body>

<!--Header content-->
   <h1>Sammy the Shark<h1>
   <h5>SENIOR SELACHIMORPHA AT DIGITALOCEAN<h5> 
</body>

أضفت في الشيفرة السابقة العنوان Sammy the Sahrk وأسندته ضمن ترويسة <h1> كونه الترويسة الأهم ضمن صفحة الويب، وأضفت أيضًا عنوانًا فرعيًا SENIOR SELACHIMORPHA AT DIGITALOCEAN وأسندته لترويسة <h5> كونها ترويسة أقل أهمية.

لاحظ أنك أضفت أيضًا التعليق <--‎Header content--!> قبل العنوان مباشرةً، إذ يُستخدم التعليق لحفظ معلومات تشرح الغاية من الشيفرة عند العودة لها مستقبلًا ولا تُعرض من قبل المتصفح لزوار الموقع (إلا في حال اطلعوا على الشيفرة المصدرية لصفحة الويب). تُكتب التعليقات في HTML بين ‎‎ كما هو موضح في الشيفرة السابقة، لذا تأكد من إغلاق التعليق باستخدام الوسم ‎--‎‎>‎ أو سوف يُعد كامل المحتوى عبارة عن تعليق.

إضافة وتنسيق صورة ملف شخصي صغيرة ضمن ترويسة صفحة الويب

سوف تُضيف الآن صورة ملف شخصي ضمن قسم الترويسة، لذا اختر صورة تريد تضمينها على موقعك، وإن كنت لا تملك واحدةً تستطيع استخدام أي صورة بديلة (مثل الصورة الشخصية التي استخدمناها سابقًا في المقالات السابقة Sammy أو تستطيع إنشاء أفتار من خلال موقع Getavataaars.

عند اختيارك للصورة عليك حفظها ضمن المجلد images بالاسم small-profile.jpeg، ثم عليك إضافة هذه الصورة إلى صفحة الويب باستخدام الوسم <img> وسمة المصدر src لإسناد مسار الملف الخاص بالصورة إلى هذا الوسم. أضف الشيفرة التالية إلى ملف index.html بعد السطر <--Header content--!> وقبل السطر <h1>Sammy the Shark<h1>.

  <body>

  <!--Header content-->
       <img src="images/small-profile.jpeg" alt="Sammy the Shark, DigitalOcean’s mascot">
       <h1>Sammy the Shark<h1>
       <h5>SENIOR SELACHIMORPHA AT DIGITALOCEAN<h5> 
   </body>
</html>

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

لاحظ أن الصورة لا تملك نفس تصميم الصورة الشخصية ضمن الموقع التوضيحي، ولتصميم نفس الشكل والحجم والحدود الخاصة بالصورة الشخصية ضمن الموقع التوضيحي عليك إضافة الشيفرة التالية لملف styles.css.

/*Top header profile image*/
.profile-small {
   height:150px;
   border-radius: 50%;
   border: 10px solid #FEDE00;
}

لنراجع كل سطر من الأسطر السابقة التي أضفتها.

إن /*Top header profile image*/ عبارة عن تعليق ضمن CSS.
يُشير النص ‎.profile-small إلى اسم الصنف الذي عرفناه ضمن قاعدة التنسيق، سوف يُطبق هذا الصنف على صورة الملف الشخصي في الخطوة التالية.
يضبط التصريح ;height:150px ارتفاع الصورة لـ 150 بكسل ويعدل تلقائيًا العرض للحفاظ على نسبة أبعاد الصورة.
يجعل التصريح ;border-radius: 50% حدود الصورة دائرية.
يُضيف التصريح ;border: 10px solid #FEDE00 حدود مستمرة للصورة بعرض 10 بكسل واللون ذو ترميز ‎#FEDE00.

احفظ الملف وعد لملف index.html ثم أضف صنف profile-small لوسم <img> كالتالي.

       <img src="images/small-profile.jpeg" class="profile-small" alt="Sammy the Shark, DigitalOcean’s mascot">

احفظ الملف وأعد تحميله ضمن المتصفح، يجب أن يُصبح ارتفاع الصورة الشخصية لديك الآن 150 بكسل وذات شكل دائري وحدود صفراء.

سوف تُطبق في الخطوة التالية المزيد من التصميم على العنوان والعنوان الفرعي والصورة الشخصية ككل.

تصميم وتحديد موقع محتوى الترويسة باستخدام CSS

سوف تعرف الآن صفًا ضمن CSS لتنسيق وتحديد موقع محتوى الترويسة، لذا عد إلى ملف styles.css وأنشئ الصنف header عبر إضافة قاعدة CSS التالية.

/* Header Title */
.header {
  padding: 40px;
  text-align: center;
  background: #f9f7f7;
  margin:30px;
  font-size:20px;
}

سوف نتوقف قليلًا هنا لنتوسع في شرح كل سطر من الشيفرة التي أضفتها.

إن /* Header Title */ عبارة عن تعليق لن يُعرض من قبل المتصفح.
النص header. هو اسم محدد الصنف الذي أنشأته وعرفته ضمن قاعدة CSS.
التصريح ;padding: 40px يُنشئ 40 بكسل من الحشوة بين المحتوى وحدود العنصر.
التصريح ;text-align: center ينقل المحتوى إلى وسط العنصر، وتستطيع تعديل القيمة إلى left أو right لمحاذاة النص تبعًا لها.
يضبط التصريح ;background: #f9f7f7 اللون إلى ترميز لون HTML مُعين وهو نفسه المستخدم ضمن الموقع التوضيحي، ولن نتوسع في هذه السلسلة التعليمية عن رموز ألوان HTML لكنك تستطيع استخدام أسماء الألوان أيضًا (black و white و gray و silver و purple و red و fuchsia و lime و olive و green و yellow و teal و navy و blue و maroon و aqua) لتغيير قيمة اللون لهذه الخاصية.
يُنشئ التصريح ;margin:30px هوامش بقيمة 30 بكسل بين محيط العنصر ومحيط مجال الرؤية أو أي عناصر محيطة به.
يزيد التصريح ;font-size:20px من حجم كل من العنوان والعنوان الفرعي.

احفظ الملف styles.css ثم عليك استخدام الصنف header ضمن محتوى الترويسة، لذا عد إلى صفحة index.html وأحط محتوى الترويسة (الذي أضفته مسبقًا لملفك) ضمن وسم <div> يتضمن الصنف header.

<!--Section 1: Header content-->
   <div class="header"> 
     <img src="images/small-profile.jpeg" class="profile-small" alt="Sammy the Shark, DigitalOcean’s mascot">
     <h1>Sammy the Shark<h1>
     <h5>SENIOR SELACHIMORPHA AT DIGITALOCEAN<h5> 
   </div> 
  </body>
</html>

احفظ الملف index.html ثم أعد تحميله ضمن المتصفح، يحب أن يتغير تصميم العنوان والعنوان الفرعي وصورة الملف الشخصي الموجودة ضمن الحاوية <div> حسب القواعد المُصرح عنها باستخدام الصنف header.

الخلاصة

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

ترجمة -وبتصرّف- للمقال How To Build the Header Section of Your Website With CSS (Section 1) لصاحبه Erin Glass.