طرح‌های HTML

وب‌سایت‌ها معمولاً محتوا را به صورت چند ستونی نمایش می‌دهند (مانند مجلات و روزنامه‌ها).

ترتیب‌دهی HTML با استفاده از عناصر <div>

نکته:عنصر <div> به طور معمول به عنوان ابزار ترتیب‌دهی استفاده می‌شود، زیرا می‌توان به راحتی با استفاده از CSS آن را مکان‌دهی کرد.

این مثال از چهار element <div> برای ایجاد یک پیکربندی چند ستونی استفاده می‌کند:

مثال

<body>
<div id="header">
<h1>گالری شهر</h1>
</div>
<div id="nav">
لندن<br>
پاریس<br>
توکیو<br>
</div>
<div id="section">
<h1>لندن</h1>
<p>
لندن پایتخت انگلستان است. این بزرگترین شهر پر جمعیت در بریتانیای کبیر است,
با یک منطقه‌ی شهری با جمعیت بیش از ۱۳ میلیون نفر.
</p>
<p>
لندن بر روی رود تایمز قرار دارد و از دو هزاره گذشته یک منطقه‌ی مهم سکونتگاهی بوده است,
این تاریخچه به زمان تأسیس توسط رومی‌ها بازمی‌گردد که آن را لوندینیم نامیدند.
</p>
</div>
<div id="footer">
Copyright codew3c.com
</div>
</body>

آموزش شخصی

CSS:

<style>
#header {
    background-color:black;
    color:white;
    text-align:center;
    padding:5px;
}
#nav {
    line-height:30px;
    background-color:#eeeeee;
    height:300px;
    width:100px;
    float:left;
    padding:5px; 
}
#section {
    width:350px;
    float:left;
    padding:10px; 
}
#footer {
    background-color:black;
    color:white;
    clear:both;
    text-align:center;
    padding:5px; 
}
</style>

طرح وب‌سایت با استفاده از HTML5

عناصر جدید语义ی HTML5 تعریف شده برای بخش‌های مختلف وب‌سایت‌ها هستند:

عناصر معنایی HTML5

header تعریف سربرگ مستند یا بخش
nav تعریف محفظه‌ای برای لینک‌های ناوبری
section تعریف بخشی از مستند
article تعریف یک مقاله مستقل و مستقل
aside تعریف محتوایی که خارج از محتوا قرار دارد (مثلاً ستون‌های کناری)
footer تعریف پاورقی مستند یا بخش
details تعریف جزئیات اضافی
summary عنوان elements تعریف شده برای element details

این مثال از <header>, <nav>, <section>, و <footer> برای ایجاد یک پیکربندی چند ستونی استفاده می‌کند:

مثال

<body>
<header>
<h1>گالری شهر</h1>
</header>
<nav>
لندن<br>
پاریس<br>
توکیو<br>
</nav>
<section>
<h1>لندن</h1>
<p>
لندن پایتخت انگلستان است. این بزرگترین شهر پر جمعیت در بریتانیای کبیر است,
با یک منطقه‌ی شهری با جمعیت بیش از ۱۳ میلیون نفر.
</p>
<p>
لندن بر روی رود تایمز قرار دارد و از دو هزاره گذشته یک منطقه‌ی مهم سکونتگاهی بوده است,
این تاریخچه به زمان تأسیس توسط رومی‌ها بازمی‌گردد که آن را لوندینیم نامیدند.
</p>
</section>
<footer>
Copyright codew3c.com
</footer>
</body>

آموزش شخصی

CSS

header {
    background-color:black;
    color:white;
    text-align:center;
    padding:5px; 
}
nav {
    line-height:30px;
    background-color:#eeeeee;
    height:300px;
    width:100px;
    float:left;
    padding:5px; 
}
section {
    width:350px;
    float:left;
    padding:10px; 
}
footer {
    background-color:black;
    color:white;
    clear:both;
    text-align:center;
    padding:5px; 
}

طراحی HTML با استفاده از جدول

نکته:عنصر <table> به عنوان ابزار طراحی طراحی نشده است.

عنصر <table> برای نمایش داده‌های جدولی طراحی شده است.

با استفاده از عنصر <table> می‌توانیم به نتایج طراحی دستیابی کنیم، زیرا می‌توانیم با استفاده از CSS جلوه‌های طراحی عنصر جدول را تنظیم کنیم:

مثال

<body>
<table class="lamp">
<tr>
  <th>
    <img src="/images/lamp.jpg" alt="Note" style="height:32px;width:32px">
  </th>
  <td>
    عنصر جدول به عنوان ابزار طراحی طراحی نشده است.
  </td>
</tr>
</table>
</body>

آموزش شخصی

CSS

<style>
table.lamp {
    width:100%;
    border:1px solid #d4d4d4;
}
table.lamp th, td {
    padding:10px;
}
table.lamp td {
    width:40px;
}
</style>