القوائم المرتبة HTML Ordered Lists

الدرس السابق الدرس التالي
 قوائم HTML المرتبة 
تحدد علامة <ol> قائمة مرتبة. يمكن أن تكون القائمة المرتبة رقمية أو أبجدية.
ترتيب القائمة Ordered HTML List
تبدأ القائمة المرتبة بعلامة <ol>. يبدأ كل عنصر بالقائمة بعلامة <li>.
سيتم تمييز عناصر القائمة بالأرقام افتراضيًا:
مثال
 
  
  <!DOCTYPE html>
<html>
<body>
 
<h2>قائمة HTML مرتبة</h2>
 
<ol>
  <li>Coffee</li>
  <li>Tea</li>
  <li>Milk</li>
</ol>  
 
</body>
</html>

نوع القائمة  The Type Attribute
تحدد Type Attribute  للعلامة <ol> نوع علامة عنصر القائمة:
الوصف النوع
سيتم ترقيم عناصر القائمة بأرقام (افتراضي) type="1"
سيتم ترقيم عناصر القائمة بأحرف كبيرة type="A"
سيتم ترقيم عناصر القائمة بأحرف صغيرة type="a"
سيتم ترقيم عناصر القائمة بأرقام رومانية كبيرة type="I"
سيتم ترقيم عناصر القائمة بأرقام رومانية صغيرة type="i"
أعداد : Numbers
 
  
  <!DOCTYPE html>
<html>
<body>
 
<h2>قائمة مرتبة بالأرقام</h2>
 
<ol type="1">
  <li>Coffee</li>
  <li>Tea</li>
  <li>Milk</li>
</ol>  
 
</body>
</html>
الأحرف الكبيرة Uppercase Letters: 
 
  
  <!DOCTYPE html>
<html>
<body>
 
<h2>قائمة مرتبة بأحرف كبيرة</h2>
 
<ol type="A">
  <li>Coffee</li>
  <li>Tea</li>
  <li>Milk</li>
</ol>  
 
</body>
</html>

أحرف صغيرة Lowercase Letters: 
 
  
  <!DOCTYPE html>
<html>
<body>
 
<h2>قائمة مرتبة بأحرف صغيرة</h2>
 
<ol type="a">
  <li>Coffee</li>
  <li>Tea</li>
  <li>Milk</li>
</ol>  
 
</body>
</html>

أرقام رومانية كبيرة Uppercase Roman Numbers: 
 
  
  <!DOCTYPE html>
<html>
<body>
 
<h2>قائمة مرتبة بأرقام رومانية كبيرة</h2>
 
<ol type="I">
  <li>Coffee</li>
  <li>Tea</li>
  <li>Milk</li>
</ol>  
 
</body>
</html>

أرقام رومانية صغيرة Lowercase Roman Numbers: 
 
  
  <!DOCTYPE html>
<html>
<body>
 
<h2>قائمة مرتبة بأرقام رومانية صغيرة</h2>
 
<ol type="i">
  <li>Coffee</li>
  <li>Tea</li>
  <li>Milk</li>
</ol>  
 
</body>
</html>

قائمة التحكم في العد Control List Counting
بشكل افتراضي ، ستبدأ القائمة المرتبة في العد من 1. إذا كنت تريد بدء العد من رقم محدد ، فيمكنك استخدام سمة البدء start attribute :
مثال 
 
  
  <!DOCTYPE html>
<html>
<body>
 
<h2>سمة البداية(start)</h2>
<p>بشكل افتراضي ، ستبدأ القائمة المرتبة في العد من 1. استخدم سمة البداية لبدء العد من رقم محدد:</p>
 
<ol start="50">
  <li>Coffee</li>
  <li>Tea</li>
  <li>Milk</li>
</ol>
 
<ol type="I" start="50">
  <li>Coffee</li>
  <li>Tea</li>
  <li>Milk</li>
</ol>
 
</body>
</html>

القوائم المتداخلة Nested HTML Lists
يمكن أن تتداخل القوائم (قائمة داخل القائمة):
مثال 
 
  
  <!DOCTYPE html>
<html>
<body>
 
<h2>A قائمة متداخلة</h2>
<p>يمكن أن تتداخل القوائم (قائمة داخل قائمة):</p>
 
<ol>
  <li>Coffee</li>
  <li>Tea
    <ol>
      <li>Black tea</li>
      <li>Green tea</li>
    </ol>
  </li>
  <li>Milk</li>
</ol>
 
</body>
</html>
ملاحظة: يمكن أن يحتوي عنصر القائمة (<li>) على قائمة جديدة وعناصر HTML أخرى ، مثل الصور والروابط وما إلى ذلك.
ملخص الفصل
  • استخدم عنصر <ol> لتحديد قائمة مرتبة
  • استخدم سمة النوع   Type Attribute    لتحديد نوع الترقيم
  • استخدم عنصر <li> لتعريف عنصر قائمة
  • يمكن أن تتداخل القوائم
  • يمكن أن تحتوي عناصر القائمة على عناصر HTML أخرى
الدرس السابق الدرس التالي
القسم: