Membuat Template Web Menggunakan Html Dan Css

Karena ada beberapa kesibukan lain yang harus di selesaikan akhirnya hari ini saya bisa update postingan lagi, nah berhubung beberapa hari kemaren ada yang Tanya bagaimana sh cara membuat template web dan saya melihat hasil karya teman saya yang membuat layout web menggunakan frame.

Berhubung saya paling tidak suka menggunakan frame untuk membuattemplate web maka dari itu pada akhirnya saya memberikan sedikit ilmu yang pernah saya pelajari, yaitu membuat template web menggunakan html dan css. Cara ini sebenarnya tidak terlalu sulit, cukup dengan memahami struktur dari web tersebut maka kita bisa menentukan layout tersebut dan siap untuk build layout. Perhatikan gambar berikut.

Nah dari gambar di atas maka kita bisa simpulkan bahwa pada umumnya web itu pasti memiliki elemen dibawah ini


1. Header
2. Kontent
3. Sidebar
4. Footer

Untuk membuat halaman seperti gambar di atas maka kita harus membuat file index.html ataupun index.php dan 1 file tambahan yaitu css nah untuk mencoba silahkan copy scrip dibawah ini dan paste di notepad++ kemudian simpan dengan nama index.html.

<div id="wrapper">

<div id="header"></div>

<div id="page">

<div id="konten"><form action="proses.php" method="POST">

<table width="300" align="center" bgcolor="#f1f1f1">

<tbody>

<tr>

<td>Tanggal</td>

<td>:</td>

<td><input type="text" name="tanggal" placeholder="Input Date Here" /></td>

</tr>

<tr>

<td>Judul</td>

<td>:</td>

<td><input type="text" name="judul" placeholder="Input Title Here" /></td>

</tr>

<tr>

<td>Konten</td>

<td>:</td>

<td><input type="text" name="konten" placeholder="masukan konten anda di sini" /></td>

</tr>

<tr>

<td></td>

<td></td>

<td><input type="submit" value="simpan" />

<input type="submit" value="edit" /></td>

</tr>

</tbody>

</table>

</form></div>

<div id="sidebar"></div>

</div>

<div id="footer"></div>

</div>

kedua silahkan kopi kode css dibawah ini paste di notepad++ dan beri nama dengan css.css pada folder yang sama dengan file index kemudian jalankan file index.html menggunakan browser sobat masing-masing.

body{
background: #f1f1f1;

}

#wrapper{
background: #f1f1f1;
border: 1px solid black;
width: 960px;
margin: 0px auto;
height: auto;
}
#header{
background: white;
width: 940px;
margin: 0px auto;
height: 100px;
margin-top: 10px;
}

#page{
background: blue;
border: 1px solid black;
width: 940px;
height: 400px;
margin:0px auto;
margin-top:10px;
margin-bottom: 10px;
}

#konten{
background: black;
width: 630px;
margin: 0px auto;
float: left;
height: auto;
}
#sidebar{
background: red;
float: right;
width: 300px;
margin: 0px auto;
}
#footer{
background: black;
margin: 0px auto;
width: 940px;
height: 30px;
}