بـنـفـس الـطـريـقـة، نـسـق قـسـم الـتـعـديـل (Footer)

📚 معلومات الصفحة

الكتاب: كتاب التقنية الرقمية - الصف 11 - الفصل 1 | المادة: التقنية الرقمية | المرحلة: الصف 11 | الفصل الدراسي: 1

الدولة: المملكة العربية السعودية | المنهج: المنهج السعودي - وزارة التعليم

نوع المحتوى: درس تعليمي

📝 ملخص الصفحة

📚 تنسيق قسم التذييل (Footer)

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

تنسيق قسم التذييل (Footer): تطبيق أنماط CSS على قسم التذييل في صفحة الويب بنفس الطريقة المستخدمة في تنسيق الأقسام الأخرى.

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

```markmap

تصميم الموقع الإلكتروني

مراحل الإنشاء

3. التنفيذ

#### تقسيم الصفحة إلى أقسام

##### استخدام HTML و CSS

###### وسم التقسيم `

حاوية لعناصر HTML
لتطبيق أنماط CSS على المجموعة

###### خاصية `class`

لتطبيق نفس التنسيق على عناصر متعددة

#### تخطيط العناصر

##### مثال تطبيقي: صفحة مشجعي كرة القدم

###### Menu

يحتوي على قائمة روابط التنقل (الصفحة الرئيسية، التاريخ، المعرض، نبذة، اتصل بنا)
لون الخلفية: `#426C35`

###### Main

يحتوي على المحتوى الرئيسي
لون الخلفية: `#f5f5f5`

####### ألبوم الصور

مكان لتبادل الأفكار والآراء
يمكن إضافة صور أو مقالات عبر نموذج
صور مرتبطة بكرة القدم (كأس العالم، الملعب، الاستاد، شعار السعودية)

####### معلومات مفيدة

طرق التواصل: البريد الإلكتروني (info@example.com)
مواقع زيارة: Fifa.com، UEFA.com

###### Photos (اليوم الصور)

قسم لعرض مجموعة واسعة من الصور
صور المباريات واللاعبين والفرق والبطولات
يهدف لتوفير تجربة بصرية غنية
لون الخلفية: `#F0EDE4`

###### Footer (نبذة)

قسم يحتوي على معلومات مفيدة
يلخص أهداف الصفحة
لون الخلفية: `#777777`

#### تطبيق الأنماط باستخدام CSS

##### إنشاء ملف CSS

يُنشأ ملف باسم `style.css` في مجلد الصفحات (مثال: في محرر Visual Studio Code)

##### ربط CSS بـ HTML

استخدام وسم `` داخل قسم `` في ملف HTML
مثال: ``

##### تعيين الخطوط الأساسية

الخطوة الأساسية: تعيين خط عام للنصوص غير المصممة
مثال: `font-family: 'Tahoma', 'Open Sans', sans-serif;`

##### خصائص CSS للخلفية

###### background-color

لتعيين لون خلفية العناصر

###### background-image

لتعيين صورة خلفية للعناصر

###### background-repeat

لتحديد كيفية تكرار صورة الخلفية

###### background-position

لتحديد موضع صورة الخلفية

##### محددات CSS

###### محدد class

الصيغة العامة: `.اسم_class`
مثال: `.menu { background-color: #426C35; }`
تحديد عنصر معين داخل class: `اسم_العنصر.اسم_class`
مثال: `.footer p { color: #f5f5f5; }`

##### التحكم في تدفق المحتوى

###### خاصية تجاوز السعة (Overflow)

للتحكم في المحتوى الأكبر من مساحة الصفحة
قيمها: visible, hidden, scroll, auto
القيمة `auto`: يتم قص المحتوى الزائد وإضافة شريط تمرير عند الحاجة

#### التحكم في تخطيط العناصر

##### نموذج الصندوق (Box Model)

###### المفهوم

تتعامل CSS مع كل عنصر HTML كما لو كان له صندوق خاص
يسمح بالتحكم في الأبعاد والحدود والفراغ حول كل صندوق

###### خصائص نموذج الصندوق

####### الإطار (Border)

حدود تفصل حافة كل صندوق عن الآخر
قد تكون مرئية أو غير مرئية

####### الهامش (Margin)

المساحة خارج حدود الإطار

