Langkah yang diambil :
1. Buat kode css dengan nama "clear2a.css" (untuk nama file bisa dirubah sesuai dengan kebutuhan asal tetap dalam ekstensi file .css/ file nama diatas hanya sebagai contoh), kode css dapat dilihat dibawah ini :
#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;
}
#content1 {
float: left;
width: 544px;
height: 330px;
border: 1px solid green;
}
#top {
float: left;
width: 544px;
height: 120px;
border: 1px solid blue;
}
#content {
float: left;
width: 374px;
height: 207px;
border: 1px solid red;
}
#right {
float: right;
width: 150px;
height: 150px;
border: 1px solid orange;
}
#footer {
clear: both;
height: 50px;
border: 1px solid blue;
}
2. Setelah kode tersebut disimpan dalam kode css, dilanjutkan dengan membuat kode html dengan nama file yang sama yaitu clear2a.html, kode html dapat dilihat dibawah 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="clear2a.css" type="text/css" />
</head>
<body>
<div id="wrapper">
<div id="header">
Header
</div>
<div id="inner">
<div id="sidebar">
Sidebar
</div>
<div id="content1">
<div id="top">
Top
</div>
<div id="content">
Content
</div>
<div id="right">
Right
</div>
</div>
</div>
<div id="footer">
Footer
</div>
</div>
</body>
</html>
3. Kode css dan html telah dibuat selanjutnya lihat hasil akhir dengan masuk dalam localhost atau buka langsung dari kode html. (jika hasil yang diperoleh sesuai gambar diatas berarti anda berhasil)
SELAMAT MENCOBA ^_^ !!
Tidak ada komentar:
Posting Komentar