Archive for Maret 2015
 |
| - Kuisioner Media Sosial Musik Indonesia - |
Kuisioner ini adalah upaya saya dan rekan-rekan sekelompok dalam mata kuliah Interaksi Manusia dan Komputer untuk dapat mengetahui kebutuhan dan keinginan para peminat dan menggemar musik Indonesia.
 |
| 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>3. Jangan lupa save file dengan beri nama dan exstensi .html dan lihat hasilnya dengan membuka file tersebut!
<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>
4. Selamat ! Anda kini mengetahui Cara Membuat Pembagian Layout Website Menggunakan Manipulasi CSS !
