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

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

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

الدرس: وسوم HTML المستخدمة في الدرس الثاني

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

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

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

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

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

وسوم HTML المستخدمة في الدرس الثاني

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

وسوم HTML المستخدمة في الدرس الثاني

الوظيفة والوسم

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

تحدد قائمة مرتبة. <ol> تحدد عنصر قائمة. <li> تحدد قائمة غير مرتبة. <ul> تعرف الارتباط التشعبي. <a> يتم استخدامها لإدراج صورة. <img> يتم استخدامها لإدراج الفيديو. <video>

لـنطبق معًا

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

لـنطبق معًا

تدريب 1

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

تدريب 1

1

نوع: QUESTION_HOMEWORK

حدد وأصلح الأخطاء في المقطع البرمجي التالي:

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

<!DOCTYPE html> <html dir="rtl" lang="ar"> <head> <title>Examples</title> <meta charset="UTF-8" /> </head> <body> <h1>المواد الدراسية</h1> <ul> <li>الرياضيات</li> <li>اللغة العربية</li> <li>التاريخ</li> </ul> </body> </html>

نوع: METADATA

وزارة التعليم Ministry of Education 2025 - 1447

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

--- SECTION: وسوم HTML المستخدمة في الدرس الثاني --- وسوم HTML المستخدمة في الدرس الثاني --- SECTION: الوظيفة والوسم --- تحدد قائمة مرتبة. <ol> تحدد عنصر قائمة. <li> تحدد قائمة غير مرتبة. <ul> تعرف الارتباط التشعبي. <a> يتم استخدامها لإدراج صورة. <img> يتم استخدامها لإدراج الفيديو. <video> --- SECTION: لـنطبق معًا --- لـنطبق معًا --- SECTION: تدريب 1 --- تدريب 1 --- SECTION: 1 --- حدد وأصلح الأخطاء في المقطع البرمجي التالي: <!DOCTYPE html> <html dir="rtl" lang="ar"> <head> <title>Examples</title> <meta charset="UTF-8" /> </head> <body> <h1>المواد الدراسية</h1> <ul> <li>الرياضيات</li> <li>اللغة العربية</li> <li>التاريخ</li> </ul> </body> </html> وزارة التعليم Ministry of Education 2025 - 1447

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

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

سؤال تدريب 1: حدد وأصلح الأخطاء في المقطع البرمجي التالي: <DOCTYPE html> <html dir="rtl" lang="ar"> <title>Examples</title> <meta charset="UTF-8" /> </head> <body> <h1>المواد الدراسية</h1> <ul> <li>الرياضيات<li> <li>اللغة العربية<li> <li>التاريخ<li> </body> </html>

الإجابة: س1: 1- تصحيح `<!DOCTYPE html>` (إضافة !). 2- إضافة `<head>` قبل `<title>` وإغلاقه بعد `<meta>`. 3- إغلاق `<li>` بشكل صحيح (`</li>`). 4- إغلاق القائمة `<ul>` قبل `</body>`.

خطوات الحل:

  1. **الشرح:** لنفهم هذا السؤال. المطلوب هو مراجعة مقطع برمجي مكتوب بلغة HTML وتحديد الأخطاء فيه ثم تصحيحها. الفكرة هنا هي التحقق من صحة بناء الجملة (Syntax) وترتيب العناصر (Structure) في صفحة الويب. لنبدأ بقراءة الكود من الأعلى: 1. السطر الأول يبدأ بـ `<DOCTYPE html>`. هذا غير صحيح، لأن تعريف نوع المستند في HTML يجب أن يبدأ بعلامة تعجب، فيكون `<!DOCTYPE html>`. 2. نلاحظ أن هناك عنصر `<title>` وعنصر `<meta>`، لكنهما موجودان خارج عنصر `<head>` الذي يجب أن يحتويهما. يجب أن نضع `<head>` قبل `<title>` ونغلقه بعد `<meta>`. 3. عند سرد العناصر في القائمة غير المرتبة `<ul>`، نرى أن كل عنصر `<li>` يُفتح ولكن يُغلق بنفس الوسم `<li>` بدلاً من وسم الإغلاق `</li>`. هذا خطأ شائع. 4. أخيراً، القائمة `<ul>` يجب أن تُغلق بوسم `</ul>` قبل نهاية الجسم `</body>`. إذن، بعد التصحيح، سيكون الكود صحيحاً من حيث البنية والترتيب.

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

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

