Followers

Thursday 13 December 2012

contoh desain web sederhana

HTML contoh desain web sederhana

<html>
<head>
<title>pedding dyamnd</title>
<meta content="http://www.dymand-informatika.com" name="author"/>


<style type="text/css">
/*misal tag body*/body{
background-color:#666666;
margin:0 auto 10px auto;/* jarak-luar atas 0, kiri dan kana auto, sedangkan bawah 10px */
padding:5px;/* jarak/batas dalam masing-masing 5px*/
width:800px;/* lebar 800px*/
}

#pembentuk-headernya{/*style ini untuk pembentuk header*/
height:200px;/* tingginya 200px*/
clear:both;/*fungsi ini agar agar ruas kanan-dankiri tidak bisa diisi dengan bidang lain */
margin:0 auto;/*jarak luar atas bawah 0, kiri-kanan auto */
background-color:white;/*warna latar belakang putih */
-moz-border-radius-topright:10px;/* style ini khusus untuk firefox, fungsinya untuk membuat lengkungan*/
-moz-border-radius-topleft:10px;/* style ini khusus untuk firefox, fungsinya untuk membuat lengkungan*/
}

#pembentuk-headernya .judul{/*style ini untuk judul header*/
padding:10px 0 0 20px;/*jarak dalam atas 10px, kanan dan bawah 0, sedangkan kiri 20px*/
font-size:40px;/* ukuran font 40px*/
text-transform:capitalize;/* setiap kata diawali dengan huruf kapaital*/
font-family:times;/* font family times*/
}
#pembentuk-headernya .deskripsinya{/*style ini untuk deskripsi header*/
padding:10px 0 0 20px;/*jarak dalam atas 10px, kanan dan bawah 0, kiri 29px*/
font-size:20px;/* ukuran font 20px*/
}

#sidebar-kiri{/*style ini untuk sidebar kiri */
min-height:1000px;/* tinggi minimal*/
float:left;/*menekan kekiri */
width:200px;/*lebar 200px */
margin:10px 0;/*jarak luar atas-bawah 10px, kiri-kanan 0 */
background-color:white;/* warna latar belakang putih*/
-moz-border-radius-topleft:10px;/* style ini khusus untuk firefox, fungsinya untuk membuat lengkungan*/
-moz-border-radius-bottomleft:10px;/* style ini khusus untuk firefox, fungsinya untuk membuat lengkungan*/
}
#sidebar-kiri .anggapwidget, #sidebar-kanan .anggapwidget{/*style ini untuk isi/pembentuk dalam sidebar kanan dan kiri*/
min-height:300px;/* tinggi minimal 300px*/
clear:both;/*fungsi ini agar agar ruas kanan-dankiri tidak bisa diisi dengan bidang lain */
margin:5px;/*jarak luar masing-masing 5px */
background-color:#666666;/* warna latar belakang #666666*/
-moz-border-radius:10px;/* */
}
#sidebar-kiri h2{/*style ini untuk judul sidebar kiri*/
margin:0;/*jarak luar masing-masing 0 */
padding:0;/*jarak dalam masing-masing 0 */
border-bottom:2px double white;/* garis bawah lebar tebal 2px, style double warna putih*/
font-size:20px;/* ukuran font 20px*/
text-align:center;/* text rata tengah */
text-transform:capitalize;/*setiap kata diawali dengan huruf besar/kapaital */
}

/*mulai badan utama*/
#badan-utamanya{/*style ini untuk badan utama, atau yang terletak di tengah*/
min-height:920px;/* tinggi minimal*/
float:left;/* menekan kekiri*/
width:400px;/* lebar 400px*/
margin:10px;/*jarak luar masing-masing 10px */
background-color:white;/*warna latar belakang putih */
-moz-border-radius-topleft:10px;/* style ini khusus untuk firefox, fungsinya untuk membuat lengkungan*/
-moz-border-radius-topright:10px;/* style ini khusus untuk firefox, fungsinya untuk membuat lengkungan*/
}
#badan-utamanya h2{/*style ini untuk untuk judul badan utama*/
/*style ini untuk judul badan h2*/
margin:0;/*jarak luar masing-masing 0 */
padding:0;/*jarak dalam masing-masing 0 */
border-bottom:2px double #666666;/*garis bawah tebal 2px double, warna #666666 */
font-size:22px;/* ukuran font 22px*/
text-align:left;/*text rata kiri */
text-transform:capitalize;/* setiap kata diawali dengan huruf kapital/besar*/}
#badan-utamanya .isinya{/*style ini untuk isi badan*/
/*style ini untuk isi badan*/
margin:10px;/* jarak luar masing-masing 10px*/
font-size:17px;/* ukuran font 17px */
}
#badan-utamanya .isinya p{/*style ini untuk tag p yang ada di dalam isi badan*/
/*style ini untuk tag p*/
text-indent:20px;/* jrak awal paragraf*/
}
/*bagian badab selesai*/


