Desain Halaman Website Dengan HTML Dan CSS | Sebelum kita melangkah lebih jauh untuk membuat aplikasi berbasis website yang lebih rumit, ada baiknya kita mulai dari yang paling mudah dan sederhana, agar mudah di pahami, jadi ketika telah memahami maka akan dengan mudah untuk mengembangkan sendiri.
Pada tutorial kali ini, kita akan bahas Cara Desain Halaman Website Dengan HTML Dan CSS dengan sangat sederhana dan mudah, silahkan ikuti langkah berikut ini :
Di sini saya asumsikan anda telah memahami HTML Dasar, jika belum faham silahkan fahami dulu tutorial Belajar HTML Dasar yang bisa dilihat Disini
Mari kita mulai dengan membuat file html dengan cara buka text editor lalu ketikkan script di bawah ini :
<html>
<title>
Desain Halaman Website
</title>
<head>
<link href="style.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div id=container>
<div class=head>
Ini Header
</div>
<div class=body>
<div class=sidebar>
Ini Sidebar
</div>
<div class=content>
Ini Content
</div>
</div>
<div class=footer>
Ini Footer
</div>
</div>
</body>
</html>
Simpan dengan nama desain.html
Kemudian buat file css nya, ketikkan script dibawah ini :
body {
background:#fff;
font:#000000;
}
#container {
margin-top:5px;
width:800px;
height:600px;
border:0px #000000 solid;
position:absolute;
left:50%;
margin-left:-400px; /* (300/2) */
}
.head {
width:auto;
height:150px;
border:1px #000000 solid;
margin-bottom:10px;
text-align:center;
}
.body {
width:auto;
height:370px;
border:0px #000000 solid;
margin-bottom:10px;
text-align:center;
}
.sidebar {
width:200px;
height:100%;
border:1px #000000 solid;
margin-bottom:10px;
float:left;
text-align:center;
}
.content {
width:590px;
height:100%;
border:1px #000000 solid;
margin-bottom:10px;
float:right;
text-align:center;
}
.footer {
width:auto;
height:50px;
border:1px #000000 solid;
margin-bottom:10px;
text-align:center;
}
lalu simpan dengan nama style.css letakkan dalam folder yang sama dengan desain.html tadi, kalu sudah silahkan klik dua kali file dengan nama desain.html, kurang lebih tampilannya bisa dilihat Disini dan Source Code lengkapnya bisa di download Disini.
Demikian tutorial singkatnya, semoga bermanfaat.
0 Response to "Desain Halaman Website Dengan HTML Dan CSS"
Post a Comment