Admin Admin
المساهمات : 22 تاريخ التسجيل : 05/07/2009
| موضوع: الدرس الثامن : القوائم في لغة الــ html الإثنين يوليو 06, 2009 9:56 am | |
| الدرس الثامن : القوائم في لغة الــ html
السلام عليكم و رحمة الله و بركاته اليوم راح نتبع طريقه جديده للشرح .. فالبدايه راح اعطيكم مثال يتضمن جميع ما في الدرس و بعدها راح نبدي نشرح المثال شوي شوي أو مثل ما يقولوا الهنود ( توره توره) لاحظ عندي .. كود: <html> <head> <title> القوائم </title> </head> <body> <ol> <li> مسقط <li> الدوحه <li> الرياض <li> أبو ظبي <li> القاهره <li> الدار البيضاء </ol> <br> <ul> <li> بغداد <li> المنامه <li> الكويت <li> دمشق </ul> </body> </html> اذا حولنا امتدادها الى htm راح تكون كذا النتيجه :- http://www.geek4arab.com/vb/imgcache/12206.imgcache نبدي نشرح في البدايه الامر كود: <br> لا يحتاج لشرح والي ما يعرف الشرح يرجع للدرس الثالث بسم الله نبدأ نشرح المثال اولاً : الامر <ol> هذا الامر يستخدم لوضع قائمه متسلسله أو بالارقام ثانيا : الامر كود: <ul> هذا الامر يستخدم لوضع قائمه غير رقميه أو عدديه مجرد نقاط فقط ثالثاً : الامر كود: <li> وهذا الامر بخليكم تكتشفوا الي يسويه بنفسكم .. نبدي نتعمق شوي .. أولاً : القوائم العدديه توجد للقوائم العددية عدة أنواع .. تقريباً أربعه أو المهمه أربعه بس السؤال كيف نحدد نوع القائمه هذي ؟ سؤال حله مب صعب .. شوف حبيبي لما تريد تحدد نوع القائمه تستخدم الخاصيه type و في ما يلي الانواع الاربعه الي تكلمت عنها : - كود: <ol type="I"> و هذه تعني انك تريد تخلي نوع القائمه حروف لاتينيه كبيره ( كبيتل) - كود: <ol type="i"> و هذه يعني انك تريد تخلي نوع القائمه حروف لاتينيه صغيره (سمول) - كود: <ol type="a"> هذي يعني أنك تريد تحط حروف انجليزيه سمول - كود: <ol type="A"> هذي يعني أنك تريد تحط حروف انجليزيه كبيره كبيتل ثانياً : القوائم الغير عدديه و تعمل على شكلين هما : كود: <ul type="circle"> هذا يعني دائره شكل النقاط راح يكون كود: <ul type="square"> هذا يعني مربعات راح تكون اشكال النقاط أخر حاجه في درس القوائم قــوائــ التعريف ـم قوائم التعريف تختلف كثيراً عن القوائم العاديه كيف يعني ؟ بنشوف لاحظ عندي في هذا المثال البسيط كود: <html> <head> <title> قوائم التعريف </title> </head> <body> <dl> <dt> مسقط <dd> عاصمة سلطنة عمان <dt> الرياض <dd> عاصمة المملكه العربيه السعوديه <dt> أبو ظبي <dd> عاصمة الامارات العربيه المتحده <dt> موقع مطور <dd> عاصمة المطورين العرب </dl> </body> </html> انسخ الكود و حوله الى امتداد htm و راح تكون النتيجه كذا: http://www.geek4arab.com/vb/imgcache/12207.imgcache نبدأ شرح المثال : أولاً : الامر كود: <dl> و يستعمل لتحديد بداية القائمه و نهايتها ثانياً : الامر كود: <dt> و يستعمل لتحديد بداية النقطه أو الجزئيه من القائمه .. و هو أمر مفرد يعني مب لازم يكون له أمر نهايه ثالثا : الامر كود: <dd> و يستعمل لتحديد بداية شرح النقطه .. و هو أيضاً امر مفرد فكر في هذا السؤال بعد الانتهاء من تنفيذ الدرس : هل يجب وضع الخاصيه type عند علامة نهاية أمر القائمه سواء كانت قائمه عدديه أم غير عدديه ؟؟ و فكر ايضاً : كيف تستطيع أن تعمل تنسيق لخط القائمه ؟؟ تطبيق عملي على الدرس : اعمل صفحة html و ليكن العنوان " البلدان العربيه " اكتب التالي مع مراعاة التنسيقات المكتوبه بين الاقواس : البلدان العربيه و عواصمها (( اعمله خط عريض و خلي حجم الخط 3 و كمان محاذاه لليمين و خليه العنوان الاول)) ((اعمل خط أفقي حجمه 3 و لونه أزرق )) (( اعمل قائمة تعريف غير عدديه و اكتب فيها التالي مع الاخذ بعين الاعتبار أن العبارات المكتوبه بين القوسين هي الشرح و الكلمات في البدايه هي النقاط الاساسيه )) سلطنة عمان .. (( عاصمتها مسقط )) الامارات (( عاصمتها ابو ظبي)) مصر (( القاهره)) تونس (( تونس )) و ارجو ارفاق تطبيقاتكم في المناقشه .. و بكذا نكون خلصنا درس اليوم .. و السلام عليكم و رحمة الله و بركاته تحياتي : الوليد الراشدي | |
|