🌟 مقدمة تحفيزية : مرحباً بك مجدداً ! هل لاحظت أن أغلب المواقع الناجحة تعتمد على “القوائم” ؟ سواء كانت قائمة أسعار ، خطوات تعليمية ، أو حتى الروابط في أعلى الصفحة . اليوم ستتعلم كيف تنظم معلوماتك في نقاط احترافية تجعل القراءة سهلة وممتعة لزوار موقعك .
1️⃣ القوائم غير المنظمة(Unordered list-<ul>)
نستخدمها عندما نريد عرض مجموعة من النقاط بدون ترتيب رقمي (تظهر على شكل نقاط سوداء).
• الوسم الأم : <ul> (اختصار لـ Unordered List) .
• وسم العناصر: <li>(اختصار لـ List Item) .
مثال تطبيقي (خدمات أكاديمية قياوي) :
html
<h3/>ماذا ستتعلم في أكاديميتنا؟<h3> <ul>
<li/>برمجة الويب<li>
<li/>برمجة التطبيقات<li>
<li/>الذكاء الاصطناعي<li>
</ul>
2️⃣ القوائم المنظمة ( Ordered List >- ol>)
نستخدمها عندما يكون الترتيب مهماً (مثل خطوات طبخة ، أو مراحل دراسية) ، حيث تظهر تلقائياً بأرقام (1, 2, 3…).
• الوسم الأم : <ol>(اختصار لـ Ordered List) .
• وسم العناصر : <li>(نفس الوسم السابق).
مثال تطبيقي (خطوات تعلم البرمجة) :
html
<h3/>:خطواتك للنجاح معنا<h3> <ol> <HTML . </li فهم أساسيات الـ <li>
<CSS.</liتنسيق الموقع بـ<li>
<JavaScript.</liإضافة التفاعل بـ<li>
</ol>
💡 سر من أسرار المحترفين (Nested Lists) : هل تعلم أنه يمكنك وضع قائمة داخل قائمة ؟ (مثلاً : قائمة باللغات ، وتحت كل لغة قائمة بمستوياتها) .
<ul>
لغة بايثون<li>
<ul>
<li/>المستوى المبتدئ<li>
<li/>المستوى المتقدم<li>
<ul/>
<li/>
< HTML </li لغة<li>
</ul>
🎯 تحدي المبرمج الذكي :
قم بإضافة قسم جديد في صفحتك index.html تحت عنوان “أهدافي لهذا العام” ، واستخدم القائمة المنظمة <ol> لكتابة 3 أهداف تطمح لتحقيقها في الأكاديمية .
🚀 ماذا بعد ؟
رائع! لقد نظمت نصوصك ، وفي الدرس القادم (الدرس السادس) سننتقل إلى جانب أكثر حيوية وجاذبية: إضافة الصور والروابط . سنتعلم كيف نجعل الموقع ينبض بالحياة بالصور، وكيف نربط صفحتنا بالعالم الخارجي .
https://youtu.be/MehObeL-x2E?si=KBhkjC8OGYs_U_dA