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

سؤال تدريب 2: أنشئ جدول HTML الذي يحتوي على خمس خلايا بعرض 100%، ثم استخدم خاصية CSS لإضافة حدود إلى الجدول. غير نمط الجدول الذي أنشأته حسب التعليمات التالية. > إضافة فراغ (Padding) إلى الجدول من اليسار واليمين والأعلى والأسفل بقيمة تساوي 25 بكسل. > إعطاء لون لخلفية الصف الأول في الجدول. > توسيط النص للصف الثاني في الجدول. > محاذاة النص لليسار للصف الثالث في الجدول. > ضبط حجم الخط (Font Size) للنص على 25 بكسل للصف الرابع في الجدول. > ضبط عرض الخط (Font Weight) للنص على غامق للصف الخامس في الجدول.

الإجابة: س 2: إنشاء جدول بعرض %100 مكون من 5 صفوف (وفي كل صف خلية واحدة) مثل: خلية 1، خلية 2، خلية 3، خلية 4، خلية 5. - إضافة حدود (Border) للجدول ولكل خلية (ويُفضل دمج الحدود حتى تظهر كخط واحد باستخدام خاصية دمج الحدود). - تطبيق التنسيقات المطلوبة على الصفوف: (1) إضافة Padding = 25px من جميع الجهات داخل خلايا الجدول. (2) الصف الأول: تحديد لون خلفية (Background) للصف. (3) الصف الثاني: توسيط النص. (4) الصف الثالث: محاذاة النص لليسار. (5) الصف الرابع: حجم الخط = 25px. (6) الصف الخامس: عرض الخط = غامق .(Bold)

خطوات الحل:

1. **الخطوة 1 (المعطيات والهدف):** لنفهم المطلوب: نريد إنشاء جدول HTML يحتوي على خمس صفوف، وفي كل صف خلية واحدة. هذا يعني أن الجدول سيكون له 5 صفوف وكل صف يحتوي على عمود واحد. ثم نريد إضافة تنسيقات CSS محددة لهذا الجدول وللصفوف بداخله.
2. **الخطوة 2 (إنشاء هيكل HTML الأساسي):** نبدأ بكتابة هيكل الجدول باستخدام الوسم `<table>`. داخل الوسم، ننشئ خمسة صفوف باستخدام الوسم `<tr>`، وفي كل صف نضع خلية واحدة باستخدام الوسم `<td>`. يمكننا وضع نص داخل كل خلية مثل "خلية 1"، "خلية 2"، وهكذا. مثال للهيكل: html <table> <tr> <td>خلية 1</td> </tr> <tr> <td>خلية 2</td> </tr> <!-- ... وهكذا للصفوف 3، 4، 5 --> </table>
3. **الخطوة 3 (إضافة تنسيقات CSS الأساسية):** نحتاج إلى استخدام CSS لتطبيق المطلوب. أولاً، نجعل عرض الجدول 100% باستخدام `width: 100%;`. ثم نضيف حدوداً للجدول وللخلايا. لتجنب ظهور حدود مزدوجة، نستخدم خاصية `border-collapse: collapse;` لدمج الحدود وجعلها خطاً واحداً. مثال للتنسيقات الأساسية: css table { width: 100%; border-collapse: collapse; } table, td { border: 1px solid black; }
4. **الخطوة 4 (تطبيق التنسيقات المحددة لكل صف):** الآن نطبق التنسيقات المطلوبة لكل صف على حدة: 1. **لجميع الخلايا:** نضيف فراغاً (Padding) بقيمة 25 بكسل من جميع الجهات باستخدام `padding: 25px;`. 2. **للصف الأول:** نعطي لوناً للخلفية، مثلاً `background-color: lightblue;`. 3. **للصف الثاني:** نوسط النص باستخدام `text-align: center;`. 4. **للصف الثالث:** نحاذي النص لليسار باستخدام `text-align: left;`. 5. **للصف الرابع:** نضبط حجم الخط على 25 بكسل باستخدام `font-size: 25px;`. 6. **للصف الخامس:** نضبط عرض الخط على غامق باستخدام `font-weight: bold;`. يمكن تطبيق هذه التنسيقات عن طريق إعطاء كل صف معرفاً (id) أو فئة (class) في HTML، ثم تنسيقه في CSS. مثال باستخدام الفئات: css /* تطبيق Padding على جميع الخلايا */ td { padding: 25px; } /* تنسيقات الصفوف */ .row1 { background-color: lightblue; } .row2 { text-align: center; } .row3 { text-align: left; } .row4 { font-size: 25px; } .row5 { font-weight: bold; } ثم نضيف الفئة المناسبة لكل وسم `<tr>` في HTML، مثل `<tr class="row1">`.
5. **الخطوة 5 (النتيجة النهائية):** بجمع هيكل HTML مع تنسيقات CSS، نحصل على جدول بعرض 100%، له حدود، وبه خمس خلايا (صفوف) مع تطبيق جميع التنسيقات المطلوبة بدقة على كل صف.

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

