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

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

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

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

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

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

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

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

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

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

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

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

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

الوظيفة الوسم تحدد أن هذا المستند هو مستند HTML. <!DOCTYPE> الحاوية لجميع عناصر HTML الأخرى. <html> تحدد الأوامر البرمجية الموجودة بين الوسمين <head> و <body>. <head> يتم برمجة الموضوع الرئيسي للنص، والصوت، والفيديو، والروابط المؤدية إلى صفحات أخرى بين الوسمين <head> و <body>. <body> تحدد عنوان المستند. title> تحدد النص الذي سيظهر في شريط عنوان نافذة متصفح المواقع الإلكترونية. <meta> تحدد فقرة. <p> يتم استخدامها لتحديد عناوين. <h6 > - <h1 > تدرج فاصل سطر واحد. <br>

لـنطبق معًا

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

لـنطبق معًا

تدريب 1

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

تدريب 1

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

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

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

<!DOCTYPE html> <html dir="rtl" lang="ar"> <head> <title>Page title</title> <meta charset="UTF-8" /> </head> <body> <h1>هذا عنوان</h1> <p>هذه فقرة.</p> </body> </html>

نوع: NON_EDUCATIONAL

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

نوع: METADATA

171

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

--- SECTION: وسوم HTML المستخدمة في الدرس الأول --- وسوم HTML المستخدمة في الدرس الأول الوظيفة الوسم تحدد أن هذا المستند هو مستند HTML. <!DOCTYPE> الحاوية لجميع عناصر HTML الأخرى. <html> تحدد الأوامر البرمجية الموجودة بين الوسمين <head> و <body>. <head> يتم برمجة الموضوع الرئيسي للنص، والصوت، والفيديو، والروابط المؤدية إلى صفحات أخرى بين الوسمين <head> و <body>. <body> تحدد عنوان المستند. title> تحدد النص الذي سيظهر في شريط عنوان نافذة متصفح المواقع الإلكترونية. <meta> تحدد فقرة. <p> يتم استخدامها لتحديد عناوين. <h6 > - <h1 > تدرج فاصل سطر واحد. <br> --- SECTION: لـنطبق معًا --- لـنطبق معًا --- SECTION: تدريب 1 --- تدريب 1 حدد وأصلح الأخطاء في المقطع البرمجي التالي: <!DOCTYPE html> <html dir="rtl" lang="ar"> <head> <title>Page title</title> <meta charset="UTF-8" /> </head> <body> <h1>هذا عنوان</h1> <p>هذه فقرة.</p> </body> </html> وزارة التعليم Ministry of Education 2025 - 1447 171

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

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

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

الإجابة: س1: تصحيح تعريف نوع المستند ليكون (DOCTYPE) خاصًا بـ HTML وليس ناقصًا. إضافة وسم head الافتتاحي قبل title و meta، ووضعهما داخل head ثم إغلاق head بشكل صحيح. تصحيح وسم العنوان: بعد فتح وسم h1 يجب إغلاقه بوسم الإغلاق /h1. إضافة وسم الإغلاق /body قبل إغلاق /html. الترتيب الصحيح للمستند: DOCTYPE ثم html ثم head ثم body ثم /body ثم /html

خطوات الحل:

  1. **الشرح:** لنفهم هذا السؤال. المطلوب هو مراجعة المقطع البرمجي المكتوب بلغة HTML وتحديد الأخطاء فيه ثم تصحيحها. نبدأ بقراءة الكود سطراً سطراً: 1. السطر الأول: `<!DOCTYPE>` - هذا تعريف لنوع المستند، لكنه ناقص. يجب أن يحدد الإصدار، مثل `<!DOCTYPE html>` للإصدار HTML5. 2. السطر الثاني: `<html dir="rtl" lang="ar">` - هذا صحيح، يفتح وسم HTML ويحدد اتجاه النص واللغة. 3. السطر الثالث: `<title> Page title</title>` - وسم العنوان صحيح، لكنه موجود خارج وسم `head`. 4. السطر الرابع: `<meta charset="UTF-8" />` - وسم تعريف الترميز صحيح، لكنه أيضاً خارج وسم `head`. 5. السطر الخامس: `</head>` - هذا وسم إغلاق لـ `head`، لكننا لم نفتح وسم `head` من قبل! هذا خطأ. 6. السطر السادس: `<body>` - هذا صحيح، يفتح وسم body. 7. السطر السابع: `<h1>هذا عنوان <h1>` - هنا خطأ: وسم الإغلاق `</h1>` ناقص الشرطة المائلة `/`. 8. السطر الثامن: `<p>هذه فقرة </p>` - هذا صحيح. 9. السطر التاسع: `</html>` - هذا وسم إغلاق html، لكن وسم `body` لم يُغلق. **الفكرة هنا هي** أن هيكل مستند HTML يجب أن يكون منظماً: يبدأ بـ DOCTYPE، ثم `html`، ثم `head` (يحتوي على `title` و `meta`)، ثم `body` (يحتوي على المحتوى)، ثم يُغلق كل وسم بالترتيب العكسي. لذلك، التصحيح يكون: - إكمال تعريف DOCTYPE. - إضافة وسم فتح `head` قبل `title` و `meta`. - وضع `title` و `meta` داخل `head`. - إغلاق `head` بشكل صحيح. - تصحيح وسم إغلاق `h1`. - إضافة وسم إغلاق `body`. إذن الإجابة هي: **تصحيح تعريف DOCTYPE، إضافة وسم head ووضعه بشكل صحيح، تصحيح وسم h1، وإضافة وسم إغلاق body.**

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

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

