Membuat Template Website dengan CSS bagian 1

April 14th, 2012

Template atau kerangka wadah dalam sebuah website adalah sesuatu yang penting untuk diperhatikan. Template dan visual yang menarik  dalam sebuah website adalah penting agar pengunjung website merasa nyaman dan betah mengunjungi website tersebut. Artikel kali ini kita tidak membahas template yang seperti apa yang baik untuk diterapkan, tetapi di sini kita akan membuat template dari website itu sendiri. Lalu apakah kita akan membuat template menggunakan “table” ? Tidak! Kita coba membuat template/layout website  menggunakan CSS. Saya bukan ahli dalam CSS, tapi kita pasti bisa membuat template website menggunakan CSS :)

Berikut gambaran layout yang akan kita buat :

layout website - javaziez

Dari gambar di atas, kita akan membuat dua bagian konten, kiri dan kanan, dan dilengkapi sebuah header dan footer. Sederhana kan?

Pertama kita buat file bernama “index.html” dan “style.css” yang disimpan dalam sebuah folder yang sama. Mungkin kita harus loncat-loncat antara dua file ini untuk menjelaskan setiap kodenya :D

Oke, langsung saja kita buat kode untuk setiap file-nya.

index.html :

<html> 
<head> 
<title> Template Website Bagian 1 </title> 
<link rel="stylesheet" href="style.css" type="text/css" media="screen" />
</head> 
<body> 
  <div id="header">
    <div id="judul"> Judul Website </div> 
  </div> 
  <div id="container"> 
    <div id="kiri"> KONTEN KIRI </div> 
    <div id="kanan"> KONTEN KANAN<br /> KONTEN KANAN<br /> KONTEN KANAN<br /> KONTEN KANAN<br /> KONTEN KANAN<br /> KONTEN KANAN<br /> KONTEN KANAN<br /> KONTEN KANAN<br /> KONTEN KANAN<br /> KONTEN KANAN<br /> </div> 
    <div class="clearfloat"></div> 
  </div> 
  <div id="footer"> 
    <div id="copyright"> Copyright by Javaziez </div> 
  </div> 
</body> 
</html>

 

style.css :

 

#header
{
margin: 0 auto;
width: 900px;
height: 150px;
background-color: #4682B4;
}

#judul
{
font-size: 34px;
color: #F5DEB3;

position : relative;
top: 70px;
left: 20px;
}

#container
{
margin: 2px auto;
width: 900px;
background-color: #4682B4;
}

.clearfloat
{
clear: both;
}

#kiri
{
float: left;
width: 200px;
height: 400px;

background-color: #F5DEB3;
}

#kanan
{
float: right;
width: 700px;

background-color: #BB6601;
}

#footer
{
margin: 0 auto;
width: 900px;
height: 40px;
padding-top: 20px;

background-color: #4682B4;
}

#copyright
{
text-align: center;

background-color: #777001;
}

 

Tampilan yang dihasilkan :

 

template website - javaziez

 

Setelah kita membuat dua file tersebut, kita bahas satu per satu.

 

<link rel="stylesheet" href="style.css" type="text/css" media="screen" />

 

Di file “index.html” terdapat kode di atas di dalam tag “head”. Arti dari kode ini adalah html memanggil/menggunakan kode css dari file “style.css” yang berada pada folder yang sama dengan “index.html”.

 

Kita loncat ke file “style.css”

 

 

#header
{
margin: 0 auto;
width: 900px;
height: 150px;
background-color: #4682B4;
}

 

 

Kita membuat sebuah selector ID dengan nama “header”. Masih ingat tentang selector ID dan Class? Silahkan baca dulu artikel Perbedaan Selector ID dan Class dalam CSS.

 

 

margin: 0 auto;

 

 

Kita buat element ID header, misal sebuah kotak, mempunyai jarak 0 terhadap top dan bottom, dan jarak auto terhadap left dan right. Bernilai “auto” artinya kedua sisi kotak ini akan saling menjauh dari tepi sisi sampai si kotak memiliki width yang sudah diberikan kepadanya, nilai width dari kotak/header itu sendiri akan diberikan di kode selanjutnya. Jadi, si kotak akan berada di tengah layar  dan berada di atas tengah.

 

 

width: 900px;
height: 150px;
background-color: #4682B4;

 

 

