HTML التخطيط

HTML التخطيط

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

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

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

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

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

• جداول HTML (لا ينصح)
• CSS float property
• CSS flexbox
• إطار CSS
• شبكة CSS

أي واحد للاختيار؟

جداول HTML

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

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

CSS Frameworks

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

CSS Floats

من الشائع القيام بتخطيطات الويب بالكامل باستخدام خاصية CSS Floats. من السهل تعلم Float – ما عليك سوى أن تتذكر كيف تعمل الخصائص الطافية والواضحة. العيوب: ترتبط العناصر العائمة بتدفق المستند ، مما قد يضر بالمرونة.

CSS Flexbox

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

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

CSS Grid View

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

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