Memahami Pembuatan Layout Web Sederhana Menggunakan CSS dan Fungsi Div
cara membuat layout web sederhana menggunakan CSS dan fungsi div. Sederhana sekali pembuatan layout menggunakan CSS, dalam sebuah tampilan web dasarnya mempunyai bagian-bagian seperti header, menu, sidebar, content, dan footer.
di bawah ini adalah contoh tampilan yang dapat dihasilkan dari css
1. buat lah file dgn nama. index.php
dan copast sript di bawah ini :
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title>Belajar CSS bersama </title>
<link rel="stylesheet" href="style.css" type="text/css" />
</head>
<body>
<div id="wrapper">
<div id="header">
Header</div>
<div id="inner">
<div id="sidebar">
Sidebar
</div>
<div id="inner2">
<div id="menu">
Menu
</div>
<div id="content">
Content
</div>
<div id="right">
Right
</div>
</div>
</div>
<div id="footer">
<div align="left">Footer
</div>
</div>
</div>
</body>
</html>
2. langkah ke dua buat lah file dengan nama style.css
#wrapper {
margin: auto;
width: 756px;
border: 1px solid Blue;
}
#header {
height: 70px;
border: 1px solid green;
}
#inner {
float: left;
margin: 5px 0;
border: 1px solid black;
}
#sidebar {
float: left;
margin-right: 20px;
width: 180px;
height: 330px;
border: 1px solid red;
}
#inner2 {
float: left;
width: 550px;
height: 330px;
border: 1px solid green;
}
#menu{
height: 70px;
border: 1px solid red;
}
#content {
float: left;
margin-right: 20px;
width: 320px;
height: 250px;
border: 1px solid red;
}
#right {
float: right;
width: 205px;
height: 200px;
border: 1px solid green;
}
#footer {
clear: both;
height: 50px;
border: 1px solid green;
}
margin: auto;
width: 756px;
border: 1px solid Blue;
}
#header {
height: 70px;
border: 1px solid green;
}
#inner {
float: left;
margin: 5px 0;
border: 1px solid black;
}
#sidebar {
float: left;
margin-right: 20px;
width: 180px;
height: 330px;
border: 1px solid red;
}
#inner2 {
float: left;
width: 550px;
height: 330px;
border: 1px solid green;
}
#menu{
height: 70px;
border: 1px solid red;
}
#content {
float: left;
margin-right: 20px;
width: 320px;
height: 250px;
border: 1px solid red;
}
#right {
float: right;
width: 205px;
height: 200px;
border: 1px solid green;
}
#footer {
clear: both;
height: 50px;
border: 1px solid green;
}
script di atas hanya menerangkan tentang pembuatan layout dgn css dan fungsi div. anda dapat mengembangkan lebih baik dengan campuran animasi gabungan warna dan gambar.
selamat mencoba..
