Cara Membuat Layout Website dengan tag <div> dan CSS

Kalau kita lihat disana ada 4 id: header, nav, section, dan footer. Semua id diatur oleh css yang letaknya ada dibagian atas. Letaknya diapit oleh tag <style>. Coba kita tengok satu persatu.

#header {
background-color:brown;
color:white;
text-align:center;
padding:5px;
}
Digunakan untuk mengatur tulisan yang letaknya diatas. Kalau di program ini ada tulisan Wisata Batam. Maka tulisan itu mempunyai latar belakang brown. Tulisan nya sendiri bwrwarna putih. Sedangkan perataanya rata tengah. Jarak disekelilinnya sebesar 5 pixel.
Ubah aja warna latar belaang sesuai keinginan, red misalnya. Pakai kode 6 digit hexadesimal juga bisa, #BBBBBB. Atau metode RGB.

#nav {
line-height:45px;
background-color:grey;
height:400px;
width:150px;
float:left;
padding:15px;
}
Jarak spasi antar baris sebesar 45 pixel. Float: left; digunakan agar berada disamping kiri. Coba aja rubah menjadi right. Lihat perbedaanya, apa yang terjadi?
#section {
width:600px;
float:left;
padding:25px;
}
Nah yang ini untuk megatur bagian isi atau konten dari website kita. Lebar bisa disesuaikan, bisa aja dirubah menjadi 800px. Agar sesuai dengan lebar monitor.
#footer {
background-color:brown;
color:white;
clear:both;
text-align:center;
padding:5px;
Ini untuk pengaturan pada bagian footer. Cobalah rubah sesuai dengan keinginan.

Sekian aja tutorial Cara Membuat Layout Website dengan tag div dan CSS dari saya. Semoga bermanfaat, bisa dijadikan referensi. Jangan lupa tulis komentar jika ada pertanyaan.

16 June 2016
Cara Membuat Layout Website dengan tag div dan CSS emerer.com

Cara Membuat Layout Website dengan tag div dan CSS

Cara Membuat Layout Website dengan tag <div> dan CSS [crayon-59c1e3b913c7c690259109/] Kalau kita lihat disana ada 4 id: header, nav, section, dan footer. Semua id diatur oleh […]
21 April 2016
Style untuk warna Link dan Paragraf

Style untuk warna Link dan Paragraf

Style untuk warna Link dan Paragraf. Ingin warna akan berbeda ketika belum pernah di klik, pernah di klik, kursor melewati link dan ketika link sedang di […]
7 April 2016
Cara Menjadikan Gambar Photo Sebagai Background atau Latar Belakang

Cara Menjadikan Gambar Photo Sebagai Background atau Latar Belakang

Contoh : [crayon-59c1e3b91fe33621036739/]  
7 April 2016
Cara mengatur warna Latar Belakang atau background HTML 5

Cara Mengatur Warna Latar Belakang atau Background HTML 5

Contoh: [crayon-59c1e3b921c9b372810533/]  
7 April 2016
Mengatur Urutan List HTML 5 emerer.com

Mengatur Urutan List HTML 5 | emerer.com

Contoh: [crayon-59c1e3b922db7542652403/]  
7 April 2016
Style List untuk Bulleted List dan Numbered List HTML 5  emerer.com

Style List untuk Bulleted List dan Numbered List HTML 5

Contoh: [crayon-59c1e3b9272cf656423015/]  
5 April 2016
Linked Style Sheet emerer.com CSS

Cara memanggil file .css pada Linked Style Sheet

Buat file dengan nama: style.css [crayon-59c1e3b928a90226521830/] file ke dengan nama: cara-memanggil-css.html [crayon-59c1e3b928a9d804599871/]  
5 April 2016
inline css border Style Sheet emerer.com

Penggunaan Inline Style Sheet dengan Border Style untuk Tag p Paragraf (CSS)

Selain Embedded kita bisa juga menggunakan CSS dengan cara Inline Style Sheet. Kode dibawah saya tambahkan dengan Border Style untuk Tag p untuk paragraf. [crayon-59c1e3b9299d1638814347/]  
5 April 2016
Embedded Style Sheet emerer.com

Contoh Script Penggunaan Embedded Style Sheet (CSS)

Terdapat 3 cara penggunaan CSS : Linked Style Sheet Inline Style Sheet Embedded Style Sheet Kali ini saya akan mencoba memberikan contoh script kode program yang Embedded […]