سؤال تدريب 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"`.
خطوات الحل:
- **الشرح:** لنفهم هذا السؤال. لدينا مقطع برمجي 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"` ليتم إرسال النموذج. إذن، الإجابة هي تصحيح هذه الأخطاء كما ورد في النص.