Post 
Pada tutorial kali ini kita akan membuat desain layout web
seperti tutorial sebelumnya kita definisikan dulu atribut-atribut yang dibutuhkan ke dalam format .css. simpan file tersebut langkah berikutnya adalah membuat index utamanya...
langsung saja saya berikan source codenya... silahkan dipelajari
berikut ini atribut-atribut yang dibutuhkan:
#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;
}
selanjutnya adalah kode utama untuk membuat desain layout:
<!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="tgs31.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>
Semoga bermanfaat...
Amin....
0 komentar:
Posting Komentar