إعلان
دورة تطوير التطبيقات باستخدام لغة JavaScript في هذه الدورة ستتعلم لغة جافا سكريبت, استخدام مكتبة React.js, بناء API الموقع بواسطة Node.js, تطوير تطبيق جوال باستخدام React Native, و في نهاية الدورة ستتعلم تطوير تطبيق محادثة شبيه بتطبيق WhatsApp. تعلم الآن
دورة تطوير واجهات المستخدم في هذه الدورة ستتعلم لغة HTML و لغة CSS و لغة JavaScript. من ناحية التطبيق العملي ستتعلم طريقة بناء واجهة متجر إلكتروني مكون من ست صفحات, تحويل خمسة تصاميم PSD إلى صفحات ويب, بناء واجهة مستخدم تشبه موقع يوتيوب, بناء لوحة تحكم إحترافية. تعلم الآن
تطوير تطبيقات باستخدام لغة بايثون في هذه الدورة ستتعلم أساسيات البرمجة بلغة بايثون وصولاً إلى التعامل مع أشهر أطر العمل (Flask و Django) و ستتعلم كيف تبني متجر إلكتروني يمكن للمستخدمين البيع و الشراء من خلاله. تعلم الآن
دورة تطوير تطبيقات الويب باستخدام لغة PHP في هذه الدورة ستتعلم لغة PHP من الصفر, استخدام إطار العمل Laravel بشرح مفصّل و عملي, كيفية تطوير شبكة اجتماعية تشبه Instagram, بناء API لتطبيق جوال وفق أسلوب RESTful, تطوير موقع إعلانات مبوبة, تطوير نظام إدارة محتوى CMS كامل. تعلم الآن
دورة تطوير تطبيقات الويب باستخدام لغة Ruby في هذه الدورة ستتعلم البرمجة بلغة Ruby إنطلاقاً من أبسط المفاهيم وحتى بناء تطبيق حقيقي, إستخدام إطار العمل Ruby on Rails بشرح مفصّل و عملي, بناء تطبيق حقيقي عبارة عن شبكة اجتماعية تشبه تويتر, تطوير مجتمع الكتروني يشبه حسوب I/O. تعلم الآن
دورة علوم الحاسوب هذه الدورة معدة لتكون مدخل لعلوم الحاسوب و لغات البرمجة حيث ستتعرف فيها على أنظمة التشغيل و ستتعمق في نظام لينكس و في كيفية التعامل معه من خلال موجه الأوامر, بالإضافة إلى قواعد البيانات و أساسيات الشبكات و الخوادم و مبادئ الحماية والأمان في الويب. تعلم الآن

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

    مفهوم القوائم المرتبة

    القائمة المرتبة ( Ordered ) يقصد بها عرض مجموعة عناصر مع إظهار رقم كل عنصر تم إدخاله فيها.
    من أهم ما يميز هذه القوائم أنه يمكنك عرض الترقيم بالشكل الذي تريده, فمثلاً يمكنك عرض أرقام عادية, أحرف أبجدية, أرقام رومانية إلخ..

    إضافة قائمة مرتبة في الصفحة

    بشكل عام, نستخدم الوسم <ol> </ol> لإعلام المتصفح أننا نريد عرض قائمة مرتبة في الصفحة.
    أي عنصر نريد إضافته فيها يجب وضعه بداخل الوسم <li> </li>.

    معلومة: ol إختصار لكلمة Ordered التي تعني قائمة مرتبة و li إختصار لكلمة Item التي تعني عنصر في القائمة.


    في المثال التالي قمنا بإضافة قائمة مرتبة و بداخلها ثلاث عناصر.

    مثال

    <ol>
    	<li>Apple</li>
    	<li>Orange</li>
    	<li>Mango</li>
    </ol>
    		

    جرب الكود

    أنواع الترقيم

    لتحديد نوع الترقيم الذي سيظهر في بداية كل عنصر يمكنك إضافة الخاصية type للوسم <ol> و تمرير إحدى الأحرف التالية لها كقيمة:

    • type="A" لإظهار ترقيم أبجدي بأحرف كبيرة قبل كل عنصر.
    • type="a" لإظهار ترقيم أبجدي بأحرف صغيرة قبل كل عنصر.
    • type="I" لإظهار ترقيم روماني بأحرف كبيرة قبل كل عنصر.
    • type="i" لإظهار ترقيم روماني بأحرف صغيرة قبل كل عنصر.
    • type="1" لإظهار ترقيم عادي قبل كل عنصر و هذه القيمة الإفتراضية التي يتم وضعها في حال لم تحدد القيمة بنفسك.


    في المثال التالي قمنا بتغيير نوع الترقيم إلى ترقيم أبجدي بأحرف كبيرة.

    المثال الأول

    <ol type="A">
    	<li>Apple</li>
    	<li>Orange</li>
    	<li>Mango</li>
    </ol>
    		

    جرب الكود



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

    المثال الثاني

    <ol type="a">
    	<li>Apple</li>
    	<li>Orange</li>
    	<li>Mango</li>
    </ol>
    		

    جرب الكود



    في المثال التالي قمنا بتغيير نوع الترقيم إلى ترقيم روماني بأحرف كبيرة.

    المثال الثالث

    <ol type="I">
    	<li>Apple</li>
    	<li>Orange</li>
    	<li>Mango</li>
    </ol>
    		

    جرب الكود



    في المثال التالي قمنا بتغيير نوع الترقيم إلى ترقيم روماني بأحرف صغيرة.

    المثال الرابع

    <ol type="i">
    	<li>Apple</li>
    	<li>Orange</li>
    	<li>Mango</li>
    </ol>
    		

    جرب الكود



    في المثال التالي قمنا بتحديد أن نوع الترقيم هو ترقيم عادي و بالطبع لن نلاحظ أي فرق لأن نوع الترقيم الإفتراضي في الأساس هو عددي.

    المثال الخامس

    <ol type="1">
    	<li>Apple</li>
    	<li>Orange</li>
    	<li>Mango</li>
    </ol>
    		

    جرب الكود

    تحديد من أين يبدأ الترقيم

    في حال أردت تحديد من أي رقم ستبدأ القائمة في إظهار الترقيم يمكنك إضافة الخاصية start للوسم <ol> و تمرير الرقم الذي تريدها أن تبدأ من عنده.


    في المثال التالي قمنا بتحديد أن الترقيم سيبدأ من الرقم 5.

    المثال الأول

    <ol start="5">
    	<li>Apple</li>
    	<li>Orange</li>
    	<li>Mango</li>
    </ol>
    		

    جرب الكود



    في المثال التالي قمنا بتحديد أن الترقيم سيبدأ من الرقم 3 و أن نوع الترقيم سيكون أحرف إنجليزية صغيرة.

    المثال الثاني

    <ol start="3" type="a">
    	<li>Apple</li>
    	<li>Orange</li>
    	<li>Mango</li>
    </ol>
    		

    جرب الكود

    قطع الترقيم الحالي

    في حال أردت تغيير قيمة الرقم الذي وصل إليه الترقيم إبتداءاً من عنصر محدد في القائمة فيمكنك إضافة الخاصية value للعنصر (أي للوسم <li>) و تمرير الرقم الذي تريده أن يبدأ من عنده.


    في المثال التالي قمنا بتغيير الترقيم عند العنصر الرابع إلى 7.

    مثال

    <ol>
    	<li>Apple</li>
    	<li>Orange</li>
    	<li>Mango</li>
    	<li value="7">Carrot</li>
    	<li>Banana</li>
    	<li>Peach</li>
    </ol>
    		

    جرب الكود

    وضع قائمة بداخل قائمة

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


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

    مثال

    <ol>
    	<!-- العنصر الأول وضعنا فيه قائمة فيها ثلاث عناصر -->
    	<li>Front-End
    		<ol>
            	<li>HTML</li>
            	<li>CSS</li>
            	<li>Javascript</li>
            </ol>
    	</li>
    	<!-- العنصر الثاني وضعنا فيه قائمة فيها عنصرين -->
    	<li>Back-End
    		<ol>
            	<li>MySQL</li>
            	<li>Aspnetcore</li>
            </ol>
    	</li>
    </ol>
    		

    جرب الكود

    إعلان

    Eqla3Tech.com

    شروحات مكتوبة حول لغات البرمجة و تقنية المعلومات باللغة العربية مقدمة من إقلاع تك.

    لغة جافا لغة ++C قواعد البيانات نظام ويندوز نظام لينكس الشبكات تقنية المعلومات الأمن السيبراني

    الدورات

    أدوات مساعدة

    الأقسام

    دورات
    مقالات أسئلة مشاريع كتب