copy scrip html ini save dengan nama ( index.html)
<html>
<head>
<title>home</title>
<meta http-equiv="Conten-type" content="text/html" charset="utf-8"/>
<link href="style.css" rel="stylesheet" type="text/css"/>
</head>
<body>
<div id="container">
<div id="header">
<div id="logo">
<h1>Logo website saya</h1>
</div>
</div>
<div id="menu">
<ul>
<li><a href="index.html">Beranda</a></li>
<li><a href="frofil.html">Profil</a></li>
<li><a href="portofolio.html">Portofoli</a></li>
<li><a href="kontak.html">Kontak</a></li>
</ul>
<div class="clearleft"></div>
</div>
<div id="main">
<div id="content">CONTENT</div>
<div id="side">BAGIAN TEPI</div>
<div class="ClearBoth"></div>
</div>
<div id="footer">
copy right buat layout by http://tianpakmuakhi.blogspot.co.id
</div>
</div>
</body>
</html>
copy scrip css ini save dengan nama ( style.css)
*{
margin:0; /*mengatur margin secara keseluruhan*/
padding:0;
}
body{
font-famili:arial, Helvetica,san-sherif;/*untuk menentukan jenis font secara keseluruhan pada website*/
font-size:0.9em;
}
.clearleft{
clear:left;/*ini di gunakan karena konten ikut sebaris dengan menu, maka harus di turunkan dengan menggunakan clear letp karna terjadi kerena kena left*/
}
.ClearBoth{
clear:both;
}
#container{
width:960px; /*mengatur lebar halaman*/
margin:0 auto; /**/
height: /**/
}
#header,{
margin-bottom: 10px;/*Mengatur jarak antara div id header dan div id dibawahnya yaitu div id menu*/
}
#menu ul{
list-style:none; /*membuang titik default pada list, jika kurang jelas silahkan bisa di hilangkan maka titik akan tampil*/
height:30px;
border-bottom:1px solid #000;
}
#menu ul li{
float:left; /*membuat rata ke kiri pada ul lis*/
}
#menu ul li a{
padding:0 20px; /*mengatur jarak tulisan link*/
line-height:30px;/*mengatur jarak antara atas dan bawah tulisan link*/
display: block;/*untuk menghilankan jarak antara tek a dan li sehingga masih mendapatkan efek mouse*/
text-decoration:none; /*Menghilankan garsi bawah pada text link*/
}
#menu ul li a:hover{
background-color: #000; /*mengatur beground tex menjadi warna hitam*/
color:#fff; /*karna begrounnya hitam maka tulisan di buat warna putih saat kena mouse*/
}
/*awal menyeleksi main yang terdiri dari 2 kolon yaitu content dan side*/
#main #content{
width: 680px;
/*background-color:red; */ /*baris ini di gunakan untuk bantuan beground agar kita bisa tau lebar halaman yang masih kita seleksi*/
float:left;
padding:10px;
}
#main #side{
width: 239px;
float:right;
padding:10px;
border-left:1px solid #000;
min-height: 300px;
}
/*akhir menyeleksi bagian conten yang terdiri dari conten dan side*/
#footer{
background-color: #000;
color: #fff;
padding:10px;
min-height:50px;
}
#logo{
color: blue;
font-size:30px;
}
