التذييل واللمسات الأخيرة

شاهد معي: تذييل

التذييل يختم الصفحة. عادةً أغمق، هادئ، ويبقى في الأسفل:

footer {
  background-color: #1f2937;   /* dark gray */
  color: white;
  text-align: center;          /* center the text */
  padding: 24px 16px;
  margin-top: 48px;            /* space away from the content */
}

footer a {
  color: #93c5fd;              /* links in a dark footer need to be light */
}

التذييل يجب أن يتضمن: من صنع الموقع، السنة، ومعلومات الاتصال (يمكنك اختلاقها أو استخدام المدرسة – لا تضع أبداً عنوان منزلك أو رقم هاتفك على موقع).

شاهد معي: تفاصيل صغيرة تجعلك تبدو محترفاً

ثلاثة أشياء صغيرة تقريباً لا أحد يعرفها، لكنها تُحدث فرقاً هائلاً:

/* 1. Smooth scrolling when clicking a link within the page */
html {
  scroll-behavior: smooth;
}

/* 2. Images zoom in slightly when hovered */
.card img:hover,
.gallery img:hover {
  transform: scale(1.03);
}

/* 3. ...and make that zoom smooth, not instant */
img {
  transition: transform 0.2s ease;
}

transform: scale(1.03) يكبّر العنصر إلى 103%، وtransition يقول: “اجعل التغييرات بسلاسة خلال 0.2 ثانية.” مرّر الماوس فوق صورة – ترى ذلك الرفع اللطيف؟ هذا بالضبط ما تفعله المواقع الحديثة.

دورك الآن 💪

1. زيّن تذييلك حسب المثال (يمكنك مطابقة اللون للرأس) وتحقق أنه يتضمن: من صنع الموقع + السنة.

2. أضف التفاصيل الثلاث المحترفة من المثال.

3. فحص كبير لموقعك كله. مرّ على هذه القائمة:

   • القائمة تعمل من كل صفحة إلى كل صفحة.
   • كل الصور تظهر ولها alt مملوء.
   • صغّر النافذة لعرض الهاتف – كل شيء يناسب، لا شيء يفيض أفقياً.
   • التذييل لا يحتوي عنوان منزل، رقم هاتف، أو معلومات مدرسة/صف كاملة (السلامة!).
   • <title> منطقي على كل صفحة.

<footer>
  <p>Made by Jake in 2026 · built with my own two hands and HTML</p>
  <p><a href="index.html">Home</a></p>
</footer>

footer {
  background-color: #1f2937;
  color: white;
  text-align: center;
  padding: 24px 16px;
  margin-top: 48px;
}

footer a {
  color: #93c5fd;
}

html {
  scroll-behavior: smooth;
}

img {
  transition: transform 0.2s ease;
}

.card img:hover,
.gallery img:hover {
  transform: scale(1.03);
}

ما ستخرج به من هذا الدرس

• التذييل: خلفية داكنة، نص فاتح، text-align: center، margin-top.
• transition + transform = حركات صغيرة سلسة، مثل المواقع المحترفة.
• تحقق دائماً من محتواك بعين أحد الوالدين قبل النشر – المعلومات الشخصية لا مكان لها على الإنترنت.

© 2026 Ing. Martin Polak / AlgoRhino · شروط استخدام المحتوى