Cara Mudah Membuat Layout Website. -sebenarnya sudah banyak situs-situs yang menyediakan layanan pembuatan website gratis dan langsung jadi, namun kita buta akan pengetahuan, dan cara membuatnya seperti apa sih didalam sebuah website yang sudah jadi itu, dan akhirnya kita jadi bertanya-tanya. Di artikel ini kita akan membahas tentang cara membuat layout sebuah website silahkan ikuti caranya dibawah ini:
Perhatikan caranya dibawah ini:
- Buka text editor kalian terserah mau pakai editor apa, sublime, php designer8, dreamweaver, atau notpad++.
- Buat file index.html
- Ikuti langkah dibawah ini.
Baiklah kini saatnya kita mulai mengisikan codingan dibawah ini kedalam index.html
1. Tuliskan atau pastekan syntax html ini kedalam index.html yang telah kkalian buat.
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="content-type"
content="text/html" />
<meta name="author"
content="lolkittens" />
<title>Layout</title>
</head>
<body>
>----------------<
</body>
</html>
2. Kemudian isikan syntax dibawah ini di dalam <body>--disini--</body>.
<div id="wrapper">
<div class="head">
<p>HEADER</p>
</div>
<div class="nav">
<p>NAVBAR</p>
</div>
<div class="content">
<p>CONTENT</p>
<br />
<br />
<br />
<p>ROY4LTY.BLOGSPOT.COM</p>
</div>
<div class="sidebar">
<p>SIDEBAR</p>
</div>
</div>
<div class="footer">
<p>FOOTER</p>
</div>
3. Setelah langkah diatas sudah sellesai sekarang kita masukan design layout yang sudah jadi dibawah ini di atas code </head>.
<style type="text/css">
body{
background: black;
}
p{
text-align: center;
color: red;
text-autospace: punctuation;
}
#wrapper{
background: white;
width: 810px;
height: auto;
margin: auto;
}
.head{
height: 50px;
background-color: teal;
}
.nav{
background-color: maroon;
height: 30px;
}
.content{
width: 600px;
height: 400px;
float: left;
border: dotted 1px;
}
.sidebar{
width: 200px;
height: 400px;
float: right;
border: dotted 1px;
}
.footer{
margin: auto;
background-color: aqua;
width: 810px;
height: 30px;
clear: both;
}
</style>
0 comments:
Post a Comment