الإجابة: س 3: - تصميم الجدول بحيث تكون الأعمدة مثلاً: اليوم | الإفطار | وجبة خفيفة قبل الغداء | الغداء | وجبة خفيفة مسائية | العشاء. - مثال محتوى (قابل للتعديل حسب احتياج جسمك من السعرات)، على أساس 2000 سعرة/يوم: | اليوم | الإفطار | وجبة خفيفة قبل الغداء | الغداء | وجبة خفيفة مسائية | العشاء | |:---:|:---:|:---:|:---:|:---:|:---:| | الأحد | 450 | 150 | 700 | 200 | 500 | | الإثنين | 400 | 200 | 700 | 200 | 500 | | الثلاثاء | 450 | 150 | 650 | 250 | 500 | | الأربعاء | 500 | 150 | 650 | 200 | 500 | | الخميس | 450 | 150 | 750 | 150 | 500 | | الجمعة | 500 | 200 | 700 | 200 | 400 | | السبت | 450 | 200 | 700 | 150 | 500 | - تنسيق الجدول المطلوب: إضافة حدود للجدول والخلايا، إضافة Padding مناسب داخل الخلايا، مع تنسيق صف العناوين (مثل تلوينه أو توسيط نصه) لضبط الشكل العام للجدول.

خطوات الحل:

1. **الخطوة 1 (المعطيات والهدف):** الفكرة هنا هي تصميم جدول يوضح خطة أسبوعية لنظام غذائي صحي. الجدول يجب أن يعرض الوجبات الخمسة لكل يوم من أيام الأسبوع، مع ذكر السعرات الحرارية المقترحة لكل وجبة.
2. **الخطوة 2 (تصميم هيكل الجدول في HTML):** نبدأ بتحديد هيكل الجدول. الأعمدة الرئيسية ستكون: - عمود لأيام الأسبوع (من الأحد إلى السبت). - عمود لكل وجبة من الوجبات الخمس: الإفطار، الوجبة الخفيفة قبل الغداء، الغداء، الوجبة الخفيفة المسائية، العشاء. لذلك، سيكون للجدول صف للعناوين (الرأس) يحتوي على هذه الأعمدة، ثم 7 صفوف للبيانات (واحد لكل يوم). مثال لهيكل HTML: html <table> <tr> <th>اليوم</th> <th>الإفطار</th> <th>وجبة خفيفة قبل الغداء</th> <th>الغداء</th> <th>وجبة خفيفة مسائية</th> <th>العشاء</th> </tr> <tr> <td>الأحد</td> <td>450</td> <td>150</td> <td>700</td> <td>200</td> <td>500</td> </tr> <!-- ... صفوف لأيام الإثنين حتى السبت --> </table> نستخدم الوسم `<th>` للخلايا في صف العناوين لأنه يعطيها أهمية ودلالة أنها عناوين.
3. **الخطوة 3 (إضافة المحتوى والتنسيقات الأساسية):** نملأ الجدول بقيم السعرات الحرارية المقترحة، كما هو موضح في الإجابة النموذجية (مثال على أساس 2000 سعرة حرارية في اليوم). ثم نضيف تنسيقات CSS لجعل الجدول واضحاً ومنظماً: 1. **إضافة حدود:** نضيف حدوداً للجدول ولجميع الخلايا (`<th>` و `<td>`) باستخدام خاصية `border`. 2. **إضافة فراغ (Padding):** نضيف مسافة داخلية مناسبة داخل كل خلية باستخدام `padding` (مثلاً 10px) لتحسين القراءة. 3. **تنسيق صف العناوين:** يمكننا تمييز صف العناوين (`<tr>` الأول) بتلوين خلفيته (`background-color`) وتوسيط النص فيه (`text-align: center;`) ليكون واضحاً. مثال للتنسيقات: css table, th, td { border: 1px solid black; border-collapse: collapse; } th, td { padding: 10px; text-align: center; } th { background-color: #f2f2f2; /* لون خلفية فاتح للعناوين */ } يمكن تعديل الألوان والقيم حسب التفضيل.
4. **الخطوة 4 (النتيجة النهائية):** بعد تنفيذ الخطوات السابقة، نحصل على جدول منظم يعرض خطة أسبوعية كاملة للنظام الغذائي، حيث يمكن للطالب رؤية توزيع السعرات الحرارية المقترحة لكل وجبة في كل يوم، بشكل واضح وجذاب بفضل التنسيقات المطبقة.

لجعل النص داخل خلية في جدول HTML متجهاً إلى الوسط، أي خاصية CSS يجب استخدامها؟

• أ) vertical-align: middle;
• ب) align: center;
• ج) text-align: center;
• د) margin: auto;

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