ما هو الغرض الأساسي من وسم <!DOCTYPE> في مستند HTML؟

  • أ) تحديد عنوان المستند الذي يظهر في شريط المتصفح.
  • ب) تحديد أن هذا المستند هو مستند HTML.
  • ج) احتواء جميع عناصر HTML الأخرى.
  • د) تحديد ترميز الأحرف للمستند (مثل UTF-8).

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

الإجابة: تحديد أن هذا المستند هو مستند HTML.

الشرح: وسم <!DOCTYPE> هو أول سطر في أي مستند HTML. وظيفته الأساسية هي تعريف المتصفح بأن هذا الملف هو مستند HTML، مما يساعد المتصفح على عرض الصفحة بشكل صحيح وفقًا لمعايير الويب.

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

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

أي من الوسوم التالية يعتبر الحاوية الرئيسية لجميع عناصر HTML الأخرى في المستند؟

  • أ) <head>
  • ب) <body>
  • ج) <html>
  • د) <!DOCTYPE>

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

الإجابة: <html>

الشرح: وسم <html> هو العنصر الجذر (root element) لأي صفحة ويب. جميع العناصر الأخرى مثل <head> و <body> وكل محتويات الصفحة يجب أن تكون موجودة داخل هذا الوسم.

تلميح: يبدأ ويمسك بكل شيء آخر في الصفحة.

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

ما هو الفرق الرئيسي بين محتويات وسم <head> ومحتويات وسم <body> في مستند HTML؟

  • أ) يحتوي <head> على النصوص والعناوين، بينما يحتوي <body> على الصور والفيديوهات فقط.
  • ب) يحتوي <head> على المحتوى المرئي، بينما يحتوي <body> على معلومات الترميز.
  • ج) يحتوي <head> على معلومات تعريفية عن الصفحة (مثل العنوان والترميز)، بينما يحتوي <body> على المحتوى الرئيسي المرئي للمستخدم (نصوص، صور، روابط).
  • د) لا يوجد فرق، كلاهما يحملان نفس نوع المحتوى.

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

الإجابة: يحتوي <head> على معلومات تعريفية عن الصفحة (مثل العنوان والترميز)، بينما يحتوي <body> على المحتوى الرئيسي المرئي للمستخدم (نصوص، صور، روابط).

الشرح: 1. وسم <head>: يحتوي على معلومات وبيانات تعريفية (meta-data) عن الصفحة، مثل العنوان (title)، وترميز الأحرف (charset)، وروابط ملفات التنسيق (CSS). هذه المعلومات لا تظهر مباشرة في نافذة المتصفح الرئيسية. 2. وسم <body>: يحتوي على كل المحتوى الذي يظهر للمستخدم، مثل النصوص، والعناوين، والصور، والفيديوهات، والروابط، والنماذج.

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

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

ما هو الخطأ في المقطع البرمجي التالي: <h1>هذا عنوان <h1>

  • أ) يجب أن يكون الوسم <h2> وليس <h1>.
  • ب) يجب إضافة سمة (attribute) مثل dir='rtl' داخل وسم <h1>.
  • ج) وسم الإغلاق </h1> ناقص الشرطة المائلة '/'.
  • د) يجب وضع النص داخل وسم <p> بدلاً من <h1>.

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

الإجابة: وسم الإغلاق </h1> ناقص الشرطة المائلة '/'.

الشرح: الخطأ هو في وسم الإغلاق. الوسم الصحيح للإغلاق يجب أن يحتوي على شرطة مائلة '/' قبل اسم الوسم. الشكل الصحيح هو: <h1>هذا عنوان</h1>. بدون الشرطة المائلة، يعتبر المتصفح أن <h1> الثاني هو وسم افتتاح جديد، مما يؤدي إلى هيكل غير صحيح وعرض خاطئ للصفحة.

تلميح: تأكد من أن كل وسم افتتاح له وسم إغلاق مطابق له بالضبط.

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

ما هو الترتيب الصحيح للهيكل الأساسي لمستند HTML؟

  • أ) <html> → <head> → <body> → <!DOCTYPE> → إغلاق الوسوم.
  • ب) <head> → <body> → <html> → <!DOCTYPE> → إغلاق الوسوم.
  • ج) <!DOCTYPE html> → <html> → <body> → <head> → إغلاق الوسوم.
  • د) <!DOCTYPE html> → <html> → <head> → <body> → إغلاق الوسوم بالترتيب العكسي.

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

الإجابة: <!DOCTYPE html> → <html> → <head> → <body> → إغلاق الوسوم بالترتيب العكسي.

الشرح: الترتيب المنطقي والصحيح لبناء صفحة HTML هو: 1. تعريف نوع المستند: <!DOCTYPE html> 2. فتح الحاوية الرئيسية: <html> 3. قسم معلومات الصفحة: <head> (يحتوي على title, meta, إلخ) ثم </head> 4. قسم محتوى الصفحة: <body> (يحتوي على h1, p, إلخ) ثم </body> 5. إغلاق الحاوية الرئيسية: </html> يجب إغلاق الوسوم بالترتيب العكسي لفتحها.

تلميح: ابدأ بما يخبر المتصفح عن نوع المستند، ثم الحاوية الرئيسية، ثم المعلومات غير المرئية، ثم المحتوى المرئي.

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