Temen2 yang nglewati bLog ini, ney Q punya sedikit informasi dalam membangun sebuah web menggunakan CSS, sebelum kita membuat webnya, yg harus kita lakukan adalah membuat desain layoutnya dengan hasil sebagi berikut...
Berikut adalh source code HTML beserta CSSnya...
Note CSS yang di coment yaChh..
Selamat Mencoba..
<!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="tgs1.1.css" type="text/css" />
</head>
<body>
<div id="wrapper">
<div id="header">Header</div>
<div id="inner">
<div id="sidebar">Sidebar</div>
<div id="top">Top</div>
<div id="content">Content</div>
<div id="right">Right</div>
<div id="footer">Footer</div>
</div>
</div>
</body>
</html>
Untuk CSSnya..
#wrapper {
margin: auto;
width: 1000px;
border: 1px solid red;
}
#header {
height: 110px;
border:1px solid blue;
}
#inner {
float: left;
margin: 3px 0;
border: 1px solid black;
}
#sidebar {
float: left;
margin-right: 5px;
width: 175px;
height: 357px;
border: 1px solid red;
}
#top {
float: left;
width: 813px;
height: 135px;
border: 1px solid green;
}
#content {
float: left;
margin-right: 5px;
width: 450px;
height: 220px;
border: 1px solid blue;
}
#right {
float: right;
width: 355px;
height: 165px;
border: 1px solid red;
}
#footer {
clear:both;
height: 50px;
border: 1px solid blue;
}
</span>
Tidak ada komentar:
Posting Komentar
Alhamdulillah akhirnya bisa juga...
Temen2 yang nglewati bLog ini, ney Q punya sedikit informasi dalam membangun sebuah web menggunakan CSS, sebelum kita membuat webnya, yg harus kita lakukan adalah membuat desain layoutnya dengan hasil sebagi berikut...
Berikut adalh source code HTML beserta CSSnya...
Note CSS yang di coment yaChh..
Selamat Mencoba..
<!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="tgs1.1.css" type="text/css" />
</head>
<body>
<div id="wrapper">
<div id="header">Header</div>
<div id="inner">
<div id="sidebar">Sidebar</div>
<div id="top">Top</div>
<div id="content">Content</div>
<div id="right">Right</div>
<div id="footer">Footer</div>
</div>
</div>
</body>
</html>
Untuk CSSnya..
#wrapper {
margin: auto;
width: 1000px;
border: 1px solid red;
}
#header {
height: 110px;
border:1px solid blue;
}
#inner {
float: left;
margin: 3px 0;
border: 1px solid black;
}
#sidebar {
float: left;
margin-right: 5px;
width: 175px;
height: 357px;
border: 1px solid red;
}
#top {
float: left;
width: 813px;
height: 135px;
border: 1px solid green;
}
#content {
float: left;
margin-right: 5px;
width: 450px;
height: 220px;
border: 1px solid blue;
}
#right {
float: right;
width: 355px;
height: 165px;
border: 1px solid red;
}
#footer {
clear:both;
height: 50px;
border: 1px solid blue;
}
</span>