الدرس الثامن : القوائم في لغة الــ html

الوليد الراشدي · #1 (**permalink**) 12-08-2008, 02:51 PM

الدرس الثامن : القوائم في لغة الــ 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 راح تكون كذا النتيجه :-

نبدي نشرح
في البدايه الامر

كود:

 <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
و راح تكون النتيجه كذا:

نبدأ شرح المثال :
أولاً : الامر

كود:

<dl>

و يستعمل لتحديد بداية القائمه و نهايتها
ثانياً : الامر

كود:

 <dt>

و يستعمل لتحديد بداية النقطه أو الجزئيه من القائمه .. و هو أمر مفرد يعني مب لازم يكون له أمر نهايه
ثالثا : الامر

كود:

 <dd>

و يستعمل لتحديد بداية شرح النقطه .. و هو أيضاً امر مفرد

فكر في هذا السؤال بعد الانتهاء من تنفيذ الدرس :
هل يجب وضع الخاصيه type عند علامة نهاية أمر القائمه سواء كانت قائمه عدديه أم غير عدديه ؟؟

و فكر ايضاً :
كيف تستطيع أن تعمل تنسيق لخط القائمه ؟؟

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

و ارجو ارفاق تطبيقاتكم في المناقشه ..
و بكذا نكون خلصنا درس اليوم ..
و السلام عليكم و رحمة الله و بركاته
تحياتي : الوليد الراشدي

الدرس الثامن : القوائم في لغة الــ html

دورة تعلم لغة الـ HTML