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

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

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

الدرس: تطبيق معا

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

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

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

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

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

تطبيق معا

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

تطبيق معا

تدريب 1

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

تدريب 1

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

نوع: QUESTION_HOMEWORK

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

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

<!DOCTYPE> <html dir="rtl" lang="ar"> <head> <title>Examples</title> <meta charset="UTF-8" /> </head> <body> <form action="http://www.myhttpserver.eu/comments.php"> <fieldset> <legend>ارسل لنا رسالة</legend> <label type="name">الاسم:</label><br> <input type="text" name="name"><br> <label for="email">اكتب عنوان بريدك الإلكتروني:</label><br> <input type="email" name="email"> <label for="message">الرسالة</label><br> <textarea placeholder="اكتب رسالتك..."></textarea><br> <input type="button" value="إرسال"> </fieldset> </form> </body> </html>

نوع: METADATA

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

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

--- SECTION: تطبيق معا --- تطبيق معا --- SECTION: تدريب 1 --- تدريب 1 --- SECTION: حدد الأخطاء وصححها في المقطع البرمجي التالي ؟ --- حدد الأخطاء وصححها في المقطع البرمجي التالي ؟ <!DOCTYPE> <html dir="rtl" lang="ar"> <head> <title>Examples</title> <meta charset="UTF-8" /> </head> <body> <form action="http://www.myhttpserver.eu/comments.php"> <fieldset> <legend>ارسل لنا رسالة</legend> <label type="name">الاسم:</label><br> <input type="text" name="name"><br> <label for="email">اكتب عنوان بريدك الإلكتروني:</label><br> <input type="email" name="email"> <label for="message">الرسالة</label><br> <textarea placeholder="اكتب رسالتك..."></textarea><br> <input type="button" value="إرسال"> </fieldset> </form> </body> </html> وزارة التعليم Ministry of Education 2025 - 1447 197

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

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

سؤال تدريب 1: حدد الأخطاء وصححها في المقطع البرمجي التالي ؟ <!DOCTYPE> <html dir="rtl" lang="ar"> <title>Examples</title> <meta charset="UTF-8" /> </head> <form ="http://www.myhttpserver.eu/comments.php"> <fieldset> <legend>ارسل لنا رسالة<legend> <label type="name">الاسم:</label><br> <input type="text" name="name"><br> <label for="email">اكتب عنوان بريدك الإلكتروني:</label><br> <input type="email" name="email"><br> <label for="message">الرسالة</label><br> <textarea placeholder="...اكتب رسالتك"><br> <input type="button" value="إرسال"> </fieldset> </form> <body> <html>

الإجابة: س1: - تصحيح تعريف المستند `<!DOCTYPE html>`. - إضافة `<head>` قبل `<title>` وإغلاقه. - وضع `<body>` بعد `</head>`. - إغلاق الصفحة بـ `</html>`. - إضافة `action` لوسم `<form>`. - تصحيح إغلاق `<legend>`. - استخدام `for` في `<label>` بدل `type`. - تصحيح `<textarea>` وإغلاقه. - زر الإرسال `type="submit"`.

خطوات الحل:

  1. **الشرح:** لنفهم هذا السؤال. لدينا مقطع برمجي HTML ونحتاج إلى تحديد الأخطاء فيه وتصحيحها. الفكرة هنا هي مراجعة بناء الصفحة من البداية إلى النهاية، وفحص كل وسم (tag) للتأكد من صحته وإغلاقه بشكل صحيح. أولاً، نبدأ بفحص تعريف نوع المستند `<!DOCTYPE>`، وهو غير مكتمل. يجب أن يكون `<!DOCTYPE html>` ليعرف المتصفح أن هذه صفحة HTML5. ثانياً، نلاحظ أن وسم `<head>` غير موجود، بينما لدينا وسوم `<title>` و `<meta>` داخله. يجب إضافة `<head>` قبل `<title>` وإغلاقه بـ `</head>`. ثالثاً، نرى أن وسم `<body>` موجود في نهاية الكود، لكنه يجب أن يأتي بعد `</head>` مباشرة، وقبل محتوى الصفحة مثل النموذج `<form>`. رابعاً، في نهاية الصفحة، نجد `</html>`، لكن يجب أن يكون `</html>` بعد إغلاق جميع الوسوم الأخرى. خامساً، في وسم `<form>`، نجد `="http://..."` بدون سمة (attribute) محددة. يجب إضافة سمة `action` ليصبح `<form action="http://...">`. سادساً، في وسم `<legend>`، نجد `<legend>ارسل لنا رسالة<legend>`، حيث يجب إغلاقه بـ `</legend>`. سابعاً، في وسم `<label>` الأول، نجد `type="name"`، لكن سمة `type` غير صحيحة هنا. يجب استخدام `for` مثل `<label for="name">`. ثامناً، في وسم `<textarea>`، نجد `<textarea placeholder="...اكتب رسالتك"><br>`، حيث يجب إغلاقه بـ `</textarea>` وليس `<br>`. تاسعاً، في زر الإرسال `<input type="button">`، يجب تغييره إلى `type="submit"` ليتم إرسال النموذج. إذن، الإجابة هي تصحيح هذه الأخطاء كما ورد في النص.

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

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

