Goal dari tutorial ini adalah sebagai berikut:
 |
| Dasar membuat layout website |
<html>
<head>
<title>Membuat Layout sederhana</title>
<link href="style.css" type="text/css" rel="stylesheet">
</head>
<body>
<div class="container">
<div class="header">
<span class="title">Dipakai untuk Header</span>
</div>
<div class="content">
<div class="entry-content">
<span class="title">Isi dari konten</span>
</div>
<div class="sidebar">
<span class="title">Isi dari sidebar</span>
</div>
</div>
<div class="footer">
<span class="title">Isi untuk footer</span>
</div>
</div>
</body>
</html>
<head>
<title>Membuat Layout sederhana</title>
<link href="style.css" type="text/css" rel="stylesheet">
</head>
<body>
<div class="container">
<div class="header">
<span class="title">Dipakai untuk Header</span>
</div>
<div class="content">
<div class="entry-content">
<span class="title">Isi dari konten</span>
</div>
<div class="sidebar">
<span class="title">Isi dari sidebar</span>
</div>
</div>
<div class="footer">
<span class="title">Isi untuk footer</span>
</div>
</div>
</body>
</html>
Klik save, kemudian kita tambahkan style untuk index.html . Kemudian buat file bernama style dengan format .css , simpan satu folder dengan file index.html tadi.
Berikut code untuk style.css:
.container{
margin:0 auto;
max-width:978px;
}
.header{
background:red;
height:200px;
}
.content{
overflow:hidden
}
.entry-content{
background:#eee;
width:642px;
float:left;
display:inline;
height:500px;
}
.title{
font-size:40px;
font-weight:bold;
}
.sidebar{
background:#21E28D;
width:336px;
display:inline;
float:left;
height:500px;
}
.footer{
background:#333;
height:200px;
}
margin:0 auto;
max-width:978px;
}
.header{
background:red;
height:200px;
}
.content{
overflow:hidden
}
.entry-content{
background:#eee;
width:642px;
float:left;
display:inline;
height:500px;
}
.title{
font-size:40px;
font-weight:bold;
}
.sidebar{
background:#21E28D;
width:336px;
display:inline;
float:left;
height:500px;
}
.footer{
background:#333;
height:200px;
}
Kemudian buka lagi index.html di browser anda. Jika tampilannya sama dengan goal diatas maka anda sukses dalam tutorial ini. Sekian tulisan pengalaman ngajarcss tentang Tutorial membuat template website ini, semoga bermanfaat.
Comments