Untuk membuat website kita harus memiliki pemikiran tentang bagaimana layout dari sebuah website tersebut. Maka dari itu tutorial ini sangatlah penting bagi kawan pembaca yang baru mengenal HTML dan CSS. Mau tahu bagaimana cara membuat layout sederhana website? Simak langkah-langkah selanjutnya.








Membuat layout atau tampilan web yang kita butuhkan adalah membuat kelas-kelas atau bagian-bagian .dengan menggunakan tag <div> seperti yang sudah kita pelajari pada tutorial sebelum nya. Dan menggunakan syntax css sederhana.Seperti pada umum nya web mempunyai head, body, footer dan sidebar.
Perlu di ingat di asumsikan untuk membuat tampilan web atau layout web kita harus terlebih dahulu memahami tentang kelas html seperti pada tutorial sebelum nya agar memudahkan dalam membuat layout.


Syntax CSS:

body{
            background:gray;
            text-align:center;
            font-family:Arial;
}
#kepala{
            width:auto;
            padding:20px;
            background:#09c;
            color:#fff;
}
#badan{
            width:72%;     
            background:#ff9;
            padding:2%;
            height:400PX;
            float:right;
}
#sidebar{
            width:20%;     
            height:400px;
            background:#6f9;
            padding:2%;
            float:left;
}
#kaki{
            width:1350px; 
            height:50px;
            background:#333;
            color:#fff;
            float:left;
}


Syntax html:

<html>
<head>
            <title>JUDUL WEBSITE</title>
            <link href="layout.css" rel="stylesheet" type="text/css">
</head>
<body>

            <div id="kepala">
                        <h1>Judul Website</h1>
            </div>
            <div id="sidebar">
                        <h3>SIDEBAR</h3> 
            </div>
            <div id="badan">
                       
                        <h1>BODY</h1>
            </div>
            <div id="kaki">
                        FOOTER
            </div>


</body> 
</html>


Pada contoh ini saya menggunakan 5 kelas atau bagian, pada bagian header saya memberi nama kepala, pada bagian body dengan nama badan, sidebar, dan footer dengan nama kaki, dan ke empat kelas tersebut saya letakkan di dalam kelas kotak sebagai dasar letak nya.
Seperti pada tutorial sebelum nya saya menggunakan EXTERNAL CSS STYLE sebagai pengatur ukuran dan warna. Kira- kira tampilan nya seperti ini:






Sahabat Cari kode bisa mengembangkan sendiri warna dan leteknya sesuai keinginan. Karena pada tutorial ini kita hanya menjelasakan dasarnya, dengan warna yang berbeda-beda agar pemula yang ingin belajar bisa lebih mudah memahami fungsi dan letaknya. Dan pastikan anda selalu mempraktekkannya langsung bisa mudah untuk memahami setiap baris dari kode html.