/*mulai sidebar kanan*/
#sidebar-kanan{/*style ini untuk sidebar kanan*/
min-height:1000px;/* tinggi minimal*/
float:right;/* menekan ke kanan*/
width:180px;/* lebar 180px*/
margin:10 0 0 0;/*jarak luar atas 10, kiri-kanan-bawah 0 */
background-color:white;/*warna latar belakang putih */
-moz-border-radius-topright:10px;/* style ini khusus untuk firefox, fungsinya untuk membuat lengkungan*/
-moz-border-radius-bottomleft:10px;/* style ini khusus untuk firefox, fungsinya untuk membuat lengkungan*/
}
#sidebar-kanan h2{/*style ini untuk judul sidebar kanan*/
margin:0;/*jarak luar masing-masing 0 */
padding:0;/*jarak dalam masing-masing 0 */
border-bottom:2px double white;/*garis bawah tebal 2px titik-titik, warna putih */
font-size:18px;/*ukuran font */
text-align:right;/* text rata kanan*/
text-transform:capitalize;/* setiap kata diawali dengan huruf besar*/
}

#pembentuk-footer{/*style ini untuk pembentuk footer atas, saya membuat tiga footer widget*/
clear:both;/*fungsi style ini agar ruang kiri-kanan tidak bisa diisi*/
background-color:white;/*warna latar belakang*/
}
#pembentuk-footer h3{/*style ini untuk judul footer atas*/
margin:0;/*jarak luar masing-masing 0 */
padding:0;/*jarak dalam masing-masing 0 */
}
#pembentuk-footer .judulwidgetfooter{/*style ini untuk judul footer atas, yups ada dua emang, css itu asik, banget. bayak hal yang bisa dibuat*/
margin:5px;/*jarak luar masing-masing 5px */
border-bottom:4px solid white;/*anggap garis bawah setebal 4px solid warna putih*/
text-transform:capitalize;/**//* setiap kata diawali dengan huruf besar*/
}
#pembentuk-footer .misalwidgetnya{/*style ini untuk widget dalama footer*/
float:left;/*menekan ke kiri-atas*/
width:32%;/*lebarnya 32%, jika lebar tag sebelumnya 1000px, maka lebar ini menjadi 320px*/
min-height:300px;/*tinggi minimal*/
background-color:#666666;/*warna latar belakang*/
margin:5px;/*jarak luar masing-masing 5px */
}

#pembentuk-footer-bawah{/*style ini untuk footer bagain tengah, saya membuat tiga footer*/
clear:both;/*fungsi style ini agar ruang kiri-kanan tidak bisa diisi*/
background-color:white;/*warna latar belakang putih*/
margin-top:20px;/*jarak luar atas 20px*/
}
#pembentuk-footer-bawah .misalwidgetnya-footer-bawah{/*style ini untuk widget dalam footer */
float:left;/*menekan ke kiri-atas*/
width:24%;/*lebarnya 24%, jika lebar tag sebelumnya 1000px, maka lebar ini menjadi 240px*/
min-height:300px;/*tinggi minimal*/
background-color:#666666;/*warna latar belakang*/
margin:5px 2px 5px 5px;/*jarak luar atas 5px, kanan 2px, bawah 5px, kiri 5px*/
}
.misalwidgetnya-footer-bawah h3{/*style ini untuk judul footer*/
padding:0;/*jarak dalam masing-masing 0 */
margin:5px;/*jarak luar masing-masing 5px */
border-bottom:4px solid white;/*anggap garis bawah setebal 4px solid warna putih*/
text-transform:capitalize;/**//* setiap kata diawali dengan huruf besar*/
}

#pembentuk-footer-paling-bawah{/*style ini untuk footer paling bawah*/
clear:both;/*fungsi style ini agar ruang kiri-kanan tidak bisa diisi*/
background-color:white;/*warna latar belakang*/
margin-top:20px;/*jarak luar atas 20px*/
padding-bottom:5px;/*jarak dalam-bawah 5px*/
}
#pembentuk-footer-paling-bawah .widgetnya-footer-bawah-paling-bawah{/*style ini untuk widget footer paling bawah*/
float:left;/*menekan ke kiri-atas*/
width:49%;/*lebarnya*/
min-height:300px;/*tinggi minimal*/
background-color:#666666;/*warna latar belakang*/
margin:5px 2px 0 5px;/**/
}
.widgetnya-footer-bawah-paling-bawah h4{/*style ini untuk judul footer paling bawah*/
padding:0;/*jarak dalam masing-masing 0 */
margin:5px;/*jarak luar masing-masing 5px */
border-bottom:4px solid white;/*anggap garis bawah setebal 4px solid warna putih*/
text-transform:capitalize;/**//* setiap kata diawali dengan huruf besar*/
font-size:20px;/*ukuran font*/
}

