Unsecured debt consolidation loan


Wednesday, 30 December 2009

Membuat Layout Web Tanpa Tabel

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

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>

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

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.


14 comments:

Bagaimana cara kalo qt mau tes membuat website sendiri, apakah perlu membuat server pribadi terlebih dulu agar bisa dijalankan di dreamweaver? kalo ia, bagaimana caranya? kalau tidak keberatan saya minta penjelasan caranya. Terimakasih.

Kalau pake HTML gak usah pake server, kalau pake PHP harus pake server.

Kalau pake HTML mah, tinggal klik kanan terus klik open with, lalu pilih buka dengan browser...

saya pelajari aja dulu ya.salam kenal.

Boleh nambahin dikit ya.Kalo pake dreamweaver MX kita bisa langsung tes hasilnya.Kalo pake server pribadi download aja PHP triad sekaligus MySQL nya.atau pake Apache.

wah, masih bingung deh, tappi nanti dipelajari

CSS memang sebaiknya (dan sangat direkomendasikan) untuk me-layout, bukan table. Dengan CSS, sebuah halaman web jauh lebih ringan karena konten dipisahkan dari presntasi. Selain itu, dengan CSS kita dapat memodifikasi setiap bagian dari halaman web dengan lebih mudah.

bagaimana jika content-a terdiri dari 3 bagian, ada sidebar, posting ama rightbar ... mohon solusinya .., karena saya lihat float itu gak punya value center ...
thx...

Bagus sekali blognya. Memberikan pendidikan bagi kalangan masyarakat luas Indonesia. Selamat deh dengan kehadiran blognya.

iaa nihh ,
gimana kalo ada 3 bagian wrap nya ,
float kan nggak ada value center ny ,
???

WAH saya dah nemu nihh .
sebener nya nggak usah pake float: right; / float: left; juga bisa ,,
yang penting dilihat dari pemanggilan fungsi DIV css nya aja ..
untuk make 3 kolom wrap , kita bisa pake left smua atau right smua ..
yang penting di urut ketika pemanggilan nya ...
contoh : yang ingin di tampilkan main-wrap, side1, sama side2 .
jadi nya ada 3 kann ...
logika pemanggilan ny kita urut aja ,
tag "<>" saya ganti jadi "()"

(div id="side1") (/div)
(div id="main-wrap") (/div)
(div id="side2") (/div)

itu yang akan muncul kolom sebelah pojok kiri side 1 , terus d tengah nya main-wrap , yang d pojok kanan side2 ...

tinggal otak-atik aja dehh ..

pada id #slidebar dan #content tingginya dibikin fix 800px. seandainya isinya lebih dari 800px akan bertumbukan dg footer. ada solusi utk mengatasinya?
minta pencerahannya ya...:)

Makasih artikelnya sangat membantu

mas sy udah coba jd mislnya yg warna biru saya isi 1 buah link dan link tersebut ingin sy tampilkan di bagian yg warnanya putih id posting kl gak salah. nah di halman link tersebut apa yg harus ditambah mas agar nanti tampil di kotak postingnya. mohon bantuannya

beda html sama php apa si???

Post a Comment

Enter your email address:

Delivered by FeedBurner