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.
[...] saya dah posting tentang cara ngebuat layout tanpa tabel, dan juga cara ngebuat menu horizontal. Nah, sekarang kita coba gabungin menu yang dah kita buat [...]
Mas, Saya mau tanya nich??
Saya udah prnah coba dengan menggunakan tag div untuk mengganti tag table, tapi kenapa waktu saya preview, halaman web yang saya inginkan kok tidak ada??
Saya berharap mas mau memberi sedetailnya t entang masalah tag div tersebut bila perlu pake contoh yang bisa langsung di preview.Soalnya saya lagi butuh bgt nich buat ngerjain TA aku.
Mohon bantuannya ya masssss
I wait for replies or further post! ! ! !
Thanks.
gimana ya mas cara menggabungkan kode css dan html,karena cara yang mas berikan gagal total
@hery perdana
coba mas baca dan pahami artikel saya tentang peletakkan css di html
@vianet
maaf nge-reply-nya kelamaan,,hehe…
tunggu aja artikel tentang div nya ya,,sorry suruh nunggu lagi,,hehe…
Tanya…
Saya bikin wapblog dan sudah saya jadikan webblog, Saya posting/upload artikel ke hosting/webblog saya dengan format *.txt pertanyaanya: Bagaimana supaya saya menampilkan artikel saya dengan format *.txt tadi ke halaman webblog saya tanpa mengubah formatnya?
Terima kasih atas jawabanya.
Hallo Mas Hisman,
Saya sudah cobain tuh bikin layout ga pake tablenya.. maknyus, nice inpo gan
Lagi mo nyobain terapin dari design PSD sampe final. Kalo stuck boleh nanya2 ga bos ? maklum newbie
wah mas,terima kasih banyak infonya ya,saya jadi tambah ilmu nih…
saya mau tanya, kalo misal kita mau membuat 3 kolom, sidebar kiri, posting dan sidebar kanan, bagaimana caranya ya???
trima kasih.. maklum msh newbie..
Mau nanya nih, bagaimana cara membuat sidebar kiri dan kanan..?? Saya lagi perlu banget nih buat merubah tampilan web biar lebih bagus.. Makasih sebelumnya… Bisa bales ke email saya noe.privacy@gmail.com
Nih admin nya ke mana sih..?? Masa dah lama ga di respon.
Kl dah ga sempat ngurus web nya kasih saya aja mas. Psti saya update trs…
wah, sep”… ditunggu deh postingan berikutnya…
makasih yah…
[...] kita membuat suatu tag html, css akan menganggap tag itu bagaikan sebuah kotak (box). Saat kita mendesain / mebuat layout, kotak ini yang nantinya akan ditata sesuai keinginan kita dengan css. Konsep ini sering disebut [...]
[...] aja pas membuat layout tanpa tabel, di situ khan seharusnya posisi sidebarnya berada di atas posting. Karena di css-nya sidebar di [...]