ما الخطأ في استخدام وسم `<label>` التالي: `<label type="name">الاسم:</label>`؟

  • أ) يجب أن يكون داخل وسم `<fieldset>`.
  • ب) يجب استخدام السمة `for` بدلاً من `type`.
  • ج) يجب أن يكون `<label name="name">`.
  • د) لا حاجة لوسم `<label>` مع `<input>`.

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

الإجابة: يجب استخدام السمة `for` بدلاً من `type`.

الشرح: 1. السمة `type` غير صحيحة في وسم `<label>`. 2. الغرض من `<label>` هو ربط نص توضيحي بحقل إدخال. 3. نستخدم السمة `for` في `<label>` وقيمتها تساوي قيمة السمة `id` لحقل الإدخال المرتبط. 4. التصحيح: `<label for="name">الاسم:</label>`.

تلميح: كيف نربط نص التسمية (Label) بحقل الإدخال (Input)؟

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

ما نوع زر الإرسال الصحيح في نموذج HTML؟

  • أ) `<input type="send" value="إرسال">`
  • ب) `<button>إرسال</button>` فقط.
  • ج) `<input type="submit" value="إرسال">`
  • د) `<input type="reset" value="إرسال">`

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

الإجابة: `<input type="submit" value="إرسال">`

الشرح: 1. زر `type="button"` هو زر عادي لا يؤدي أي فعل افتراضي. 2. لإرسال النموذج، يجب استخدام `type="submit"`. 3. هذا النوع من الأزرار يرسل بيانات النموذج إلى عنوان URL المحدد في سمة `action` لوسم `<form>`.

تلميح: ما نوع الزر الذي يسبب إرسال بيانات النموذج إلى الخادم؟

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

ما الخطأ في تعريف نوع المستند `<!DOCTYPE>` في مقطع HTML التالي، وما التصحيح المطلوب؟

  • أ) يجب أن يكون `<!DOCTYPE HTML5>`.
  • ب) يجب أن يكون `<!DOCTYPE html>` لتعريف HTML5.
  • ج) يجب أن يكون `<!DOCTYPE>` داخل وسم `<head>`.
  • د) لا حاجة لوسم `<!DOCTYPE>` في HTML الحديث.

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

الإجابة: يجب أن يكون `<!DOCTYPE html>` لتعريف HTML5.

الشرح: 1. تعريف `<!DOCTYPE>` غير مكتمل. 2. يجب أن يكون `<!DOCTYPE html>` ليعرف المتصفح أن هذه صفحة HTML5. 3. هذا هو أول سطر يجب كتابته في أي صفحة HTML.

تلميح: فكر في كيفية تعريف المتصفح لإصدار HTML المستخدم.

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

في وسم `<form>`، ما السمة (Attribute) المفقودة في المثال التالي: `<form ="http://www.myhttpserver.eu/comments.php">`؟

  • أ) سمة `href`.
  • ب) سمة `src`.
  • ج) سمة `method`.
  • د) سمة `action`.

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

الإجابة: سمة `action`.

الشرح: 1. وسم `<form>` يحتاج إلى سمة `action` لتحديد عنوان URL الذي سيرسل إليه بيانات النموذج. 2. التصحيح: `<form action="http://www.myhttpserver.eu/comments.php">`.

تلميح: ما السمة التي تحدد المكان الذي سيتم إرسال بيانات النموذج إليه؟

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

ما الخطأ في هيكل وسوم الرأس `<head>` والجسم `<body>` في المقطع البرمجي المعطى؟

  • أ) وسم `<head>` يجب أن يكون داخل `<body>`.
  • ب) وسم `<body>` يجب أن يأتي بعد إغلاق `</head>` مباشرة.
  • ج) لا حاجة لوسم `<head>` في HTML5.
  • د) وسم `<html>` يجب أن يكون داخل `<body>`.

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

الإجابة: وسم `<body>` يجب أن يأتي بعد إغلاق `</head>` مباشرة.

الشرح: 1. الهيكل الأساسي لصفحة HTML هو: `<!DOCTYPE html>`, `<html>`, `<head>`, `</head>`, `<body>`, `</body>`, `</html>`. 2. جميع محتويات الصفحة المرئية (مثل النماذج والنصوص) يجب أن تكون داخل وسم `<body>`. 3. جميع معلومات تعريف الصفحة (مثل العنوان `<title>` وترميز الأحرف `<meta charset>`) يجب أن تكون داخل وسم `<head>`.

تلميح: ما الترتيب الصحيح للهيكل الأساسي لصفحة HTML؟

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