Yang kita butuhkan adalah membuat kelas-kelas atau bagian-bagian dengan menggunakan tag <div> seperti yang sudah kita pelajari pada tutorial sebelum nya.
Dan menggunakan syntax css sederhana.Seperti pada umum nya web mempunyai head, body, footer dan sidebar.
Perlu di ingat untuk membuat tampilan WEB atau layout WEB kita harus terlebih dahulu memahami tentang kelas html seperti pada tutorial sebelum nya agar memudahkan dalam membuat layout.
Langkah Pertama.
Kita harus membuat syntax Css_nya :
body{
background:silver;
text-align:center;
}
#kotak{
width:900px;
height:650px;
margin:0px auto;
}
#kepala{
width:900px;
height:250px;
background:red;
}
#badan{
width:900px;
height:450px;
background:white;
float:left;
}
#sidebar{
width:200px;
height:450px;
background:green;
float:left;
}
#kaki{
width:900px;
height:100px;
background:blue;
float:left;
}
Langkah Kedua.
Kita harus membuat syntax untuk html_nya
<html>
<head>
<title>Layout Website</title>
<link href="style.css" rel="stylesheet" type="text/css">
</head>
<body>
<div id="kotak">
<div id="kepala">
<h1>Judul Website</h1>
</div>
<div id="badan">
<div id="sidebar">
<h3>sidebar</h3>
</div>
<h1>Body<h1>
</div>
<div id="kaki">
<h1>Footer</h1>
</div>
</div>
</body>
</html>
dan hasilnya adalah seperti gambar berikut ini...
Gampangkan sahabat....
Selamat mencoba...
Inspirasi by : www.carikode.com
Tidak ada komentar:
Posting Komentar