Langsung ke konten utama

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

Komentar

Postingan populer dari blog ini

Tutorial Lengkap Membuat Short Link Sendiri Dengan PHP Mysql

Hallo kawan, berjumpa lagi nih sama toturial www.pemulabelajar.com. Kali ini kita akan membahas cara membuat short link sendiri . Pernah dong kawan menjumpai namanya short link, contoh sederhananya saja goo.gl . goo.gl akan membuat url site kita menjadi lebih pendek misalnya saja : http://www.pemulabelajar.com bisa menjadi goo.gl/Jiahs . Begitu juga tutorial kita membuat short link kali ini. Karena membuat short link kita sekarang menggunakan PHP Mysql maka kawan disarankan untuk membuat hosting untuk website yang akan dijadikan website short link kita sendiri, kawan bisa menggunakan layanan gratis seperti 000webhosting.com atapun idhostinger.com (recomended) selain gratis, pembuatan databasenya juga termasuk mudah dan juga tutorialnya sangat banyak digoogle kalau ada waktu saya akan membuatkan tutorial membuat hosting gratis untuk kawan. Membuat Short Link Saya anggap saja kawan sudah membuat hosting disalah satu tempat hosting diatas. Maka langkah a...

Belajar Power Design - Cara Membuat Project Menjadi Gambar

Cara Membuat Project Menjadi Gambar - Artikel ini akan membahas sedikit tentang Power Design dan Bagaimana merubah project power design menjadi sebuah gambar . Masalah ini sering dialami oleh pemula khususnya saya yang bingung bagaimana merubah sebuah project power design menjadi berupa gambar agar mudah dimuat ke sebuah karya tulis. Baca juga : Membuat Teks Rotasi Dengan Photoshop Apa itu Power Design ? Power design adalah sebuah paket program desain tools yang digunakan untuk membuat Visualisasi, dokumentasi dan mendesain suatu sistem perangkat lunak. Paket ini meliputi Process analyst Model (PAM), Data architect tools, Aplication modeler tools, dan Metawork tools. Power Design ini juga sering digunakan menjadi software untuk membuat Diagram Flow Diagram atau DFD . Bagaimana Merubah Project Menjadi Gambar ? Untuk merubah sebuah project pada power design menjadi sebuah gambar cukup mudah. Secara singkatnya kawan cukup memilih semua object yang akan dijadikan sebuah gambar, s...

Belajar Web - Membuat Website Responsive CSS

Sebelum kita meneruskan tutorial selanjutnya yaitu Belajar Membuat Website Responsive baiknya kita pelajari terlebuh dahulu apa aja yang akan kita bahas. Karena yang akan kita bahas selanjutnya adalah responsive web, maka diwajibkan mengerti fungsi script css yang ada di Belajar Desajn Website di html / php toturial sebelumnya. Apa itu float ? Apa itu width ? Apa itu height ? Apa itu clear: both ? Responsive ini memakai @media(max-width) atau @media(min-width) yang memiliki arti lebar maximal style dan lebar minimal yang kita masukkan di dalam @media tersebut. Sebelum memperlajari responsive menu sebaiknya lita pelajari dulu float, clear dan lain-lain. Karena @media tersebut hanya mengganti script css dari css global. Apa itu css global ? Nanti anda penjelasannya masing-masing. Apakah anda sudah ngerti dengan coding css diatas ? Jika belum, ada baiknya anda harus pelajari dulu scriptnya di toturial sebelumnya. Cara memperbaiki jika terjadi error atau kesalahan penulidan pada d...