تخطيط HTML

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

تخطيط HTML باستخدام العنصر <div>

ملاحظة:<div> العنصر غالبًا ما يستخدم كأداة التخطيط، لأنه يمكن تحديد موقعه بسهولة باستخدام CSS.

هذا المثال يستخدم أربعة عناصر <div> لإنشاء تصميم متعدد الأعمدة:}

مثال

<body>
<div id="header">
<h1>City Gallery</h1>
</div>
<div id="nav">
لندن<br>
باريس<br>
تокиو<br>
</div>
<div id="section">
<h1>London</h1>
<p>
لندن عاصمة إنجلترا. هي أكثر المدن سكانًا في المملكة المتحدة،
مع منطقة حضرية تزيد عن 13 مليون نسمة.
</p>
<p>
قائم على نهر التيمز، لندن كانت مستوطنة رئيسية لآلاف السنين،
تاريخه يعود إلى تأسيسه من قبل الرومان، الذين أطلقوا عليه لوندينيوم.
</p>
</div>
<div id="footer">
Copyright codew3c.com
</div>
</body>

تجربة شخصية

CSS：

<style>
#header {
    لون الخلفية:أسود;
    لون:أبيض;
    تنسيق النص:جنبًا إلى جنب;
    ملء:5px;
}
#nav {
    line-height:30px;
    background-color:#eeeeee;
    ارتفاع:300بوصة;
    عرض:100بوصة;
    غرق:اليسار;
    ملء:5px; 
}
#section {
    عرض:350بوصة;
    غرق:اليسار;
    ملء:10px; 
}
#footer {
    لون الخلفية:أسود;
    لون:أبيض;
    تنظيف:كل اليمين;
    تنسيق النص:جنبًا إلى جنب;
    ملء:5px; 
}
</style>

تصميم موقع باستخدام HTML5

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

عناصر اللغة HTML5

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

هذا المثال يستخدم <header>, <nav>, <section>, و <footer> لإنشاء تصميم متعدد الأعمدة:

مثال

<body>
<header>
<h1>City Gallery</h1>
</header>
<nav>
لندن<br>
باريس<br>
تокиو<br>
</nav>
<section>
<h1>London</h1>
<p>
لندن عاصمة إنجلترا. هي أكثر المدن سكانًا في المملكة المتحدة،
مع منطقة حضرية تزيد عن 13 مليون نسمة.
</p>
<p>
قائم على نهر التيمز، لندن كانت مستوطنة رئيسية لآلاف السنين،
تاريخه يعود إلى تأسيسه من قبل الرومان، الذين أطلقوا عليه لوندينيوم.
</p>
</section>
<footer>
Copyright codew3c.com
</footer>
</body>

تجربة شخصية

CSS

header {
    لون الخلفية:أسود;
    لون:أبيض;
    تنسيق النص:جنبًا إلى جنب;
    ملء:5px; 
}
nav {
    line-height:30px;
    background-color:#eeeeee;
    ارتفاع:300بوصة;
    عرض:100بوصة;
    غرق:اليسار;
    ملء:5px; 
}
section {
    عرض:350بوصة;
    غرق:اليسار;
    ملء:10px; 
}
footer {
    لون الخلفية:أسود;
    لون:أبيض;
    تنظيف:كل اليمين;
    تنسيق النص:جنبًا إلى جنب;
    ملء:5px; 
}

تخطيط HTML باستخدام الجدول

ملاحظة:لم يكن تصميم عنصر الجدول لتكون أداة التخطيط.

يستخدم عنصر <table> لعرض البيانات الترتيبية.

يمكن استخدام عنصر <table> للحصول على تأثير التخطيط، لأنه يمكن تعيين أنماط عنصر الجدول باستخدام CSS:

مثال

<body>
<table class="lamp">
<tr>
  <th>
    <img src="/images/lamp.jpg" alt="ملاحظة" style="ارتفاع:32px;عرض:32px">
  </th>
  <td>
    لم يكن تصميم عنصر الجدول لتكون أداة التخطيط.
  </td>
</tr>
</table>
</body>

تجربة شخصية

CSS

<style>
table.lamp {
    عرض:100%;
    حاجز:1 بوصة صلبة #d4d4d4;
}
table.lamp th, td {
    ملء:10px;
}
table.lamp td {
    عرض:40px;
}
</style>