إعـــــــلان

تقليص
لا يوجد إعلان حتى الآن.

6-القوائم Lists in html (دورهxhtml)

تقليص
هذا الموضوع مغلق.
X
X
 
  • تصفية - فلترة
  • الوقت
  • عرض
إلغاء تحديد الكل
مشاركات جديدة

  • 6-القوائم Lists in html (دورهxhtml)

    [frame="14 98"]بسم الله الرحمن الرحيم

    السلام عليكم ورحمة الله وبركاته


    القوائم Lists in html
    --------------------------------------------------------------------------------


    القوائم هى احد العناصر التى تستخدم بكثرة فى اغلب الصفحات التى تتصفحها

    فى الإنترنت.

    على سبيل المثال, قائمة روابط الدورات الموجودة على يمين صفحات ملتقى مطورى المواقع.

    او القائمة الموجودة بأعلى اليسار.

    وهناك العديد من القوائم التى لها اشكال اخرى.

    القوائم لها ثلاث انواع.

    القوائم الغير مرتبة unordered lists
    والقوائم المرتبة ordered lists
    والقوائم المعرفة definition lists



    لنأخذهم بالترتيب

    القوائم الغير مرتبة.
    والتى تعنى لا ترتيب لها, كل عناصر القائمة لا يمثل ترتيبهم شئ فى اهمية عرضهم.

    او بمعنى اخر, ان القائمة, اولها مثلا اخرها, لن يفرق كثيرا اذا وضعت الأول مكان الأخير او الأخير مكان الأول.
    ويتم تطبيقها بالشكل التالى كامثال

    كود:

    كود:
    <ul>
    <li>عنصر ما</li>
    <li>عنصر اخر</li>
    <li>عنصر مرة اخرى</li>
    </ul>
    وكما تلاحظ, لا يوجد اهمية اذا وضعنا العنصر الأول (عنصر ما)

    مكان العنصر الأخير (عنصر مرة اخرى)

    كلهم سيتم عرضهم, ولا يوجد اهمية تجعلنا نضع واحد قبل الأخر.
    لكننا نضعهم بقائمة لتنسيقهم فقط ليس الا.


    النوع الثانى, وهو القوائم المرتبة ordered lists

    وتصاغ بالشكل التالى

    كود:

    كود:
    <ol>
    <li>العنصر الأول</li>
    <li>العنصر الثانى</li>
    <li>العنصر الثالث</li>
    </ol>
    لاحظ بنفسك كيف تم ترقيم عناصر القائمة
    وهذا لأنها كما ذكرنا قائمة مرتبة.

    قبل ان نذهب للجزء الثالث من انواع القوائم
    دعونى اولا اوضح انه يمكننا ان نصنع مزيج داخل القوائم. كالتالى مثلا.

    كود:

    كود:
    <ul>
    <li>قائمة فرعية مرتبة
    <ol>
    <li>العنصر الأول بالقائمة الفرعية المرتبة</li>
    <li>العنصر الثانى بالقائمة الفرعية المرتبة</li>
    </ol>
    </li>
    <li>قائمة فرعية غير مرتبة
    <ul>
    <li>عنصر</li>
    <li>مجرد عنصر</li>
    <li>قائمة فرعية اكثر عمقا؟
    <ol>
    <li>عنصر واحد</li>
    <li>عنصر ثانى</li>
    </ol></li>
    </ul></li>
    <li>عنصر اخر</li>
    </ul>
    اتمنى ان تكون استطعت ان تستوعب كم هى سهولة وسلاسة صنع القوائم وعناصرها.

    واخيرا النوع الثالث من القوائم

    وهو القوائمة المعرفة او definition lists

    هذا النوع, نادر استخدامه, وهو حقا لا يعنى اى شئ اكثر من اضافة تنسيق بسيط لجعل الأمر عبارة عن عناوين ريئيسية ووصفها.

    كما رأينا بالنوع الأول والثانى, عناصرهم توضع داخل الوسم <li>
    والحرفين هم اختصار لكلمة list item

    لكن النوع الثالث, العناصر الرئيسية منه توضع داخل الوسم <dt>

    وهى اختصار لكلمة definition term

    ووصفه يوضع داخل الوسم definition description

    ويكتمل الأمر بالشكل التالى

    كود:

    كود:
    <dl>
    <dt>المصطلح الأول</dt>
    <dd>تعريف المصطلح الأول</dd>
    <dd>وصف اخر للمصطلح الأول</dd>
    <dt>مصطلح اخر</dt>
    <dd>تعريف المصطلح الأخر</dd>
    </dl>
    اشياء اخرى حول القوائم.

    متصفح الأنترنت اكسبلورار عادة يضيف مساحة فارغة لا نحبذ وجودها فى القوائمة
    وتظهر هذه المساحة عند استخدام القوائم بنظام الـ inline (يتم إعداده من خلال الـ css ويوجد شرح لهذا بقسم الـ css ) وخصوصا اذا كنت تضع عناصر داخل عناصر القائمة, كالعنصر a الخاص بالروابط.



    لتجنب هذا الأمر يوجد عدة طرق

    اما ان تكتب القوائم دون ترك اى مسافات بين عناصرها

    بالشكل التالى

    كود:

    كود:
    <ul><li><a href="#">رابط</a></li><li><a href="#">رابط اخر</a></li><li><a href="#">الخ</a></li></ul>
    او ان تكتبها بالشكل التالى

    كود:

    كود:
    <ul><!--
    --><li><a href="#">رابط</a></li><!--
    --><li><a href="#">رابط اخر</a></li><!--
    --><li><a href="#">الخ</a></li><!--
    --></ul>

    اتمنى يكون كل شئ واضح بإذن الله.
    واراكم بالدرس القادم على خير.


    اقرأ ايضا..

    •الدرس السابق الروابط والصور links and images

    •الدرس التالى الجداول XHTML Tables[/frame]

  • #2
    رد: 6-القوائم Lists in html (دورهxhtml)

    جزاك الله خيراً أخى رائد ومبارك الإسم الجديد

    تعليق


    • #3
      رد: 6-القوائم Lists in html (دورهxhtml)

      شـكــ وبارك الله فيك ـــرا لك ... لك مني أجمل تحية .

      تعليق


      • #4
        رد: 6-القوائم Lists in html (دورهxhtml)

        جزيت خيرا أخي أبو فيصل

        .

        تعليق


        • #5
          رد: 6-القوائم Lists in html (دورهxhtml)

          بارك الله فيك أخى رائد

          درس سهل ولكنه رائع ومفيد جدا

          لك التحية والشكر

          تعليق

          مواضيع تهمك

          تقليص

          المنتدى: القسم العام نشرت بواسطة: Reem2Rabeh الوقت: 04-23-2025 الساعة 04:27 PM
          المنتدى: ضبط وتوكيد الجودة نشرت بواسطة: HeaD Master الوقت: 04-15-2025 الساعة 09:30 AM
          المنتدى: التصنيع والانتاج نشرت بواسطة: HeaD Master الوقت: 04-11-2025 الساعة 01:08 PM
          المنتدى: القسم العام نشرت بواسطة: نوال الخطيب الوقت: 03-19-2025 الساعة 03:07 AM
          المنتدى: الكمبيوتر والإنترنت نشرت بواسطة: عوض السوداني الوقت: 03-18-2025 الساعة 07:22 AM
          يعمل...
          X