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.
<!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:
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:
