السؤال الثامن - كتاب المهارات الرقمية - الصف 10 - الفصل 1 - المملكة العربية السعودية

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

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

الدرس: السؤال الثامن

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

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

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

📝 ملخص الصفحة

السؤال الثامن

اكتب أوامر HTML المناسبة لتنفيذ ما يلي:

1. تعيين رابط url الخاص بصورة.

``

الجواب: `src`

2. جعل العنصر بالأسفل وداخل الرابط.

` `

الجواب: `href`

3. تحديد نص بديل خاص بصورة ما.

``

الجواب: `alt`

4. كتابة الوسم الصحيح لإضافة فقرة بنص this is a paragraph".

```

______

```

الجواب: `

this is a paragraph

`

5. إضافة فاصل أسطر في داخل الفقرة.

`

This______ is a paragraph.

`

الجواب: `
`

6. إضافة النص " Riyadh " داخل

    .

    ```

      ______

    ```

    الجواب: `

    • Riyadh
    `

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

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

السؤال الثامن

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

اكتب أوامر HTML المناسبة لتنفيذ ما يلي:

1

نوع: QUESTION_HOMEWORK

تعيين رابط url الخاص بصورة.

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

<img ........ ="picture.jpg">

2

نوع: QUESTION_HOMEWORK

جعل العنصر بالأَسْفَل وداخل الرابط.

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

<a ........ =" https://www.moe.gov.sa/ar"></a>

3

نوع: QUESTION_HOMEWORK

تحديد نص بديل خاص بصورة ما.

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

<img src="picture.png" .... ="The image can't be displayed">

4

نوع: QUESTION_HOMEWORK

كتابة الوسم الصحيح لإضافة فقرة بنص "this is a paragraph".

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

<html> <body> ........ </body> </html>

5

نوع: QUESTION_HOMEWORK

إضافة فاصل أسطر داخل الفقرة.

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

<p>This.... is a paragraph.</p>

6

نوع: QUESTION_HOMEWORK

إضافة النص "Riyadh" داخل <ul>.

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

<ul> .... </ul>

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

--- SECTION: السؤال الثامن --- اكتب أوامر HTML المناسبة لتنفيذ ما يلي: --- SECTION: 1 --- تعيين رابط url الخاص بصورة. <img ........ ="picture.jpg"> --- SECTION: 2 --- جعل العنصر بالأَسْفَل وداخل الرابط. <a ........ =" https://www.moe.gov.sa/ar"></a> --- SECTION: 3 --- تحديد نص بديل خاص بصورة ما. <img src="picture.png" .... ="The image can't be displayed"> --- SECTION: 4 --- كتابة الوسم الصحيح لإضافة فقرة بنص "this is a paragraph". <html> <body> ........ </body> </html> --- SECTION: 5 --- إضافة فاصل أسطر داخل الفقرة. <p>This.... is a paragraph.</p> --- SECTION: 6 --- إضافة النص "Riyadh" داخل <ul>. <ul> .... </ul>

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

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

سؤال 1: تعيين رابط url الخاص بصورة.

الإجابة: src

خطوات الحل:

  1. **الشرح:** في لغة HTML، عندما نريد إضافة صورة إلى صفحة ويب، نستخدم الوسم `<img>`. هذا الوسم يحتاج إلى خاصية (attribute) تخبر المتصفح عن مكان وجود ملف الصورة على الإنترنت. هذه الخاصية هي التي تحدد الرابط (URL) للصورة. لذلك، الإجابة هي: **src**

سؤال 2: جعل العنصر بالأَسْفَل وداخل الرابط.

الإجابة: href

خطوات الحل:

  1. **الشرح:** لإنشاء رابط تشعبي (Hyperlink) في HTML، نستخدم الوسم `<a>`. لكي يعمل هذا الرابط ويأخذ المستخدم إلى صفحة أو موقع آخر، يجب أن نحدد عنوان الوجهة (Destination) لهذا الرابط. الخاصية التي نستخدمها داخل وسم `<a>` لتحديد هذا العنوان هي المفتاح. إذن الإجابة هي: **href**

سؤال 3: تحديد نص بديل خاص بصورة ما.

الإجابة: alt

خطوات الحل:

  1. **الشرح:** عند إضافة صورة باستخدام `<img>`، من الممارسات الجيدة توفير نص بديل يصف محتوى الصورة. هذا النص يظهر إذا لم تتمكن الصورة من التحميل، أو يساعد مستخدمي قارئات الشاشة (Screen Readers) لفهم المحتوى. الخاصية المخصصة لهذا الغرض داخل وسم الصورة هي التي نبحث عنها. لذلك الإجابة هي: **alt**

سؤال 4: كتابة الوسم الصحيح لإضافة فقرة بنص "this is a paragraph".

الإجابة: p>this is a: <paragraph>/p

