إعلان
دورة تطوير التطبيقات باستخدام لغة 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 القوائم الغير مرتبة

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

    القائمة الغير مرتبة ( Unordered ) يقصد بها عرض مجموعة عناصر بدون الإهتمام ما إن كان يجب عرض عنصر قبل الآخر.

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

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

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

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


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

    مثال

    <ul>
    	<li>Apple</li>
    	<li>Orange</li>
    	<li>Mango</li>
    </ul>
    		

    جرب الكود

    أنواع الرموز التي يمكن عرضها في أول العناصر

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

    • type="square" لإظهار مربع في بداية كل عنصر.
    • type="circle" لإظهار دائرة في بداية كل عنصر.
    • type="disc" لإظهار قرص (أي نقطة كبيرة) في بداية كل عنصر و هذه القيمة الإفتراضية التي يتم وضعها في حال لم تحدد القيمة بنفسك.
    • type="none" لعدم إظهار رمز في بداية كل عنصر.


    في المثال التالي قمنا بتحديد أن الرمز الذي سيظهر قبل كل عنصر هو مربع.

    المثال الأول

    <ul type="square">
    	<li>Apple</li>
    	<li>Orange</li>
    	<li>Mango</li>
    </ul>
    		

    جرب الكود



    في المثال التالي قمنا بتحديد أن الرمز الذي سيظهر قبل كل عنصر هو دائرة.

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

    <ul type="circle">
    	<li>Apple</li>
    	<li>Orange</li>
    	<li>Mango</li>
    </ul>
    		

    جرب الكود



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

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

    <ul type="disc">
    	<li>Apple</li>
    	<li>Orange</li>
    	<li>Mango</li>
    </ul>
    		

    جرب الكود



    في المثال التالي قمنا بتحديد أنه قبل كل عنصر لن يتم إظهار رمز.

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

    <ul type="none">
    	<li>Apple</li>
    	<li>Orange</li>
    	<li>Mango</li>
    </ul>
    		

    جرب الكود

    تغيير نوع الرمز الذي سيظهر قبل عنصر محدد في القائمة

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


    في المثال التالي قمنا بتغيير نوع الرمز الذي سيظهر قبل العنصر الثاني فقط إلى circle.

    مثال

    <ul>
    	<li>Apple</li>
    	<li type="circle">Orange</li>
    	<li>Mango</li>
    </ul>
    		

    جرب الكود

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

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


    معلومة تقنية

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


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

    مثال

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

    جرب الكود

    إعلان

    Eqla3Tech.com

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

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

    الدورات

    أدوات مساعدة

    الأقسام

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