Membuat Layout Website dengan Div
Karena ada request dari teman saya yang meminta untuk dibuatkan tutorial mendesain website kali ini saya akan membagikan tutorial kusus untuk teman saya tercinta 😝 . Nah bagi kalian juga yang masih bingung membuat tata letak (layout) web anda bisa memcoba tutorial saya.
Langsung saja berikut cara singkat pada dan jelasnya :
- Buka editor HTML anda.
Disini saya menggunakan Adobe Dreamweaver CS6 karena mudah mengoprasikannya dan bisa langsung melihat hasilnya. - Buka lembar baru dengan format HTML
- Ketikan berikut pada bagian body
<div id="wrapper">
<div id="banner">
</div>
<div id="menutop">
</div>
<div id="columnleft">
</div>
<div id="columnright">
</div>
<div id="content">
</div>
<div id="footer">
</div>
</div> - Buat lembar baru dengan format CSS
- Ketikan berikut pada CSS
.wrapper{
width:1024px;
height:768px;
background:#09C;
}
.banner{
width:1024px;
height:220px;
background:#0C9;
}
.menutop{
width:1024px;
height:35px;
background:#CF0;
}
.columnleft{
width:220px;
height:438px;
background:#99C;
float:left;
}
.columnright{
width:220px;
height:438px;
background:#99C;
float:right;
}
.content{
width:584px;
height:436px;
background:#C00;
margin-left:220px;
}
.footer{
width:1024px;
height:75px;
background:#0F0;
float:left;
} - Kemudian Ketikan pada lembar HTML bagian head seperti berikut
<link href="Directory dimana anda menyimpan lembar kerja format CSS tadi" rel="stylesheet" type="text/css">
Untuk Lebih Jelasnya Silahkan Lihat Video Berikut
Thank To My Friends 🙏