الإجابة: text-align: center;

الشرح: 1. خاصية `text-align` في CSS تتحكم في المحاذاة الأفقية للنص داخل عنصر. 2. القيمة `center` تجعل النص في منتصف العنصر أفقيًا. 3. لتطبيقها على صف معين في جدول، يمكن استخدام محدد مثل `.row2 { text-align: center; }`.

تلميح: الخاصية تتحكم في محاذاة النص أفقيًا.

التصنيف: صيغة/خطوات | المستوى: سهل

ما هي الخاصية الصحيحة في CSS لتحديد لون خلفية الصف الأول في جدول HTML؟

• أ) color
• ب) background-color
• ج) bgcolor
• د) fill

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

الإجابة: background-color

الشرح: 1. خاصية `background-color` في CSS تُستخدم لتعيين لون الخلفية لعنصر. 2. لتطبيقها على الصف الأول في جدول، يمكن استخدام محدد مثل `tr:first-child` أو إضافة فئة مثل `.row1`. 3. مثال: `.row1 { background-color: lightblue; }`.

تلميح: هذه الخاصية مسؤولة عن تعيين لون الخلفية لأي عنصر.

التصنيف: صيغة/خطوات | المستوى: سهل

لجعل حدود الجدول تظهر كخط واحد متصل بدلاً من خطوط مزدوجة منفصلة بين الخلايا، أي خاصية CSS يجب تعيينها للجدول؟

• أ) border: none;
• ب) border-merge: true;
• ج) border-collapse: collapse;
• د) border-spacing: 0;

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

الإجابة: border-collapse: collapse;

الشرح: 1. خاصية `border-collapse` في CSS تتحكم في نموذج عرض حدود الجدول. 2. القيمة `collapse` تدمج الحدود المتجاورة للخلايا والجدول في حد واحد مشترك. 3. هذا يمنع ظهور المسافات المزدوجة بين الخلايا ويجعل التصميم أنظف. 4. تُطبق على وسم `<table>` نفسه.

تلميح: تجمع هذه الخاصية الحدود المتجاورة في حد واحد.

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

أي من خصائص CSS التالية تُستخدم لضبط ثخانة الخط ليظهر بشكل "غامق" (Bold) عند تنسيق صفوف الجدول، كما هو مطلوب في تدريبات الكتاب؟

• أ) font-style: bold;
• ب) text-weight: bold;
• ج) font-weight: bold;
• د) font-thickness: bold;

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

الإجابة: font-weight: bold;

الشرح: 1. لتغيير ثخانة النص في CSS نستخدم الخاصية font-weight. 2. القيمة bold تجعل النص غامقاً. 3. يقع الكثير من الطلاب في خطأ استخدام font-style، لكنها مخصصة لإمالة النص (italic). 4. الخيار font-weight: bold; هو التنسيق القياسي المتبع في لغة CSS لتحقيق هذا الهدف.

تلميح: فكر في الكلمة التي تعني "وزن" الخط برمجياً وليس نمطه (Style).

التصنيف: صيغة/خطوات | المستوى: متوسط

عند تنسيق صف في جدول HTML ليكون النص بداخله بحجم 25 بكسل وبخط عريض (Bold)، ما هي خصائص CSS المناسبة لتحقيق ذلك؟

• أ) font-size: 25px; و font-style: bold;
• ب) text-size: 25px; و font-weight: bold;
• ج) font-size: 25px; و font-weight: bold;
• د) font-height: 25px; و text-weight: bold;

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

الإجابة: font-size: 25px; و font-weight: bold;

الشرح: 1. خاصية font-size هي المسؤولة عن تحديد حجم الخط، وفي هذه الحالة تُضبط على 25px. 2. خاصية font-weight هي المسؤولة عن تحديد ثخانة الخط (وزنه)، والقيمة bold تجعله عريضاً أو غامقاً. 3. يجب تجنب الخلط مع font-style التي تستخدم لجعل الخط مائلاً (italic) وليست للخط العريض.

تلميح: فرق بين الخاصية التي تحدد مقاس الخط بالبكسل والخاصية التي تحدد ثخانة الخط (غامق).

التصنيف: صيغة/خطوات | المستوى: متوسط