المشروع النهائي ومراجعة التسليم
الجزء: 12
هدف الدرس
ستفهم تجميع معايير التسليم وتبني مثالًا صحيحًا يمكن للمتصفح وأدوات الوصول تفسيره.
المفهوم
HTML لغة ترميز دلالية: نختار العنصر وفق معنى المحتوى ووظيفته، ثم نضيف السمات الضرورية ونحافظ على تداخل صحيح.
مثال مشروح
<!doctype html><html lang="ar" dir="rtl"><head><meta charset="utf-8"><meta name="viewport" content="width=device-width, initial-scale=1"><title>مشروعي</title></head><body><header><h1>مشروعي</h1></header><main id="main"><p>محتوى واضح.</p></main><footer>جميع الحقوق محفوظة.</footer></body></html>ما الذي ينتجه؟ مستند نهائي دلالي ومتاح.
تحليل البنية
ابدأ من العنصر الأب، ثم تتبع أبناءه وسماته. اسأل: هل العنصر مناسب للمعنى؟ هل الاسم والوصف متاحان؟ وهل المسار أو القيمة صالحان؟
خطأ شائع
لا تستخدم العناصر لمظهرها فقط، ولا تحذف السمات التي تحمل معنى مثل lang وalt وlabel وtype وscope. صحح البنية قبل إضافة التنسيق.
تطبيق عملي
اكتب المثال في ملف HTML وافتحه في المتصفح، ثم افحص شجرة المستند وجرّب لوحة المفاتيح والتحقق من صحة الترميز.
Practice Questions
1. ما الغرض الذي يحققه المثال في درس «المشروع النهائي ومراجعة التسليم»؟
شاهد الإجابة النموذجية
تجميع معايير التسليمالإجابة مأخوذة من البنية الصحيحة التي شرحها الدرس وتنتج المعنى المطلوب.
2. اكتب العنصر أو البنية الأساسية المستخدمة لتحقيق الغرض.
شاهد الإجابة النموذجية
htmlالإجابة مأخوذة من البنية الصحيحة التي شرحها الدرس وتنتج المعنى المطلوب.
3. ما البنية أو النتيجة المتوقعة عند عرض هذا المثال؟
<!doctype html><html lang="ar" dir="rtl"><head><meta charset="utf-8"><meta name="viewport" content="width=device-width, initial-scale=1"><title>مشروعي</title></head><body><header><h1>مشروعي</h1></header><main id="main"><p>محتوى واضح.</p></main><footer>جميع الحقوق محفوظة.</footer></body></html>
شاهد الإجابة النموذجية
مستند نهائي دلالي ومتاحالإجابة مأخوذة من البنية الصحيحة التي شرحها الدرس وتنتج المعنى المطلوب.
4. اكتب المثال الصحيح الذي يحقق «تجميع معايير التسليم».
شاهد الإجابة النموذجية
<!doctype html><html lang="ar" dir="rtl"><head><meta charset="utf-8"><meta name="viewport" content="width=device-width, initial-scale=1"><title>مشروعي</title></head><body><header><h1>مشروعي</h1></header><main id="main"><p>محتوى واضح.</p></main><footer>جميع الحقوق محفوظة.</footer></body></html>الإجابة مأخوذة من البنية الصحيحة التي شرحها الدرس وتنتج المعنى المطلوب.
5. أكمل الجزء المحذوف: <!doctype _____><html lang="ar" dir="rtl"><head><meta charset="utf-8"><meta name="viewport" content="width=device-width, initial-scale=1"><title>مشروعي</title></head><body><header><h1>مشروعي</h1></header><main id="main"><p>محتوى واضح.</p></main><footer>جميع الحقوق محفوظة.</footer></body></html>
شاهد الإجابة النموذجية
htmlالإجابة مأخوذة من البنية الصحيحة التي شرحها الدرس وتنتج المعنى المطلوب.
6. ما أول عنصر HTML مستخدم في المثال؟
شاهد الإجابة النموذجية
htmlالإجابة مأخوذة من البنية الصحيحة التي شرحها الدرس وتنتج المعنى المطلوب.
7. استخرج السمات المكتوبة في أول وسم من المثال.
شاهد الإجابة النموذجية
<!doctype html>الإجابة مأخوذة من البنية الصحيحة التي شرحها الدرس وتنتج المعنى المطلوب.
8. أعد كتابة البنية بالترتيب الصحيح للوسوم.
شاهد الإجابة النموذجية
<!doctype html><html lang="ar" dir="rtl"><head><meta charset="utf-8"><meta name="viewport" content="width=device-width, initial-scale=1"><title>مشروعي</title></head><body><header><h1>مشروعي</h1></header><main id="main"><p>محتوى واضح.</p></main><footer>جميع الحقوق محفوظة.</footer></body></html>الإجابة مأخوذة من البنية الصحيحة التي شرحها الدرس وتنتج المعنى المطلوب.
9. أصلح المقتطف التالي ليطابق المثال الصحيح:
<!doctype html><html lang="ar" dir="rtl"><head><meta charset="utf-8"><meta name="viewport" content="width=device-width, initial-scale=1"><title>مشروعي</title></head><body><header><h1>مشروعي</h1></header><main id="main"><p>محتوى واضح.</p></main><footer>جميع الحقوق محفوظة.</footer></body>
شاهد الإجابة النموذجية
<!doctype html><html lang="ar" dir="rtl"><head><meta charset="utf-8"><meta name="viewport" content="width=device-width, initial-scale=1"><title>مشروعي</title></head><body><header><h1>مشروعي</h1></header><main id="main"><p>محتوى واضح.</p></main><footer>جميع الحقوق محفوظة.</footer></body></html>الإجابة مأخوذة من البنية الصحيحة التي شرحها الدرس وتنتج المعنى المطلوب.
10. اكتب النسخة النموذجية التي تحفظ المعنى الدلالي وإمكانية الوصول.
شاهد الإجابة النموذجية
<!doctype html><html lang="ar" dir="rtl"><head><meta charset="utf-8"><meta name="viewport" content="width=device-width, initial-scale=1"><title>مشروعي</title></head><body><header><h1>مشروعي</h1></header><main id="main"><p>محتوى واضح.</p></main><footer>جميع الحقوق محفوظة.</footer></body></html>الإجابة مأخوذة من البنية الصحيحة التي شرحها الدرس وتنتج المعنى المطلوب.
11. ما الناتج الذي يجب التحقق منه بعد تطبيق الحل؟
شاهد الإجابة النموذجية
مستند نهائي دلالي ومتاحالإجابة مأخوذة من البنية الصحيحة التي شرحها الدرس وتنتج المعنى المطلوب.
12. أنشئ مكوّنًا صغيرًا يطبق مهارة «المشروع النهائي ومراجعة التسليم».
شاهد الإجابة النموذجية
<!doctype html><html lang="ar" dir="rtl"><head><meta charset="utf-8"><meta name="viewport" content="width=device-width, initial-scale=1"><title>مشروعي</title></head><body><header><h1>مشروعي</h1></header><main id="main"><p>محتوى واضح.</p></main><footer>جميع الحقوق محفوظة.</footer></body></html>الإجابة مأخوذة من البنية الصحيحة التي شرحها الدرس وتنتج المعنى المطلوب.