الفكرة الأساسية

بناء هيكل متكامل لصفحة الويب وتنظيم محتواها باستخدام القوائم، والروابط التشعبية، وإدراج الوسائط مثل الصور ومقاطع الفيديو بطريقة احترافية داخل لغة اتش تي ام ال.

الشرح

لإنشاء قائمة مرتبة نستخدم الوسم ol وبداخله عناصر القائمة بالوسم li حيث يحصل كل عنصر على ترقيم رقمي تلقائي. أما القائمة غير المرتبة فنستخدم لها الوسم ul وبداخله العناصر بالوسم li وتظهر بتعداد نقطي. للربط بين الصفحات أو المواقع نستخدم الوسم a مع الخاصية href لتحديد وجهة الرابط مثل a href="https://www.moe.gov.sa" اضغط هنا /a، ويمكن توجيه الرابط ليفتح في تبويب جديد باستخدام الخاصية target بالقيم مثل blank_. كما يمكن ربط أجزاء داخل نفس الصفحة بتعيين خاصية id للعنصر المستهدف والرجوع إليه عبر علامة الرابط مع اسم المعرف مثل a href="#history" التاريخ /a. لإدراج الصور نستخدم الوسم img src="Images/picture.jpg" width="600" height="400"/ بدون وسم إغلاق، ويتم حفظ الصور في مجلد فرعي باسم Images لتنظيم الملفات. لإدراج الفيديو نستخدم الوسم video src="file.path" controls loop width="600" height="400"/ للتحكم بالعرض والتشغيل.

مثال محلول خطوة بخطوة

لإنشاء قائمة غير مرتبة للمواد الدراسية:

1. افتح قسم الوسوم الرئيسية في المستند داخل جسم الصفحة باستخدام الوسم body.
2. اكتب الوسم ul لبدء القائمة غير المرتبة.
3. أضف عناصر القائمة باستخدام وسم العناصر li لكل مادة كالتالي: ul

الرياضيات

اللغة العربية

التاريخ

/ul 4. أغلق الوسم بـ ul لتكتمل القائمة.

أخطاء شائعة

• نسيان كتابة الوسم الداخلي li داخل وسوم القوائم ol أو ul مما يؤدي لعدم ظهور العناصر بالشكل الصحيح.
• وضع وسوم المحتوى خارج جسم الصفحة body مما يظهر أخطاء في العرض والتشغيل.
• كتابة مسار الصورة أو الملف بشكل خاطئ دون مراعاة وجوده داخل مجلد فرعي مثل Images.

سؤالان للتدريب مع الإجابة

السؤال الأول: ما هو الوسم المستخدم لإنشاء قائمة مرتبة في لغة اتش تي ام ال؟ الإجابة: الوسم ol. السؤال الثاني: كيف تجعل الرابط التشعبي يفتح في صفحة أو تبويب جديد في المتصفح؟ الإجابة: باستخدام خاصية الهدف target وتعيين قيمتها إلى blank_ كالتالي target="_blank".