تدريب 1

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

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

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

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

📝 ملخص الصفحة

📚 تطبيق معا: خصائص CSS للنصوص

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

زخرفة النص (text-decoration): خاصية CSS لتطبيق تأثيرات زخرفية على النص.

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

```markmap

خصائص CSS للنصوص

حجم الخط (font-size)

الوظيفة

تحديد حجم الخط المستخدم

وحدات القياس

البكسل (px)
النسبة المئوية (%)

مثال تطبيقي

#### لعنوان h1

color: green;
font-size: 50px;

#### لعنوان h2

color: #ee82ee;
font-size: 70%;

#### لعنصر فقرة p

color: rgb(0,75,250);

عائلة الخطوط (font-family)

الوظيفة

تحديد عائلة الخط للنص

آلية العمل

تحديد قائمة خطوط بديلة مفصولة بفواصل
استخدام الخط التالي إذا لم يكن الأول مثبتاً
استخدام خط من العائلة العامة إذا لم يوجد أي خط محدد

مثال تطبيقي

#### لعنوان h1

font-family: Tahoma, sans-serif;

#### لعنوان h2

font-family: Arial, sans-serif;

#### لعنصر فقرة p

font-family: Verdana, Times, sans-serif;

نمط الخط (font-style)

الوظيفة

إنشاء نص مائل

القيم

عادي (normal)
مائل (italic أو oblique)

مثال تطبيقي

#### لعنوان h1

font-style: italic;

عرض الخط (font-weight)

الوظيفة

إنشاء نص غامق

القيم

عادي (normal)
غامق (bold)

مثال تطبيقي

#### لعنوان h2

font-weight: bold;

زخرفة النص (text-decoration)

الوظيفة

تطبيق تأثيرات زخرفية على النص

القيم

none
underline
overline
line-through
blink

مثال تطبيقي

#### لعنوان h1

text-decoration: overline;

#### لعنوان h2

text-decoration: line-through;

#### لعنصر فقرة p

text-decoration: underline;

التطبيق العملي

#### التدريب 1

عدد طرق إدراج ملف CSS داخل مستند HTML

#### التدريب 2

ملء الفراغات بقيمة `text-decoration` بناءً على مثال مرئي
العناصر المستهدفة: h1, h2, p

```

نقاط مهمة

تحتوي الصفحة على تدريبين عمليين حول CSS.
التدريب الأول يطلب تعداد طرق إدراج ملف CSS في HTML.
التدريب الثاني تطبيقي، يطلب تحديد قيم خاصية `text-decoration` لعناصر `h1` و`h2` و`p` بناءً على مثال مرئي معروض.
المثال المرئي يوضح نافذة متصفح تعرض صفحة ويب مع كود CSS يحتوي على فراغات يجب تعبئتها.

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

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

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

عدد طرق إدراج ملف CSS داخل مستند HTML.

تدريب 2

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

املأ الفراغات بقيمة زخرفة النص (text-decoration) طبقاً للصورة.

🔍 عناصر مرئية

Example

A screenshot of a web browser displaying an HTML file with CSS code. The browser window shows the title 'Example' and the URL 'C:/Users/Desktop/A^'. The content area displays Arabic text related to a football (كرة القدم) and its properties. Below the browser window, there is a section with CSS code snippets for h1, h2, and p elements, each containing a blank field next to 'text-decoration:'.

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

--- SECTION: تدريب 1 ---
عدد طرق إدراج ملف CSS داخل مستند HTML.

--- SECTION: تدريب 2 ---
املأ الفراغات بقيمة زخرفة النص (text-decoration) طبقاً للصورة.
h1. h1 {
font-size: 20px;
text-decoration: ______
}
h2. h2 {
color: #9682ee;
font-size: 50%;
background-color: rgb(224, 242, 241);
text-decoration: ______ 
}
p. p {
color: rgb(244, 124, 64);
text-decoration: ______ 
}

--- VISUAL CONTEXT ---
**DIAGRAM**: Example
Description: A screenshot of a web browser displaying an HTML file with CSS code. The browser window shows the title 'Example' and the URL 'C:/Users/Desktop/A^'. The content area displays Arabic text related to a football (كرة القدم) and its properties. Below the browser window, there is a section with CSS code snippets for h1, h2, and p elements, each containing a blank field next to 'text-decoration:'.
Data: The visual shows CSS code with blank fields for 'text-decoration' properties for h1, h2, and p elements. The browser window displays Arabic text that seems to be a continuation of the exercise, possibly providing context or the expected values for the text-decoration property.
Context: This visual element is used in التدريب 2 to prompt the user to fill in the correct 'text-decoration' values based on the provided context and the example shown in the browser window.

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

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

سؤال تدريب 1: عدّد طرق إدراج ملف CSS داخل مستند HTML.

الإجابة: 1) ربط ملف CSS خارجي (External stylesheet). 2) كتابة CSS داخل الصفحة في قسم <head> (Internal stylesheet). 3) كتابة CSS داخل العنصر مباشرة باستخدام الخاصية style (Inline style).

خطوات الحل:

