- Ada pertanyaan hubungi?
- 0831 8393 2425
- rasid [at] pintar.id
Cara Membuat Layout Website dengan tag div dan CSS
Memasukan Gambar ke Website, Mengatur Ukuran, Link dengan Gambar
9 June 2016
Cara Melihat Jumlah Pengunjung Website Kamu Dengan Google Analytics
27 August 2016Cara Membuat Layout Website dengan tag div dan CSS
Cara Membuat Layout Website dengan tag <div> dan CSS
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 |
<!DOCTYPE html> <html> <head> <title>Layout dengan DIV | emerer.com</title> <style> #header { background-color:brown; color:white; text-align:center; padding:5px; } #nav { line-height:45px; background-color:grey; height:400px; width:150px; float:left; padding:15px; } #section { width:600px; float:left; padding:25px; } #footer { background-color:brown; color:white; clear:both; text-align:center; padding:5px; } </style> </head> <body> <div id="header"> <h1>Wisata Batam</h1> </div> <div id="nav"> Pantai Melayu<br> Pantai Setokok<br> Pantai Piayu<br> Pantai Nongsa<br> Pantai Marina<br> Pantai Vio Vio<br> Barelang </div> <div id="section"> <h2>Pantai Melayu</h2> <p> Pantai Melayu, sebenarnya jalan jalannya sudah Rasid lakukan di beberapa bulan yang lalu. Barulah kali ini sempat postingnya. Pantai Melayu Barelang merupakan salah satu pantai yang berada di arah Jembatan Barelang, kalau perjalanan dari simpang Barelang yang di Batam kira kira 50 menit. Lumayan capek, tapi kita akan dihibur selama perjalanan dengan beberapa visual yang menarik. </p> <p> Kebun buah naga yang lumayan luas, hutan bakau tepi pantai yang menghijau, potongan bukit bauksit, lahan pertanian yang jarang ada di pulau batam. Untuk sampai Pantai Melayu kita akan melewati beberapa jembatan ANTAR PULAU hingga 4 jembatan harus kita lewati. Untuk masuk kawasan wisata Pantai melayu ini kita harus membeli tiket 10.000 rupiah, beberapa waktu yang lalu masih 5.000 lho. Mungkin untuk penambahan personel yuk perawatan kali ya, ato biar lebih bersih lagi pantainya. </p> </div> <div id="footer"> <h3>2016 © emerer.com All Rights Reserved </h3> </div> </body> </html> |
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.
4 Comments
Terimakasih banyak pak Rasyid. Sangat membantu sekali. Apalagi untuk pemula seperti saya. š
Sama sama, saya juga masih perlu belajar lagi.
Mari kita bersama sama belajar tanpa henti.
gan.yg di title kan ada tulisan.emerer.com.yg di maksud tulisan emerer.com.fungsinya untuk apa ya gan.maklum baru pemula
Terima kasih sebelumnya, karena ini sangat membantu.
Tapi ada yang ingin saya tanyakan, yaitu bagaimana bisa nav dan section bisa bersebelahan, sementara footer otomatis dibawahnya. apa yang membuat Nav dan Section bisa bersebelahan?
terima kasih sebelumnya.