Sebelum membuat halaman web tentunya harus terlebih dahulu membuat layout sebagai rancangan agar memudahkan dalam penempatan objek baik di bagian header, menu, isi dan footer. Sebetulnya sebelum adanya CSS, layout bisa dibuat dengan tabel, tapi dengan adanya CSS lebih memudahkan dalam penempatan objek dan pengaturannya. Dalam tutorial kali ini, kita akan coba membuat layout halaman web dengan HTML dan CSS dimana terdapat header, menu utama dan isi dengan tiga kolom serta di bagian paling bawah bagian footer. Coba perhatikan gambar layout berikut ini:
Untuk membuat layout halaman web seperti gambar di atas, dapat mempelajari script di bawah ini. Dalam tutorial ini cara menempatkan kode CSSnya dengan cara internal style sheet dimana kode CSS disisipkan diantara elemen head.
<!DOCTYPE html>
<html>
<head>
<title>My Layout</title>
<Style>
#container{
border:1px solid;
width:860px;
height:535px;
margin:0 auto;
position:relative;
}
#header{
border:1px solid;
width:850px;
height:100px;
margin:5px auto;
clear:both;
}
#menu{
border:1px solid;
width:850px;
height:30px;
margin:5px auto;
clear:both;
}
#menukiri{
border:1px solid;
width:200px;
height:340px;
margin:0 0 5px 5px;
position:relative;
float:left;
}
#isi{
border:1px solid;
width:435px;
height:340px;
margin:0 0 5px 5px;
position:relative;
float:left;
}
#menukanan{
border:1px solid;
width:200px;
height:340px;
margin:0 0 5px 5px;
position:relative;
float:left;
}
#footer{
border:1px solid;
width:850px;
height:30px;
margin:10px auto;
clear:both;
}
</style>
</head>
<body>
<Div id="container">
<Div id="header">Header</div>
<Div id="menu">Menu Utama</div>
<Div id="menukiri">Menu Kiri</div>
<Div id="isi">Isi</div>
<Div id="menukanan">Menu Kanan</div>
<Div id="footer">Footer</div>
</div>
</body>
</html>
Demikianlah tutorial tentang contoh penerapan CSS dalam HTML untuk membuat layout halaman web. Tentunya untuk lebih memahami harus banyak latihan dan mencoba. Semoga bermanfaat.