التخطيطات في HTML | دروس HTML5

 تخطيطات HTML 

التخطيط يعني كيفية عرض صفحة الويب. عادة ما يتم عرض محتوى الموقع في شكل عدة أعمدة. في هذا الدرس سنلقي نظرة على عناصر HTML5 التي ستساعدنا في تصميم الصفحة.


عناصر التخطيط في HTML

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

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

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


تقنيات تخطيط الصفحة في HTML

هناك أربع طرق مختلفة لبناء تصميم متعدد الأعمدة. لكل منها مزاياها وعيوبها:

  • جداول HTML
  • خاصية تعويم في CSS
  • استخدم نموذج flexbox في CSS

فيما يلي سنتعامل مع كل منهم:

جداول HTML 

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


خاصية التعويم في CSS

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

سوف تتعلم المزيد عن خاصية الطفو في دورة CSS المستقبلية.

div.container {
width: 100%;
border: 1px solid gray;
}

header, footer {
padding: 1em;
color: white;
background-color: black;
clear: left;
text-align: center;
}

nav {
float: left;
max-width: 160px;
margin: 0;
padding: 1em;
}

استخدم نموذج flexbox في CSS

Flexbox هو نموذج جديد لتخطيط الموقع في CSS.

يضمن استخدام Flexbox أن لديه عناصر سلوكية يمكن التنبؤ بها عندما يتم وضع الموقع على أحجام شاشات مختلفة.
ومن عيوبه أنه لا يعمل في Internet Explorer 10 والإصدارات الأقدم.

.flex-container {
display: -webkit-flex;
display: flex;
-webkit-flex-flow: row wrap;
flex-flow: row wrap;
text-align: center;
}

.flex-container > * {
padding: 15px;
-webkit-flex: 1 100%;
flex: 1 100%;
}


كلمات مفتاحية: