Membuat layout web tanpa tabel, mungkin gak yah? Mungkin aja kali, mau tau caranya? Kalau mau tau teruskan membaca.
Kemaren saya iseng-iseng surfing di google, saya mencari informasi tentang jasa pembuatan website. Dari beberapa web yang saya temui di google, banyak di antaranya yang menawarkan jasa pembuatan website tanpa tabel. Jujur aja, saya sempat bingung, gimana cara buatnya, kalo tanpa tabel kan, layout website bisa jadi acak-acakan dan gak karuan.
Akhirnya saya coba tanya ke mbah google dan akhirnya saya mendarat di sebuah blog. Di sana saya dapatkan info, tentang cara buat layout web tanpa tabel. Terjawab sudah pertanyaan yang ada di benakku.
Ternyata yang mereka maksud membuat layout web tanpa tabel itu adalah tidak menggunakan fungsi tag table, melainkan dengan bantuan css. Langsung aja saya share ilmu yang saya dapetin di sini.
Pertama, kita akan mencoba membuat file style.css, yang isinya untuk mengatur layout. Berikut adalah source kodenya.
body{
background: #000000;
font-family: verdana; font-size=17px;
}
#wrapper{
width: 800px;
margin: auto;
}
#header{
width: 800px;
height: 200px;
background: red;
}
#slidebar{
background: blue;
height: 800px;
width: 250px;
float: left;
}
#posting{
background: white;
width: 550px;
height: 800px;
float: right;
}
#footer{
background: #red;
height: 200px;
clear: both;
}
background: #000000;
font-family: verdana; font-size=17px;
}
#wrapper{
width: 800px;
margin: auto;
}
#header{
width: 800px;
height: 200px;
background: red;
}
#slidebar{
background: blue;
height: 800px;
width: 250px;
float: left;
}
#posting{
background: white;
width: 550px;
height: 800px;
float: right;
}
#footer{
background: #red;
height: 200px;
clear: both;
}
Setelah selesai, simpan dengan nama "style.css". Penjelasannya nanti dulu yah, kita akan coba dulu buat file HTML-nya, biar keliatan hasilnya. Berikut adalah source kode untuk file HTML-nya.
<HTML>
<HEAD>
<TITLE>Layout</TITLE>
<style type="text/css" media="all">
@import "style.css";
</style>
</HEAD>
<BODY>
<div id="wrapper">
<div id="header">
</div>
<div id="content">
<div id="slidebar">
</div>
<div id="posting">
</div>
</div>
<div id="footer">
</div>
</div>
</BODY>
</HTML>
<HEAD>
<TITLE>Layout</TITLE>
<style type="text/css" media="all">
@import "style.css";
</style>
</HEAD>
<BODY>
<div id="wrapper">
<div id="header">
</div>
<div id="content">
<div id="slidebar">
</div>
<div id="posting">
</div>
</div>
<div id="footer">
</div>
</div>
</BODY>
</HTML>
Sekarang simpan dengan nama "index.htm". Ingat! Simpannya di folder yang sama dengan file style.css - nya yah, soalnya kita masukin fungsi importnya di folder yang sama (@import "style.css";). Coba buka file HTML-nya di browser dan lihat hasilnya.Rapihkan?? Padahal tanpa table.
Oke, sekarang saya akan coba jelaskan file style.css - nya terlebih dahulu. Tanda pagar (#) berfungsi sebagai penanda, bahwa fungsi itu adalah id untuk halaman.
Lalu kita berikan warna untuk setiap elemen/bagian halaman dengan properti background. Setelah itu, kita juga atur tinggi dan lebar dari setiap elemen dengan properti width (lebar) dan height (tinggi).
Nah yang menarik dari file ini adalah pada elemen #slidebar dan #posting. Coba perhatikan cuplikan kode berikut.
#slidebar{
background: blue;
height: 800px;
width: 250px;
float: left;
}
#posting{
background: white;
width: 550px;
height: 800px;
float: right;
}
background: blue;
height: 800px;
width: 250px;
float: left;
}
#posting{
background: white;
width: 550px;
height: 800px;
float: right;
}
Kita menuliskan fungsi float dengan nilai left untuk slidebar dan right untuk posting. Hal inilah yang membuat letak dari postingan dan sildebar saling bersebelahan. Karena kalau kita tidak deklarasikan dengan float, maka bagian slidebar akan berada di atas bagian posting.
Lalu kita gunakan fungsi clear pada elemen footer, agar tidak terpengaruh dengan fungsi float pada slidebar dan posting. Atau dengan kata lain, menghapus fungsi float di footer.
Dan yang terakhir, kita isikan setiap elemen dari css ke file HTML dengan tag <div id="Nama_Elemen"> . Di bawah ini adalah screenshot dari file HTML yang sudah jadi.
