Sebuah template website memang berbeda-beda, namun dibalik perbedaan itu ada satu hal persamaan pada setiap website. Ya, mereka selalu mempunyai struktur yang sama, yaitu header, content dan footer. Apakah membuat template website itu susah? Dibilang susah ngga, dibilang gampang juga tidak! Ini tergantung dari kreatifitas orang yang membuatnya. Kali ini saya akan berbagi tutorial membuat dasar sebuah template website.
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 untuk belajar google adsense
cara menambahkan menu seperti dropdown di dalam nya gimana gan? saya ikuti template ini menu nya jadi. tapi content + sidebar nya jadi di samping menu. mau saya menu nya di bawah header dan content + sidebar di bawah menu help ya...
Halo mas,
Itu menu dropdownya disimpen di section mana?
Coba tambahkan code css ini di class content.
Code css untuk class content dibuat seperti ini:
.content{
overflow:hidden;
clear:both;
}
Kalo masih belum bisa, coba codenya simpen di pastebin.com :D
Nanti sya coba bantu .
tq gan dah dibales. tenyata gara2 file css nya saya satukan gak pisah jadinya benrantakan
owh jadi dah ketemu masalahnya, oke gan kalo gitu :D
footernya kok gak bisa tampil mas..
smuanya bisa cuman footernya aja yang gak tampil..
ga bisa tampil gimana gan? coba taruh di jsfiddle .
Apakah code nya udah sama kayak diatas?
terimakasih mas admin,,, artikelnya sangat bermanfaat untuk saya...
salam kenall...
Ki Sekar
by : www.mustikasakralspiritual.com
This comment has been removed by a blog administrator.
Maaf mas Rangga ato yg lain mgk bisa jawab,, untuk style.css maksudnya di mssukan gitu di html di setiap kategori masing2 ato gimana,, maklum newbe baru belajar,, tolong ya mau jawab,, thks..
jadi gini mas ziggy, mas buat file namanya style.css nah isinya itu khusus untuk style saja. bukan dimasukan ke html, tpi dalam satu folder ada file html dan css. di html mas masukin strukturnya, untuk stylenya mas masukan ke style.css
terimakasih sob untuk tutorialnya, sangat membantu banget..
http://acemaxsshop.com/obat-radang-paru-paru-tradisional/
hallo sy masih pemula tentang web design. mau tanya, kenapa inline elemen bisa di set width dan height nya hanya karena attribute float nya di set. tolong penjelasannya :)
berhasil gan
makasih info semoga berguna buat orang banyak
http://www.sumberindonesia.com/
http://gula77.blogspot.co.id
makasih info semoga berguna buat orang banyak
http://www.sumberindonesia.com/
http://gula77.blogspot.co.id
This comment has been removed by a blog administrator.
Salam kenal
nice informasinya kawan
http://essenaquatic.xyz