لغة الترميز - قائمة

حلول التصميم الموحدة - لغة العلامات والأناقة دليل

حلول معايير الويب

الجزء 1: انخفض مع بدء الترميز بالارتياح

الفصل 1 قائمة

يمكن العثور على القوائم على كل صفحة تقريبًا على الويب. قوائم الارتباط التشعبي ؛ قوائم عناصر عربة التسوق ؛ الأفلام التي تحبها ... وحتى قوائم التنقل للموقع بأكمله. قد يبدو لبعض القوائم التي تم تصميمها حسب الرغبة ، ولكن ما سنستكشفه هو بالضبط كيفية إنشاء القوائم ومزايا وعيوب عدة طرق مشتركة. في وقت لاحق ، سنقوم بإدراج بعض الأمثلة على كيفية تجميل حلقة قائمة عادية.

دعنا نذهب للتسوق

في البداية ، خططت لاستخدام قائمة مفصلة (قائمة الغسيل) كمثال على هذا الفصل ، لكنني أدركت قريبًا أنه لم يكن لدي أي فكرة عن التفاصيل التي يجب تضمينها في هذه القائمة ، لذلك ... من أجل المثال ، دعنا نستخدم الطعام كمثال!

دعنا نتخيل أنك تحتاج إلى وضع قائمة طعام على موقع الويب الخاص بك. قد تكون في حيرة من سبب رغبتك في وضع قائمة طعام على الموقع الإلكتروني. قد يكون هذا خارج الموضوع. نحتاج فقط إلى سبب لبدء التفكير في القائمة ...

في الصفحة ، لنفترض أننا نريد أن تبدو القائمة ... حسنًا ، يبدو أنها قائمة - أي قائمة طويلة من القوائم الرأسية ، مع كل عنصر يتخذ حصريًا سطرًا واحدًا:

التفاح

معكرونة

فاصوليا خضراء

لبن

تبدو بسيطة للغاية ، أليس كذلك؟ على غرار العديد من جوانب تصميم الصفحات وتطويرها ، يمكننا تحقيق نفس التأثير (أو المشابه) من خلال العديد من الطرق المختلفة. كما هو الحال مع جميع الأمثلة لاحقًا في هذا الكتاب ، سأقدم جميع الأمثلة مع وجهة نظر لغة ترميز النص التشعبي (XHTML) - والتأكد من أن الطريقة المحددة تستخدم بناء جملة العلامات الصحيحة ، باتباع المعايير المختلفة التي تم تعيينها بواسطة World Wild Web Consortium (W3C).

يمكننا بسهولة إضافة علامة <br /> إلى كل مشروع وإنجازها ، أو يمكننا استخدام علامات مشروع مختلفة لإكمال هذا العمل. الآن دعونا نلقي نظرة على 3 طرق مختلفة تمامًا وخصائص كل طريقة.