الموضوع: دورة تصميم وتطوير مواقع الإنترنت للمبتدئين [html] (وسوم القوائم) م#8

وسوم القوائم Lists tags
<ol> <ul> <li>

وتنقسم إلى قسمين:
قوائم مرتبة ترتيبا عدديا أو أبجديا .
قوائم غير مرتبة .

القوائم المرتبة ترتيبا عدديا أو أبجديا Ordered Lists
<ol>

وتبدأ بالوسم <ol> ثم كل قائمة منفردة لابد أن تأخذ الوسم <li>
مثال:

كود:

<ol>
    <li>First Menu</li>
    <li>Second Menu</li>
    <li>Third Menu</li>
</ol>

النتيجة:


ولكن هذا الوسم ليس مقتصرا على الأرقام فقط ، فيمكنك أيضا أن تقوم بترتيب القوائم ترتيبا أبجديا حسب الحروف الإنجليزية (صغيرة Small وكبيرة Capital) أو حتى ترتيبا أبجديا حسب الحروف الرومانية (صغيرة وكبيرة أيضا) ، ولتحديد أحد هذه الخيارات الأربعة يجب إضافة سمة (Attribute) بجوار وسم <ol> وهي type ثم إعطاؤها القيمة (Value) المرادة وهي حرف "a" صغير (Small) أو "A" كبير (Capital) للحروف الإنجليزية ، أو "i" صغير (Small) أو "I" كبير (Capital) للحروف الرومانية.
مثال على الترتيب الأبجدي حسب الحروف الإنجليزية الصغيرة:

كود:

<ol type="a">
             <li>First Menu</li>
             <li>Second Menu</li>
             <li>Third Menu</li>
</ol> 

النتيجة:


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

كود:

<ol type="A">
             <li>First Menu</li>
             <li>Second Menu</li>
             <li>Third Menu</li>
</ol> 

النتيجة:


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

كود:

<ol type="i">
             <li>First Menu</li>
             <li>Second Menu</li>
             <li>Third Menu</li>
</ol> 

النتيجة:


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

كود:

<ol type="I">
             <li>First Menu</li>
             <li>Second Menu</li>
             <li>Third Menu</li>
</ol> 

النتيجة:


القوائم الغير مرتبة Unordered Lists
<ul>

وتبدأ بالوسم <ul> ثم كل قائمة منفردة لابد أن تأخذ الوسم <li>
مثال:

كود:

<ul>
    <li>First Menu</li>
    <li>Second Menu</li>
    <li>Third Menu</li>
</ul>

النتيجة:


كما يمكنك إنشاء قائمة مختلطة مكونة من عدة قوائم غير مرتبة متداخلة مع بعضها لتعطيك أشكال أخرى غير النقاط المستديرة السوداء كما في المثال التالي:

كود:

<ul>
    <li>Coffee</li>
    <li>Tea
        <ul>
             <li>Black tea</li>
             <li>Green tea
                 <ul>
                     <li>China</li>
                     <li>Africa</li>
                 </ul>
            </li>
        </ul>
    </li>
    <li>Milk</li>
</ul>

النتيجة:

الدرس السابق
http://www.nilemotors.net/Nile/417571-html-7-a.html