Terkadang saat kita akan membuat sebuah web pasti hal yang patut dipikirkan adalah tampilan atau layout dari web yang akan kita buat, banyak sekali contoh-contoh di googling bahkan free template HTML yang tersedia di berbagai situs, tapi terkadang cara-cara yang ada membinggungkan kita, oke berikut akan memberikan tehnik sederhana pembuatan layout web 3 kolom dengan mudah dan semoga dapat dikembangkan,
Layout
Pertama kita harus tahu dan mengerti pondasi dari
layout yang akan kita buat. Hal ini menjaga agar tidak ‘tersesat’ di kode-kode kita sendiri dan memudahkan kita . Berikut ini adalah
struktur layout.
<div id="container">
<div id="header"></div>
<div id="sideleft"></div>
<div id="middle"></div>
<div id="sideright"></div>
<div id="footer"></div>
</div>
Dan di bawah ini adalah
struktur layout kita dalam
CSS:
body { }
#container { }
#header { }
#sideleft { }
#middle { }
#sideright { }
#footer { }
Ok kita sudah punya cetak birunya, sederhana bukan? Strukturnya mudah dipahami begitu kita melihatnya. Selanjutnya kita akan bangun
arsitektur layout kita berdasarkan cetak biru diatas.
The Architecture
Buka
text editor anda, lalu buatlah file baru.
Copy dan
paste kode-kode berikut ke dalamnya, lalu
save dengan nama
layout.html (nama terserah).
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8" />
<title>How to Build 3 Column Layout in A Good Way</title>
<link rel="stylesheet" href="layout.css" type="text/css" media="screen" />
</head>
<body>
<div id="container">
<div id="header">
<h2>This is Header</h2>
</div>
<div id="sideleft">
<h3>Title Menu</h3>
<ul>
<li><a href="#" title="Menu">Menu</a></li>
<li><a href="#" title="Menu">Menu</a></li>
<li><a href="#" title="Menu">Menu</a></li>
<li><a href="#" title="Menu">Menu</a></li>
</ul>
</div>
<div id="middle">
<h1>This is Title</h1>
<p>Paragraph goes here..</p>
<h2>This is Sub Title</h2>
<p>Paragraph goes here..</p>
<h2>This is Sub Title</h2>
<p>Paragraph goes here..</p>
</div>
<div id="sideright">
<h3>Title Menu</h3>
<ul>
<li><a href="#" title="Menu">Menu</a></li>
<li><a href="#" title="Menu">Menu</a></li>
<li><a href="#" title="Menu">Menu</a></li>
<li><a href="#" title="Menu">Menu</a></li>
</ul>
</div>
<div id="footer">
<h4>This is Footer</h4>
</div>
</div>
</body>
</html>
Dengan
text editor anda, buatlah 1 file baru lagi.
Copy dan
paste kode-kode berikut ke dalamnya, lalu
save dengan nama
layout.css. Letakkan kedua file pada folder yang sama.
body {
font-family: Verdana, Arial, Helvetica, sans-serif;
margin: 0;
padding: 0;
}
#container {
width: 900px; /* Set the value to fit your needs. */
margin: auto;
}
#header {
height: 100px; /* Set the value to fit your needs. */
border: 1px solid #000;
clear: both;
}
#sideleft {
float: left;
width: 170px; /* Set the value to fit your needs. */
margin: 10px 0;
padding: 10px;
border: 1px solid #000;
}
#middle {
float: left;
width: 474px; /* Set the value to fit your needs. */
margin: 10px;
padding: 10px;
border: 1px solid #000;
}
#sideright {
float: right;
width: 170px; /* Set the value to fit your needs. */
margin: 10px 0;
padding: 10px;
border: 1px solid #000;
}
#footer {
height: 40px; /* Set the value to fit your needs. */
border: 1px solid #000;
clear: both;
}
Lalu buka file
layout.html dengan menggunakan
browser.
Kita akan mendapatkan hasil mirip gambar berikut:
