Dalam membuat sebuth layoud desain web terlebih dahulu kita harus membuat koding HTML.
langsung saja kita peraktikan, langkah langkah yang harus kita kerjakan adalah :
Tahap 1 :
Kita harus membuat script html dasar scriptnya adalah :
<html><head><meta charset="utf-8"><title>Layout Website Sederhana</title></head><div class=”wrap”></div></body></html>Tahap 2 :
Mendesain dengan script HTML scriptnya adalah :
Koding HTML Biasa
<html>
<head>
<meta charset="utf-8">
<title>Layout Website Sederhana</title>
</head>
<body>
<div class="wrap">
<div class="header">
<h1>HEADER</h1>
</div>
<div class="main">
<div class="content">
<h2>CONTENT</h2>
<p>Halo kawan, ini konten website standar</p>
</div>
<div class="sidebar">
<h2>SIDEBAR</h2>
</div>
<div class="clear"></div>
</div>
<div class="footer">
<center><p>Copyright © 2015 By M Saehul Hadi-All right reserved</p></center>
</div>
</div>
</body>
</html>
Tahap 3 :
Mendesain dengan script CSS scriptnya adalah :
*{margin:0}
body{
font-family:arial,times new roman;
}
.wrap{
width:1000px;
margin:0 auto;
}
.header{
width:auto;
background:#09C;
padding:20px;
color:#fff;
}
.main{
width:100%;
background:#6f9;
}
.content{
float:left;
width:66%;
background:#ff9;
padding:2%;
min-height:400px;
}
.sidebar{
float:right;
width:26%;
background:#6f9;
padding:2%;
}
.clear{clear:both}
.footer{
width:auto;
padding:5px 10px;
background:#333;
color:#fff;
}
Tahap 4 :
Mengkoneksikan script HTML dengan CSS scriptnya adalah :
<html>
<head>
<meta charset="utf-8">
<title>Layout Website Sederhana</title>
<link rel="stylesheet" href="style.css"/>
</head>
<body>
<div class="wrap">
<div class="header">
<h1>HEADER</h1>
</div>
<div class="main">
<div class="content">
<h2>CONTENT</h2>
<p>Halo kawan, ini konten website standar</p>
</div>
<div class="sidebar">
<h2>SIDEBAR</h2>
</div>
<div class="clear"></div>
</div>
<div class="footer">
<center><p>Copyright © 2015 By M Saehul Hadi-All right reserved</p></center>
</div>
</div>
</body>
</html>
Untuk lebih jelasnya silahkan download tutorial bentuk Pdf_nya dibawah ini :
Tidak ada komentar:
Posting Komentar