Posted by : BayuBayyz Selasa, 24 Maret 2015


Contoh Layout Website dengan Menggunakan Manipulasi CSS

Layout sebuah Web merupakan hal yang mendasar dan sangat penting untuk kita perhatikan sebelum membuat sebuah website atau dalam merancang sebuah website, Layout tersebut harus dibagi-bagi dan ditata sedemikian rupa sehingga dapat diterima dengan baik oleh pengunjung web kita.
Bagian-bagian dalam tampilan sebuah website sangat penting untuk menampilkan konten pada letak dan atau bagian yang sesuai dengan keinginan. Misalnya dalam sebuah kasus kita ingin membagi layout kita menjadi 2 bagian, sisi kiri untuk menampilkan artikel-artikel dan sisi kanan untuk menampilkan list artikel.
Maka yang harus diperhatikan adalah sebagai berikut :
1. Lebar layar untuk menampilkan seluruhnya diasumsikan 100%
2. Bagi 100% tersebut menjadi 2 bagian untuk sisi kiri dan sisi kanan. Misalkan sisi kiri untuk artikel-artikel lebarnya 70% dan 30% sisanya untuk sisi kanan. (*Anda dapat membaginya sesuai kebutuhan)
3. Script HTML dan CSS tentunya

Baik sekarang bagaimana script untuk Membuat Pembagian Layout Website Menggunakan CSS ?
Berikut langkah-langkahnya :
1. Buka Notepad/ Dreamweaver/ Sublime/ Text Editor lainnya.
2. Copy dan pastekan Script yang sudah saya buat berikut ini :
<!DOCTYPE HTML>
<html>
<head>
<title>Contoh Table menggunakan div by @BayuWPP</title>
<style type="text/css">
.lebarkolom {
width:80%;    /* ukuran penuh layar table pada browser*/
margin:0 auto; /* opsional, supaya table berada di tengah jika dalam mode fixed,*/
               /* bertindak seperti <table align="center">*/
border: 0px solid #000; /* border, opsional */
}
.baris {
width: 100%;    /* harus 100% supaya penuh ke area table */
}
.kolom1 {
width: 70%; /* lebar kolom 1 70% untuk artikel-artikel */
              /* diberikan kompensasi seperlunya karena penggunaan margin,*/
              /*BayuWPP*/
              /* padding maupun border akan mempengaruhi lebar kolom */
float: left;  /* Konten di letakkan di sebelah kiri*/
}
.kolom2 {
width: 30%; /* lebar kolom 2 30% untuk list artikel*/
              /* diberikan kompensasi seperlunya karena penggunaan margin,*/
              /*bayubayyz.blogspot.com*/
              /* padding maupun border nantinya akan mempengaruhi lebar kolom */
float: left;  /* kolom yang lebih duluan akan ditempatkan di kiri, begitu seterusnya */
}
</style>
</head>

<body>
  <h3>bayubayyz.blogspot.com</h3>
<div class="lebarkolom">
   <div class="baris">
      <div class="kolom1">
        Kolom Pertama <!-- Di bagian ini Anda dapat membuatnya untuk menampilkan artikel-artikel atau lain-lain -->
      </div>
      <div class="kolom2">
        Kolom Kedua <!-- Di bagian ini Anda dapat membuatnya untuk menampilkan list artikel  atau lain-lain -->
      </div>
   </div>
   <div style="clear: both;" /> <!-- selalu menempatkan tag ini sebelum penutup div lebar kolom -->
</div>
</body>
</html>
3. Jangan lupa save file dengan beri nama dan exstensi .html dan lihat hasilnya dengan membuka file tersebut!
4. Selamat ! Anda kini mengetahui Cara Membuat Pembagian Layout Website Menggunakan Manipulasi CSS !

{ 6 comments... read them below or Comment }

Welcome to BIG !!!

Find BIG on Facebook

Popular Post

Copyright © 2013 Bayyz Informatics Gallery. Diberdayakan oleh Blogger.

- Copyright © Big Informatics Gallery by Bayu Wijaya Permana Putra - Powered by Blogger - Supported by Google -