إنشاء موقع ويب

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

الجزء	الوسم	ماذا نضع فيه؟
رأس الصفحة	<header>	اسم الموقع والشعار وقائمة الأقسام
المحتوى الرئيسي	<div class="main">	المعلومات الأساسية (أصناف المقهى وصورها)
تذييل الصفحة	<footer>	طرق الوصول والتواصل وحقوق النشر

لماذا نقسّم؟ لأن كل جزء يصبح له اسم، فنستطيع تنسيقه بـ CSS أو تعديله لاحقًا دون أن نلمس بقية الصفحة.

رأس الصفحة header

نُحيط أعلى الصفحة بالوسم <header>. هو مجرد علامة تقول «هنا يبدأ الرأس وهنا ينتهي»، فلا يغيّر الشكل وحده. لكن اسمه يصلح مُحدِّدًا في CSS، فنلوّن خلفية الرأس كله بقاعدة واحدة:

CSS

header {
  background-color: rgb(255, 255, 180);
}

المتصفح

المحتوى الرئيسي div

الوسم <div> يجمع محتويات مختلفة (عنوان وقائمة وصور) في قسم واحد. ليس له معنى خاص، لذلك نعطيه فئة تشرح ما بداخله: class="main". داخل كل عنصر في القائمة نكتب اسم الصنف، ثم <br>، ثم صورته مع alt:

HTML

<header>
  <h1>CAFE MENU</h1>
  <ul>
    <li>About the Cafe</li>
    <li>Menu</li>
  </ul>
</header>

<div class="main">
  <h1>Menu List</h1>
  <ul>
    <li>Donut<br><img src="img/donut.svg" alt="Donut image"></li>
    <li>Cafe latte<br><img src="img/cup.svg" alt="Cafe latte image"></li>
  </ul>
</div>

المتصفح

تذييل الصفحة footer

أسفل الصفحة نُحيطه بالوسم <footer>. ونلوّنه بكود ست عشري، ونجعل نصه أبيض #ffffff ليُقرأ بوضوح على الخلفية الزرقاء. هذه الصفحة كاملة؛ جرّب تغيير الألوان:

CSS

header {
  background-color: rgb(255, 255, 180);
}
footer {
  background-color: #1e90ff;
  color: #ffffff;
}

المتصفح

كل وسم بداية يحتاج وسم نهايته في المكان الصحيح: إذا نسيت </div> سيدخل التذييل داخل المحتوى الرئيسي. اكتب وسم البداية والنهاية معًا أولًا، ثم املأ ما بينهما.

تدريبات

1أكمل الفراغتدريب المنهج

أكمل الفراغين لتُحيط رأس الصفحة بالوسم header.

HTML Ctrl/⌘ + Enter للتشغيل · Esc ثم Tab للخروج من المحرر

___
  <h1>CAFE MENU</h1>
  <ul>
    <li>About the Cafe</li>
    <li>Menu</li>
  </ul>
___

المتصفح

2اكتب البرنامجتدريب المنهج

اجعل خلفية رأس الصفحة rgb(255, 255, 180): المُحدِّد header والخاصية background-color.

CSS Ctrl/⌘ + Enter للتشغيل · Esc ثم Tab للخروج من المحرر

المتصفح

3عدّل البرنامجتدريب المنهج

أحِط المحتوى الرئيسي (العنوان Menu List والقائمة تحته) بوسم div له الفئة main.

HTML Ctrl/⌘ + Enter للتشغيل · Esc ثم Tab للخروج من المحرر

<header>
  <h1>CAFE MENU</h1>
  <ul>
    <li>About the Cafe</li>
    <li>Menu</li>
  </ul>
</header>

<h1>Menu List</h1>
<ul>
  <li>Donut<br><img src="img/donut.svg" alt="Donut image"></li>
</ul>

المتصفح

4عدّل البرنامجتدريب المنهج

في عنصر Cafe latte أضف بعد <br> صورة: src قيمتها img/cup.svg وalt قيمتها Cafe latte image.

HTML Ctrl/⌘ + Enter للتشغيل · Esc ثم Tab للخروج من المحرر

<header>
  <h1>CAFE MENU</h1>
  <ul>
    <li>About the Cafe</li>
    <li>Menu</li>
  </ul>
</header>

<div class="main">
  <h1>Menu List</h1>
  <ul>
    <li>Donut<br><img src="img/donut.svg" alt="Donut image"></li>
    <li>Cafe latte<br></li>
  </ul>
</div>

المتصفح

5عدّل البرنامجتدريب المنهج

أضف بعد قاعدة header قاعدة footer: الخلفية #1e90ff ثم لون النص #ffffff.

CSS Ctrl/⌘ + Enter للتشغيل · Esc ثم Tab للخروج من المحرر

header {
  background-color: rgb(255, 255, 180);
}

المتصفح

6أكمل الفراغتدريب المنهج

صفحة مطعم: اجعل اسم المطعم داخل header، والقائمة داخل div، وContact Us داخل footer.

HTML Ctrl/⌘ + Enter للتشغيل · Esc ثم Tab للخروج من المحرر

___
  <h3>Delicious Pasta Restaurant</h3>
___
___
  <ul>
    <li>Pasta</li>
    <li>Pizza</li>
  </ul>
___
___
  <p>Contact Us</p>
___

المتصفح

7اكتب البرنامجتدريب إضافي

ابنِ صفحة لمعرض الكتب في مدرستك (CSS جاهز): header فيه عنوان h1، ثم div بالفئة main فيه قائمة بالأشياء المعروضة مع صورة واحدة على الأقل من img/book.svg أو img/cake.svg أو img/ball.svg، ثم footer فيه موعد المعرض. اختر النصوص بنفسك.

HTML Ctrl/⌘ + Enter للتشغيل · Esc ثم Tab للخروج من المحرر

المتصفح

النقاط الرئيسية

تخطيط الصفحة الشائع: <header> ثم المحتوى الرئيسي ثم <footer>.
<div class="main"> يجمع محتويات مختلفة في قسم واحد.
أسماء الوسوم والفئات تصلح مُحدِّدات: header { } وfooter { } و.main { }.