Desain Layout Halaman Web dengan Memanfaatkan Division
Membuat halaman web dapat menggunakan Cascading Style Sheet (CSS). Dengan CSS, akan mempermudah kita dalam mendesain layout untuk web dengan lebih ringan. Untuk dapat membuat tampilan layout web seperti berikut dengan mengunakan CSS:
Langkah yang diambil :
1. Buat kode css dengan nama "clear2a.css" (untuk nama file bisa dirubah sesuai dengan kebutuhan asal tetap dalam ekstensi file .css/ file nama diatas hanya sebagai contoh), kode css dapat dilihat dibawah ini :
#wrapper {
margin: auto;
width: 750px;
border: 1px solid red;
}
#header {
height: 80px;
border: 1px solid blue;
}
#inner {
float: left;
margin: 5px 0;
border: 1px solid black;
}
#sidebar {
float: left;
margin-right: 20px;
width: 180px;
height: 330px;
border: 1px solid red;
}
#content1 {
float: left;
width: 544px;
height: 330px;
border: 1px solid green;
}
#top {
float: left;
width: 544px;
height: 120px;
border: 1px solid blue;
}
#content {
float: left;
width: 374px;
height: 207px;
border: 1px solid red;
}
#right {
float: right;
width: 150px;
height: 150px;
border: 1px solid orange;
}
#footer {
clear: both;
height: 50px;
border: 1px solid blue;
}
2. Setelah kode tersebut disimpan dalam kode css, dilanjutkan dengan membuat kode html dengan nama file yang sama yaitu clear2a.html, kode html dapat dilihat dibawah ini :
3. Kode css dan html telah dibuat selanjutnya lihat hasil akhir dengan masuk dalam localhost atau buka langsung dari kode html. (jika hasil yang diperoleh sesuai gambar diatas berarti anda berhasil)
SELAMAT MENCOBA ^_^ !!
0 komentar:
Posting Komentar