**الشرح:** لنفهم هذا السؤال، فهو يتحدث عن طرق إضافة تنسيقات CSS (أوراق الأنماط) إلى صفحة HTML. الفكرة هنا هي أن هناك عدة طرق لتطبيق هذه التنسيقات على العناصر في الصفحة. الطريقة الأولى هي إنشاء ملف منفصل يحتوي على جميع قواعد CSS، ثم ربط هذا الملف بصفحة HTML باستخدام وسم <link> داخل قسم <head>. هذه الطريقة مفيدة جداً عندما يكون لديك عدة صفحات ويب تستخدم نفس التنسيقات. الطريقة الثانية هي كتابة قواعد CSS مباشرة داخل صفحة HTML نفسها، وذلك بوضعها داخل وسم <style>، والذي يوضع أيضاً داخل قسم <head>. هذه الطريقة مناسبة عندما تكون التنسيقات خاصة بصفحة واحدة فقط. الطريقة الثالثة هي تطبيق التنسيق مباشرة على عنصر HTML معين باستخدام السمة `style` داخل وسم العنصر نفسه. هذه الطريقة تستخدم لتنسيق عنصر محدد بخصائص فريدة. إذن، الإجابة هي: **1) ربط ملف CSS خارجي (External stylesheet). 2) كتابة CSS داخل الصفحة في قسم <head> (Internal stylesheet). 3) كتابة CSS داخل العنصر مباشرة باستخدام الخاصية style (Inline style).**

سؤال تدريب 2: املأ الفراغات بقيمة زخرفة النص (text-decoration) طبقاً للصورة. h1 { font-size: 20px; text-decoration: } h2 { color: #9682ee; font-size: 50%; background-color: rgb(224, 242, 241); text-decoration: } p { color: rgb(244, 124, 64); text-decoration: __ }

الإجابة: h1: underline h2: overline p: line-through

خطوات الحل:

**الخطوة 1 (المعطيات):** لنحدد ما لدينا: - لدينا ثلاثة عناصر: `h1`، `h2`، و `p`. - لكل عنصر خاصية `text-decoration` ناقصة القيمة. - لدينا إجابة توضح القيم المطلوبة لكل عنصر بناءً على صورة (غير موجودة في النص، لكن الإجابة معطاة). - القيم المحتملة لخاصية `text-decoration` تشمل: `underline` (تحته خط)، `overline` (فوقه خط)، `line-through` (خط في المنتصف).
**الخطوة 2 (التطبيق):** نقوم بتطبيق القيم المعطاة في الإجابة على العناصر: - للعنصر `h1`، نعطي القيمة `underline`. - للعنصر `h2`، نعطي القيمة `overline`. - للعنصر `p`، نعطي القيمة `line-through`.
**الخطوة 3 (النتيجة):** إذن، الإجابة هي: **h1: underline h2: overline p: line-through**

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

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

ما هي الطرق الثلاثة لإدراج تنسيقات CSS داخل مستند HTML؟

أ) استخدام JavaScript، تضمين ملف PHP، كتابة CSS داخل <body>.
ب) ربط ملف CSS خارجي، كتابة CSS داخل الصفحة في قسم <head>، كتابة CSS داخل العنصر مباشرة باستخدام الخاصية style.
ج) تعديل ملف .htaccess، استخدام قاعدة @import، إضافة CSS عبر وحدة تحكم المتصفح.
د) نسخ CSS من موقع آخر، استخدام محرر WYSIWYG، حفظ CSS كملف نصي.

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

الإجابة: ربط ملف CSS خارجي، كتابة CSS داخل الصفحة في قسم <head>، كتابة CSS داخل العنصر مباشرة باستخدام الخاصية style.

الشرح: 1. **الطريقة الخارجية (External):** إنشاء ملف .css منفصل وربطه باستخدام وسم <link> داخل <head>. 2. **الطريقة الداخلية (Internal):** كتابة قواعد CSS داخل وسم <style> يوضع داخل <head>. 3. **الطريقة المضمنة (Inline):** استخدام السمة `style` داخل وسم العنصر HTML نفسه لتطبيق التنسيقات عليه مباشرة.

تلميح: فكر في مستويات التطبيق: خارجي، داخلي، ومضمن.

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

ما هي القيم المحتملة لخاصية `text-decoration` في CSS والتي تستخدم لتزيين النص؟

أ) bold (عريض)، italic (مائل)، normal (عادي).
ب) left (يسار)، center (وسط)، right (يمين).
ج) underline (تحته خط)، overline (فوقه خط)، line-through (خط في المنتصف).
د) red (أحمر)، blue (أزرق)، green (أخضر).

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

الإجابة: underline (تحته خط)، overline (فوقه خط)، line-through (خط في المنتصف).

الشرح: خاصية `text-decoration` في CSS تستخدم لإضافة خطوط زخرفية للنص. القيم الأساسية هي: 1. **underline:** لرسم خط تحت النص. 2. **overline:** لرسم خط فوق النص. 3. **line-through:** لرسم خط عبر منتصف النص (كالتشطيب). هناك أيضاً قيمة `none` لإزالة أي تزيين.

تلميح: تذكر الاتجاهات: تحت، فوق، خلال.

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

أي من الخيارات التالية يوضح الاستخدام الصحيح للطريقة المضمنة (Inline) لتطبيق CSS؟

أ) <style> p { color: blue; } </style>
ب) <link rel="stylesheet" href="style.css">
ج) <p style="color: blue;">نص</p>
د) body { color: blue; }

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

الإجابة: <p style="color: blue;">نص</p>

الشرح: الطريقة المضمنة (Inline Style) تعني كتابة قواعد CSS مباشرة داخل وسم العنصر HTML باستخدام السمة `style`. الصيغة هي: `style="خاصية: قيمة;"`. الخيار الصحيح هو الوحيد الذي يطبق هذه الصيغة داخل وسم <p>.

تلميح: ابحث عن السمة `style` داخل وسم HTML.

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