kali ini saya akan membahas cara membuat layout page css (
Cascading Style Sheet ) dengan tag
div .
lihat screenshot di bawah ini
:
gambar di atas adalah contoh layout halaman .
siapkan notepade++ buat file css dan masukan code di bawah ini lalu save dengan nama
style.css
#halaman{ background-color:#660099;
min-width: 700px;
height:200px;
}
#atas {background-color:#F0F0F0;
height:100px;}
#kiri
{background-color:#0C0;
max-width:200px; float:left;
height:400px;}
#kanan {background-color:#0C0;
max-width:200px; float:right;
height:400px;}
#bawah {background-color:#F00;
height:70px;}
#tengah {background-color:#10C0FF;
height:400px;}
jika sudah , copy code di bawah ini simpan dengan ekstensi file HTML
*letakan dalam satu folder dengan file css yang tadi sudah di buat*
<html>
<head>
<title>Test Layout</title>
<link href="style.css" rel="stylesheet" type="text/css">
</head>
<body>
<div id="halaman">
<div id="atas"><center><h1>bagian atas halaman { HEADER }</h1></center></div>
<div id="tengah">
<div id="kiri">bagian kiri halaman</div>
<div id="kanan">bagian kanan halaman </div>
<div id="isi"><center><h2>bagian isi halaman { BODY }</h2></center></div>
</div>
<div id="bawah"><br><center>Bagian bawah halaman { COPYRIGHT }</center></div>
</div>
</body>
</html>
setelah itu lalu save dan lihat hasil nya .
anda berhasil membuat layout halaman .
sebenar nya ada cara yang lebih simple lagi , copy code di bawah ini dan simpan dengan exstensi file html lalu save .
<html>
<head>
<title>Test Layout</title>
<style type="text/css">
#halaman{ background-color:#660099;
min-width: 700px;
height:200px;
}
#atas {background-color:#F0F0F0;
height:100px;}
#kiri
{background-color:#0C0;
max-width:200px; float:left;
height:400px;}
#kanan {background-color:#0C0;
max-width:200px; float:right;
height:400px;}
#bawah {background-color:#F00;
height:70px;}
#tengah {background-color:#10C0FF;
height:400px;}
</style>
<body>
<div id="halaman">
<div id="atas"><center><h1>bagian atas halaman { HEADER }</h1></center></div>
<div id="tengah">
<div id="kiri">bagian kiri halaman</div>
<div id="kanan">bagian kanan halaman </div>
<div id="isi"><center><h2>bagian isi halaman { BODY }</h2></center></div>
</div>
<div id="bawah"><br><center>Bagian bawah halaman { COPYRIGHT }</center></div>
</div>
</body>
</head>
</html>
gimana ? mudah kan , kreasi kan code di atas sesuai keinginan anda.
semoga artikel yang singkat ini dapat berguna :)
