Pembagian ini dilakukan agar rancangan layout yang kita buat terlihat lebih rapih dan tersusun dengan baik.
Pada tahapan kali ini, kita akan coba membuat rancangan layout dengan menggunakan HTML dan CSS.
Oke, langsung aja kita coba.. copy script HTML 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>Desain Layout Sederhana</title>
<link rel="stylesheet" href="mystyle.css" type="text/css" />
</head>
<body>
<div id="wrapper">
<div id="header">
Header
</div>
<div id="inner">
<div id="sidebar">
Sidebar
</div>
<div id="content">
Content
</div>
</div>
<div id="footer">
Footer
</div>
</div>
</body>
</html>
setelah itu copy script CSS nya :
#wrapper {
margin: auto;
width: 750px;
border: 1px solid red;
}
#header {
height: 80px;
border: 1px solid blue;
}
#inner {
float: left;
margin: 5px 0;
border: 1px solid black;
}
#sidebar {
float: left;
margin-right: 20px;
width: 180px;
height: 330px;
border: 1px solid red;
}
#content {
float: left;
width: 544px;
height: 330px;
border: 1px solid green;
}
#footer {
clear: both;
height: 50px;
border: 1px solid blue;
}
beri nama mystyle.css dan simpan dalam satu folder dengan file html yang tadi kita buat.
dan hasilnya..
selamat mencoba..!!
Tidak ada komentar:
Posting Komentar