Membuat layout web tanpa tabel

Hai,, pa kabar nich?? Dah lama gak posting nich, dua minggu lebih kayaknya ya, sorry ya, hehehe…

O iya,, selamet hari raya idul fitri ya,,mohon maaf lahir dan batin. Telat ya ngucapinnya,, gak pa2 lah daripada gak sama sekali,,

Kemaren-kemaren khan (kemaren kapan ya?) saya dah sedikit apa itu layout dan juga alasan-alasan membuat layout web tanpa tabel, masih inget khan? Klo dah lupa coba baca aja lagi postingan yang ini dan ini.

Nah,,Kali ini saya akan coba bahas tentang cara ngebuat layout web tanpa menggunakan tabel. Tapi mungkin lebih ke praktek aja ya (langsung ke contoh).

Layout yang akan dicoba kali ini adalah layout standar yang memiliki header di atasnya, sidebar di kiri trus ada postingan dan juga ada footer di bawahnya. Kira-kira klo dah jadi kayak gini nich…

Pertama-tama,, kita buat dulu file htmlnya, namanya index.html biar enak. Karena kita cuman buat layout, jadi di file htmlnya itu kita bagi-bagi yang mana daerah header, sidebar , posting atau footer. Dalam hal ini cara menbagi daerah-daerah tersebut kita gunakan tag div (bukan tabel).

File htmlnya kira-kira isinya kayak gini :


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Layout</title>
<link href="style.css" rel="stylesheet" type="text/css" />
</head>

<body>
<div id="wrapper">
   <div id="header">
   </div>

   <div id="content">
      <div id="sidebar">
      </div>

      <div id="posting">
      </div>
  </div>

  <div id="footer">
  </div>
</div>
</body>
</html>

Klo kamu perhatikan, di file htmlnya itu ada tag div yang idnya wrapper ya? Gunanya buat apa ya?
Hmmm… kamu masih inget khan cara untuk ngebuat halaman web berada di tengah-tengah browser? Nah layout yang kita buat kali ini menggunakan teknik tersebut.

Trus di div yang idnya content, kita bagi dua jadi sidebar dan juga posting. Karena nantinya sidebarnya itu akan dibuat berada di sebelah kiri postingnya.

Nah, file html dah jadi, sekarang kita buat file cssnya yang isinya itu intinya adalah mengatur tag div-div yang kita buat.


body{
    background:#000000;
}
#wrapper {
    width:800px;
    margin:auto;
}
#header{
    background:#000099;
    height:200px;
}
#sidebar{
    background:#00CC66;
    float:left;
    width:250px;
    height:800px;
}
#posting{
    background:#FFFFFF;
    float:right;
    width:550px;
    height:800px;
}
#footer{
    background:#666666;
    height:300px;
    clear:both;
}

Untuk yang body, wrapper, header dah agak ngerti khan? Mungkin saya sedikit jelasin yang sidebar, posting sama footer soalnya di ketiga id tersebut ada property yang aneh, yaitu float sama clear.

Pertama yang sidebar sama posting dulu. Rencana kita khan sidebarnya itu berada di sebelah kiri postingnya ya? Sedangkan, secara default tag div yang kita gunakan itu memposisikan daerah-daerah yang di buat itu berada di atas atau di bawah.

Jadi secara default, sidebarnya itu ada di atasnya posting. Nah, agar sidebarnya berada di sebelah kiri posting maka kita gunakan property float dengan valuenya left untuk sidebar dan value right untuk postingnya.

Namun perlu diingat, agar teknik ini berhasil, maka width (lebar) dari sidebar dan juga postingnya itu harus di set dulu. Berapa lebarnya? Terserah kamu,tapi jumlah lebar sidebar dan posting tidak boleh lebih dari total halaman web yang dibuat. Dalam hal ini, halaman web yang kita buat lebarnya 800px jadi kita set sidebarnya 250px dan postingnya 550px (jumlahnya 800px khan).

Nah, sekarang yang footer. Buat apa sich ada property clear disitu??
Intinya gini aja dech. Di sidebar dan juga posting, khan kita memakai property float, agar footernya tidak terpengaruh property float yang digunakan, maka kita kasih property clear dengan value both.

Trus kenapa cuman footer? Headernya ga?

Soalnya headernya itu khan letaknya di atas sidebar dan posting jadi floatnya tidak terlalu berpengaruh bagi headernya.

Nah, layoutnya dah jadi. Kamu bisa berkreasi sendiri mencoba-coba biar tambah ngerti. O iy, kamu bisa download file latihan layout ini di sini.

Populerkan artikel ini