الدولة: المملكة العربية السعودية | المنهج: المنهج السعودي - وزارة التعليم
الدرس: تدريب 2
📚 معلومات الصفحة
الكتاب: كتاب التقنية الرقمية - الصف 11 - الفصل 1 | المادة: التقنية الرقمية | المرحلة: الصف 11 | الفصل الدراسي: 1
الدولة: المملكة العربية السعودية | المنهج: المنهج السعودي - وزارة التعليم
نوع المحتوى: درس تعليمي
📝 ملخص الصفحة
📚 تدريب HTML: تنسيق النصوص وإنشاء صفحة عن الذوق العام
المفاهيم الأساسية
وسوم HTML الأساسية: (مراجعة من الصفحة) `
` للعناوين الرئيسية، `
` للفقرات، `` لدعم النص العربي.
خريطة المفاهيم
```markmap
الوحدة الخامسة: البرمجة المتقدمة باستخدام HTML
أهداف التعلم
تنسيق باستخدام HTML
تنسيق النص
- وسوم تنسيق النص
- النص: لتغميق النص (bold).
- النص: لإمالة النص (Italics).
- النص: لتسطير النص (Underlined).
- النص: لتصغير النص.
- النص: لتكبير النص.
- النص: لتمييز النص (Highlighted).
- النص: لوضع خط في منتصف النص.
- النص: لعرض النص بخط منخفض (Subscript).
- النص: لعرض النص بخط مرتفع (Superscript).
- : لتغيير حجم الخط أو نوعه أو لونه.
- خاصية `face`: لتحديد نوع الخط (مثال: Tahoma).
- خاصية `size`: لتحديد حجم الخط (القيم من 1 إلى 9، حيث 1 أصغر و9 أكبر).
- خاصية `color`: لتحديد لون الخط (مثال: blue).
- أمثلة تطبيقية
- مثال 1: استخدام وسمي غامق (bold) ومائل (Italics).
- مثال 2: استخدام وسمي مرتفع (Superscript) ومنخفض (Subscript).
- مثال 3: استخدام وسوم تنسيق الخط.
- مثال 4: استخدام الوسمي small و big
- مثال 5: استخدام الوسمي mark و del
- مثال تطبيقي: صفحة "Football Fan Page"
- : لإدخال فاصل سطر.
-
: لتحديد فقرة.
- : لإمالة النص داخل الفقرة.
- تدريب 1: تطبيق على القوائم
- المهمة: إنشاء قائمة نقطية وتنسيق عناصرها
- تطبيق 1: تغميق النص الأول في القائمة.
- تطبيق 2: إمالة النص الثاني في القائمة.
- تطبيق 3: وضع خط تحت النص الثالث في القائمة.
تنسيق الصورة
- حدود الصورة
- خاصية `border`: لإضافة إطار حول الصورة.
- مثال: ``
- خاصية البديل (alt)
- الغرض: عرض نص بديل يصف الصورة إذا لم تظهر.
- مثال: ``
تنسيق عرض ملف الفيديو
- الوسم: `
📋 المحتوى المنظم
📖 محتوى تعليمي مفصّل
تدريب 2
نوع: محتوى تعليمي
نشق النص التالي باستخدام وسوم HTML:
نوع: QUESTION_HOMEWORK
ميّز نص الوسم <h1> باستخدام الوسم المناسب.
نوع: QUESTION_HOMEWORK
لوّن نص الوسم <p>.
نوع: محتوى تعليمي
لا يجوز الكتابة أو الرسم على الجدران أو وسائل النقل مالم يكن مرخصاً من الجهة المعنية
تدريب 3
نوع: محتوى تعليمي
أنشئ صفحة إلكترونية مختصرة عن الذوق العام تحتوي على ما يلي:
نوع: محتوى تعليمي
عنوان باسم "آداب الذوق العام".
نوع: محتوى تعليمي
فقرة تصف فيها سلوكيات للذوق العام.
نوع: محتوى تعليمي
نسق نص الفقرة باستخدام الوسوم التي تعلمتها في الدرس.
نوع: محتوى تعليمي
صورة معبرة، ثم أضف حولها.
نوع: محتوى تعليمي
بعد الانتهاء احفظ الصفحة الإلكترونية.
نوع: METADATA
212
نوع: METADATA
وزارة التعليم
Ministry of Education
2025 - 1447
🔍 عناصر مرئية
Example
A simulated browser window displaying an HTML document. The title bar shows 'Example'. The content area displays an HTML code snippet and a rendered output. The rendered output shows the heading 'لائحة المحافظة على الذوق العام' and a paragraph below it.
📄 النص الكامل للصفحة
--- SECTION: تدريب 2 ---
نشق النص التالي باستخدام وسوم HTML:
ميّز نص الوسم <h1> باستخدام الوسم المناسب.
لوّن نص الوسم <p>.
لا يجوز الكتابة أو الرسم على الجدران أو وسائل النقل مالم يكن مرخصاً من الجهة المعنية
--- SECTION: تدريب 3 ---
أنشئ صفحة إلكترونية مختصرة عن الذوق العام تحتوي على ما يلي:
عنوان باسم "آداب الذوق العام".
فقرة تصف فيها سلوكيات للذوق العام.
نسق نص الفقرة باستخدام الوسوم التي تعلمتها في الدرس.
صورة معبرة، ثم أضف حولها.
بعد الانتهاء احفظ الصفحة الإلكترونية.
212
وزارة التعليم
Ministry of Education
2025 - 1447
--- VISUAL CONTEXT ---
**FIGURE**: Example
Description: A simulated browser window displaying an HTML document. The title bar shows 'Example'. The content area displays an HTML code snippet and a rendered output. The rendered output shows the heading 'لائحة المحافظة على الذوق العام' and a paragraph below it.
Context: Illustrates basic HTML structure and tags like <h1>, <p>, <html>, <head>, <body>, and attributes like dir='rtl' and lang='ar'.
✅ حلول أسئلة الكتاب الرسمية
عدد الأسئلة: 2
سؤال س2: تدريب 2
نسّق النص التالي باستخدام وسوم HTML:
> ميّز نص الوسم <h1> باستخدام الوسم المناسب.
> لوّن نص الوسم <p>.
الإجابة: س2: تمييز عنوان
`<h1>` بوضعه داخل
وسم التسطير `<u>` ،
وتلوين فقرة `<p>`
بإضافة خاصية اللون (مثلاً:
`style="color:blue"`).
خطوات الحل:
**الشرح:**
لنفهم هذا السؤال. المطلوب هو تنسيق نص باستخدام وسوم HTML. لدينا جزئان:
1. تمييز نص الوسم `<h1>`: الوسم `<h1>` يستخدم للعناوين الرئيسية. لتمييزه، نستخدم وسوم التنسيق المناسبة. في HTML، للتسطير نستخدم الوسم `<u>`، حيث يوضع النص المراد تسطيره بين `<u>` و `</u>`.
2. تلوين نص الوسم `<p>`: الوسم `<p>` يستخدم للفقرات. لتلوين النص، نضيف خاصية `style` داخل الوسم `<p>`، ونحدد اللون باستخدام `color`. مثلاً، لجعل النص أزرق نكتب: `style="color:blue"`.
إذن الإجابة هي: **وضع `<h1>` داخل `<u>` لإضافة تسطير، وإضافة `style="color:blue"` داخل `<p>` لتلوين النص**.
سؤال س3: تدريب 3
أنشئ صفحة إلكترونية مختصرة عن الذوق العام تحتوي على ما يلي:
> عنوان باسم "آداب الذوق العام".
> فقرة تصف فيها سلوكيات للذوق العام.
> نسّق نص الفقرة باستخدام الوسوم التي تعلمتها في الدرس.
> صورة معبرة، ثم أضف حدًا حولها.
> بعد الانتهاء احفظ الصفحة الإلكترونية.
الإجابة: س3: تكون الصفحة مثلاً بحيث تحتوي على:
- عنوان: "آداب الذوق العام" (باستخدام `<h1>` ، ويُفضّل أيضًا
وضعها في `<title>`).
- فقرة تصف سلوكيات الذوق العام مع تنسيق داخلها (مثل: `<b>`
للخط العريض و `<u>` للتسطير و `<br>` لسطر جديد).
- صورة معبّرة باستخدام `<img>` وإضافة حد حولها بخاصية
`border` (مثلاً داخل `style`).
- حفظ الملف بامتداد .html (مثل: `adab.html`).
خطوات الحل:
**الشرح:**
الفكرة هنا هي إنشاء صفحة ويب بسيطة عن الذوق العام باستخدام HTML. لنرتب المطلوب خطوة بخطوة:
**الخطوة 1 (العنوان):**
نبدأ بإنشاء صفحة HTML باستخدام الوسم الأساسي `<html>`. داخل الصفحة، نضيف عنوانًا رئيسيًا باسم "آداب الذوق العام" باستخدام الوسم `<h1>`. كما يُفضل إضافة عنوان للصفحة في شريط المتصفح باستخدام الوسم `<title>` داخل قسم `<head>`.
**الخطوة 2 (الفقرة والتنسيق):**
نضيف فقرة تصف سلوكيات الذوق العام باستخدام الوسم `<p>`. داخل الفقرة، نستخدم وسوم تنسيق مثل `<b>` لجعل النص عريضًا، و `<u>` للتسطير، و `<br>` لإدخال سطر جديد عند الحاجة.
**الخطوة 3 (الصورة والحد):**
نضيف صورة معبرة باستخدام الوسم `<img>`، مع تحديد مصدر الصورة عبر السمة `src`. لإضافة حد حول الصورة، نستخدم خاصية `border` داخل السمة `style`، مثلاً: `style="border: 2px solid black;"`.
**الخطوة 4 (الحفظ):**
بعد الانتهاء، نحفظ الملف بامتداد `.html`، مثل `adab.html`، حتى يعمل كصفحة ويب.
إذن الإجابة هي: **إنشاء صفحة تحتوي على `<h1>` للعنوان، و `<p>` مع وسوم تنسيق داخلها للفقرة، و `<img>` مع `style` لإضافة حد للصورة، ثم حفظ الملف بامتداد .html**.
🎴 بطاقات تعليمية للمراجعة
عدد البطاقات: 4 بطاقة لهذه الصفحة
في HTML، كيف يمكن تلوين نص داخل وسم الفقرة `<p>`؟
أ) باستخدام الوسم `<font color="blue">` داخل الفقرة.
ب) بإضافة خاصية `style` مع تحديد اللون، مثل `style="color:blue;"` داخل الوسم الافتتاحي `<p>`.
ج) باستخدام الوسم `<color>` قبل النص وإغلاقه بـ `</color>`.
د) بإضافة خاصية `bgcolor` إلى الوسم `<p>`.
الإجابة الصحيحة: b
الإجابة: بإضافة خاصية `style` مع تحديد اللون، مثل `style="color:blue;"` داخل الوسم الافتتاحي `<p>`.
الشرح: 1. لتنسيق عنصر HTML مباشرة، نستخدم خاصية `style` داخل الوسم الافتتاحي. 2. لتحديد لون النص، نستخدم الخاصية `color` داخل `style`. 3. الصيغة العامة: `<p style="color:قيمة_اللون;">النص</p>`. 4. مثال: `<p style="color:blue;">هذا النص أزرق</p>`.
تلميح: فكر في كيفية إضافة أنماط التنسيق المضمنة (inline styling) لعنصر HTML.
التصنيف: صيغة/خطوات | المستوى: سهل
أي من وسوم HTML التالية يُستخدم بشكل صحيح لتمييز (تسطير) نص عنوان رئيسي `<h1>`؟
أ) وضع خاصية `style="text-decoration:underline;"` داخل الوسم `<h1>`.
ب) وضع نص العنوان داخل الوسم `<b>`، مثل `<b><h1>العنوان</h1></b>`.
ج) وضع نص العنوان داخل الوسم `<u>`، مثل `<u><h1>العنوان</h1></u>`.
د) استخدام الوسم `<underline>` بدلاً من `<h1>`.
الإجابة الصحيحة: c
الإجابة: وضع نص العنوان داخل الوسم `<u>`، مثل `<u><h1>العنوان</h1></u>`.