صفحة 309 - كتاب التقنية الرقمية - الصف 11 - الفصل 1 - المملكة العربية السعودية

📚 إضافة نمط التذييل إلى خلية الجدول الأخيرة

المفاهيم الأساسية

نمط التذييل (Footer Style): تنسيق CSS يُطبق على القسم السفلي (التذييل) من الرسالة الإخبارية أو صفحة الويب. يحتوي عادةً على روابط وبريد إلكتروني وخيار إلغاء الاشتراك.

خريطة المفاهيم

```markmap

الدرس السادس: الرسائل الإخبارية الرقمية

إنشاء ملف HTML ووضع المحتوى فيه، وضبط نمط الرسالة

أضف نمط التذييل إلى خلية الجدول الأخيرة

#### محتوى التذييل

• روابط خارجية
• بريد إلكتروني للمراسلة
• رابط إلغاء الاشتراك في الرسائل الإخبارية

#### مثال تطبيقي (CSS Code for .thefooter)

• `.thefooter`: النمط العام للقسم

- `overflow: auto;` (يضيف شريط تمرير عند الحاجة)

- `padding-top: 20px;`

- `padding-bottom: 20px;`

- `text-align: center;`

• `.thefooter p`: تنسيق الفقرات

- `color: #f5f5f5;` (ألوان الخطوط)

- `text-align: center;`

• `.thefooter ul` و `.thefooter li`: تنسيق القوائم والروابط

- `display: inline-block;`

- `text-decoration: none;`

- تأثير التمرير (`:hover`): `background-color: #d6d599;`

#### مثال مرئي (Newsletter Template)

• عنوان: "تتبع أخبار المسار الناجح لفريق الصقور الخضر"
• تذييل يحتوي على:

- روابط: UEFA.com, Fifa.com

- بريد: info@example.com

- نص: "لإلغاء الاشتراك في الرسائل الإخبارية اضغط هنا"

```

نقاط مهمة

• الغرض من تذييل الرسالة الإخبارية هو تضمين معلومات اتصال وخيارات للمستلم مثل إلغاء الاشتراك.
• يتم تنسيق التذييل باستخدام فئة CSS (مثل `.thefooter`) لتحديد الهوامش والمحاذاة والألوان وتأثيرات التمرير على الروابط.
• النموذج المرئي يوضح تطبيق عملي لهذا التنسيق في رسالة إخبارية عن فريق كرة القدم.

أضف نمط التذييل إلى خلية الجدول الأخيرة

يمكن أن يحتوي التذييل على روابط وبريد إلكتروني للمراسلة، ورابط لأي شخص يريد إلغاء الاشتراك في الرسائل الإخبارية.

ستكون الرسالة الإخبارية التي أنشأتها كما في النموذج التالي:

وزارة التعليم Ministry of Education 309 2025 - 1447

أضف نمط التذييل إلى خلية الجدول الأخيرة يمكن أن يحتوي التذييل على روابط وبريد إلكتروني للمراسلة، ورابط لأي شخص يريد إلغاء الاشتراك في الرسائل الإخبارية. ستكون الرسالة الإخبارية التي أنشأتها كما في النموذج التالي: وزارة التعليم Ministry of Education 309 2025 - 1447 --- VISUAL CONTEXT --- **DIAGRAM**: CSS Styling for Footer Description: A block of CSS code defining styles for a footer element, with two annotations explaining specific properties. The code defines styles for the '.thefooter' class, paragraphs, unordered lists, list items, and anchor tags within list items, including hover effects. Context: This diagram provides a practical example of CSS code used to style a webpage footer, demonstrating properties like layout, spacing, text alignment, colors, and interactive hover effects for links. It directly relates to the main topic of adding footer styles. **FIGURE**: تتبع أخبار المسار الناجح لفريق الصقور الخضر Description: A visual example of a styled email newsletter template. It features a green header with the Saudi Arabia logo, a main content area with a title, body text about the Green Falcons football team, an image of a football stadium, and a footer with three external links and an unsubscribe option. Context: This figure serves as a visual example of the output of applying CSS styling, specifically for a newsletter footer, as described by the accompanying text and CSS code. It demonstrates a practical application of web design for email marketing.