####### الفراغ (Padding)

المساحة بين الإطار والمحتوى الداخلي

###### التحكم في الفراغ (Padding)

يمكن تحديد قيم لكل جانب من جوانب الفراغ:
`padding-top`: الفراغ العلوي
`padding-right`: الفراغ في الجهة اليمنى
`padding-bottom`: الفراغ السفلي
`padding-left`: الفراغ في الجهة اليسرى
يمكن استخدام نفس الطريقة المختصرة لتحديد الهامش (Margin)

###### تطبيق عملي للتنسيق

####### محاذاة النص (text-align)

تُستخدم لتوسيط النص داخل العنصر.

####### تطبيق الخصائص على الأقسام

`.main`

- `overflow: auto;`

- `text-align: center;`

- `background-color: #f5f5f5;`

- `padding-top: 20px;`

- `padding-bottom: 20px;`

`.photos`

- `overflow: auto;`

- `padding-top: 20px;`

- `padding-bottom: 40px;`

- `text-align: center;`

- `background-color: #F0EDE4;`

`.footer`

- `overflow: auto;`

- `padding-top: 20px;`

- `padding-bottom: 20px;`

- `text-align: center;`

- `background-color: #777777;`

###### ملاحظة مهمة

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

#### محتوى صفحة مشجعي كرة القدم

##### الهدف

تشجيع اللاعبين أثناء المباراة.

##### التاريخ

بدأت في إنجلترا منتصف القرن التاسع عشر.
الرياضة الأكثر شعبية في العالم.
يتابعها أكثر من 250 مليون شخص في أكثر من 200 دولة.
ظاهرة عالمية تجمع الناس من مختلف الثقافات.

##### نبذة عن الصفحة

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

##### معلومات مفيدة

البريد الإلكتروني: info@resample.com
مواقع زيارة: Fifa.com، UEFA.com

##### العناصر المرئية

###### Figure 1: Saudi National Team

تمثل جانب المنتخب الوطني في كرة القدم.

###### Figure 2: FIFA World Cup Trophy

تمثل الجائزة الكبرى في كرة القدم الدولية.

###### Figure 3: Football Stadium

توضح مكان إقامة المباريات.

#### التحكم في حجم ومحاذاة الصور

##### استخدام قواعد CSS

لتحديد حجم ومحاذاة الصور.
لجعل الصور أكثر جاذبية باستخدام خصائص أخرى.

##### تطبيق قواعد CSS على الصور

داخل قسم `.photos` باستخدام محدد `.photos img`.

##### خصائص CSS المستخدمة للصور

###### الإطار (Border)

`border-style: solid;`
`border-width: 2px;`
`border-color: #426C35;`

###### نصف قطر الإطار (border-radius)

`border-radius: 6px;`
لتغيير مظهر حواف الصورة.

###### الهامش (Margin)

`margin: 2px;`

###### ملاءمة الكائن (object-fit)

`object-fit: cover;`

###### موضع الكائن (object-position)

`object-position: top;`

##### المعرض (Photos)

قسم لعرض الصور بعد تطبيق أنماط CSS عليه.

#### تنسيق شريط التصفح

##### تنسيق قائمة التنقل الرئيسية (`.menu ul`)

`text-align: center;`
`padding-top: 20px;`
`padding-bottom: 20px;`
`text-decoration: none;`

##### تنسيق عناصر القائمة (`.menu li`)

`display: inline-block;`
`text-align: center;`

##### تنسيق روابط القائمة (`.menu li a`)

`display: inline-block;`
`height: auto;`
`width: 150px;`
`color: #333333;`
`background-color: #f5f5f5;`
`padding: 10px;`
`margin: 4px;`
`text-align: center;`
`font-size: 18px;`
`font-weight: bold;`
`text-decoration: none;`
`border-radius: 4px;`

##### تأثير التمرير (`.menu li a:hover`)

`background-color: #d6d599;`

#### عرض النتيجة النهائية في المتصفح

##### شكل الصفحة في المتصفح

تظهر الصفحة في المتصفح مع شريط تصفح (Navigation Bar) بعد تطبيق التنسيقات عليه.

##### تفاعل واجهة المستخدم

يتغير لون زر شريط التصفح عند تمرير الفأرة عليه (Hover Effect).

