Cara Membuat Layout Website dengan tag div dan CSS

Memasukan Gambar ke Website, Mengatur Ukuran, Link dengan Gambar emerer.com
Memasukan Gambar ke Website, Mengatur Ukuran, Link dengan Gambar
9 June 2016
9 Cara Melihat Jumlah Pengunjung Website Kamu Dengan Akurat  Google Analytics emerer.com
Cara Melihat Jumlah Pengunjung Website Kamu Dengan Google Analytics
27 August 2016

Cara Membuat Layout Website dengan tag div dan CSS

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

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.

Muhammat Rasid Ridho
Muhammat Rasid Ridho
[telp/wa 0831 8393 2425] Software Developer yang Suka Jalan jalan, Belajar Jaringan dan Berbagi Cerita. Jangan lupa tulis komentar di bawah ini ya teman teman ... !

2 Comments

  1. Zahra says:

    Terimakasih banyak pak Rasyid. Sangat membantu sekali. Apalagi untuk pemula seperti saya. šŸ˜ƒ

Leave a Reply

Your email address will not be published.