Membuat Desain Layout Sederhana dengan CSS

Nano Informatika - Layout adalah penyusunan elemen - elemen yang akhirnya membentuk suatu struktur yang dapat diatur. Jika kalian membuat sebuah website pasti mengenal dengan layout karena layout adalah bagian pertama ketika membuat website. Layout ada berbagai macam bentuk rupanya tidak ada aturan pasti mengenai layout. Tapi alangkah baiknya membuat layout yang sederhana tapi mudah dipahami oleh para pengunjung jadi tidak membuat binggung para pengunjung ketika website kita nanti jadi.

Layout yang saya tahu ketika saya belajar dibangku kuliah ada dua cara pembuatan pertama menggunakan CSS, apa itu CSS ?? nanti saya akan jelaskan dan yang kedua menggunakan kode table. Dari dua cari ini saya lebih menyarankan menggunakan CSS karena hasil akhirnya lebih terstruktur layout yang kita buat. 

CSS (Cascading Style Sheet) adalah bahasa style sheet yang berfungsi untuk mengatur sebuah dokumen atau bahasa kasarnya koding - koding yang membantu programmer membangun website. Koding CSS ini sangat penting untuk para pembuat website tapi bagi pemula seperti saya ini sudah bagus untuk mengenal dasar - dasar dari CSS sendiri.

Dalam artikel sederhana ini saya akan memberikan contoh membuat layout menggunakan CSS. Berikut hasil akhirnya nanti

Kode untuk Wrapper

#wrapper { margin: auto;
 width: 980px;
 background:black;
 border-radius: 100px 20px 50px 20px;
 border: 1px solid red;
 }

Kode untuk Header

#header { background : red;
color: white;
border-radius: 50px 20px 0 0;
height: 100px;
padding: 6px 0 0 0;
}

Kode Untuk Navigasi

 #navigasi { background : #333333;
background : -webkit-linear-gradient(top, #666666, #333333);
margin: 0;
border : 1px solid black;
}

Kode untuk Artikel

#content { float: left;
 width: 180px;
 height: 330px;
 border: 2px solid white; }

Kode untuk Aside

 #content1 { float: right;
 width: 750px;
 height: 330px;
 border: 2px solid white; }

Kode untuk Footer

#footer
{ clear: both;
background: red;
background: -webkit-linear-gradient(top, #666666, #333333);
width: 980px;
 height: 50px;
 border-radius: 0px 0px 50px 20px;
 border: 1px solid black; }

Tampilan Layout diatas menggunakan tipe dua kolom, jika ingin merubah ukuran dapat mengutak atik pada menu width n height. Semoga artikel diatas dapat membantu jika ada salah kata atau belum dimengerti saya tunggu dikolom komentar dan jangan lupa baca juga Memunculkan data dari Database ke ComboBox