#### تنسيق قسم التذييل (Footer)

##### تنسيق قائمة التذييل (`.footer ul`)

`text-align: center;`
`padding-top: 10px;`
`padding-bottom: 10px;`
`text-decoration: none;`

##### تنسيق عناصر قائمة التذييل (`.footer li`)

`display: inline-block;`
`text-align: center;`

##### تنسيق روابط قائمة التذييل (`.footer li a`)

`display: inline-block;`
`height: auto;`
`width: auto;`
`color: #333333;`
`background-color: #f5f5f5;`
`padding: 10px;`
`margin: 4px;`
`text-align: center;`
`font-size: 16px;`
`font-weight: bold;`
`text-decoration: none;`

##### تأثير التمرير على روابط التذييل (`.footer li a:hover`)

`background-color: #d6d599;`

##### عرض النتيجة النهائية

ستظهر الصفحة على المتصفح بالشكل التالي بعد تنسيق التذييل.

##### محتوى قسم التذييل (نبذة)

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

##### معلومات مفيدة في التذييل

UEFA.com
Fifa.com
info@example.com

```

نقاط مهمة

يتم تنسيق قسم التذييل (Footer) بنفس طريقة تنسيق الأقسام الأخرى (مثل القائمة الرئيسية Menu).
يتم استخدام محددات CSS الخاصة بالفئة `.footer` لتطبيق الأنماط على العناصر داخل هذا القسم.
من خصائص التنسيق المستخدمة: `text-align` للمحاذاة، `padding` للفراغ الداخلي، `background-color` للون الخلفية، و `hover` لتأثير التمرير.
بعد التنسيق، يظهر قسم التذييل في المتصفح بشكل منظم ويحتوي على معلومات مفيدة وروابط.

📋 المحتوى المنظم

📖 محتوى تعليمي مفصّل

نوع: محتوى تعليمي

بـنـفـس الـطـريـقـة، نـسـق قـسـم الـتـعـديـل (Footer)

نوع: محتوى تعليمي

.footer ul {
  text-align: center;
  padding-top: 10px;
  padding-bottom: 10px;
  text-decoration: none;
}
.footer li {
  display: inline-block;
  text-align: center;
}
.footer li a {
  display: inline-block;
  height: auto;
  width: auto;
  color: #333333;
  background-color: #f5f5f5;
  padding: 10px;
  margin: 4px;
  text-align: center;
  font-size: 16px;
  font-weight: bold;
  text-decoration: none;
}
.footer li a:hover {
  background-color: #d6d599;
}

نوع: محتوى تعليمي

ستظهر الصفحة على المتصفح بالشكل التالي:

نبذة

نوع: محتوى تعليمي

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

نوع: محتوى تعليمي

معلومات مفيدة

نوع: NON_EDUCATIONAL

UEFA.com Fifa.com info@example.com

نوع: METADATA

Ministry of Education
2025 - 1447

التذييل بعد التنسيق.

نوع: NON_EDUCATIONAL

التذييل بعد
التنسيق.

📄 النص الكامل للصفحة

--- SECTION: بـنـفـس الـطـريـقـة، نـسـق قـسـم الـتـعـديـل (Footer) ---
بـنـفـس الـطـريـقـة، نـسـق قـسـم الـتـعـديـل (Footer)

.footer ul {
  text-align: center;
  padding-top: 10px;
  padding-bottom: 10px;
  text-decoration: none;
}
.footer li {
  display: inline-block;
  text-align: center;
}
.footer li a {
  display: inline-block;
  height: auto;
  width: auto;
  color: #333333;
  background-color: #f5f5f5;
  padding: 10px;
  margin: 4px;
  text-align: center;
  font-size: 16px;
  font-weight: bold;
  text-decoration: none;
}
.footer li a:hover {
  background-color: #d6d599;
}

ستظهر الصفحة على المتصفح بالشكل التالي:

--- SECTION: نبذة ---
من خلال هذه الصفحة يمكننا تبادل الأفكار والأراء.
من خلال فريق كرة القدم الذي يسمح له بـ جـول كـرة الـقـدم بـشـكـل عـام فـي وقـت حـالـي.
يمكننا أيضاً التواصل من خلال الصور أو المقالات إلى المعرض.

معلومات مفيدة

UEFA.com Fifa.com info@example.com

Ministry of Education
2025 - 1447

--- SECTION: التذييل بعد التنسيق. ---
التذييل بعد
التنسيق.

🎴 بطاقات تعليمية للمراجعة

عدد البطاقات: 3 بطاقة لهذه الصفحة

ما الغرض من الخاصية `text-align: center;` في قاعدة CSS الخاصة بـ `.footer ul`؟

أ) تغيير لون خلفية التذييل.
ب) جعل عناصر القائمة تظهر بشكل أفقي (inline-block).
ج) محاذاة النص داخل عناصر القائمة غير المرتبة في التذييل إلى المنتصف.
د) إضافة مسافة داخلية (padding) أعلى وأسفل التذييل.

الإجابة الصحيحة: c

الإجابة: محاذاة النص داخل عناصر القائمة غير المرتبة في التذييل إلى المنتصف.

الشرح: 1. الخاصية `text-align` في CSS تتحكم في محاذاة النص الأفقي داخل عنصر كتلة. 2. القيمة `center` تعني محاذاة النص إلى منتصف العنصر. 3. عند تطبيقها على `.footer ul`، فإنها تضمن أن النص داخل جميع عناصر `<li>` الفرعية سيكون في المنتصف.

تلميح: تتعلق هذه الخاصية بمحاذاة النص داخل العنصر.

التصنيف: مفهوم جوهري | المستوى: سهل

في CSS، ما الذي تفعله الخاصية `display: inline-block;` عند تطبيقها على عنصر `<li>` داخل `.footer`؟

أ) تجعل عنصر القائمة مخفيًا تمامًا عن العرض.
ب) تجعل عناصر القائمة تظهر في صف أفقي مع الاحتفاظ بقدرتها على تحديد الأبعاد (العرض والارتفاع).
ج) تغير لون النص داخل رابط القائمة.
د) تضيف مسافة بين عناصر القائمة تلقائيًا.

الإجابة الصحيحة: b

الإجابة: تجعل عناصر القائمة تظهر في صف أفقي مع الاحتفاظ بقدرتها على تحديد الأبعاد (العرض والارتفاع).

الشرح: 1. القيمة الافتراضية لعنصر `<li>` هي `list-item` (كتلة). 2. `inline-block` تجعل العنصر يتصرف كعنصر مضمن (inline) من حيث التدفق (يظهر بجوار العناصر الأخرى في سطر). 3. في نفس الوقت، يحتفظ العنصر بخصائص الكتلة (block) مثل القدرة على تحديد العرض (`width`) والارتفاع (`height`). 4. هذا يسمح لعناصر القائمة في التذييل بالاصطفاف أفقيًا مع إمكانية التحكم في أبعادها.

تلميح: هذه الخاصية تجمع بين خصائص `inline` و `block`.

التصنيف: تعريف | المستوى: متوسط

ما تأثير تطبيق `:hover` على رابط (`<a>`) داخل عنصر قائمة (`.footer li a:hover`) في المثال المذكور؟

أ) تغيير حجم خط النص داخل الرابط.
ب) إزالة الخط التحتي (`text-decoration`) من الرابط.
ج) تغيير لون النص داخل الرابط إلى الأبيض.
د) تغيير لون الخلفية للرابط إلى `#d6d599` عندما يمر مؤشر الفأرة فوقه.

الإجابة الصحيحة: d

الإجابة: تغيير لون الخلفية للرابط إلى `#d6d599` عندما يمر مؤشر الفأرة فوقه.

الشرح: 1. `:hover` هو pseudo-class في CSS يحدد نمط العنصر عندما يمر مؤشر الفأرة (mouse) فوقه. 2. في قاعدة `.footer li a:hover`، يتم استهداف عنصر الرابط (`<a>`) داخل القائمة عند حالة المرور. 3. الخاصية `background-color: #d6d599;` تغير لون الخلفية للرابط إلى اللون المحدد (#d6d599) في تلك الحالة فقط. 4. هذا يوفر ملاحظة بصرية (feedback) للمستخدم تفيد بأن العنصر قابل للنقر.

تلميح: يصف `:hover` حالة العنصر عندما يتفاعل معه المستخدم.

التصنيف: مفهوم جوهري | المستوى: سهل