في هذا الدرس 6تصفّح المواضيع
يمثل عنصر القائمة المرقمة
<ol> أداة معيارية لتنظيم بنود متسلسلة يُعد الترتيب فيها أمراً جوهرياً وحاسماً لفهم المعنى. تشمل الاستخدامات الشائعة للوسم خطوات إعداد الخوادم، وإرشادات التثبيت، والوصفات، وقوائم الترتيب التنافسي.على خلاف القوائم غير المرتبة التي تعبر فقط عن الانتماء لمجموعة، تنشئ القائمة المرقمة علاقة ترتيبية صارمة. إذا تم تغيير موضع أي بند، يختل التسلسل المنطقي للإجراء أو تتغير الحقيقة المعلوماتية للمستند.
تُبنى القائمة المرقمة بفتح وسم الحاوية
<ol> وتضمين عناصر <li> بداخلها ثم الإغلاق بـ </ol>. يتولى المتصفح تلقائياً حساب الأرقام العشرية المتتابعة بدءاً من الرقم 1 لكل عنصر تابع.
HTML
<!-- Basic ordered list of setup steps -->
<ol>
<li>Clone project repository</li>
<li>Install runtime dependencies</li>
<li>Launch local development server</li>
</ol>يمنح المتصفح القائمة إزاحة جانبية افتراضية مقدارها 40 بكسل لاحتواء أرقام الترقيم. عند حذف أي عنصر أو إعادة ترتيب البنود برمجياً، يعيد المتصفح ترقيم العناصر تلقائياً دون أي تدخل يدوي.
على خلاف وسم
<ul> الذي أُهملت فيه خاصية type، فإن خاصية type على وسم <ol> صالحة ومعيارية تماماً في مواصفات HTML5 لأنها تعبر عن دلالة نظام الترقيم المطلوب.
يحدد معيار HTML خمس قيم رسمية لخاصية
type لتحديد نمط الترقيم في القوائم المرقمة:| القيمة | نظام الترقيم | نموذج المخرجات | مجال الاستخدام النموذجي |
|---|---|---|---|
1 |
أرقام عشرية (الافتراضي) | 1، 2، 3، 4 | الخطوات الفنية، الإجراءات، الترتيب التنافسي |
A |
حروف لاتينية كبيرة | A، B، C، D | المحاور الكبرى، أقسام الامتحانات الرئيسية |
a |
حروف لاتينية صغيرة | a، b، c، d | النقاط الفرعية، خيارات الأسئلة المتعددة |
I |
أرقام رومانية كبيرة | I، II، III، IV | فصول الكتب، المعاهدات، التشريعات الرسمية |
i |
أرقام رومانية صغيرة | i، ii، iii، iv | المقدمات، الملاحق، البنود التعاقدية الفرعية |
عند صياغة الدروس التعليمية أو أدلة التشغيل، تضمن القوائم المرقمة التزام المطورين بالخطوات وفق التسلسل المقصود. في بيئات هندسة البرمجيات، يؤدي تخطي خطوة أو تبديل ترتيبها إلى فشل البناء البرمجي فوراً.
HTML
<ol>
<li>Run automated test suites</li>
<li>Compile production assets</li>
<li>Deploy to staging cluster</li>
<li>Execute smoke verification</li>
</ol>يمكن تضمين كتل برمجية وتنبيهات تحذيرية وصور توضيحية داخل كل عنصر
<li> دون انقطاع تسلسل الترقيم الإجمالي، مما يجعل القائمة المرقمة إطاراً متكاملاً لإدارة الخطوات المعقدة.تقدم قارئات الشاشة تجربة نطق مميزة عند مصادفة القوائم المرقمة مقارنة بالقوائم النقطية. يقرأ البرنامج: "قائمة مرقمة، 4 عناصر"، ويسبق كل بند برقمه المحدد: "1، تشغيل حزم الاختبارات التلقائية".
يمنح هذا الترقيم البرمجي المطورين من ذوي الإعاقة البصرية تأكيداً لحظياً على موضعهم الدقيق في الإجراء (مثل: "الخطوة 3 من 4")، وإدراك حجم المهام المتبقية دون الحاجة لعد العناصر يدوياً.
HTML
<ol type="1">
<li>Configure environment variables</li>
<li>Migrate database schema</li>
<li>Seed initial admin account</li>
</ol>توفر عدادات CSS مرونة فائقة لتنسيق القوائم المرقمة. من خلال دمج خاصية
counter-reset على حاوية <ol>، وخاصية counter-increment على عناصر <li>، ودالة counter(step) داخل العنصر الزائف li::before، يمكنك بناء شارات ترقيم دائرية متطورة وملونة.
HTML
<ol>
<li>Draft Technical Specification</li>
<li>Build Semantic HTML Structure</li>
<li>Run Accessibility Audit</li>
</ol>يحافظ استخدام عدادات CSS مع العناصر الزائفة على كامل سهولة الوصول الرقمية: تواصل قارئات الشاشة نطق بنية القائمة المرقمة وترتيب بنودها بدقة، بينما ينعم المتصفح بشارات بصرية حديثة وتصميم أنيق متناسق.
خلاصة المعرفة ومحطة الانتقال
ملخص الدرس
حصاد الدرسمراجعة مركّزة لأهم المفاهيم والقواعد الهندسية التي أتقنتها في هذا الدرس قبل التطبيق العملي
ماذا تعلّمت في هذا الدرس؟
ملخص الدرس: أتقنت في هذا الدرس دور القوائم المرقمة وعنصر ol، وبناء الخطوات المتسلسلة، وأنظمة الترقيم الخمسة لخاصية type، ونطق قارئات الشاشة للتعداد، وعدادات CSS المخصصة. الخطوة التالية تنقلنا إلى استكشاف القوائم الوصفية dl للمصطلحات والتعريفات.
رحلتك في الدرس
—سجّل الدخول لحفظ تقدمك
تابع إنجاز المواضيع والمصطلحات والمهام، وكمّل من آخر خطوة على أي جهاز.
ابنِ لغتك البرمجية
المصطلحات5
راجع المعنى، اشرحه لنفسك، ثم علّم البطاقة كمفهومة.
0 / 5 مفهومةأول بطاقة، أول خطوة
- 01 Ordered List Element عنصر القائمة المرقمة
- وسم الحاوية الدلالي ol المستخدم لتمثيل المجموعات المتسلسلة التي يُعد ترتيب بنودها أمراً جوهرياً.
- للمراجعة
- 02 Type Attribute on OL خاصية type في القوائم المرقمة
- خاصية معيارية صالحة في HTML5 تحدد نظام الترقيم المستخدم (1 أو A أو a أو I أو i) لعلامات البنود.
- للمراجعة
- 03 CSS Counter عداد CSS
- متغير برمجي في CSS يتزايد عبر العناصر لتوليد ترقيم مخصص عبر العناصر الزائفة.
- للمراجعة
- 04 Ordinal Numbering الترقيم الترتيبي
- نظام ترقيم يعبر عن الموضع أو الرتبة داخل سلسلة متتابعة وتعلنه قارئات الشاشة بوضوح.
- للمراجعة
- 05 Counter Increment زيادة العداد
- خاصية CSS المحددة للعداد الذي يجب زيادة قيمته عند مصادفة كل عنصر جديد في الصفحة.
- للمراجعة
لا توجد بطاقات تطابق البحث والتصفية.
اقرأ البطاقات بحرية. سجّل الدخول لحفظ تقدم مراجعتك.
حروف قليلة. معنى كامل.
الاختصارات3
راجع المعنى، اشرحه لنفسك، ثم علّم البطاقة كمفهومة.
0 / 3 مفهومةأول بطاقة، أول خطوة
- 01 ASCII ASCII
- American Standard Code for Information Interchange
- معيار تشفير المحارف للاتصالات الإلكترونية المعتمد في الترتيب الأبجدي للقوائم.
- للمراجعة
- 02 JAWS JAWS
- Job Access With Speech
- برنامج قارئ شاشة شهير لنظام ويندوز يتيح للمكفوفين التفاعل الكامل مع محتوى الويب.
- للمراجعة
- 03 NVDA NVDA
- NonVisual Desktop Access
- برنامج قارئ شاشة مجاني ومفتوح المصدر لنظام ويندوز يدعم معايير الويب العالمية.
- للمراجعة
لا توجد بطاقات تطابق البحث والتصفية.
اقرأ البطاقات بحرية. سجّل الدخول لحفظ تقدم مراجعتك.
من الفهم للتطبيق
مهامك قبل الاختبار
خطوة صغيرة كل مرة. وإنجاز تقدر ترجع له.
0/4مهام منجزة
-
اكتب قائمة مرقمة باستخدام وسم ol تتضمن ثلاثة أوامر متتابعة في موجه الأوامر لتثبيت حزمة برمجية.
-
استخدم الخاصية type="I" على وسم ol لتمثيل الأقسام الكبرى للمنهج بأرقام رومانية كبيرة.
-
نسق قائمة مرقمة باستخدام counter-reset وcounter-increment في CSS لإظهار شارات أرقام دائرية أنيقة.
-
افحص شجرة سهولة الوصول لقائمة ol للتأكد من حساب الأرقام الترتيبية ونطقها الصوتي الدقيق.
تأشير المهمة إقرار منك بإتمامها، وليس تصحيحًا آليًا للكود. يُحفظ تقدمك في حسابك.
مساحة التحدي
اختبر فهمك.
اختبر فهمك.
ووصلها للإتقان.
كل سؤال خطوة لقدّام. اختار، اكتب كود، وشوف نتيجتك فورًا.
10أسئلة
3أنواع تحديات
100%هدف الإتقان
تصحيح تلقائي. فرص بلا حدود.
أكمل المهام، واجمع كل الإجابات الصحيحة. أقل من 100%؟ راجع وأعد المحاولة.
الأسئلة متاحة للاطلاع. سجّل الدخول للتفاعل وحفظ تقدمك.