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

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

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

الدرس: لنطبق معًا

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

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

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

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

📝 ملخص الصفحة

📚 تدريب على وسوم الجداول في HTML

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

وسم `

`: لتعريف الجدول.

وسم `

`: لإنشاء صف في الجدول.

وسم `

`: لتعريف خلية رأس في الجدول. محتوياتها تكون غامقة وموسَّطة بشكل افتراضي.

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

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

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

اختبار مدى استجابة الرسالة الإخبارية

استخدام جهاز المحاكاة (Device Emulation)

#### الوظيفة

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

  • BlackBerry Z30
  • Galaxy Note 3, Galaxy S8, Galaxy S9+
  • Microsoft Lumia 550, Microsoft Lumia 950
  • Nexus 5, Nexus 6
  • Pixel 3
#### مثال تطبيقي مرئي

  • صفحة "NEWSLETTER.html" معروضة في نافذة محاكاة.
  • مستوى التكبير: 75%.
  • محتوى: عنوان "SAUDI ARABIA NATIONAL TEAM" وصورة ملعب ونص إخباري عربي.

تدريب 1: وسوم الجداول في HTML

أسئلة الاختيار من متعدد

#### 1. الوسم المستخدم لتعريف الجدول

  • الإجابة الصحيحة: ``

    #### 2. الوسم المستخدم لإنشاء صف في الجدول

    • الإجابة الصحيحة: `
    `

    #### 3. الجملة الصحيحة حول وسم `

    ` غامقة ويتم توسيطها.

    ```

    نقاط مهمة

    • الوسم الأساسي لإنشاء أي جدول في HTML هو `
    `

    • الإجابة الصحيحة: بشكل افتراضي، تكون المحتويات المكتوبة بين الوسم `
    ` والوسم `
    `.
  • يتم بناء الجدول من صفوف باستخدام الوسم `
  • `.
  • وسم `
  • ` مخصص لخلايا الرأس (مثل عناوين الأعمدة)، وله تنسيق مرئي مميز (عريض ومركّز) بشكل تلقائي.

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

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

    لنطبق معًا

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

    لنطبق معًا

    تدريب 1

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

    تدريب 1

    1

    نوع: QUESTION_HOMEWORK

    ما الوسم المستخدم في HTML لتعريف الجدول؟

    2

    نوع: QUESTION_HOMEWORK

    ما الوسم المستخدم في HTML لإنشاء صف في الجدول؟

    3

    نوع: QUESTION_HOMEWORK

    حدد الجملة الصحيحة للوسم <th>:

    نوع: METADATA

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

    🔍 عناصر مرئية

    اختر الإجابة الصحيحة

    A two-column table presenting multiple-choice questions related to HTML tags. The left column contains radio button indicators (circles) and the options (HTML tags or descriptive statements). The right column contains the numbered questions. Each question is associated with four options.

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

    لنطبق معًا تدريب 1 ما الوسم المستخدم في HTML لتعريف الجدول؟ ما الوسم المستخدم في HTML لإنشاء صف في الجدول؟ حدد الجملة الصحيحة للوسم <th>: وزارة التعليم 311 Ministry of Education 2025 - 1447

    ✅ حلول أسئلة الكتاب الرسمية

    عدد الأسئلة: 3

    سؤال س1: 1. ما الوسم المُستخدم في HTML لتعريف الجدول؟

    الإجابة: <table>

    خطوات الحل:

    1. **الشرح:** لنفهم هذا السؤال. في لغة HTML، نستخدم وسوماً (Tags) لبناء هيكل صفحة الويب وتحديد عناصرها المختلفة. السؤال يسأل عن الوسم المخصص لإنشاء عنصر الجدول (Table). الجدول هو عنصر يستخدم لتنظيم وعرض البيانات في صفوف وأعمدة. في HTML، الوسم الذي يحيط بكل محتويات الجدول ويحدد بدايته هو الوسم `<table>`. إذن الإجابة هي: **`<table>`**

    سؤال س2: 2. ما الوسم المُستخدم في HTML لإنشاء صف في الجدول؟

    الإجابة: <tr>

    خطوات الحل:

    1. **الشرح:** الفكرة هنا هي معرفة الوسم الذي يمثل مكوناً أساسياً داخل الجدول. بعد أن نبدأ الجدول باستخدام الوسم `<table>`، نقوم بتقسيمه إلى صفوف (Rows). كل صف في الجدول يمثل مجموعة أفقية من الخلايا. الوسم المسؤول عن تعريف بداية ونهاية كل صف داخل الوسم `<table>` هو الوسم `<tr>`، وهو اختصار لـ "Table Row". إذن الإجابة هي: **`<tr>`**

    سؤال س3: 3. حدّد الجملة الصحيحة للوسم <th>:

    الإجابة: بشكل افتراضي، تكون المحتويات المكتوبة بين الوسم <th> والوسم </th> غامقة ويتم توسيطها.

    خطوات الحل:

    1. **الشرح:** نتذكر أن الوسم `<th>` في HTML يمثل خلية رأس (Table Header) داخل الجدول. عادةً ما نستخدمه في الصف الأول من الجدول أو العمود الأول ليعبر عن عنوان العمود أو الصف. بتطبيق هذا على السؤال، نبحث عن الجملة التي تصف الخصائص الافتراضية لمحتوى هذا الوسم. من خصائص المتصفحات أن تعامل النص داخل وسوم `<th>` بشكل مميز عن النص العادي في الخلايا `<td>`، حيث تجعله غامقاً (Bold) وتوسّطه (Center) تلقائياً لتمييزه كعنوان. لذلك الإجابة هي: **بشكل افتراضي، تكون المحتويات المكتوبة بين الوسم <th> والوسم </th> غامقة ويتم توسيطها.**

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

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

    ما الخاصية الافتراضية للنص الموجود داخل الوسم `<th>` في HTML؟

    • أ) يكون النص مائلاً (Italic) ومحاذياً لليمين.
    • ب) يكون النص عادياً (Normal) ومحاذياً لليسار.
    • ج) يكون النص غامقاً (Bold) وموسّطاً (Centered).
    • د) يكون النص مسطراً (Underlined) ومحاذياً لليسار.

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

    الإجابة: يكون النص غامقاً (Bold) وموسّطاً (Centered).

    الشرح: 1. الوسم `<th>` يمثل خلية رأس (Table Header) في الجدول. 2. وظيفته الأساسية هي احتواء عناوين الأعمدة أو الصفوف. 3. لتسهيل تمييز العناوين عن البيانات العادية، تضيف المتصفحات تلقائياً تنسيقاً افتراضياً. 4. هذا التنسيق الافتراضي يجعل النص داخل `<th>` غامقاً (Bold) وموسّطاً أفقيًا (Centered).

    تلميح: يستخدم هذا الوسم لعناوين الأعمدة أو الصفوف في الجدول لتمييزها.

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

    ما هي الخصائص التنسيقية الافتراضية التي يطبقها المتصفح على المحتوى المكتوب بين الوسم <th> والوسم </th> في جداول HTML؟

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

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

    الإجابة: يتم عرض المحتوى بخط غامق ويتم توسيطه تلقائيًا داخل الخلية.

    الشرح: 1. في لغة HTML، يرمز الوسم <th> إلى (Table Header) أو رأس الجدول. 2. المتصفحات مبرمجة لتطبيق تنسيق افتراضي محدد على محتويات هذا الوسم لتمييزها كعناوين. 3. التنسيق التلقائي يتضمن جعل النص عريضاً (Bold) وتوسيط محاذاته (Centered) داخل خلية الجدول.

    تلميح: تذكر أن هذا الوسم يُستخدم لتعريف رؤوس الجداول (Table Headers) لتمييزها بصرياً عن بقية البيانات.

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

    ما هي الخصائص التنسيقية الافتراضية التي يطبقها المتصفح على المحتوى الموجود داخل وسم <th> في جداول HTML؟

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

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

    الإجابة: تظهر المحتويات بشكل غامق ويتم توسيطها تلقائياً داخل الخلية.

    الشرح: 1. يُستخدم الوسم <th> لتعريف خلية رأس الجدول (Table Header). 2. لتمييز العناوين عن بقية البيانات، تقوم المتصفحات افتراضياً بتطبيق تنسيق محدد. 3. هذا التنسيق يشمل جعل النص عريضاً (Bold) وتغيير محاذاته لتكون في منتصف الخلية (Centered).

    تلميح: فكر في كيفية تمييز عناوين الأعمدة (Table Header) عن البيانات العادية في الجدول.

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

    إدرس AI - مدرس ذكاء اصطناعي مجاني للمناهج السعودية | وزارة التعليم