تخطيطات HTML

تخطيطات HTML Layouts


 


عناصر تخطيط HTML

غالبًا ما تعرض مواقع الويب محتوى في أعمدة متعددة (مثل مجلة أو جريدة).

يقدم HTML العديد من العناصر الدلالية التي تحدد الأجزاء المختلفة لصفحة الويب:

  • <header>يحدد رأسًا لمستند أو مقطع.
  • <nav>يحدد حاوية لروابط التنقل.
  • <section> يحدد مقطعًا في مستند.
  • <article> يحدد مقالة مستقلة بذاتها.
  • <aside> يحدد المحتوى جانبا من المحتوى (مثل الشريط الجانبي).
  • <footer> يحدد تذييل الصفحة لمستند أو مقطع.
  • <details>يحدد تفاصيل إضافية.
  • <summary> يحدد عنوانًا لعنصر <details>.

تقنيات تخطيط HTML

هناك خمس طرق مختلفة لإنشاء تخطيطات متعددة الأعمدة. كل طريقة لها إيجابيات وسلبيات:

  • جداول HTML (غير مستحسن).
  • خاصيةCSS float
  • CSS flexbox.
  • إطار أعمال CSS framework
  • CSS grid

 


أي واحد ختار؟


جداول HTML

لم يتم تصميم عنصر <table> ليكون أداة تخطيط! الغرض من العنصر <table> هو عرض البيانات الجدولية. لذلك، لا تستخدم الجداول لتخطيط صفحتك! أنها تجلب الفوضى في التعليمات البرمجية الخاصة بك. وتخيل مدى صعوبة إعادة تصميم موقعك بعد شهرين.

نصيحة: لا تستخدم الجداول لتخطيط صفحتك!

 


إطار عمل CSS Frameworks

إذا كنت ترغب في إنشاء تخطيطك بسرعة يمكنك استخدام إطار عمل مثل Bootstrap.


CSS Floats

من الشائع القيام بتخطيطات الويب بالكامل باستخدام خاصية CSS Floats.

من السهل تعلم Float - ما عليك سوى أن تتذكر كيف تعمل الخصائص الطافية والواضحة.

العيوب: ترتبط العناصر العائمة بتدفق المستند، مما قد يضر بالمرونة


CSS Flexbox

Flexbox هو وضع تخطيط جديد في  CSS3

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

العيوب: لا يعمل في IE10 والإصدارات السابقة.


CSS grid

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

العيوب: لا يعمل في IE ولا في Edge 15 والإصدارات السابقة.

دروس لغة Html اخرى