6 الفصل الثاني: القوائم في HTML
تمام! هنكمل مع بعض في الفصل الثاني ونتعلم القوائم (Lists) في HTML. هنتناول القوائم المرتبة <ol>، القوائم غير المرتبة <ul>، والقوائم التعريفية <dl>.
الفصل الثاني: القوائم في HTML
2. القوائم (Lists)
القوائم تعتبر من العناصر الأساسية في HTML وتستخدم لتنظيم وعرض مجموعة من العناصر المرتبطة ببعضها البعض. HTML يوفر لك ثلاثة أنواع رئيسية من القوائم: القوائم المرتبة، القوائم غير المرتبة، والقوائم التعريفية.
1. القوائم المرتبة <ol>
القائمة المرتبة تُستخدم عندما نحتاج إلى عرض عناصر بترتيب معين، مثل قائمة مرقمة. في هذه القائمة، سيتم عرض العناصر بالأرقام أو الحروف حسب ترتيبهم.
<ol>: هو وسم القائمة المرتبة.<li>: هو وسم العنصر داخل القائمة.
مثال:
<ol>
<li>الخطوة الأولى</li>
<li>الخطوة الثانية</li>
<li>الخطوة الثالثة</li>
</ol>
<ol>: يُستخدم لتعريف القائمة المرتبة.<li>: يستخدم لإضافة عنصر إلى القائمة.
نتيجة هذا المثال:
- الخطوة الأولى
- الخطوة الثانية
- الخطوة الثالثة
2. القوائم غير المرتبة <ul>
القائمة غير المرتبة تُستخدم عندما لا يكون هناك ترتيب مهم للعناصر. يتم عرض العناصر باستخدام رموز أو نقاط بدلًا من الأرقام.
<ul>: هو وسم القائمة غير المرتبة.<li>: هو وسم العنصر داخل القائمة.
مثال:
<ul>
<li>العنصر الأول</li>
<li>العنصر الثاني</li>
<li>العنصر الثالث</li>
</ul>
نتيجة هذا المثال:
- العنصر الأول
- العنصر الثاني
- العنصر الثالث
3. القوائم التعريفية <dl>
القائمة التعريفية تُستخدم لعرض قائمة من المصطلحات مع تعريفاتها. يتم استخدامها عندما تحتاج إلى تقديم مصطلحات وتفسيراتها، مثل القواميس أو قوائم المصطلحات.
<dl>: هو وسم القائمة التعريفية.<dt>: هو وسم العنصر الذي يحتوي على المصطلح.<dd>: هو وسم العنصر الذي يحتوي على تعريف المصطلح.
مثال:
<dl>
<dt>HTML</dt>
<dd>هي لغة ترميز النصوص التشعبية وتستخدم في إنشاء صفحات الويب.</dd>
<dt>CSS</dt>
<dd>هي لغة تستخدم لتحديد تصميم صفحات الويب.</dd>
<dt>JavaScript</dt>
<dd>هي لغة برمجة تُستخدم لإضافة التفاعل إلى صفحات الويب.</dd>
</dl>
<dt>: يُستخدم لتحديد المصطلح.<dd>: يُستخدم لتحديد تعريف المصطلح.
نتيجة هذا المثال:
- HTML: هي لغة ترميز النصوص التشعبية وتستخدم في إنشاء صفحات الويب.
- CSS: هي لغة تستخدم لتحديد تصميم صفحات الويب.
- JavaScript: هي لغة برمجة تُستخدم لإضافة التفاعل إلى صفحات الويب.
4. تخصيص القوائم باستخدام خاصية type
يمكنك تخصيص القوائم المرتبة وغير المرتبة باستخدام خاصية type.
type="1": لتحديد الأرقام في القائمة المرتبة.type="a": لتحديد الحروف الأبجدية الصغيرة.type="A": لتحديد الحروف الأبجدية الكبيرة.type="i": لتحديد الأرقام الرومانية الصغيرة.type="I": لتحديد الأرقام الرومانية الكبيرة.
مثال:
<ol type="A">
<li>الخطوة الأولى</li>
<li>الخطوة الثانية</li>
<li>الخطوة الثالثة</li>
</ol>
نتيجة هذا المثال: A. الخطوة الأولى
B. الخطوة الثانية
C. الخطوة الثالثة
مثال كامل لإنشاء القوائم:
<!DOCTYPE html>
<html lang="ar">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>القوائم في HTML</title>
</head>
<body>
<h1>أنواع القوائم في HTML</h1>
<h2>قائمة مرتبة</h2>
<ol>
<li>الخطوة الأولى</li>
<li>الخطوة الثانية</li>
<li>الخطوة الثالثة</li>
</ol>
<h2>قائمة غير مرتبة</h2>
<ul>
<li>العنصر الأول</li>
<li>العنصر الثاني</li>
<li>العنصر الثالث</li>
</ul>
<h2>قائمة تعريفية</h2>
<dl>
<dt>HTML</dt>
<dd>هي لغة ترميز النصوص التشعبية وتستخدم في إنشاء صفحات الويب.</dd>
<dt>CSS</dt>
<dd>هي لغة تستخدم لتحديد تصميم صفحات الويب.</dd>
<dt>JavaScript</dt>
<dd>هي لغة برمجة تُستخدم لإضافة التفاعل إلى صفحات الويب.</dd>
</dl>
</body>
</html>
ملخص الفصل الثاني – الجزء الثاني: القوائم (Lists)
- القوائم المرتبة
<ol>: تُستخدم لعرض العناصر بترتيب محدد (مرقمة). - القوائم غير المرتبة
<ul>: تُستخدم لعرض العناصر بدون ترتيب معين (نقاط). - القوائم التعريفية
<dl>: تُستخدم لعرض قائمة من المصطلحات مع تعريفاتها. - خاصية
type: تستخدم لتخصيص طريقة عرض القوائم المرتبة، مثل الأرقام أو الحروف أو الأرقام الرومانية.
جرب استخدام هذه الأنواع من القوائم في صفحة HTML خاصة بك! لو عندك أي سؤال أو محتاج مساعدة إضافية، أنا هنا! 😄
