Tutorial membuat template website

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
Langsung saja, silahkan buka code editor yang sering anda gunakan misalnya notepad++, sublime dkk. Buat sebuah file misalnya diberi nama index, jangan lupa format dari file ini ada html. Berikut code yang digunakan untuk index.html:

<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;
}

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.

18 comments:

  1. 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...

    ReplyDelete
    Replies
    1. 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 .

      Delete
    2. tq gan dah dibales. tenyata gara2 file css nya saya satukan gak pisah jadinya benrantakan

      Delete
    3. owh jadi dah ketemu masalahnya, oke gan kalo gitu :D

      Delete
  2. footernya kok gak bisa tampil mas..
    smuanya bisa cuman footernya aja yang gak tampil..

    ReplyDelete
    Replies
    1. ga bisa tampil gimana gan? coba taruh di jsfiddle .
      Apakah code nya udah sama kayak diatas?

      Delete
  3. terimakasih mas admin,,, artikelnya sangat bermanfaat untuk saya...

    salam kenall...
    Ki Sekar
    by : www.mustikasakralspiritual.com

    ReplyDelete
  4. This comment has been removed by a blog administrator.

    ReplyDelete
  5. 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..

    ReplyDelete
    Replies
    1. 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

      Delete
  6. terimakasih sob untuk tutorialnya, sangat membantu banget..
    http://acemaxsshop.com/obat-radang-paru-paru-tradisional/

    ReplyDelete
  7. 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 :)

    ReplyDelete
  8. makasih info semoga berguna buat orang banyak
    http://www.sumberindonesia.com/
    http://gula77.blogspot.co.id

    ReplyDelete
  9. makasih info semoga berguna buat orang banyak
    http://www.sumberindonesia.com/
    http://gula77.blogspot.co.id

    ReplyDelete
  10. This comment has been removed by a blog administrator.

    ReplyDelete
  11. nice informasinya kawan
    http://essenaquatic.xyz

    ReplyDelete