Di part ini kita akan membahas dan belajar membuat desain website dalam hal ini index.html, pada part sebelumnya sudah kita bahas Belajar Membuat Desain Website Dengan CSS dan telah menghasilkan file yang bernama styles.css. Sekarang bagaimana cara mendesign website dalam hal ini index.html tersebut.
Pertama, kita buat
tag <div></div> dimana tag ini akan kita bagi menjadi 4 class. Class tersebut untuk header, navigasi, sidebar, dan isi content . Sebagai contoh letakkan
script di index.html, dan ganti semua script yang berada di
tag <body> .. </body> sebelumnya dengan script berikut:
<div class="header">Study Newbie</div><div class="navigasi"><li><a href="#">Home</a></li></div><div class="sidebar"><p>Ini Sidebar</p></div><div class="content"><p>Ini Content</p></div>
Maka script lengkap dari index.html akan nampak seperti ini :
<!DOCTYPE html><html lang="en"><head><meta charset="utf-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1"><title>Ayo Membuat website Study-newbie.blogspot.com</title><link href="styles.css" rel="stylesheet"></head><body><div class="header">Study Newbie</div><div class="navigasi"><li><a href="#">Home</a></li></div><div class="sidebar"><p>Ini Sidebar</p></div><div class="content"><p>Ini Content</p></div></body></html>
Sekarang coba refresh
halaman web http://localhost/study-newbie.
Maka akan terjadi perubahan seperti berikut di website localhost kita :
Masih belum nampak polos dengan background putih, tak ada perubahan yang berarti bukan, maka timbul pertanyaan bagaimana mendesain website yang kita buat tadi, dimana letak desainnya ?
Maka, sekarang kita coba mendesain website kita. Buka file styles.css yang sudah dibuat sebelumnya.
Sekarang buat class “Header”,
“navigasi”, “sidebar”, “content”. Masih ingat cara membuat class pada css ? Class dalam css menggunakan tanda titik (.) .
Copy dan paste skript dibawah ini untuk membuat class “header":
.header {padding: 15px;background-color: #2980b9;color: #fff;height: 80px;font-size: 44px;}
Dan Class “navigasi”
masukan kode berikut :
.navigasi {background-color: #333; /*Pasti sudah taukan ?*/height: 50px; /*Pasti sudah taukan ?*/}.navigasi li {float: left; /*memposisikan dari sebelah kiri*/background-color: #999;padding: 15px; /*Dari posisi samping kiri kanan atas bawah tarik kedalam sebanyak 15 pixel*/margin-left: 5px; /*Jarak dari sebelah kiri dari luar sebanyak 15pixel*/}.navigasi li:hover {float: left; /*memposisikan dari sebelah kiri*/background-color: #ddd; /*Pasti sudah taukan ?*/padding: 15px; /*Dari posisi samping kiri kanan atas bawah tarik kedalam sebanyak 15 pixel*/}.navigasi li a {color: #333; /*Pasti sudah taukan ?*/font-weight: bold; /*Membuat font tebal*/}
Anda pasti bingung setelah .navigasi ada li lagi ? Sedikit penjelasan, karena tag <li></li>
di tulis dalam <div class=”navigasi”> ......[ tag li disini ] ...... </div>. Maka untuk mengubah desain dati li tersebut maka cara penulisan di css seperti ini “.nama_class tag tag tag tag dll” sama
juga dengan class <a>. tag <a> yang berada di dalam tag <li>
maka penulisannya .nama_class li a. Jika anda belum mengerti pembuatan desain tersebut coba baca ulang post pada Belajar Membuat Desain Website Dengan CSS pada postingan sebelumnya.
Selanjutnya lagi
kita mencoba belajar mendesain class untuk “sidebar”. Berikut scriptnya :
.sidebar {width: 20%; /* agan bisa mengganti dengan pixel atau % persen :) */float: left;padding: 15px;background-color: #ddd;}
Jika di dalam sidebar
ada tag <a> ataupun ada tag lain, Anda bisa mengganti stylenya atau desain yang anda suka dengan cara mendesain yang kita lakukan pada class “navigasi”.
Yang terakhir kita
mulai mendesain class contentnya. Copy script berikut dan paste di styles.css
.content {width: 75%;float: right;background-color: #fff;padding: 15px;}
Mengapa pada class contentnya widthnya cuma 75%. Penjelasannya, karena width 5%nya sudah di ambil oleh padding pada masing-masing class content dan class sidebar.
Untuk penampakan
akhirnya akan seperti ini :
Terus
bagaimana cara membuat footer ? untuk footernya. Silahkan anda gunakan toturial di
atas lalu gunakan “clear: both” didalam class footernya fungsi "clear: both" agar tidak mengikuti float: left dan float: right yang
ada di class content dan class sidebar. Keep koding website.
Next part kita akan belajar cara membuat website yang responsive. Anda bisa membaca di sini Cara Membuat Website di Localhost Menggunakan HTML / PHP
