contoh layout sederhana dengan html dan css

berikut adalah contoh halaman web yang di buat dengan html dan css

ketik kode html:

<html>
<Header>
<title>html+css</title>
<link href="style.css" rel="stylesheet" type="text/css">
</Header>
<body>
<div id="page">
<div id="header"><h1>Tutorial HTML</h1></div>
<div id="iklan1">iklan 750x15</div>
<div id="menuu">Menu</div>
<div id="iklan2">iklan 728x90</div>
<div id="cari">cari 250x32</div>
<div id="vmenu"><h1>336 x 280</h1></div>
<div id="content">Content</div>
<div id="footer">copyright@muhathir@gmail.com</div>
</div>
</body>
</html>

kemudian simpan. dan ketik kode css nya

div#page {
border:3px groove;
width:1004px;
margin:0 auto;
padding:5px;
text-align:left;
position:relative}
div {text-align:left;}
div#header {
border:3px groove;
width:1000px;
height:90px;
text-align:center;}
div#iklan1 {
border:3px groove;
width:750px;
height:15px;
text-align:center;
margin:10px 125px 10px 125px; }
div#menuu {
border:3px groove;
width:1000px;
height:40px;
text-align:center;
margin:10px 0 10px 0px; }
div#iklan2 {
border:3px groove;
width:728px;
float:left;
height:90px;
text-align:center;
margin:0px 0px 10px 0px; }
div#cari {
border:3px groove;
width:250px;
margin:0px 0px 70px 750px;
height:32px}
div#vmenu {
border:3px groove;
float:left;
width:336px;
margin:0px 0 10px 0px;
height:280px;}
div#content {
border:3px groove;
width:650px;
margin:10px 0 10px 350px;
height:280px}
div#footer {
border:3px groove;
width:1000px;
height:20px;
text-align:center;}

simpan dengan nama style.css

contoh layout sederhana dengan html dan css

0 Response to "contoh layout sederhana dengan html dan css"

Post a Comment