Sebelumnya kita pahami terlebih dahulu kode-kode nya. Pada umumnya kode pokok sebuah web adalah seperti berikut:
<!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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>HTML WEB</title>
</head>
<body>
</body>
</html>
Untuk membuat web menjadi 3 kolom. Caranya seperti berikut:<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>HTML WEB</title>
</head>
<body>
</body>
</html>
Copas skrip css berikut dan simpan dengan nama style.css:
*{margin:0 auto; padding:0}
body{background:#c0c0c0;
font-family:verdana; font-size:10px; color:#4c4e55;
}
#container{width:1007px; height:1369px;
background:url('bg.jpg') no-repeat; overflow:hidden;
}
#header{height: 150px;
border: 1px solid #009900;
}
#logo{width:300px; float:left}
.gmbr_logo{margin:45px 0px 0px 50px;}
#menu{width:700px; float:right;}
#menu ul{margin:60px; float:right; list-style:none;}
#menu li{float:left;}
#menu a{display:block; padding:7px 12px; text-decoration:none; font-weight:bold;
font-family:arial; font-size:14px; color:#313132;
}
#menu a:hover {background:#FFCC00; text-decoration:underline;}
#sidebar_kiri{float:left; width:250px; height:1000px; margin:3px 0;
padding:3px; border:1px solid #009900;
}
#center{float:left; width: 577px; height:1000px; margin:3px; padding:3px;
border:1px solid #009900;
}
#sidebar_kanan{float:left; width:150px; height:1000px; margin:3px 0;
padding: 3px; border: 1px solid #009900;
}
#footer{height:201px; border:1px solid #009900;
clear: both;
}
body{background:#c0c0c0;
font-family:verdana; font-size:10px; color:#4c4e55;
}
#container{width:1007px; height:1369px;
background:url('bg.jpg') no-repeat; overflow:hidden;
}
#header{height: 150px;
border: 1px solid #009900;
}
#logo{width:300px; float:left}
.gmbr_logo{margin:45px 0px 0px 50px;}
#menu{width:700px; float:right;}
#menu ul{margin:60px; float:right; list-style:none;}
#menu li{float:left;}
#menu a{display:block; padding:7px 12px; text-decoration:none; font-weight:bold;
font-family:arial; font-size:14px; color:#313132;
}
#menu a:hover {background:#FFCC00; text-decoration:underline;}
#sidebar_kiri{float:left; width:250px; height:1000px; margin:3px 0;
padding:3px; border:1px solid #009900;
}
#center{float:left; width: 577px; height:1000px; margin:3px; padding:3px;
border:1px solid #009900;
}
#sidebar_kanan{float:left; width:150px; height:1000px; margin:3px 0;
padding: 3px; border: 1px solid #009900;
}
#footer{height:201px; border:1px solid #009900;
clear: both;
}
Selanjutnya masukkan kode css di atas ke dalam koding html dengan cara menambahkan koding:
<link rel="stylesheet" type="text/css" href="style.css">
diantara kode:
</title> dan </head>
Dan juga masukkan kode berikut:
<div id="container">
<div id="header">
</div>
<div id="sidebar_kiri">
</div>
<div id="center">
</div>
<div id="sidebar_kanan">
</div>
<div id="footer">
</div>
</div>
<div id="header">
</div>
<div id="sidebar_kiri">
</div>
<div id="center">
</div>
<div id="sidebar_kanan">
</div>
<div id="footer">
</div>
</div>
diantara:
<body> dan </body>
Copas skrip berikut:
<div id="logo">
<p><img class="gmbr_logo" src="logo.png"></p>
</div>
<div id="menu">
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Service</a></li>
<li><a href="#">Support</a></li>
<li><a href="#">Contact</a></li>
</ul>
</div>
<p><img class="gmbr_logo" src="logo.png"></p>
</div>
<div id="menu">
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Service</a></li>
<li><a href="#">Support</a></li>
<li><a href="#">Contact</a></li>
</ul>
</div>
Taruh dibawah tag:
<div id=”header”>
0 komentar:
Posting Komentar