تطبيق معا
تدريب 1
--- SECTION: إنشاء القائمة التالية باستخدام الوسوم: HTML ---
إنشاء القائمة التالية باستخدام الوسوم: HTML
تغميق النص الأول في قائمة التعداد النقطي.
إمالة النص الثاني في قائمة التعداد النقطي.
وضع خط تحت النص الثالث في قائمة التعداد النقطي.
<!DOCTYPE html>
<html dir="rtl" lang="ar">
<head>
<title>Examples</title>
<meta charset="UTF-8" />
</head>
<body>
<h1>المواد الدراسية</h1>
<ul>
<li>الرياضيات</li>
<li>اللغة العربية</li>
<li>التاريخ</li>
</ul>
</body>
</html>
Ministry of Education
2025 - 1447
✅ حلول أسئلة الكتاب الرسمية
عدد الأسئلة: 1
سؤال تدريب 1: نسّق القائمة التالية باستخدام وسوم HTML:
> تغميق النص الأول في قائمة التعداد النقطي.
> إمالة النص الثاني في قائمة التعداد النقطي.
> وضع خط تحت النص الثالث في قائمة التعداد النقطي.
**الشرح:**
لنفهم هذا السؤال. المطلوب هو كتابة كود HTML لإنشاء قائمة نقطية (تعداد نقطي) وتنسيق كل عنصر فيها بطريقة مختلفة.
نبدأ بإنشاء القائمة النقطية باستخدام الوسم `<ul>` للقائمة غير المرتبة والوسم `<li>` لكل عنصر داخلها.
الفكرة هنا هي تطبيق تنسيقات HTML على كل عنصر:
1. **لتغميق النص** (جعله عريضًا) نستخدم الوسم `<b>`.
2. **لإمالة النص** (جعله مائلًا) نستخدم الوسم `<i>`.
3. **لوضع خط تحت النص** نستخدم الوسم `<u>`.
نقوم بلف كل وسم تنسيق حول الوسم `<li>` الذي يحتوي على النص. على سبيل المثال، لتغميق النص الأول، نكتب: `<b><li>النص هنا</li></b>`.
إذن، بناءً على التعليمات، إذا افترضنا أن النصوص هي "الرياضيات" و"اللغة العربية" و"التاريخ" بالترتيب، فإن الكود سيكون كما يلي:
html
<b><li>الرياضيات</li></b>
<i><li>اللغة العربية</li></i>
<u><li>التاريخ</li></u>
لاحظ أن هذا الكود يجب وضعه داخل الوسم `<ul>` ليكون قائمة صحيحة، مثل:
html
<ul>
<b><li>الرياضيات</li></b>
<i><li>اللغة العربية</li></i>
<u><li>التاريخ</li></u>
</ul>
ولكن بما أن السؤال طلب تنسيق القائمة فقط دون ذكر الوسم `<ul>`، فقد تم التركيز على تنسيق العناصر كما في الإجابة المعطاة.
🎴 بطاقات تعليمية للمراجعة
عدد البطاقات: 4 بطاقة لهذه الصفحة
كيف يتم تطبيق تنسيق التغميق على عنصر داخل قائمة نقطية (<li>) في HTML؟
أ) بوضع الوسم <li> داخل الوسم <b>
ب) بوضع الوسم <b> داخل الوسم <li>
ج) بوضع الوسم <b> حول الوسم <li>
د) باستخدام خاصية CSS داخل الوسم <li>
الإجابة الصحيحة: c
الإجابة: بوضع الوسم <b> حول الوسم <li>
الشرح: 1. لإنشاء قائمة نقطية، نستخدم <ul> و <li>.
2. لتطبيق تنسيق (مثل التغميق) على نص عنصر معين في القائمة، نلف وسم التنسيق حول وسم <li>.
3. الصيغة الصحيحة: <b><li>النص هنا</li></b>.
4. الترتيب مهم: وسم التنسيق يأتي خارج وسم <li>.
تلميح: التنسيق يلف العنصر، وليس العكس.
التصنيف: صيغة/خطوات | المستوى: متوسط
ما هو الكود الصحيح بلغة HTML لتنسيق عنصر قائمة (list item) بحيث يظهر النص "الرياضيات" بخط عريض (Bold)؟
أ) <b><li>الرياضيات</li></b>
ب) <i><li>الرياضيات</li></i>
ج) <u><li>الرياضيات</li></u>
د) <s><li>الرياضيات</li></s>
الإجابة الصحيحة: a
الإجابة: <b><li>الرياضيات</li></b>
الشرح: 1. نستخدم الوسم <li> لتعريف عنصر مفرد داخل القائمة.
2. لتنسيق النص وجعله عريضًا (تغميق النص)، نستخدم الوسم <b> (اختصاراً لـ Bold).
3. يتم وضع وسم التنسيق حول وسم العنصر أو بداخله لتطبيق التأثير، ووفقاً لمنهج التقنية الرقمية يتم تغليف العنصر بوسم التنسيق المطلوب.
تلميح: فكر في الوسم الذي يشير اختصاره إلى كلمة Bold في لغة HTML.
التصنيف: صيغة/خطوات | المستوى: متوسط
ما هو الكود الصحيح في لغة HTML لتطبيق تنسيق "وضع خط تحت النص" على عنصر كامل في قائمة نقطية، بناءً على الممارسات المعروضة في المنهج؟
أ) <li><u>التاريخ</u></li>
ب) <line><li>التاريخ</li></line>
ج) <li style="underline">التاريخ</li>
د) <u><li>التاريخ</li></u>
الإجابة الصحيحة: d
الإجابة: <u><li>التاريخ</li></u>
الشرح: 1. لتحديد عنصر في قائمة نقطية، نستخدم الوسم `<li>`.
2. لوضع خط تحت النص، نستخدم وسم الفتح `<u>` ووسم الإغلاق `</u>`.
3. لتطبيق التنسيق على كامل عنصر القائمة كما هو موضح في التدريب، يتم وضع الوسم `<li>` وما بداخله بين وسمي الفتح والإغلاق للتنسيق، ليصبح الكود: `<u><li>النص</li></u>`.
تلميح: تذكّر أن وسوم التنسيق البسيطة (مثل التغميق أو وضع خط) يمكن أن تحيط بوسم عنصر القائمة `<li>` بأكمله لتطبيق التأثير عليه.
التصنيف: صيغة/خطوات | المستوى: متوسط
ما هو الكود الصحيح في لغة HTML لتغميق النص "الرياضيات" وجعله عنصرًا في قائمة نقطية، بناءً على التدريب المعروض؟
أ) <i><li>الرياضيات</li></i>
ب) <bold><li>الرياضيات</li></bold>
ج) <b><li>الرياضيات</li></b>
د) <u><li>الرياضيات</li></u>
الإجابة الصحيحة: c
الإجابة: <b><li>الرياضيات</li></b>
الشرح: 1. لجعل النص عريضًا (غامقًا) في لغة HTML، نستخدم وسم الفتح `<b>` ووسم الإغلاق `</b>`.
2. لجعل النص عنصرًا ضمن قائمة، نستخدم الوسم `<li>`.
3. لتطبيق التنسيق المطلوب، يتم إحاطة عنصر القائمة بوسم التغميق، لينتج الكود الصحيح: `<b><li>الرياضيات</li></b>`.
تلميح: تذكر أن الوسم المستخدم لجعل النص عريضًا (Bold) يبدأ بحرف B، ووسم عنصر القائمة هو `<li>`.