Width dan height adalah nilai lebar dan tinggi dari kotak header itu dengan satuan pixel. Kenapa pixel? Sebenarnya menggunakan satuan persen (%) pun bisa. Tapi lebih direkomendasikan menggunakan pixel, karena dengan pixel, jika browser kita resize sebesar apapun, maka ukuran dan bentuknya pun tidak berubah. Berbeda dengan persen, dia akan menjadikan element me-risize dirinya sesuai ukuran tampilan browser yang di-risize. Setelah itu kita buat warna latar atau “background-color” header tadi. Warnanya? Up to You sih :) Selesai nih satu selector.  Ups, penempatan di file “index.html” nya belum. ok, cukup kita tuliskan di file “index.html” seperti ini untuk memanggil CSS ID “header” :

 

 

<div id="header">
   <div id="judul">
     Judul Website
   </div>
</div>

 

 

Kok ada ID “judul” di dalam ID “header”? Ok, sekalian kita jelaskan yang ini. Penempatan ID “judul” di dalam ID “header” sudah kita tuliskan

di “index.html”, sekarang tinggal kode css nya :

 

#judul
{
font-size: 34px;
color: #F5DEB3;

position : relative;
top: 70px;
left: 20px;
}

Dalam ID “judul” kita berikan ukuran font 34px, dengan warna font seperti yang terter di sana. Hasilnya, judul akan berada di dalam kotak “header” dengan ukuran dan warna font yang disebutkan tadi. Lalu bagaimana penempatannya? Di atas dituliskan “position: relative”.

Perlu diketahui sebelumnya, posisi element dalam CSS terdapat dua macam, relative dan absolute. Relative merupakan posisi yang dimiliki element dimana letak penempatannya berpatokan kepada element  yang menampungnya, dalam hal ini adalah ID “header”. Kalau dilihat, ada kode top dan left. Top adalah jarak atas element (judul) terhadap element penampungnya (header). Left adalah jarak samping kiri element (judul) terhadap element penampungnya (header).  Maka hasilnya ID “judul” akan berada di kiri bawah dalam kotak “header” (bisa dilihat di gambar hasil template). Lalu bagaimana dengan absolute? Perbedaannya, posisi absolute letak penempatannya berpatokan kepada layar browser atau pojok kiri atas browser. Jadi jika kode di atas kita ubah posisition-nya menjadi “absolute”, maka ID “judul” akan keluar dari kotak ID “header” dan berada di sebelah kiri “header”, silahkan dicoba. Agar lebih jelasnya, kita lihat gambar dimana perbedaan titik pusat (koordinat 0,0 ) kedua position tersebut.

absolute-relative position - javaziez

Selanjutnya adalah kode CSS “container” :

#container
{
margin: 2px auto;
width: 900px;
background-color: #4682B4;
}

 

