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

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

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

الدرس: القائمة غير المرتبة

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

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

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

📝 ملخص الصفحة

ملخص الصفحة:

يشرح هذا الجزء من الدرس كيفية إنشاء القائمة غير المرتبة (Unordered List) في لغة HTML. يتم إنشاء هذه القائمة باستخدام الوسم `

    `، حيث يوضع كل عنصر من عناصر القائمة بين وسم الفتح `
    • ` ووسم الإغلاق `
    `.

    مثال توضيحي:

    يتم عرض مثال على كود HTML لصفحة تحتوي على قائمة غير مرتبة بعنوان "ألعاب جماعية"، تضم العناصر التالية: كرة القدم، كرة السلة، كرة اليد، كريكيت. يظهر الكود كما يلي:

    ```html

    Examples

    ألعاب جماعية

      • كرة القدم
      • كرة السلة
      • كرة اليد
      • کریکیت

    ```

    نتيجة العرض (Visual Element):

    تظهر لقطة شاشة لمتصفح ويب يعرض الصفحة الناتجة عن الكود أعلاه، بعنوان "Examples"، وتحتوي على قائمة نقطية غير مرقمة بالعناصر: كرة القدم، كرة السلة، كرة اليد، كريكيت.

    تطبيق عملي للمشروع:

    كي تضيف قوائم نادي مشجعي كرة القدم في مشروعك، عليك أولاً إنشاء قائمة تكون بمثابة شريط للتنقل داخل الموقع. يجب أن تضم هذه القائمة العناصر التالية:

    * الصفحة الرئيسة

    * التاريخ

    * المعرض

    * نبذة

    * اتصل بنا

    هذه العناصر تمثل الأقسام أو الصفحات الرئيسية التي سيتنقل بينها زائر الموقع.

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

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

القائمة غير المرتبة

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

يتم إنشاء القائمة المرتبة باستخدام الوسم <ul> حيث يتم وضع كل عنصر في هذه القائمة بين وسم الفتح <li> ووسم الإغلاق </li>.

لاحظ المثال التالي:

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

<!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> <li>كريكيت</li> </ul> </body> </html>

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

كي تضيف قوائم منسدلة نادي مشجعي كرة القدم في مشروعك. عليك أولاً أن تنشئ قائمة تكون بمثابة شريط للتنقل داخل الموقع وتضم العناصر التالية:

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

الصفحة الرئيسية

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

التاريخ

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

المعرض

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

نبذة

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

اتصل بنا

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

--- SECTION: القائمة غير المرتبة --- يتم إنشاء القائمة المرتبة باستخدام الوسم <ul> حيث يتم وضع كل عنصر في هذه القائمة بين وسم الفتح <li> ووسم الإغلاق </li>. --- SECTION: لاحظ المثال التالي: --- <!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> <li>كريكيت</li> </ul> </body> </html> كي تضيف قوائم منسدلة نادي مشجعي كرة القدم في مشروعك. عليك أولاً أن تنشئ قائمة تكون بمثابة شريط للتنقل داخل الموقع وتضم العناصر التالية: الصفحة الرئيسية التاريخ المعرض نبذة اتصل بنا

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

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

ما الوسم المستخدم في HTML لإنشاء قائمة غير مرتبة (unordered list)؟

  • أ) الوسم <ol>
  • ب) الوسم <li>
  • ج) الوسم <ul>
  • د) الوسم <nav>

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

الإجابة: الوسم <ul>

الشرح: 1. القوائم في HTML نوعان: مرتبة وغير مرتبة. 2. القائمة غير المرتبة تُستخدم لعرض عناصر دون ترتيب معين (مثل النقاط). 3. الوسم المسؤول عن إنشائها هو <ul> (اختصار لـ unordered list). 4. كل عنصر داخل القائمة يوضع بين وسمي <li> و </li>.

تلميح: يبدأ اسم هذا الوسم بحرف الـ 'u' ويستخدم للقوائم التي لا تحتاج إلى ترتيب رقمي.

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

ما الوسم المستخدم في HTML لتحديد عنصر فردي داخل قائمة (سواء مرتبة أو غير مرتبة)؟

  • أ) الوسم <item>
  • ب) الوسم <list>
  • ج) الوسم <li>
  • د) الوسم <point>

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

الإجابة: الوسم <li>

الشرح: 1. القوائم في HTML تتكون من وسم حاوي (مثل <ul> أو <ol>) وعناصر داخله. 2. كل عنصر من محتويات القائمة (مثل 'كرة القدم' أو 'الصفحة الرئيسية') يجب وضعه داخل وسْم خاص. 3. هذا الوسم هو <li> (اختصار لـ list item). 4. مثال: <ul><li>كرة القدم</li></ul>.

تلميح: هذا الوسم يُغلَق دائمًا، ويأتي داخل الوسم الرئيسي للقائمة.

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

أي من الكودات التالية يمثل بنية HTML صحيحة لعنصرين في قائمة غير مرتبة؟

  • أ) <ol><li>التاريخ</li><li>المعرض</li></ol>
  • ب) <ul><li>التاريخ<li>المعرض</li></ul>
  • ج) <ul><li>التاريخ</li><li>المعرض</li></ul>
  • د) <ul>التاريخ</ul><ul>المعرض</ul>

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

الإجابة: <ul><li>التاريخ</li><li>المعرض</li></ul>

الشرح: 1. القائمة غير المرتبة تبدأ بـ <ul> وتنتهي بـ </ul>. 2. كل عنصر داخلها يجب أن يكون داخل وسمي <li> و </li>. 3. الخيار الصحيح يطبق هذه القواعد بدقة: وسم <ul> حاوي، وبداخله عنصران كل منهما داخل <li>. 4. الخيارات الأخرى إما تخلط بين الوسوم أو تنسى إغلاقها.

تلميح: تأكد من أن العناصر محاطة بالوسم الصحيح للقائمة والوسم الصحيح للعنصر الفردي، وأن جميع الوسوم مُغلَقة.

التصنيف: سؤال اختبار | المستوى: متوسط