ما هو الخطأ الأساسي في بنية القائمة التالية في HTML: `<ul><li>الرياضيات<li>العربية</ul>`؟

  • أ) استخدام `<ul>` بدلاً من `<ol>`.
  • ب) عدم إغلاق وسم العنصر `<li>` الأول بشكل صحيح باستخدام `</li>`.
  • ج) وضع النص مباشرة داخل `<ul>` دون `<li>`.
  • د) نسيان وسم `</ul>` الإغلاق.

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

الإجابة: عدم إغلاق وسم العنصر `<li>` الأول بشكل صحيح باستخدام `</li>`.

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

تلميح: ركز على كيفية إنهاء كل عنصر فردي داخل القائمة.

التصنيف: تفكير ناقد | المستوى: متوسط

أي مما يلي يمثل بنية HTML صحيحة لإنشاء قائمة غير مرتبة تحتوي على عنصرين؟

  • أ) <ul><li>عنصر 1<li>عنصر 2</ul>
  • ب) <ul><li>عنصر 1</li><li>عنصر 2</li>
  • ج) <ul><li>عنصر 1</li><li>عنصر 2</li></ul>
  • د) <ol><li>عنصر 1</li><li>عنصر 2</li></ol>

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

الإجابة: <ul><li>عنصر 1</li><li>عنصر 2</li></ul>

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

تلميح: تأكد من أن وسم القائمة الأم يحيط بجميع عناصر القائمة الفرعية، وأن كل عنصر يُغلق بشكل صحيح.

التصنيف: سؤال اختبار | المستوى: متوسط

ما هو الوسم المستخدم في HTML لإنشاء قائمة مرتبة (مرقمة)؟

  • أ) <ul>
  • ب) <li>
  • ج) <ol>
  • د) <a>

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

الإجابة: <ol>

الشرح: 1. القائمة المرتبة هي قائمة يتم ترتيب عناصرها بأرقام أو حروف. 2. الوسم `<ol>` هو اختصار لـ Ordered List. 3. يوضع كل عنصر من عناصر القائمة داخل وسم `<li>`.

تلميح: يبدأ اسم هذا الوسم بالحرف الأول من الكلمة الإنجليزية Ordered List.

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

ما هو الوسم المستخدم في HTML لإنشاء قائمة غير مرتبة (نقطية)؟

  • أ) <ol>
  • ب) <ul>
  • ج) <img>
  • د) <li>

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

الإجابة: <ul>

الشرح: 1. القائمة غير المرتبة هي قائمة تظهر عناصرها عادة بنقاط أو رموز. 2. الوسم `<ul>` هو اختصار لـ Unordered List. 3. يوضع كل عنصر من عناصر القائمة داخل وسم `<li>`.

تلميح: يبدأ اسم هذا الوسم بالحرف الأول من الكلمة الإنجليزية Unordered List.

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

ما هو الوسم المستخدم في HTML لتعريف ارتباط تشعبي (رابط)؟

  • أ) <link>
  • ب) <href>
  • ج) <a>
  • د) <url>

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

الإجابة: <a>

الشرح: 1. الارتباط التشعبي (الرابط) يسمح للمستخدم بالانتقال إلى صفحة أو موقع آخر. 2. الوسم `<a>` هو اختصار لـ Anchor. 3. يجب تحديد عنوان الهدف باستخدام السمة `href` داخل الوسم.

تلميح: هذا الوسم هو الحرف الأول من الكلمة الإنجليزية Anchor (مرساة).

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