الدولة: المملكة العربية السعودية | المنهج: المنهج السعودي - وزارة التعليم
📚 معلومات الصفحة
الكتاب: كتاب التقنية الرقمية - الصف 11 - الفصل 1 | المادة: التقنية الرقمية | المرحلة: الصف 11 | الفصل الدراسي: 1
الدولة: المملكة العربية السعودية | المنهج: المنهج السعودي - وزارة التعليم
نوع المحتوى: درس تعليمي
📝 ملخص الصفحة
📚 تنسيق العناصر في صفحة الويب
المفاهيم الأساسية
خصائص نموذج الصندوق (BOX-Model): خصائص الحدود، والهوامش، والفراغات المحيطة. تُستخدم لإنشاء الفراغات المناسبة بين العناصر في الصفحة الإلكترونية وترتيبها بشكل مناسب.
خريطة المفاهيم
```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)
تحديد عنصر معين داخل 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;`
###### ملاحظة مهمة
يجب الابتعاد عن استخدام الأرقام الكبيرة عند تغيير خصائص نموذج الصندوق، حيث إنها من الممكن أن تتسبب في تشويه مظهر الصفحات الإلكترونية.
```
نقاط مهمة
خصائص الحدود، الهوامش، والفراغات المحيطة (نموذج الصندوق) هي أدوات أساسية لترتيب العناصر وإنشاء فراغات مناسبة بينها.
خاصية `text-align` تُستخدم لمحاذاة النص، مثل توسيطه.
عند تطبيق خصائص نموذج الصندوق (مثل `padding`)، يجب تجنب استخدام أرقام كبيرة لأنها قد تشوه مظهر الصفحة.
📋 المحتوى المنظم
📖 محتوى تعليمي مفصّل
نوع: محتوى تعليمي
تعد خصائص الحدود، والهوامش، والفراغات المحيطة مفيدة جداً في تصميم الصفحة. يمكنك استخدامها لإنشاء الفراغات المناسبة بين العناصر في صفحتك الإلكترونية وترتيبها بشكل مناسب.
طبق ذلك على صفحتك الإلكترونية.
يجب الابتعاد عن استخدام الأرقام الكبيرة عند تغيير خصائص نموذج الصندوق (BOX-Model)، حيث إنها من الممكن أن تتسبب في تشويه مظهر الصفحات الإلكترونية.
📄 النص الكامل للصفحة
تعد خصائص الحدود، والهوامش، والفراغات المحيطة مفيدة جداً في تصميم الصفحة. يمكنك استخدامها لإنشاء الفراغات المناسبة بين العناصر في صفحتك الإلكترونية وترتيبها بشكل مناسب.
طبق ذلك على صفحتك الإلكترونية.
استخدم محاذاة النص (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;
}
يجب الابتعاد عن استخدام الأرقام الكبيرة عند تغيير خصائص نموذج الصندوق (BOX-Model)، حيث إنها من الممكن أن تتسبب في تشويه مظهر الصفحات الإلكترونية.
🎴 بطاقات تعليمية للمراجعة
عدد البطاقات: 4 بطاقة لهذه الصفحة
ما الغرض الأساسي من استخدام خصائص الحدود والهوامش والفراغات المحيطة (BOX-Model) في تصميم صفحات الويب؟
أ) لتغيير ألوان خلفية العناصر فقط.
ب) لإنشاء الفراغات المناسبة بين العناصر وترتيبها بشكل مناسب في الصفحة الإلكترونية.
ج) لإضافة تأثيرات الحركة والتحريك إلى العناصر.
د) لربط الصفحة بقواعد البيانات الخارجية.
الإجابة الصحيحة: b
الإجابة: لإنشاء الفراغات المناسبة بين العناصر وترتيبها بشكل مناسب في الصفحة الإلكترونية.
الشرح: 1. نموذج الصندوق (BOX-Model) يتحكم في كيفية عرض العناصر. 2. خصائص مثل padding و margin تتحكم في الفراغات الداخلية والخارجية. 3. الهدف النهائي هو تحسين التباعد والترتيب البصري للعناصر.
تلميح: فكر في كيفية تنظيم المسافات بين أجزاء الصفحة.
التصنيف: مفهوم جوهري | المستوى: سهل
ما الخاصية المستخدمة في CSS لمحاذاة النص أفقيًا داخل عنصر ما؟
أ) خاصية align-content
ب) خاصية vertical-align
ج) خاصية text-align
د) خاصية float
الإجابة الصحيحة: c
الإجابة: خاصية text-align
الشرح: 1. خاصية text-align في CSS تتحكم في المحاذاة الأفقية للنص. 2. قيمها الشائعة تشمل: center (لتوسيط النص)، right (لمحاذاته لليمين)، left (لمحاذاته لليسار). 3. في المثال المذكور، تم استخدام text-align: center لتوسيط النص.
تلميح: تذكر أن CSS يحتوي على خصائص تبدأ بـ 'text-' للتحكم في النص.
التصنيف: تعريف | المستوى: سهل
ما المبدأ المهم الذي يجب مراعاته عند تغيير قيم خصائص نموذج الصندوق (مثل padding و margin) لتجنب تشويه مظهر الصفحة؟
أ) استخدام وحدات القياس المطلقة (px) فقط.
ب) تطبيق نفس القيم على جميع العناصر.
ج) الابتعاد عن استخدام الأرقام الكبيرة جدًا.
د) تجاهل خاصية overflow.
الإجابة الصحيحة: c
الإجابة: الابتعاد عن استخدام الأرقام الكبيرة جدًا.
الشرح: 1. نموذج الصندوق (BOX-Model) يحدد أبعاد العنصر وفراغاته. 2. استخدام قيم كبيرة جدًا لخصائص مثل padding أو margin يمكن أن: - يجعل العناصر أكبر من اللازم. - يخل بتوازن وتخطيط الصفحة. - يجعل المحتوى يبدو مشتتًا أو خارج الإطار. 3. لذلك، يجب استخدام قيم معقولة ومناسبة للتصميم.
تلميح: فكر في العواقب البصرية للقيم المتطرفة.
التصنيف: مفهوم جوهري | المستوى: متوسط
في الكود المقدم، ما الخاصية المسؤولة عن إضافة فراغ داخلي أعلى وأسفل قسم .main؟
أ) خاصية margin-top و margin-bottom
ب) خاصية border-width
ج) خاصية padding-top و padding-bottom
د) خاصية line-height
الإجابة الصحيحة: c
الإجابة: خاصية padding-top و padding-bottom
الشرح: 1. الخصائص التي تبدأ بـ 'padding-' في CSS تتحكم في الفراغ الداخلي (المسافة بين محتوى العنصر وحافته). 2. في تعريف .main { ... }، نجد: padding-top: 20px; (فراغ داخلي علوي 20 بكسل). padding-bottom: 20px; (فراغ داخلي سفلي 20 بكسل). 3. هذه الخصائص هي جزء من نموذج الصندوق (BOX-Model).
تلميح: ابحث في الكود عن الخصائص التي تتحكم في الفراغ الداخلي.