Assalaamu'alaikum ..
Cascading Style Sheet (CSS) yaitu bahasa pemrograman buat ngontrol tampilan sebuah halaman website. dibawah ini ada contoh pembuatan kolom-kolom website pada umumnya, seperti header, menu, kolom isi dan footer. setelah itu tinggal dikembangkan sesuai selera .
caranya tinggal di copy aja script dibawah ini, terus paste di notepad/dreamweaver lalu jalankan di web browsernya.
<html>
<head>
<!--Script CSS-->
<style>
body{
margin:0px;
padding:0px;
background:#cecece;
}
.halaman
{
width:1300px;
margin:auto;
}
.header
{
float:left;
width:1300px;
height:200px;
background:#ffffff;
border:1px solid #000;
margin-top:10px;
}
.buat_tombolmenu
{
float:left;
width:1300px;
height:45px;
border:1px solid #000;
background:#ffffff ;
}
.wadah {
float:left;
width:1300px;
background:#ffffff;
}
.kolom1
{
width:900px;
float:left;
padding-left:20px;
border:1px solid #000;
background:#ffffff;
}
.kolom2
{
width:375px;
float:right;
background:#ffffff;
border:1px solid #000;
}
.footernya
{
float:left;
width:1300px;
height:70px;
border-top:1px solid #cecece;
background:#ffffff;
border:1px solid #000;
}
</style>
</head>
<!--untuk mengatur jarak atas,bawah,kiri,kanan bisa dengan menggunakan "margin"-->
<body>
<!--Disini dipanggil variabel css diatas-->
<div class="halaman"><!--halaman ini sebagai luas dari halaman website dan buat ngurung class yang lain-->
<!--Script CSS-->
<style>
body{
margin:0px;
padding:0px;
background:#cecece;
}
.halaman
{
width:1300px;
margin:auto;
}
.header
{
float:left;
width:1300px;
height:200px;
background:#ffffff;
border:1px solid #000;
margin-top:10px;
}
.buat_tombolmenu
{
float:left;
width:1300px;
height:45px;
border:1px solid #000;
background:#ffffff ;
}
.wadah {
float:left;
width:1300px;
background:#ffffff;
}
.kolom1
{
width:900px;
float:left;
padding-left:20px;
border:1px solid #000;
background:#ffffff;
}
.kolom2
{
width:375px;
float:right;
background:#ffffff;
border:1px solid #000;
}
.footernya
{
float:left;
width:1300px;
height:70px;
border-top:1px solid #cecece;
background:#ffffff;
border:1px solid #000;
}
</style>
</head>
<!--untuk mengatur jarak atas,bawah,kiri,kanan bisa dengan menggunakan "margin"-->
<body>
<!--Disini dipanggil variabel css diatas-->
<div class="halaman"><!--halaman ini sebagai luas dari halaman website dan buat ngurung class yang lain-->
<div class="header" align="center">
<blockquote>
HEADER
</blockquote>
</div>
<blockquote>
HEADER
</blockquote>
</div>
<div class="buat_tombolmenu" align="center">
<blockquote>
MENU
</blockquote>
</div>
<blockquote>
MENU
</blockquote>
</div>
<div class="wadah">
<div class="kolom1" align="center">
<blockquote>
KOLOM 1
</blockquote>
</div>
<div class="kolom2" align="center">
<blockquote>
KOLOM 2
</blockquote>
</div>
</div>
<div class="kolom1" align="center">
<blockquote>
KOLOM 1
</blockquote>
</div>
<div class="kolom2" align="center">
<blockquote>
KOLOM 2
</blockquote>
</div>
</div>
<div class="footernya" align="center">
<blockquote>
FOOTER
</blockquote>
</div>
</div>
<blockquote>
FOOTER
</blockquote>
</div>
</div>
</body>
</html>
nanti hasilnya kurang lebih kaya gini .
</html>
nanti hasilnya kurang lebih kaya gini .
Semoga bermanfaat ..
0 komentar:
Posting Komentar