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

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

الإجابة: س 4: إضافة فقرتين نصيتين أعلى الصورة داخل الجدول لتظهرا فوقها مع ترك مسافة مناسبة.

خطوات الحل:

1. **الشرح:** لنفهم هذا السؤال. المطلوب هو إجراء تعديل على ملف HTML لرسالة إخبارية. الفكرة هنا هي إضافة محتوى نصي جديد (فقْرَتين) في مكان محدد، وهو أعلى صورة موجودة مسبقاً في الرسالة. عادةً، يتم بناء الرسائل الإخبارية باستخدام الجداول (Tables) في HTML لضمان التوافق. لذلك، للوصول إلى الهدف، يجب تحديد مكان الصورة داخل هيكل الجدول، ثم إضافة صف (Table Row - `<tr>`) جديد أو خلية (Table Data - `<td>`) جديدة فوق الصف الذي يحتوي على الصورة. داخل هذه الخلية الجديدة، نكتب الفقرتين النصيتين باستخدام علامات الفقرة (`<p>`). من المهم أيضاً، كما يشير السؤال، ترك مسافة مناسبة. يمكن تحقيق هذه المسافة باستخدام خاصية الهامش (Margin) أو الحشو (Padding) في CSS، أو حتى باستخدام عنصر `<br>` للتباعد البسيط في HTML. إذن، الإجراء المناسب هو: **إضافة صف (أو خلية) جديد في الجدول، فوق الصف الحاوي للصورة، وكتابة الفقرتين النصيتين داخله، مع التأكد من وجود تباعد مرئي.**

سؤال تدريب 5: أجر التغيير المناسب على ملف CSS الخاص بالرسالة الإخبارية لمشجعي فريق الصقور الخضر لكرة القدم، وذلك لإعادة تلوين الفراغات (Paddings) والتذييل (Footer) للجدول بنفس اللون.

الإجابة: س 5: تعديل CSS لتوحيد لون خلفية الـ Paddings والـ Footer ليظهرا بلون واحد.

خطوات الحل:

1. **الشرح:** الفكرة في هذا السؤال تتعلق بتصميم الواجهة وتنسيقها باستخدام CSS. لدينا عنصران في الجدول: الفراغات الداخلية (Paddings) والتذييل (Footer). حاليًا، هذان العنصران لهما ألوان خلفية مختلفة. المطلوب هو جعل لون خلفية كل منهما متماثلاً. للقيام بذلك، نذهب إلى ملف CSS الخاص بالرسالة الإخبارية. علينا تحديد القواعد (Rules) التي تتحكم في لون خلفية هذين العنصرين. عادةً ما يتم ذلك باستخدام الخاصية `background-color`. نقوم بتعديل قيمة `background-color` لقاعدة التنسيق الخاصة بـ `padding` (أو الخلايا/العناصر التي تحتوي على الحشو) وقاعدة التنسيق الخاصة بـ `footer` (أو الصف/الخلية التي تمثل التذييل) لجعل القيمة اللونية واحدة، مثل `#f0f0f0` أو أي لون آخر محدد. إذن، الإجراء هو: **فتح ملف CSS، والعثور على القواعد التي تتحكم في `padding` و `footer`، وتعديل خاصية `background-color` في كلتيهما ليكون لها نفس القيمة اللونية.**

سؤال تدريب 6: أضف صورة إلى الرسالة الإخبارية لمشجعي فريق الصقور الخضر لكرة القدم، ويجب أن تكون الصورة بين النص والتذييل في بنية الرسالة الإخبارية، ويجب أن تشغل 100% من عرض (Width) خلية الجدول.

الإجابة: س 6: إدراج صف للصورة بين النص والتذييل وضبط عرضها (Width) ليكون 100% من الخلية.

خطوات الحل:

1. **الشرح:** لنفهم هذا السؤال. المطلوب هو إدراج صورة جديدة في هيكل الرسالة الإخبارية، ولكن في مكان محدد جداً: بين النص والتذييل (Footer). نظراً لأن الرسالة مبنية بجدول، فهذا يعني أننا بحاجة إلى إضافة صف (Table Row) جديد في الجدول. يجب أن يكون موقع هذا الصف الجديد بعد الصف (أو الصفوف) الذي يحتوي على النص الرئيسي للرسالة، وقبل الصف الذي يمثل التذييل. داخل هذا الصف الجديد، نضيف خلية (Table Data). داخل هذه الخلية، نضع علامة الصورة `<img src="...">`. لضمان أن الصورة تشغل العرض بالكامل، نضبط خاصية العرض (Width) للصورة نفسها أو للخلية الحاوية لها لتكون `100%`. استخدام `width: 100%;` في CSS للصورة أو للخلية سيجعلها تتمدد لتملأ العرض الكامل للمساحة المتاحة لها داخل الخلية. إذن، الإجراء يتضمن خطوتين رئيسيتين: **أولاً، إدراج صف جديد في الجدول بين صف النص وصف التذييل. ثانياً، داخل خلية هذا الصف، إضافة علامة الصورة `<img>` مع ضبط عرضها ليكون `100%`.**

