Cara Membuat Layout Website Sederhana Dengan CSS

Cara Membuat Layout Website Sederhana Dengan CSS - Hai sobat, pada tutorial kali ini saya akan membahas Cara Membuat Layout Website Sederhana Dengan CSS

APA ITU CSS ?
CSS adalah bahasa style sheet yang digunakan untuk mengatur tampilan dokumen. Dengan adanya CSS memungkinkan kita untuk menampilkan halaman yang sama dengan format yang berbeda.

Bahan - bahan :

Pertama buat dulu file bernama index.php dan style.css
Simpan didalam satu folder yang sama

sobat bisa mengganti file index.php menjadi index.html

Langkah - langkah :

Isi file index.html sebagai berikut :


<!DOCTYPE html>
<html>
  <head>
    <title>[+] Welcome To My Website [+]</title>
    <link rel="stylesheet" type="text/css" href="style.css">
  </head>
<body>
<div class="wrapper">
<div class="header"></div>
<div class="menu">
<ul>
  <li><a href="index.html">Home</a></li>
  <li><a href="profil.html">Profil</a></li>
  <li><a href="galeri.html">Galeri</a></li>
  <li><a href="kontak.html">Kontak</a></li>
  <li><a href="bukutamu.html">Buku tamu</a></li>
</ul></div>
<div class="kiri">
<h2>Home</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec vitae semper arcu. Fusce condimentum ultrices elementum. Maecenas adipiscing ullamcorper ante, in viverra velit imperdiet at. Nam sollicitudin consectetur tincidunt. Nam venenatis nunc ut sapien pellentesque venenatis. Donec in risus elit. Duis nec lectus quam. Pellentesque velit elit, iaculis in pharetra nec, posuere in nulla. Nunc et nulla eu metus interdum scelerisque. Nunc ultricies suscipit ligula, non vulputate nunc semper malesuada. Maecenas id euismod leo. Praesent vitae lectus sapien, id mattis eros. Integer non nulla felis, in pellentesque nunc. Mauris convallis dui in dui adipiscing tempor. Donec ornare sapien sed nisi adipiscing gravida. Nam volutpat pharetra lectus, euismod fermentum ipsum mollis quis.</p>
<hr>
</div>
<div class="kanan">
<ul>
  <li><a href="index.html">Home</a></li>
  <br><li><a href="profil.html">Profil</a></li>
  <br><li><a href="galeri.html">Galeri</a></li>
  <br><li><a href="kontak.html">Kontak</a></li>
  <br><a href="bukutamu.html">Buku tamu</a></li>
</ul></div>
<div class="footer">Copyright &copy; Khidir Zahid Muchtadiabillah. All right reserved</div>
</div>
</body>
</html>

Kalau sudah maka tampilan nya akan seperti ini :

Nah, kasus di sini adalah layout sobat masih belum diberi style, posisi yang belum benar, pewarnaan belum ada, tinggi dan lebar yang belum didefinisikan, dan sebagainya, sekarang kita akan isi file CSSnya supaya benar - benar sesuai dengan yang kita inginkan.


body{
    background:#ECECEC;
}

*{
    margin: 0px;
    padding: 0px;
}
.wrapper{
    width:930px;
    margin:0 auto;
    height:auto;
    background:transparent;
    color:#ffffff;
}
.header{
    width:900px;
    height:200px;
    margin: 0 auto;
    background:#000000;
    color:#ffffff;
    text-align: center;
    background-image: url(gambar-2.jpg);
}
.menu {
    width:900px;
    height:30px;
    margin: 0 auto;
    background:#81CFE0;
    color:#ffffff;
    padding-top: 10px;
}
.kiri{
    width:700px;
    height:400px;
    background:#ffffff;
    color:#000000;
    float: left;
    margin-left: 15px;
}
.kanan{
    width:200px;
    height:400px;
    background:#ffffff;
    color:#000000;
    float: left;
}
.footer{
    width:900px;
    background:#7f8c8d;
    color:#ffffff;
    clear: both;
    margin: 0 auto;
    text-align: center;
}

li{
    display: inline;
}
ul a{
    text-decoration: none;
    text-transform: uppercase;
    padding: 5px;
}
ul a:hover{
    text-decoration: underline;
    font-size: 20px;
;
}

Kalau sudah, simpan lalu buka file index.html nya
Tampilannya akan seperti ini :

Result

Cukup sekian tutorial Cara Membuat Layout Website Sederhana Dengan CSS, sampai jumpa di tutorial berikutnya. Terima kasih