HTML / القوائم المرتبة

الناشر :كودا فوكس -

HTML / القوائم المرتبة

مفهوم القوائم المرتبة

القائمة المرتبة (Ordered List) تُستخدم لعرض مجموعة من العناصر بطريقة منظمة، حيث يتم إظهار رقم أو حرف يمثل كل عنصر في القائمة. هذه القوائم تتسم بالقدرة على عرض الترقيم بأشكال متعددة، مما يمنح المستخدمين خيارات مختلفة لعرض البيانات. في هذا الدرس، سنتناول كيفية إنشاء القوائم المرتبة، وخصائصها، وكيفية تخصيصها لتلبية احتياجات التصميم المختلفة.

HTML / القوائم المرتبة


إضافة قائمة مرتبة في الصفحة

لإضافة قائمة مرتبة إلى الصفحة، نستخدم الوسم <ol></ol>، والذي يدل المتصفح على أننا نرغب في عرض قائمة مرتبة. العناصر التي نريد إضافتها إلى القائمة يجب أن تُدرج داخل الوسم <li></li>، حيث الكلمة ol هي اختصار لـ Ordered List، بينما الكلمة li تعني List Item، أي عنصر في القائمة.

في المثال التالي، قمنا بإضافة قائمة مرتبة تتضمن ثلاثة عناصر:

خد الكواد نسخ واضغط هنا جرب الكود 📋 

<!DOCTYPE html>
<html>
    <body>
		
		<p>The following items are inside an ordered list:</p>
		
		<!-- <ol> تم وضعه سيظهر قبله رقم يشير لترتيبه بالنسبة للوسم <li> كل وسم -->
        <ol>
            <li>Apple</li>
            <li>Orange</li>
            <li>Mango</li>
        </ol>
		
	</body>
</html>

أنواع الترقيم

تتيح لك خاصية type المستخدمة مع الوسم <ol> تحديد نوع الترقيم الذي تريد استخدامه. يمكنك استخدام الأحرف التالية:

  • type="A" لإظهار ترقيم أبجدي بأحرف كبيرة.
  • type="a" لإظهار ترقيم أبجدي بأحرف صغيرة.
  • type="I" لإظهار ترقيم روماني بأحرف كبيرة.
  • type="i" لإظهار ترقيم روماني بأحرف صغيرة.
  • type="1" لإظهار ترقيم عادي، وهذه القيمة هي الافتراضية.

المثال الأول

في المثال التالي، قمنا بتغيير نوع الترقيم إلى ترقيم أبجدي بأحرف كبيرة:

خد الكواد نسخ واضغط هنا جرب الكود 📋 

<!DOCTYPE html>
<html>
    <body>
		
		<p>The following items are inside an ordered list with type 'A':</p>
		
		<!-- <ol> هنا قمنا بتحديد أن العناصر الموضوعة بداخل الوسم 
		سيتم إعتماد الأحرف الأبجدية الإنجليزية الكبيرة في ترقيمها -->
        <ol type="A">
            <li>Apple</li>
            <li>Orange</li>
            <li>Mango</li>
        </ol>
		
	</body>
</html>

المثال الثاني

في المثال التالي، قمنا بتغيير نوع الترقيم إلى ترقيم أبجدي بأحرف صغيرة:

خد الكواد نسخ واضغط هنا جرب الكود 📋 

<!DOCTYPE html>
<html>
    <body>
		
		<p>The following items are inside an ordered list with type 'a':</p>
		
		<!-- <ol> هنا قمنا بتحديد أن العناصر الموضوعة بداخل الوسم 
		سيتم إعتماد الأحرف الأبجدية الإنجليزية الصغيرة في ترقيمها -->
        <ol type="a">
            <li>Apple</li>
            <li>Orange</li>
            <li>Mango</li>
        </ol>
		
	</body>
</html>

المثال الثالث

في المثال التالي، قمنا بتغيير نوع الترقيم إلى ترقيم روماني بأحرف كبيرة:

خد الكواد نسخ واضغط هنا جرب الكود 📋 

<!DOCTYPE html>
<html>
    <body>
		
		<p>The following items are inside an ordered list with type 'I':</p>
		
		<!-- <ol> هنا قمنا بتحديد أن العناصر الموضوعة بداخل الوسم 
		سيتم إعتماد الأحرف الأبجدية الرومانية الكبيرة في ترقيمها -->
        <ol type="I">
            <li>Apple</li>
            <li>Orange</li>
            <li>Mango</li>
        </ol>
		
	</body>
</html>

المثال الرابع

في المثال التالي، قمنا بتغيير نوع الترقيم إلى ترقيم روماني بأحرف صغيرة:

خد الكواد نسخ واضغط هنا جرب الكود 📋 

