Kebanyakan website telah menempatkan konten
mereka dalam beberapa kolom (diformat seperti majalah atau koran). Beberapa
kolom dibuat dengan menggunakan <div> atau elemen table. CSS digunakan
untuk posisi elemen, atau untuk membuat latar belakang atau tampilan
berwarna-warni untuk halaman. Meskipun dimungkinkan untuk membuat layout bagus
dengan tabel HTML, tabel dirancang untuk menyajikan data tabular - BUKAN
sebagai alat tata letak!
Menggunakan Elemen <div>
Elemen div adalah elemen tingkat blok digunakan untuk
mengelompokkan elemen HTML Contoh berikut ini menggunakan lima elemen div untuk
membuat tata letak kolom ganda, menciptakan hasil yang sama seperti pada contoh
sebelumnya:
<!DOCTYPE html>
<html>
<body>
<div id="container" style="width:500px">
<div id="header" style="background-color:#FFA500;">
<h1 style="margin-bottom:0;">Main Title of Web Page</h1></div>
<div id="menu" style="background-color:#FFD700;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;">
Content goes here</div>
<div id="footer" style="background-color:#FFA500;clear:both;text-align:center;">
Eris Corp © 2014</div>
</div>
</body>
</html>
<html>
<body>
<div id="container" style="width:500px">
<div id="header" style="background-color:#FFA500;">
<h1 style="margin-bottom:0;">Main Title of Web Page</h1></div>
<div id="menu" style="background-color:#FFD700;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;">
Content goes here</div>
<div id="footer" style="background-color:#FFA500;clear:both;text-align:center;">
Eris Corp © 2014</div>
</div>
</body>
</html>
Menggunakan Tabel
Sebuah cara sederhana untuk menciptakan layout
adalah dengan menggunakan tag HTML <table>. Beberapa kolom dibuat dengan
menggunakan <div> atau elemen table. CSS digunakan untuk posisi elemen,
atau untuk membuat latar belakang atau tampilan berwarna-warni untuk halaman.
<!DOCTYPE
html>
<html>
<body>
<table width="500">
<tr>
<td colspan="2" style="background-color:#FFA500;">
<h1>Main Title of Web Page</h1>
</td>
</tr>
<tr>
<td style="background-color:#FFD700;width:100px;">
<b>Menu</b><br>
HTML<br>
CSS<br>
JavaScript
</td>
<td style="background-color:#EEEEEE;height:200px;width:400px;">
Content goes here</td>
</tr>
<tr>
<td colspan="2" style="background-color:#FFA500;text-align:center;">
Eris Corp © 2014</td>
</tr>
</table>
</body>
</html>
<html>
<body>
<table width="500">
<tr>
<td colspan="2" style="background-color:#FFA500;">
<h1>Main Title of Web Page</h1>
</td>
</tr>
<tr>
<td style="background-color:#FFD700;width:100px;">
<b>Menu</b><br>
HTML<br>
CSS<br>
JavaScript
</td>
<td style="background-color:#EEEEEE;height:200px;width:400px;">
Content goes here</td>
</tr>
<tr>
<td colspan="2" style="background-color:#FFA500;text-align:center;">
Eris Corp © 2014</td>
</tr>
</table>
</body>
</html>
Tips Berguna
Tip: Keuntungan terbesar menggunakan CSS
adalah bahwa, jika Anda menempatkan kode CSS dalam sebuah style sheet
eksternal, situs Anda menjadi JAUH LEBIH MUDAH untuk mempertahankan. Anda dapat
mengubah tata letak dari semua halaman Anda dengan mengedit satu file.
Tip: Karena layout canggih meluangkan
waktu untuk membuat, pilihan yang lebih cepat adalah dengan menggunakan
template. Pencarian Google untuk website template gratis (ini adalah pre-built
layout website yang Anda dapat menggunakan dan menyesuaikan).
Posted by. Eris Dwi Septiawan Rizal
artikelnya singkat dan jelas,
ReplyDeletejadi saya lebih tau bagusan tabel atau div..
pas bnget sama web saya soalnya masih pake table, syukurlah udah bisa perbaiki bug interface di ponsel / layar kecil soalnya udah diganti sama tag div.