الدرس التاسع: القوائم المتقدمة في HTML

مرحبًا بكم في الدرس التاسع من دورة HTML. اليوم سنتحدث عن ميزات متقدمة للقوائم.

1. تخصيص القوائم باستخدام CSS

يمكنك تغيير نمط الرموز أو إزالتها تمامًا باستخدام CSS.

أمثلة:

دائرة مفتوحة:

<ul style="list-style-type: circle;">

    <li>العنصر الأول</li>

    <li>العنصر الثاني</li>

</ul>

إزالة الرموز:

<ul style="list-style-type: none;">

    <li>العنصر الأول</li>

    <li>العنصر الثاني</li>

</ul>

2. إضافة الروابط داخل القوائم

يمكنك إضافة روابط داخل القوائم لإنشاء قوائم تفاعلية:

<ul>

    <li><a href="https://www.example.com">الرابط الأول</a></li>

    <li><a href="https://www.example.com">الرابط الثاني</a></li>

</ul>

3. القوائم المتداخلة مع روابط

<ul>

    <li>العنصر الأول

        <ul>

            <li><a href="https://www.example.com">الرابط 1.1</a></li>

            <li><a href="https://www.example.com">الرابط 1.2</a></li>

        </ul>

    </li>

    <li>العنصر الثاني</li>

</ul>

4. تغيير الرموز باستخدام الصور

<ul style="list-style-image: url('https://example.com/icon.png');">

    <li>العنصر الأول</li>

    <li>العنصر الثاني</li>

</ul>

5. ترتيب القوائم المرتبة من رقم معين

<ol start="5">

    <li>العنصر الخامس</li>

    <li>العنصر السادس</li>

</ol>

الخلاصة: الآن يمكنك تخصيص القوائم بسهولة وجعلها أكثر تفاعلية باستخدام CSS والميزات المتقدمة.