<!DOCTYPE html>
<html>
    <body>
		
		<p>The following items are inside an ordered list with type 'i':</p>
		
		<!-- <ol> هنا قمنا بتحديد أن العناصر الموضوعة بداخل الوسم 
		سيتم إعتماد الأحرف الأبجدية الرومانية الصغيرة في ترقيمها -->
        <ol type="i">
            <li>Apple</li>
            <li>Orange</li>
            <li>Mango</li>
        </ol>
		
	</body>
</html>

المثال الخامس

في المثال التالي، قمنا بتحديد أن نوع الترقيم هو ترقيم عادي:

خد الكواد نسخ واضغط هنا جرب الكود 📋 

<!DOCTYPE html>
<html>
    <body>
		
		<p>The following items are inside an ordered list with type '1':</p>
		
		<!-- سيتم إعتماد الأرقام العادية في ترقيمها <ol> هنا قمنا بتحديد أن العناصر الموضوعة بداخل الوسم -->
        <ol type="1">
            <li>Apple</li>
            <li>Orange</li>
            <li>Mango</li>
        </ol>
		
	</body>
</html>

تحديد من أين يبدأ الترقيم

في حال أردت تحديد من أي رقم ستبدأ القائمة في إظهار الترقيم، يمكنك إضافة الخاصية start للوسم <ol> وتمرير الرقم الذي تريده أن تبدأ منه.

المثال الأول

في المثال التالي قمنا بتحديد أن الترقيم سيبدأ من الرقم 5:

خد الكواد نسخ واضغط هنا جرب الكود 📋 

<!DOCTYPE html>
<html>
    <body>
		
		<p>The following items are inside an ordered list who is start counting from '5':</p>
		
		<!-- هنا قلنا أن الترقيم سيبدأ إعتباراً من الرقم 5 -->
        <ol start="5">
            <li>Apple</li>
            <li>Orange</li>
            <li>Mango</li>
        </ol>
		
	</body>
</html>

المثال الثاني

في المثال التالي قمنا بتحديد أن الترقيم سيبدأ من الرقم 3 وأن نوع الترقيم سيكون أحرف إنجليزية صغيرة:

خد الكواد نسخ واضغط هنا جرب الكود 📋 

<!DOCTYPE html>
<html>
    <body>
		
		<p>The following items are inside an ordered list with type 'a'
		and starting with third letter in the alphabets which is the letter 'c':</p>
        
        <!-- هنا حددنا أن الترقيم سيبدأ إعتباراً من الحرف الأبجدي الثالث -->
        <ol start="3" type="a">
            <li>Apple</li>
            <li>Orange</li>
            <li>Mango</li>
        </ol>
		
	</body>
</html>

قطع الترقيم الحالي

إذا أردت تغيير قيمة الترقيم المعطى بشكل تلقائي للعنصر، يمكنك إضافة الخاصية value له وتمرير العدد الذي تريده أن يبدأ به. هذا يتيح لك التحكم في ترقيم العناصر بشكل دقيق.

مثال

في المثال التالي قمنا بتغيير الترقيم عند العنصر الرابع إلى 7. لاحظ أن العنصر الخامس سيكون ترقيمه 8 لأن ترقيمه يتحدد نسبةً لترقيم العنصر الذي يسبقه:

خد الكواد نسخ واضغط هنا جرب الكود 📋 

<!DOCTYPE html>
<html>
    <body>
		
		<p>We change the ordering of the fourth element to 7:</p>
		
		<!-- لاحظ أن العنصر الثاني سيبدأ من '7' و ليس من '4' لأننا غيرنا ذلك بأنفسنا -->
        <ol>
            <li>Apple</li>
            <li>Orange</li>
            <li>Mango</li>
            <li value="7">Carrot</li>
            <li>Banana</li>
            <li>Peach</li>
        </ol>
		
	</body>
</html>

وضع قائمة بداخل قائمة

يمكنك إظهار القوائم بشكل متداخل، بحيث يظهر تحت العنصر قائمة تابعة له. في المثال التالي، قمنا بتعريف عنصرين ووضعت كل عنصر فيه قائمة أخرى، مما يتيح تنظيم المعلومات بشكل أفضل:

خد الكواد نسخ واضغط هنا جرب الكود 📋 

<!DOCTYPE html>
<html>
    <body>
		
		<h2>Nested Ordered Lists</h2>
		
        <ol>
            <!-- العنصر الأول وضعنا فيه قائمة فيها ثلاث عناصر -->
            <li>Front-End
                <ol>
                    <li>HTML</li>
                    <li>CSS</li>
                    <li>Javascript</li>
                </ol>
				<br> <!-- هنا أضفنا سطر فارغ لإظهار المحتوى بشكل أفضل -->
            </li>
            <!-- العنصر الثاني وضعنا فيه قائمة فيها عنصرين -->
            <li>Back-End
                <ol>
                    <li>MySQL</li>
                    <li>Aspnetcore</li>
                </ol>
            </li>
        </ol>
		
	</body>
</html>
التسميات

إرسال تعليق

أحدث أقدم

نموذج الاتصال