Layout (susunan) sebuah halaman web yang terlihat baik sangat penting untuk diperhatikan. Mendesain sebuah halaman web haruslah dilakukan dengan teliti dan hati-hati untuk mendapatkan hasil yang maksimal. Terdapat 2 teknik untuk mendesain layout sebuah website yaitu : menggunakan elemen div dan menggunakan tabel.
Layout Website – Menggunakan Elemen <div>
Elemen div digunakan untuk mengelompokkan elemen HTML.
Contoh berikut ini, layout website akan dibuat menggunakan 5 elemen div.
Contoh
<html>
<body>
<div id=”container” style=”width:500px”>
<div id=”header” style=”background-color:#039fd9;”>
<h1 style=”margin-bottom:0;”>Judul Utama Halaman Web</h1>
</div>
<div id=”menu” style=”background-color:#c8f0ff;height:200px;width:100px;float:left;”>
<b>Menu</b><br>
HTML<br>
CSS<br>
JavaScript
</div>
<div id=”content” style=”background-color:#EEEEEE;height:200px;width:400px;float:left;”>
Isikan konten web disini
</div>
<div id=”footer” style=”background-color:#039fd9;clear:both;text-align:center;”>
Copyright © ePlusGo.com
</div>
</div>
</body>
</html>
Layout Website – Menggunakan Tabel
Cara ini, layout website dibuat menggunakan tabel. Perlu diketahui,cara ini telah banyak ditinggalkan. Untuk membuat layout,sangat disarankan Anda menggunakan elemen div. Sedangkan tabel, gunakan hanya untuk menampilkan data tabular.
Namun, tidak ada salahnya mengetahui teknik membuat layout menggunakan tabel. Contoh dibawah akan menampilkan layout yang sama seperti pada elemen div.
Contoh
<html>
<body>
<table width=”500″ border=”0″>
<tr>
<td colspan=”2″ style=”background-color:#039fd9;”>
<h1>Judul Utama Halaman Web</h1>
</td>
</tr>
<tr>
<td style=”background-color:#c8f0ff;width:100px;”>
<b>Menu</b><br>
HTML<br>
CSS<br>
JavaScript
</td>
<td style=”background-color:#eeeeee;height:200px;width:400px;”>
Isikan konten web disini</td>
</tr>
<tr>
<td colspan=”2″ style=”background-color:#039fd9;text-align:center;”>
Copyright © ePlusGo.com</td>
</tr>
</table>
</body>
</html>