زهير طه

59

5,843

دورة HTML الدرس 5 : القوائم العددية و النقطية ordered and unordered lists



السلام عليكم ورحمة الله وبركاته
سيكون درسنا اليوم حول طريقة عمل القوائم المرقمية عددياً أو نقطياً في لغة برمجة الويب HTML

أولاً : القوائم العددية ordered lists


ربما ترجمة الاسم غير دقيقة و لكن سأتعمد هذه التسمية لتكون أوضح في المعنى
مثال تطبيقي:
لإظهار القائمة التالية :


- الأول
- الثاني

فإن الكود الموافق يكون كالتالي:

  1. الأول

  2. الثاني

لاحظ أننا بدأنا بالوسم ol من أجل عمل القائمة من النوع العددي ordered lists
وعند كل عنصر وضعنا الوسم li للدلالة على أن هذا أحد عناصر القائمة
** تجريب الأكواد كالعادة على الصفحة : http://www.tahasoft.com/code.htm أو أحد البرامج المثبتة على جهازك

مزيد من التوضيح :
وأكيد لكل وسم tag فتح و إغلاق

    العناصر هنا
فالوسم ol يتم فتحه و إغلاقه
وبين وسمتي الفتح و الإغلاق نضع المحتوى و الذي هو العناصر
ولكل عنصر وسم فتح و إغلاق خاص هو li
  • عنصر من عناصر القائمة
  • وبين وسمتي الفتح و الإغلاق لـ li نضع المحتوى

    ملاحظة :
    لإظهار العناصر بشكل مرتب من اليمين إلى اليسار في حالة لغتنا العربية
    يمكن إضافة الخاصة dir إلى الوسم ol لتصبح كالتالي

    1. الأول

    2. الثاني


    علماً أنه إذا كانت الصفحة كاملة موجهة من اليمين إلى اليسار فلن نحتاج لتطبيق هذه الخاصة هنا
    rtl : right to left: من اليمين إلى اليسار
    ltr: left to right : من اليسار إلى اليمين



    ثانياً: القوائم النقطية unordered lists


    الوسمين الذين سنتعامل معها هذه المرة هما ul , li
    و تكون القائمة مشابهة للتالي


    - الأول
    - الثاني

    ويكتب الكود كالتالي:

      عناصر القائمة هنا

    وعناصر القائمة تكتب باستخدام الوسم li
  • عنصر أول

  • عنصر ثاني

  • الكود الكامل يصبح كمايلي:

    • عنصر أول

    • عنصر ثاني



    ربما لاحظت أن شكل القوائم يظهر على شكل نقط في ماسبق من القوائم النقطية
    ويمكن جعلها بأشكال أخرى باستعمال الخاصة type مع الوسم ul
    فمثلاً نستعمل النمط square لتصبح القائمة منقطة بمربعات
    جرب الكود التالي لتتوضح الفكرة أكثر

    • عنصر أول

    • عنصر ثاني

    • عنصر ثالث


    ويمكن أن تكون على شكل دوائر مفرغة كما يلي مع النمط circle

    • عنصر أول

    • عنصر ثاني

    • عنصر ثالث



    والوضع الافتراضي هو النمط disc حيث يمكن إهماله أو كتابته :

    • عنصر أول

    • عنصر ثاني

    • عنصر ثالث



    وهناك عدة أشكال أخرى يمكنكم معرفتها من خلال الكود التالي:



    قائمة رقمية



    1. تفاح

    2. موز

    3. ليمون

    4. برتقال



    قائمة بأحرف كبيرة



    1. تفاح

    2. موز

    3. ليمون

    4. برتقال



    قائمة بأحرف صغيرة



    1. تفاح

    2. موز

    3. ليمون

    4. برتقال



    قائمة بأرقام رومانية



    1. تفاح

    2. موز

    3. ليمون

    4. برتقال



    قائمة بأرقام رومانية صغيرة



    1. تفاح

    2. موز

    3. ليمون

    4. برتقال








    حيث ينتج مايلي:





    ثالثاً : القوائم المعرفة Definition Lists


    صراحةً هذا النوع من القوائم لم أستخدمه عملياً مسبقاً
    ولكن سنذكره من باب الإلمام بصناعة القوائم في لغة html
    باختصار لإنشاء قائمة لها الشكل التالي:

    فإننا نكتب الكود التالي:

    شراب ساخن

    قهوة

    حليب

    شراب بارد

    عصير

    كولا


    حيث كما تلاحظ :
    استعملنا الوسم dt لعنوان القائمة
    والوسم dd لمحتويات القائمة
    و قد وضعت الخاصة dir لتغيير الجهة إلى اليمين



    رابعاً : تركيب قائمة في قائمة :


    في هذه الفقرة ليس من جديد في الوسوم ولكن كتفكير في استعمالهم
    وكمثال لعمل قائمة كالتالي:


    - قسم برامج الكمبيوتر و الانترنت



    - البرامج العامة و الخدمية
    - برامج التصميم و الجرافيك
    - برامج الحماية من الفيروسات



    - القسم التعليمي:



    - المكتبة الالكترونية
    - الدورات

    فإننا نكتب الكود التالي:


    1. قسم برامج الكمبيوتر و الانترنت

      • البرامج العامة و الخدمية

      • برامج التصميم و الجرافيك

      • برامج الحماية من الفيروسات




    2. القسم التعليمي

      • المكتبة الالكترونية

      • الدورات







    ختاماً : أذكر بالأوسمة tags التي درسناها اليوم وهي
    ol , ul , li , dl , dt dd

    التعليقات (7)

    abubkir     

    درس رائع
    مشكور أخ زهـــــــــــــــــــــــــــــــــــــيــــــــــــــــــــــــــــــــــــــــــــــر

    حسن صحارى     

    تطبيق رائع بارك الله فيك

    عنجد تطبيق رائع أخي حسن
    ما شاء الله انطلاقة رائعة
    يالله جهزوا حالكم للدرس السادس مع الجداول
    في ملاحظة صغيرة حابب أذكرها
    أول شي قد يلاحظ البعض أنه ما عم أهتم بموضوع التنسيق
    وهذا لأنه رح نتوسع بهالموضوع كتير مع دورة css التي ستلي مباشرة دورة html
    و نقطة أخرى أنه رح نطبق مشاريع ان شاء الله بس يصير في شي كافي

    مشكوووووووورين وبارك الله فيكم
    ولو هاد كلو بفضل جهودكم النيرة
    ودروسكم المفيدة التي تطرح بهذا المنتدى
    وبالنسبة لدورة الــcss نحنا جاهزين يمعلم
    وعلى أتم استعداد

    زهير طه     
    عنجد تطبيق رائع أخي حسن
    ما شاء الله انطلاقة رائعة
    يالله جهزوا حالكم للدرس السادس مع الجداول
    في ملاحظة صغيرة حابب أذكرها
    أول شي قد يلاحظ البعض أنه ما عم أهتم بموضوع التنسيق
    وهذا لأنه رح نتوسع بهالموضوع كتير مع دورة css التي ستلي مباشرة دورة html
    و نقطة أخرى أنه رح نطبق مشاريع ان شاء الله بس يصير في شي كافي
    M.nshawaty     
    هاد تطبيقي
    :



    www.tahasoft.com دورة برمجة الويب*طه سوفت للبرامج*



    بسم الله الرحمن الرحيم





    والصلاة والسلام على سيد المرسلين سيدنا محمد صلى الله عليه وسلم :



    دروس لغة برمجة الويب




    1. الدرس الأول





    • وسم كتابة العناوين headings

    • وسم كتابة الفقرات Paragraph

    • وضع سطر كفراغ break



    1. الدرس الثاني





    • الروابط التشعبية في لغة HTML الوسم a



    • طريقة فتح الروابط

    • طريقة إنشاء رابط لإرسال بريد الكتروني

    • التحكم بالمسارات

    • المسار النسبي

    • المسار المطلق

    • فتح الروابط في صفحة مستقلة



    1. الدرس الثالث





    • إنشاء رابط الانتقال إلى علامة مرجعية bookmark مع الوسم a

    • إنشاء رابط على صورة

    • إدراج تعليق comment ضمن الكود

    • إدراج سطر أفقي مع وسم hr

    • طريقة إدراج صورة : وسم img



    1. الدرس الرابع



    • شرح أوسمة الميتا

    • الكلمات المفتاحية

    • وصف الموقع

    • المؤلف والمصمم


    طه سوفت للبرامج


    انتقل إلى الدرس الأول




    حسن صحارى



    أدخل

    إلى صفحتي











    تطبيق رائع بارك الله فيك
    حسن صحارى     
    على راسي أخي حسن
    ان شاء الله سأحاول وضع درس كل يوم من الآن فصاعداً
    الفترة السابقة انشغلت لبعض الظروف القاهرة

    على راسي ياأبو الزوز ونحن بإنتظار هذه الدروس الشيقة
    على أحر من الجمر.
    تفضل هاد تطبيقي
    :



    www.tahasoft.com دورة برمجة الويب*طه سوفت للبرامج*



    بسم الله الرحمن الرحيم





    والصلاة والسلام على سيد المرسلين سيدنا محمد صلى الله عليه وسلم :



    دروس لغة برمجة الويب




    1. الدرس الأول





    • وسم كتابة العناوين headings

    • وسم كتابة الفقرات Paragraph

    • وضع سطر كفراغ break



    1. الدرس الثاني





    • الروابط التشعبية في لغة HTML الوسم a



    • طريقة فتح الروابط

    • طريقة إنشاء رابط لإرسال بريد الكتروني

    • التحكم بالمسارات

    • المسار النسبي

    • المسار المطلق

    • فتح الروابط في صفحة مستقلة



    1. الدرس الثالث





    • إنشاء رابط الانتقال إلى علامة مرجعية bookmark مع الوسم a

    • إنشاء رابط على صورة

    • إدراج تعليق comment ضمن الكود

    • إدراج سطر أفقي مع وسم hr

    • طريقة إدراج صورة : وسم img



    1. الدرس الرابع



    • شرح أوسمة الميتا

    • الكلمات المفتاحية

    • وصف الموقع

    • المؤلف والمصمم


    طه سوفت للبرامج


    انتقل إلى الدرس الأول




    حسن صحارى



    أدخل

    إلى صفحتي






    زهير طه     
    على راسي أخي حسن
    ان شاء الله سأحاول وضع درس كل يوم من الآن فصاعداً
    الفترة السابقة انشغلت لبعض الظروف القاهرة
    حسن صحارى     
    على راسي يامعلم
    الدرس غاية في الروعة
    بس لاتطول علينا
    لأنو طولت كتير هالمرة
    والصراحة اشتقنالك
    وأشتقنا لدروسك الرائعة
    بإنتظار الدرس القادم