Tutorial layout css

Thursday, July 21, 2011 6 komentar

Css adalah sebuah bahasa yang digunakan untuk mempercantik tampilan dari web (html) kita. Seperti untuk membuat layout , mengedit tampilan blog dll. Disini gue akan memberikan tutorial sederhana buat sobat yang kiranya baru dalam dunia css. Oh iya, gue pake dreamweaver buat bikinnya, tapi sobat lain bisa juga kok pake editor lain buat nyobanya.. kayak notepad,notepad ++ dll.

Pertama kita buat dulu file htmlnya, caranya buka editor yang pengen dipake. Kalo kayak gue pake dreamweaver



Jadi kalo kita mau bikin file html di dreamweaver nanti langsung muncul tulisan ini… kalo yang pake editor lain kan masih kosong kalo kita buat file htmlnya, bisa diketik manual script yang ada digambar :) (jangan males ngetik kalo mau cepet bisa :)).

Nah kalo udah diketik semua, kita buat divison-division buat kotak-kotakin bagian-bagiannya. Sisipin script ini didalam tag body <body> (sisipkan disini) </body> tag yang disisipin :

<div id="header"> ini bagian header </div>
<div id="kiri"> ini bagian kiri </div>
<div id="kanan"> ini bagian kanan </div>
<div id="footer"> ini bagian footer </div>

Nah kalo udah disisipkan, kita save dengan nama terserah anda, tetapi berekstensi .html (dot html). Terus kita buka file yang kita simpan tadi dengan browser, disini saya pakai mozilla firefox. Lihat hasilnya. “loh kok Cuma gitu doang sih??”. Iya sabar dulu, kita kerjain pelan-pelan ya :);.

Bentuknya masih biasa aja ya? Nah, itu masih dalam bentuk htmlnya, sekarang kita buat file css nya untuk mempercantik layout kita.

Pertama kita ketik kode cssnya untuk body dan header didalam tag <head> </head>, agar lebih gampang membacanya kita sisipkan di antara tag </title> dan <head> dengan script :
<style type="text/css">

body{

background:#FFCC00;
}

#header{
background-image:url(gambar.jpg);
height:150px;
width:750px;
margin:auto;
}

</style>

Sebelum memberi penjelasan, berikut adalah previewnya :




Penjelasannya :

Pada <style type="text/css"> </style> adalah script yang memberitahukan bahwa dalam file ini kita memberikan css untuk tampilannya.
Pada script body{ background:#FFCC00;} kita memberikan warna pada background, yaitu #ffcc00 atau warnya orange pada gambar;

Dan terakhir script #header{ background-image:url(gambar.jpg); height:150px; width:750px; margin:auto; } yaitu kita memberikan nilai pada id header yang telah kita buat sebelumnya dengan background gambar yang bernama gambar.jpg, dengan tinggi 150pixel, lebar 750pixel, dan jarak antara kanan-kiri auto (otomatis) sehingga gambar berada ditengah.
Note : penulisan script css dengan mendatar atau menurun sama saja, selama ada tanda semi colon (;) sebagai penutup. Script tersebut masih benar.

Berikutnya kita tambahkan script untuk kiri, kanan dan footer, dengan menambahkan script :

#kiri{

border:solid 1px #000000;
float:left;
margin-left:113px;
width:500px;
background-color:#CCCCCC;
height:300px;
}

#kanan{

border:solid 1px #000000;
float:left;
width:245px;
background-color:#CCCCCC;
height:300px;
}

#footer{

clear:both;
width:750px;
background-color:#FF6600;
height:100px;
margin:auto;
border:solid 1px #000000;
}

Disini gue hanya akan menjelaskan script-script yang tidak ada sebelumnya, pertama pada id kiri

#kiri{ border:solid 1px #000000; float:left; margin-left:113px; width:500px; background-color:#CCCCCC; height:300px; }


Seperti yang kita lihat disini, script border:solid 1px #000000; dimaksudkan, kita membuat border (garis tepi) pada division tersebut. solit berarti kita membuat garis tersebut utuh, tidak terputus, dll, sebenarnya banyak jenis-jenis border, tetapi gue pake solid biar keliatan lebih jelas.
Kemudian kita bikin script float:left, script ini digunakan untuk meletakan posisi division kiri, berada disebelah kiri.

Lalu margin –left, sama seperti sebelumnya, hanya saja pada script ini kit hanya memberikan jarak untuk kiri. Dan karena yang lain sama seperti sebelumnya, maka gue skip aja ya :D

Masuk ke script #kanan{ border:solid 1px #000000; float:left; width:245px; background-color:#CCCCCC; height:300px; } semua isi dari script ini hampir sama 100% hanya saja lebar nya kita rubah agar sejajar dengan header dan footer.

NOTE: lebar dan jarak antara division kiri dan kanan bisa kita ubah sesuai dengan keinginan kita, tinggal kita rubah jaraknya agar rata dengan header dan footernya.


Dan terakhir pada footernya, kita berikan #footer{ clear:both; width:750px; background-color:#FF6600; height:100px; margin:auto; border:solid 1px #000000; }
Kalau kita lihat sama saja script dari footer ini dengan header. Hanya saja berbeda dari script clear:both nya saja. Sebenarnya apa sih fungsi nya? Fungsinya hanya untuk membuat division footer ini menjadi turun kebawah, atau jika pada code html ini sama seperti fungsi tag <br> yaitu untuk membuatnya dibaris baru. Sehingga division ini berada dibawah division kiri dan kanan. Tidak percaya? Coba saja hapus clear:both nya, lihat apa yang terjadi?

Setelah semuanya selesai, kita save file kita dan lihat bagaimana hasilnya?
Sekian tutorial singkat ini, jika ada pertanyaan atau saran, silahkan tuliskan di komentar ya??? Tutorial berikutnya akan saya bahas tentang padding, dan kegunaannya untuk membuat layout kita semakin menarik, dan jika ada yang ingin mendownload file ini, silahkan klik disini

Label:

6 comments:

  1. sama2 gan... ane juga baru belajar kok :))

    ReplyDelete
  2. Tutorialnya mudah diikuti dan memberi saya pengertian yang baru tentang css. Terima kasih, semoga terus dikembangkan.

    ReplyDelete
  3. nice post :)
    kalo css yg buat menu dropdown sama atau beda?

    ReplyDelete

Berkomentarlah dengan sopan...
Anda sopan, kami segan...
Dan maaf, dimohon untuk tidak menaruh link hidup pada komentar. Jika terdapat, mohon maaf akan saya hapus. trimakasih :)

Member