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

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

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

الدرس: الصفحة الرئيسية

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

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

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

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

📝 ملخص الصفحة

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

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

الصفحة الرئيسية: القسم الرئيسي للموقع.

نبذة: قسم يلخص أهداف الصفحة.

المعرض: قسم لعرض الصور والفيديوهات.

التاريخ: قسم لتتبع تاريخ كرة القدم.

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

```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

#### إصلاح عناوين الأقسام

##### تنسيق عنوان h1

  • `color: #426C35;`
  • `font-weight: bold;`
  • `font-size: 36px;`

##### تنسيق عنوان h2 داخل قسم .main

  • `overflow: auto;`
  • `margin-top: 40px;`
  • `margin-left: auto;`
  • `margin-right: auto;`
  • `width: 200px;`
  • `padding: 10px;`
  • `background-color: #d6d599;`
  • `color: #426C35;`
  • `font-weight: bold;`
  • `text-align: center;`
  • `border-radius: 30px;`

##### تنسيق عنوان h2 داخل قسم .photos

  • `color: #426C35;`
  • `font-size: 28px;`

##### تنسيق عنوان h2 داخل قسم .footer

  • `color: #d6d599;`

##### تنسيق الفقرات داخل قسم .footer

  • `.footer p { color: #f5f5f5; }`

#### محتوى الصفحة (صفحة 249)

##### أقسام الصفحة

###### الصفحة الرئيسية

###### نبذة

###### المعرض

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

##### محتوى النص

###### الهدف من الصفحة

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

###### مهام الصفحة

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

###### تاريخ كرة القدم

  • بدأت تشكيلها الحالي في إنجلترا في منتصف القرن التاسع عشر.
  • شهدت تطوراً كبيراً عبر الزمن.
  • أصبحت رياضة عالمية تحظى بشعبية جارفة.
  • مرت بمراحل تطور عديدة.
  • شهدت ابتكارات وتغييرات في قواعدها ولعبها.
  • ساهمت في بناء مجتمعات قوية.
  • عززت الروح الرياضية بين الشعوب.
  • أصبحت ظاهرة عالمية، تتجاوز حدود الرياضة لتصبح جزءاً من الثقافة والترفيه العالمي.

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

  • UEFA.com
  • Fifa.com
  • info@example.com

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

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

  • صورة للمنتخب السعودي لكرة القدم.
  • يظهر كأس العالم FIFA في الخلفية.

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

  • صورة لكأس العالم FIFA.

###### Figure 3: Football Stadium

  • صورة لملعب كرة القدم مضاءً ليلاً.

```

نقاط مهمة

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

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

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

الصفحة الرئيسية

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

الصفحة الرئيسية

نبذة

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

نبذة

المعرض

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

المعرض

التاريخ

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

التاريخ

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

تعمل كرة القدم على جمع الناس مقولة الهدف من جمع الجمهور في هذه القمة هو تشجيع اللاعبين أثناء المباراة.

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

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

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

عناوين الأقسام بعد إجراء عمليات التنسيق.

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

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

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

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

نوع: NON_EDUCATIONAL

UEFA.com

نوع: NON_EDUCATIONAL

Fifa.com

نوع: NON_EDUCATIONAL

info@example.com

🔍 عناصر مرئية

SAUDI ARABIA NATIONAL TEAM

A photograph of the Saudi Arabian national football team posing on a field, with the FIFA World Cup trophy visible in the background.

FIFA WORLD CUP

A photograph of the FIFA World Cup trophy, a golden cup.

Football Stadium

A photograph of a football stadium at night, illuminated by floodlights, with a green pitch.

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

--- SECTION: الصفحة الرئيسية --- الصفحة الرئيسية --- SECTION: نبذة --- نبذة --- SECTION: المعرض --- المعرض --- SECTION: التاريخ --- التاريخ تعمل كرة القدم على جمع الناس مقولة الهدف من جمع الجمهور في هذه القمة هو تشجيع اللاعبين أثناء المباراة. من خلال هذه الصفحة يمكنك تتبع تاريخ كرة القدم، ومشاهدة أبرز الأحداث والإنجازات، والتعرف على أهم اللاعبين والمدربين، بالإضافة إلى استعراض صور وفيديوهات لأشهر المباريات والبطولات. يمكنك أيضاً التعرف على معلومات مفيدة حول كرة القدم. عناوين الأقسام بعد إجراء عمليات التنسيق. تعد كرة القدم رياضة ذات تاريخ طويل، بدأت تشكيلها الحالي في إنجلترا في منتصف القرن التاسع عشر. شهدت كرة القدم تطوراً كبيراً عبر الزمن، حيث أصبحت رياضة عالمية تحظى بشعبية جارفة. مرت كرة القدم بمراحل تطور عديدة، وشهدت ابتكارات وتغييرات في قواعدها ولعبها. كما ساهمت في بناء مجتمعات قوية، وعززت الروح الرياضية بين الشعوب. لقد أصبحت كرة القدم ظاهرة عالمية، تتجاوز حدود الرياضة لتصبح جزءاً من الثقافة والترفيه العالمي. معلومات مفيدة UEFA.com Fifa.com info@example.com --- VISUAL CONTEXT --- **FIGURE**: SAUDI ARABIA NATIONAL TEAM Description: A photograph of the Saudi Arabian national football team posing on a field, with the FIFA World Cup trophy visible in the background. Context: Represents the national team associated with the football fan page. **FIGURE**: FIFA WORLD CUP Description: A photograph of the FIFA World Cup trophy, a golden cup. Context: Symbol of the highest achievement in international football. **FIGURE**: Football Stadium Description: A photograph of a football stadium at night, illuminated by floodlights, with a green pitch. Context: Represents the venue for football matches.