ثلاثة عناصر أساسية للقوائم:
<ul> (Unordered List): قائمة غير مرتبة — تُظهر نقاطاً بالتقصير. تستخدم عندما ترتيب العناصر لا يهم.
<ol> (Ordered List): قائمة مرتبة — تُظهر أرقاماً بالتقصير. تستخدم عندما الترتيب مهم (خطوات، تعليمات).
<li> (List Item): عنصر القائمة — يستخدم داخل ul أو ol.
خصائص ol: • start: رقم البداية (start="5" يبدأ من 5) • reversed: عكس الترتيب • type: نوع الترقيم (1، A، a، I، i)
القوائم المتداخلة: يمكن وضع قائمة داخل li لإنشاء قوائم متعددة المستويات.
| 1 | <!-- قائمة غير مرتبة --> |
| 2 | <ul> |
| 3 | <li>HTML</li> |
| 4 | <li>CSS</li> |
| 5 | <li>JavaScript</li> |
| 6 | </ul> |
| 7 | |
| 8 | <!-- قائمة مرتبة --> |
| 9 | <ol> |
| 10 | <li>تعلم HTML</li> |
| 11 | <li>تعلم CSS</li> |
| 12 | <li>تعلم JavaScript</li> |
| 13 | </ol> |
| 14 | |
| 15 | <!-- قائمة مرتبة بالحروف --> |
| 16 | <ol type="A"> |
| 17 | <li>الخيار الأول</li> |
| 18 | <li>الخيار الثاني</li> |
| 19 | </ol> |
| 20 | |
| 21 | <!-- قائمة متداخلة --> |
| 22 | <ul> |
| 23 | <li>تقنيات الواجهة الأمامية |
| 24 | <ul> |
| 25 | <li>HTML</li> |
| 26 | <li>CSS</li> |
| 27 | <li>JavaScript</li> |
| 28 | </ul> |
| 29 | </li> |
| 30 | <li>تقنيات الخادم |
| 31 | <ul> |
| 32 | <li>Node.js</li> |
| 33 | <li>Python</li> |
| 34 | </ul> |
| 35 | </li> |
| 36 | </ul> |
مثال 1: خطوات تثبيت مشروع
| 1 | <article> |
| 2 | <h2>كيفية إعداد مشروع HTML</h2> |
| 3 | |
| 4 | <h3>المتطلبات:</h3> |
| 5 | <ul> |
| 6 | <li>محرر نصوص (VS Code موصى به)</li> |
| 7 | <li>متصفح حديث (Chrome أو Firefox)</li> |
| 8 | <li>معرفة أساسية بالحاسوب</li> |
| 9 | </ul> |
| 10 | |
| 11 | <h3>خطوات الإعداد:</h3> |
| 12 | <ol> |
| 13 | <li>حمّل وثبّت VS Code من موقعه الرسمي</li> |
| 14 | <li>أنشئ مجلداً جديداً لمشروعك</li> |
| 15 | <li>افتح المجلد في VS Code</li> |
| 16 | <li>أنشئ ملفاً باسم index.html</li> |
| 17 | <li>اكتب <code>!</code> واضغط Tab لـ Emmet snippet</li> |
| 18 | <li>افتح الملف في المتصفح</li> |
| 19 | </ol> |
| 20 | </article> |