HTML for Kids · درس

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

أنشئ قوائم مرقمة وقوائم نقطية

الدرس 2 من 410 خطوة

القوائم: المرتبة وغير المرتبة درس مجاني في HTML for Kids على CoddyKit. هذا هو الدرس 2 من أصل 4. يمكنك قراءة الدرس كاملاً أدناه مجاناً — ثم تمرن عليه مباشرة في المتصفح باستخدام محرر أكواد مدمج ومدرس ذكاء اصطناعي متاح 24/7. هذا الدرس جزء من مسار التعلم في HTML for Kids، وتقدمك يتزامن عبر الويب وتطبيق CoddyKit. تتضمن دورة HTML for Kids 4 دروس في المجموع.

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

مرحبًا بكم في الدرس التالي! سنتعلم اليوم كيفية إنشاء القوائم في HTML. تساعد القوائم على تنظيم المعلومات وتجعل قراءتها أسهل.

القوائم: المرتبة وغير المرتبة — رسم توضيحي 1

ما هي القوائم؟

تُعد القوائم طريقة رائعة لتجميع العناصر ذات الصلة معًا. تحتوي HTML على نوعين رئيسيين من القوائم:

القوائم المرتبة: تكون العناصر مرقمة، مثل 1 و2 و3...
القوائم غير المرتبة: تكون العناصر مسبوقة بنقاط.

لنتعلم كيفية إنشاء كلا النوعين!

إنشاء قائمة مرتبة

تُنشأ القائمة المرتبة باستخدام وسم <ol>. وتُضاف كل واحدة من عناصر القائمة باستخدام وسم <li>، أي وسم عنصر القائمة.

مثال:

<ol>
  <li>Wake up</li>
  <li>Eat breakfast</li>
  <li>Go to school</li>
</ol>

إنشاء قائمة غير مرتبة

تُنشأ القائمة غير المرتبة باستخدام وسم <ul>. وتُضاف كل واحدة من العناصر باستخدام وسم <li>، تمامًا كما في القوائم المرتبة.

مثال:

<ul>
  <li>Apples</li>
  <li>Bananas</li>
  <li>Cherries</li>
</ul>

القوائم المتداخلة

يمكنكم إنشاء قائمة داخل قائمة أخرى. ويُسمّى ذلك قائمة متداخلة. ويمكنكم تداخل القوائم المرتبة وغير المرتبة بعضها داخل بعض.

مثال:

<ul>
  <li>Fruits
    <ul>
      <li>Apples</li>
      <li>Bananas</li>
    </ul>
  </li>
  <li>Vegetables
    <ul>
      <li>Carrots</li>
      <li>Spinach</li>
    </ul>
  </li>
</ul>

القوائم الوصفية

يتيح HTML أيضًا إنشاء قوائم وصفية باستخدام الوسوم <dl> و<dt> و<dd>:

<dl>: يعرّف القائمة.
<dt>: يعرّف المصطلح (العنوان).
<dd>: يعرّف الوصف.

مثال:

<dl>
  <dt>HTML</dt>
  <dd>The language used to create web pages.</dd>
  <dt>CSS</dt>
  <dd>The language used to style web pages.</dd>
</dl>

إضافة التنسيق إلى القوائم

يمكنكم استخدام CSS لتغيير مظهر القوائم. فعلى سبيل المثال، يمكنكم تغيير نوع الرموز النقطية أو الأرقام.

مثال:

<style>
  ul {
    list-style-type: square; /* Changes bullets to squares */
  }
  ol {
    list-style-type: upper-roman; /* Changes numbers to Roman numerals */
  }
</style>

<ul>
  <li>Apples</li>
  <li>Bananas</li>
</ul>

<ol>
  <li>First Step</li>
  <li>Second Step</li>
</ol>

جرّبوا بأنفسكم

لننشئ صفحة ويب بسيطة تحتوي على قوائم مرتبة وغير مرتبة. إليكم مثالًا:

<!DOCTYPE html>
<html>
  <head>
    <title>HTML Lists</title>
  </head>
  <body>
    <h1>My To-Do List</h1>
    <h2>Morning Routine</h2>
    <ol>
      <li>Wake up</li>
      <li>Brush my teeth</li>
      <li>Have breakfast</li>
    </ol>
    <h2>Shopping List</h2>
    <ul>
      <li>Milk</li>
      <li>Bread</li>
      <li>Eggs</li>
    </ul>
  </body>
</html>

أحسنتم!

تهانينا! لقد تعلّمتم كيفية إنشاء القوائم المرتبة وغير المرتبة، والقوائم المتداخلة، والقوائم الوصفية. وهذه أدوات رائعة لتنظيم المعلومات في صفحات الويب. في الدرس التالي، سنتعلّم كيفية إضافة الروابط لربط الصفحات والمواقع الإلكترونية المختلفة. استعدوا لمزيد من المتعة!

القوائم: المرتبة وغير المرتبة — رسم توضيحي 10

البدء مجانًا

تعلم HTML مع معلم ذكاء اصطناعي — مجانًا

اكتب وقم بتشغيل أكوادك الفعلية في المتصفح، واحصل على مساعدة فورية من معلم ذكاء اصطناعي متاح 24/7، واستمر من حيث توقفت على الويب أو في التطبيق.

الدورات: 16
الدروس: 35

ابدأ التعلم مجانًا عرض الدورة الكاملة

الأسئلة الشائعة

هل درس «القوائم: المرتبة وغير المرتبة» مجاني؟

نعم — نص درس «القوائم: المرتبة وغير المرتبة» كامل متاح مجاناً هنا على الويب. لتمرينه بشكل تفاعلي (محرر أكواد مدمج ومدرس ذكاء اصطناعي متاح 24/7) وفتح باقي دورة HTML for Kids، انتقل إلى CoddyKit PRO. تتضمن دورة HTML for Kids 4 دروس في المجموع.

ماذا ستتعلم في «القوائم: المرتبة وغير المرتبة»؟

أنشئ قوائم مرقمة وقوائم نقطية تتمرن على HTML for Kids مع أكواد عملية تشغلها مباشرة في المتصفح، ومدرس ذكاء اصطناعي متاح 24/7 يجيب على أسئلتك أثناء عملك.

هل أحتاج إلى خبرة سابقة لأبدأ HTML for Kids؟

لا تُشترط خبرة سابقة. HTML for Kids على CoddyKit منظم للمبتدئين حتى المتقدمين، لذا يمكنك البدء من هنا أو من البداية والتقدم بسرعتك الخاصة. هذا هو الدرس 2 من أصل 4.

كم من الوقت يستغرق درس «القوائم: المرتبة وغير المرتبة»؟

معظم دروس CoddyKit تستغرق حوالي 5–10 دقائق. كل منها موجز وتفاعلي، لذا تحرز تقدماً مستمراً وتستأنف من حيث توقفت عبر الويب والتطبيق.

هل يمكنني كتابة وتشغيل أكواد في درس HTML for Kids هذا؟

نعم. كل درس في HTML for Kids يتضمن محرر أكواد مدمج، لذا تكتب وتشغل أكواداً حقيقية مباشرة في متصفحك وتحصل على تعليقات فورية من الذكاء الاصطناعي — بدون إعداد محلي.

جميع الدروس في هذه الدورة

← العودة إلى HTML for Kids