“Container” adalah element yang menjadi sebuah wadah untuk konten kiri (#kiri) dan konten kanan (#kanan). Kita bisa lihat element “container” di gambar berikut yang ditunjuk panah merah (area berwarna biru).

 

container - javaziez

 

Dalam kodenya, “container” diberi margin atas bawah bernilai 2px, dan margin kanan kiri bernilai auto. Diberikan pula lebar 900px dan warna latar  #4682B4. Pemanggilan kode “container” di “index.html” akan dituliskan pula di dalam div “container” yaitu ID “kiri” dan ID “kanan”, serta class “clearfloat” (akan dijelaskan di bawah).

 

<div id="container">
  <div id="kiri">
    KONTEN KIRI
  </div>
  <div id="kanan">
  KONTEN KANAN<br /> KONTEN KANAN<br />
  KONTEN KANAN<br /> KONTEN KANAN<br />
  KONTEN KANAN<br /> KONTEN KANAN<br />
  KONTEN KANAN<br /> KONTEN KANAN<br />
  KONTEN KANAN<br /> KONTEN KANAN<br />
  </div>
  <div class="clearfloat"></div>
</div>

 

Kode CSS untuk ID kiri :

 

#kiri
{
  float: left;
  width: 200px;
  height: 400px;

  background-color: #F5DEB3;
}

Sudah tahu property “float”? float seperti sebuah “align” dalam pengetikan paragraf sebuah text. “justify”, “left”, “right”, dan “center” adalah jenis align dari pengetikan text. Begitu juga dalam CSS, terdapat align sebuah element yang disebut “float”. Pada kode di atas, ID “kiri” memiliki “float” bernilai “left”, yang artinya element “kiri” akan memojok ke samping kiri element penampungnya (container) dengan lebar dan tinggi 200px dan 400px. Didefinisikannya width dan height ID “kiri”, maka element ID “kiri” tidak akan bisa berubah lagi ukurannya yang artinya width dan height-nya fix. “kiri” nantinya akan kita gunakan untuk menampilkan menu website.

#kanan
{
  float: right;
  width: 700px;

  background-color: #BB6601;
}

ID “kanan” memiliki “float: right;” artinya memojok ke samping kanan. “width” dari “kiri” dan “kanan” harus kita perhitungkan dahulu dengan membagi dua dari total width “container”. Kode ID “kanan” sedikit berbeda dengan kode ID “kiri”. Perbedaannya, “kanan” tidak memiliki property “height”, artinya height “kanan” bernilai auto yaitu akan memendek atau memanjang ke bawah layar sesuai isi dari element “kanan”. Hal ini dilakukan karena element “kanan” akan berfungsi menampilkan content utama dari website yang tidak menentu banyaknya. Jika kita lihat lagi kode CSS untuk “container”, dia juga tidak didefinisikan height-nya, yang artinya height-nya auto.

Di dalam div “container” juga terdapat class “clearfloat”. Class ini akan selalu kita gunakan apabila kita menggunakan sebuah float dalam element sebelumnya. Coba kita hapus div “clearfloat” di “index.html”. Maka footer akan berada di bawah “kanan” dan disamping “kiri”. Hal ini menandakan, penempatan sebuah element setelah element yang memiliki float, maka element setelah element float tersebut akan mengikuti posisi element float. Maka dibuatlah sebuah element penetral yang mengembalikan posisi standar, dimana pada element itu kita gunakan property “clear” yang bernilai “both”, artinya menetralkan posisi dari sebelah kiri dan kanan. Berikut kode CSS class “clearfloat” :

.clearfloat
{
  clear: both;
}

 

Sekarang hanya bagian footer yang belum. Kode untuk ID “footer” sekaligus “copyright” :

 

#footer
{
  margin: 0 auto;
  width: 900px;
  height: 40px;
  padding-top: 20px;

  background-color: #4682B4;
}

#copyright
{
  text-align: center;

  background-color: #777001;
}

Untuk “footer”, ada yang perlu kita perhatikan. “footer” memiliki sebuah “padding” yang hampir sama dengan “margin”. Perbedaannya, “margin” memberikan jarak antara element A dengan element diluar A. Sedangkan “padding” memberikan jarak antara element A dengan element di dalam A. Di atas diberikan “padding”, karena di dalam element ID “footer” akan terdapat element ID “copyright”. Jadi akan ada jarak antara copyright dengan footer di bagian atas (padding-top). Karena kita ingin text copyright berada di tengah-tengah antara atas dan bawah element “footer”, maka kita berikan height 40px dan padding-top 20px, yang artinya setengah dari height “footer”. Ini baru di tengah antara atas dan bawah, belum ditengah antara kiri dan kanan. Bagaimana kodenya? Pada kode ID “copyright”, cukup kita berikan “text-align” bernilai “center” yang menjadikan text berada ditengah antara kiri dan kanan.

Lalu kenapa tidak menggunakan “margin: 0 auto;” seperti biasa? Karena ini bukan sebuah element/content, melainkan sebuah text. Coba Kita ubah “text-align: center;” dengan “margin: 0 auto;”, maka hasilnya text akan berada di samping kiri. Jika text copyright (ID “copyright”) disimpan pada sebuah content yang baru yang membentuk sebuah area seperti “header”, “container”, maka “margin: 0 auto;” pilihan yang tepat untuk menempatkan element berada di tengah.

Oke, terakhir kita tuliskan kode html-nya di “index.html” :

<div id="footer">
  <div id="copyright">
    Copyright by Javaziez
  </div>
</div>

Cukup panjang juga artikel kali ini :D Untuk kelanjutannya, mungkin kita akan lebih sedikit penambahan dan perubahannya.

Terima kasih :)

This entry was posted on Saturday, April 14th, 2012 at 15:32 and is filed under CSS. You can follow any responses to this entry through the RSS 2.0 feed. You can skip to the end and leave a response. Pinging is currently not allowed.

9 Responses to “Membuat Template Website dengan CSS bagian 1”

  1. 4riansyah Nusantara Says:

    Artikle yang bagus gan, saya cukup terbantu dengan tulisan anda ini..

    terima kasih tutorialnya, terus berikan tutorial yang bermanfaat gan. !! :)

  2. javaziez Says:

    terima kasih kembali :)

  3. Xivenchy Says:

    thx banged.. dari kmaren nyari yg ada penjelasannya

    xixixi~

  4. goku Says:

    thank you… very usefull…

  5. Majid Says:

    artikel yang bagus..
    sangat membantu…

  6. obat penyakit jantung Says:

    Wah boleh dicoba nih,,

  7. alfred Says:

    penjelasannya singkat padat dan jelas
    thanks banget bro !

  8. ace maxs Says:

    kunjungan malam infonya sangat bermanfaat sekali, makasih banyak gan..!!

  9. samuel Says:

    Bagus banget gan.!!!

Leave a Reply

*