HTML Düzen

Web siteleri genellikle içeriklerini çok sütunlu olarak gösterir (magazin ve gazeteler gibi).

<div> elementi ile HTML düzeni

注释：<div> element, CSS ile kolayca konumlandırılabileceği için, düzen aracı olarak sıkça kullanılır.

Bu örnek, dört <div> etiketi kullanarak çoklu sütun düzeni oluşturur:

Örnek

<body>
<div id="header">
<h1>City Gallery</h1>
</div>
<div id="nav">
London<br>
Paris<br>
Tokyo<br>
</div>
<div id="section">
<h1>London</h1>
<p>
London is the capital city of England. It is the most populous city in the United Kingdom,
with a metropolitan area of over 13 million inhabitants.
</p>
<p>
Standing on the River Thames, London has been a major settlement for two millennia,
its history going back to its founding by the Romans, who named it Londinium.
</p>
</div>
<div id="footer">
Copyright codew3c.com
</div>
</body>

Kişisel Deneyim

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 kullanarak web sitesi düzeni

HTML5'nin sunduğu yeni semantik etiketler, web sayfalarının farklı bölümlerini tanımlar:

HTML5 Semantik Elemanları

header belge veya bölümlerin başlığını tanımlar
nav navigasyon bağlantılarının konteynerini tanımlar
section belgedeki bölümleri tanımlar
article bağımsız, içerikli makaleleri tanımlar
aside içerik dışında içerikleri (örneğin, kenar çubuğu) tanımlar
footer belge veya bölümlerin alt kısmını tanımlar
details ek ayrıntıları tanımlar
summary details öğesinin başlık tanımlarını belirler

Bu örnek, <header>, <nav>, <section> ve <footer> etiketlerini kullanarak çoklu sütun düzeni oluşturur:

Örnek

<body>
<header>
<h1>City Gallery</h1>
</header>
<nav>
London<br>
Paris<br>
Tokyo<br>
</nav>
<section>
<h1>London</h1>
<p>
London is the capital city of England. It is the most populous city in the United Kingdom,
with a metropolitan area of over 13 million inhabitants.
</p>
<p>
Standing on the River Thames, London has been a major settlement for two millennia,
its history going back to its founding by the Romans, who named it Londinium.
</p>
</section>
<footer>
Copyright codew3c.com
</footer>
</body>

Kişisel Deneyim

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 布局

注释：

元素不是作为布局工具而设计的。

元素的作用是显示表格化的数据。

使用

元素能够取得布局效果，因为能够通过 CSS 设置表格元素的样式：

Örnek

<body>
<table class="lamp">
<tr>
  <th>
    <img src="/images/lamp.jpg" alt="Not" style="height:32px;width:32px">
  </th>
  <td>
    Tablo öğesi düzen aracı olarak tasarlanmamıştır.
  </td>
</tr>
</table>
</body>

Kişisel Deneyim

CSS

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