Belajar Web – Cara Mendesain Website

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

Recent Tags:

Belajar Web – Cara Mendesain Website | Andi Mariadi | 4.5

Leave a Reply