حل درس بنية المحتوى تقنية رقمية 1
القوائم
هناك نوعان من القوائم المستخدمة في مواقع الويب :
قائمة مرتبة ( Ordered List ) : في هذه القائمة ، يتم اتباع تسلسل رقمي بحيث يتم ترقيم كل عنصر في القائمة
قائمة غير مرتبة ( Unordered List ) : يتم تمييز عناصر هذه القائمة بتعداد نقطي
القائمة المرتبة ( Ordered List )
يتم إنشاء القائمة المرتبة استخدام وسم < ol> حيث يتم وضع كل عنصر في هذه القائمة بين وسم الفتح < li > < li/ >
لنلق نظرة على المثال التالي :
< DOCTYPE html!> <html dir = rtl lang = ar> < head > <title /> < title Examples > < head / > < body > < hl/> ألعاب جماعية < hl> < ol > < li/> كرة القدم <li> < li/> كرة اليد <li> < li/> كريكيت <li> < html /> |
صفحة معجبي كرة القدم
كي نضيف قوائم نادي مشجعي كرة القدم في مشروعم عليك أولا أن تنشئ قائمة تكون شريط للتنقل داخل
>الصفحة الرئيسة
>التاريخ
>المعرض
>نبذة
>اتصل بنا
< DOCTYPE html!> <html dir = rtl lang = ar> < head > < Football Fan page / <title / > < head / > < body > < ul> < hl/> الصفحة الرئيسة < hl> < li/> التاريخ <li> < li/> نبذة <li> < li/> اتصل بنا <li> < hl/> تعمل كرة القدم على جمع الناس معا < hl> |
لنطبق معا
تدريب 1
السؤال : حدد و أصلح الاخطاء في البرنامج التالي
الجواب :
< DOCTYPE html> <html dir = rtl lang = ar> < head > <title /> < title Examples > < head / > < body > < hl/> المواد الدراسية < hl> < ul > < li/> الرياضيات < li > < li/>اللغة العربية < li > < li/> التاريخ < li > < html /> |
تدريب 2
أنشئ صفحة ويب تتكون من قائمة غير منسقة بعنوان البريد الإلكتروني للأصدقاء تتضمن هذه الصفحة عناوين البريد الإلكتروني لأصدقائك ويتم فتح تطبيق البريد الإلكتروني في علامة تبويب مختلفة و ذلك عند الضغط على أحد هذه العناوين
< DOCTYPE html!> <html dir = rtl lang = ar> < head > <title /> < title Examples > < head / > < body > < hl/> البريد الإلكتروني < hl> < ul >  < li/>اللغة العربية < li > < li/> التاريخ < li > < ul > < html /> |
تدريب3
1- انشئ قائمة عناصر مرتبة تتكون من 3 روابط لمواقع مختلفة يفتح كل منها في نافذة جديدة
2- انشئ قائمة باطعمتك المفضلة
3- اعرض صورة بحيث يتم فتح صفحة ويب لمحرك بحث من اختيارك ( مع مراعاة ان يفتح في نافذة جديدة ) و ذلك عند الغلط على تلك الصورة
< DOCTYPE html!> <html dir = rtl lang = ar> < head > <title /> < title Examples > < head / > < body > < ol >  < ol > < hl/> الاطعمة المفضلة < hl> < ul> < li/ > الحمص < li>  < li/>الطعام < li > < li/> الطعام < li > < li/> الطعام < li > < ul > < html /> |