عند تعديل هيكل رسالة إخبارية مبنية بجدول HTML لإضافة محتوى نصي جديد فوق صورة، ما الإجراء المناسب؟

• أ) تعديل خاصية `src` لعلامة الصورة `<img>` لتضمين النص.
• ب) إضافة صف (Table Row) جديد في الجدول فوق الصف الحاوي للصورة، وكتابة النص داخل خلية (Table Data) باستخدام علامات الفقرة (<p>).
• ج) كتابة النص الجديد داخل سمة `alt` للصورة.
• د) استخدام JavaScript لحذف الصورة أولاً ثم إضافة النص مكانها.

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

الإجابة: إضافة صف (Table Row) جديد في الجدول فوق الصف الحاوي للصورة، وكتابة النص داخل خلية (Table Data) باستخدام علامات الفقرة (<p>).

الشرح: 1. تحديد موقع الصورة داخل هيكل الجدول. 2. إدراج صف جديد (`<tr>`) قبل الصف الذي يحتوي على الصورة. 3. داخل الصف الجديد، إضافة خلية (`<td>`) وكتابة الفقرات النصية داخلها باستخدام `<p>`. 4. يمكن استخدام CSS لإضافة مسافة مناسبة (مثل margin أو padding).

تلميح: فكر في كيفية إدراج عنصر جديد في هيكل جدولي موجود.

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

لتوحيد لون خلفية الفراغات الداخلية (Paddings) والتذييل (Footer) لجدول في CSS، ما الخاصية التي يجب تعديل قيمتها؟

• أ) تعديل خاصية `font-size` لجعل النص بنفس الحجم.
• ب) تعديل خاصية `color` لتغيير لون الخط فقط.
• ج) تعديل خاصية `background-color` في قواعد CSS الخاصة بكل من عناصر الـ Padding والـ Footer.
• د) تعديل خاصية `border` لإضافة إطار موحد.

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

الإجابة: تعديل خاصية `background-color` في قواعد CSS الخاصة بكل من عناصر الـ Padding والـ Footer.

الشرح: 1. فتح ملف CSS الخاص بالرسالة الإخبارية. 2. تحديد القواعد (Selectors) التي تتحكم في عناصر الـ Padding (مثل `td`, `th`, أو فئة مخصصة) وعنصر الـ Footer. 3. في كل قاعدة، تعديل قيمة الخاصية `background-color` لتكون متطابقة (مثل `#f0f0f0`). 4. حفظ الملف وتحديث الصفحة.

تلميح: أي خاصية في CSS تتحكم بلون الخلفية؟

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

ما الخطوة الأولى لإدراج صورة في رسالة إخبارية مبنية بجدول HTML بحيث تظهر بين النص والتذييل وتشغل العرض بالكامل؟

• أ) تعديل عرض الصورة الأصلية باستخدام برنامج تحرير الصور.
• ب) إدراج صف (Table Row) جديد في الجدول بين صف النص وصف التذييل.
• ج) إضافة الصورة كخلفية (background-image) لخلية النص.
• د) كتابة كود JavaScript لتغيير موقع الصورة ديناميكياً.

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

الإجابة: إدراج صف (Table Row) جديد في الجدول بين صف النص وصف التذييل.

الشرح: 1. تحديد موقع صف النص الرئيسي وصف التذييل في هيكل الجدول. 2. إدراج صف جديد (`<tr>`) بعد صف النق وقبل صف التذييل. 3. داخل الصف الجديد، إضافة خلية (`<td>`). 4. داخل الخلية، إدراج علامة الصورة `<img src="...">`. 5. ضبط عرض الصورة أو الخلية إلى `100%` باستخدام خاصية `width` في HTML أو CSS.

تلميح: فكر في الهيكل التسلسلي للجدول: النص ثم... ثم التذييل.

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