/* mulai dari sini adalah pengelompokan style css, setiap style dipisahkan dengan koma(,)*/
.widgetnya-footer-bawah-paling-bawah .isi-widget, .misalwidgetnya-footer-bawah .isi-widget, .misalwidgetnya .isi-widget, #sidebar-kanan .isi-widget, #sidebar-kiri .isi-widget{/*style ini untuk isi widget, keseluruhan*/
margin:5px;margin:5px;/*jarak luar masing-masing 5px */
}
/*maksud dari pengelompokan adalah, misal ada 10 style yang sama, nah dari-pada styleya ditulis satu-satu, kan lebih baik di kelompokan*/
#by-indam{/*style ini untuk yang paaaaaaaaaaaaaaaaaaaaaaaaling bawah, ituloh yang titititittititik*/
clear:both;/*fungsi style ini agar ruang kiri-kanan tidak bisa diisi*/
outline:white dotted 16px;/*garis luar tebal 16px titik-titik, warna putih */
min-height:40px;/*minimal tinggi 40px */
margin:40px auto;/* jatak luar atas dan bawah 40px, kiri-kanan auto*/
background-color:white;/* warna latar belakang putih*/
-moz-border-radius-bottomright:10px;/*style ini hanya untuk firefox */
-moz-border-radius-bottomleft:10px;/*style ini hanya untuk firefox */
}
#by-indam p{/*style ini untuk tag p dalam tititititiititittitiitik*/
text-align:right;/*text rata kanan */
margin:0;/*jarak luar masing-masing 0 */
padding:5px 10px;/* jarak dalam atas-bawah 5px, kiri-kanan 10px*/
}

</style>
</head>
<body>
<div id="pembentuk-headernya">
<h1 class="judul">judulnya</h1>
<p class="deskripsinya">ini adalah tema web</p>
</div>
<div id="sidebar-kiri">
<div class="anggapwidget">
<h2>judu kiri</h2>
<div class="isi-widget">
isi widget
isi widget
isi widget
isi widget
isi widget
isi widget
</div>
</div>
<div class="anggapwidget">
<h2>judul kiri 2</h2>
<div class="isi-widget">
isi widget
isi widget
isi widget
isi widget
isi widget
isi widget
</div>
</div>
<div class="anggapwidget">
<h2>judul kiri 3</h2>
<div class="isi-widget">
isi widget
isi widget
isi widget
isi widget
isi widget
isi widget
</div></div>
</div>
<div id="badan-utamanya">
<div class="isinya">
<h2>anggap disini adalah judul postingan</h2>
<p>ini adalah text ini adalah text ini adalah text ini adalah text ini adalah text ini adalah text</p>
<p>ini adalah text ini adalah text ini adalah text ini adalah text ini adalah text ini adalah text</p>
<p>ini adalah text ini adalah text ini adalah text ini adalah text ini adalah text ini adalah text</p>
<p>ini adalah text ini adalah text ini adalah text ini adalah text ini adalah text ini adalah text</p>
<p>ini adalah text ini adalah text ini adalah text ini adalah text ini adalah text ini adalah text</p>
<p>ini adalah text ini adalah text ini adalah text ini adalah text ini adalah text ini adalah text</p>
</div></div>
<div id="sidebar-kanan">
<div class="anggapwidget">
<h2>judul kanan</h2>
<div class="isi-widget">
isi widget
isi widget
isi widget
isi widget
isi widget
isi widget
</div>
</div>
<div class="anggapwidget">
<h2>judul kanan 2</h2>
<div class="isi-widget">
isi widget
isi widget
isi widget
isi widget
isi widget
isi widget
</div>
</div>
<div class="anggapwidget">
<h2>judul kanan 3</h2>
<div class="isi-widget">
isi widget
isi widget
isi widget
isi widget
isi widget
isi widget
</div></div>


</div></div>
<div style="clear:both;/* */"></div>
</div><div id="by-dmand">
 <blink><p> dymand </blink></p>
</body>
</html>

TRANSLATE