خطوات الحل:

  1. **الشرح:** في HTML، نستخدم وسوماً (Tags) مختلفة لتنظيم المحتوى. لإنشاء فقرة نصية، نستخدم وسم الفقرة الخاص. هيكل الوسم يكون بفتحه `<p>`، ثم نكتب النص الذي نريده داخل الفقرة، ثم نغلقه `</p>`. بتطبيق هذا على النص المطلوب "this is a paragraph"، يكون الوسم الصحيح هو: **<p>this is a paragraph</p>**

سؤال 5: إضافة فاصل أسطر داخل الفقرة.

الإجابة: <br>

خطوات الحل:

  1. **الشرح:** أحياناً داخل فقرة نصية، نريد إجبار النص على الانتقال إلى سطر جديد دون إنشاء فقرة جديدة. في HTML، هناك وسم ذاتي الإغلاق (Self-closing tag) مخصص لهذا الغرض بالذات، وهو يخلق فاصلاً للسطر (Line Break). إذن، لإضافة فاصل أسطر داخل فقرة، نستخدم الوسم: **<br>**

سؤال 6: إضافة النص "Riyadh" داخل <ul>.

الإجابة: <li>Riyadh</li>

خطوات الحل:

  1. **الشرح:** القائمة غير المرتبة (Unordered List) `<ul>` تُستخدم لعرض عناصر في شكل نقاط. كل عنصر (Item) داخل هذه القائمة يجب أن يُوضع داخل وسم خاص يمثل عنصر القائمة. هذا الوسم هو الذي يغلف النص أو المحتوى الخاص بكل نقطة في القائمة. لإضافة النص "Riyadh" كعنصر داخل `<ul>`، نكتب: **<li>Riyadh</li>**

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

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

في لغة HTML، ما هو الوسم الصحيح لكتابة فقرة نصية تحتوي على النص 'this is a paragraph'؟

  • أ) <paragraph>this is a paragraph</paragraph>
  • ب) <p>this is a paragraph</p>
  • ج) <text>this is a paragraph</text>
  • د) <div>this is a paragraph</div>

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

الإجابة: <p>this is a paragraph</p>

الشرح: 1. في HTML، تُستخدم وسوم محددة لتنظيم المحتوى. 2. وسم الفقرة النصية هو `<p>`. 3. هيكل الوسم: وسم فتح `<p>`، ثم النص، ثم وسم إغلاق `</p>`. 4. بالتطبيق على النص المطلوب، الوسم الصحيح هو: <p>this is a paragraph</p>

تلميح: يستخدم هذا الوسم لتحديد فقرة نصية في صفحة الويب.

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

لإضافة عنصر قائمة يحمل اسم 'Riyadh' داخل قائمة غير مرتبة `<ul>` في HTML، ما هو الوسم الصحيح؟

  • أ) <item>Riyadh</item>
  • ب) <list>Riyadh</list>
  • ج) <li>Riyadh</li>
  • د) <ul>Riyadh</ul>

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

الإجابة: <li>Riyadh</li>

الشرح: 1. الوسم `<ul>` يُستخدم لإنشاء قائمة غير مرتبة (نقاط). 2. كل عنصر (Item) داخل هذه القائمة يجب أن يوضع داخل وسم عنصر القائمة. 3. هذا الوسم هو `<li>` (List Item). 4. لإضافة النص 'Riyadh'، نكتب: <li>Riyadh</li> داخل الوسم `<ul>`.

تلميح: كل عنصر في القائمة غير المرتبة يجب أن يكون مغلفاً بوسم خاص يمثله.

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

ما هو السمة (Attribute) الصحيحة في وسم `<img>` لتعيين النص البديل الذي يظهر إذا لم تتمكن الصورة من التحميل؟

  • أ) title
  • ب) text
  • ج) description
  • د) alt

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

الإجابة: alt

الشرح: 1. وسم الصورة `<img>` يحتوي على عدة سمات لتحديد خصائصها. 2. السمة `src` تحدد مسار ملف الصورة. 3. السمة `alt` (alternative text) تحدد النص البديل الوصفي للصورة. 4. يظهر هذا النص إذا فشل تحميل الصورة، أو عند استخدام قارئات الشاشة.

تلميح: هذه السمة مهمة لإمكانية الوصول (Accessibility) ووصف محتوى الصورة.

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

أي من الأوامر التالية يمثل الطريقة الصحيحة لإدراج فاصل أسطر داخل فقرة نصية في HTML؟

  • أ) <hr>
  • ب) <break>
  • ج) <lb>
  • د) <br>

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

الإجابة: <br>

الشرح: 1. داخل الفقرة النصية `<p>`، قد نحتاج لقطع السطر والبدء من سطر جديد. 2. الوسم `<br>` (Line Break) يُستخدم لهذا الغرض. 3. هو وسم ذاتي الإغلاق (لا يحتاج `</br>`). 4. يوضع في المكان المطلوب داخل النص لبدء سطر جديد.

تلميح: هذا الوسم لا يحتاج إلى وسم إغلاق منفصل وهو يقطع السطر الحالي.

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