Tutorial Layouting CSS Part 1 Oleh: Cecep Yusuf

Pada tutorial kali ini, mari kita belajar tentang layouting HTML dengan CSS, sebenarnya tutorial ini bersumber dari artikel saya juga di situs harian.cheyuz.com, tepatnya di sini. Apa itu CSS? CSS adalah salah satu komponen yang wajib kita kuasai sebagai web designer. Karena dengan menggunakan CSS, kita bisa membangun sebuah web dengan rancangan desain yang efektif dan fl...

Pada tutorial kali ini, mari kita belajar tentang layouting HTML dengan CSS, sebenarnya tutorial ini bersumber dari artikel saya juga di situs harian.cheyuz.com, tepatnya di sini.

Apa itu CSS? CSS adalah salah satu komponen yang wajib kita kuasai sebagai web designer. Karena dengan menggunakan CSS, kita bisa membangun sebuah web dengan rancangan desain yang efektif dan fleksibel. Dengan CSS, kita tidak memanipulasi desain dari suatu elemen HTML dengan menambahkan atribut di tag tersebut, melainkan dengan menambahkan class/id tertentu ke dalam tag yang sudah kita tentukan dengan style yang sudah kita definisikan di CSS. Kali ini kita akan membuat sebuah layout untuk halaman web yang akan kita buat. Pada tutorial ini, kita tidak akan menggunakan framework, karena materi CSS tidak membutuhkan framework PHP, jadi tidak menggunakan framework pun web kita sudah bisa memakai layout dengan CSS.

Persiapan Kita akan membuat 2 buah file, yaitu index.php dan style.css dengan nama folder root misalnya web_css, jadi URL yang akan kita gunakan untuk tutorial ini adalah http://localhost/web_css. Saya tidak akan menjelaskan bagaimana setting XAMPP atau paket server Apache lainnya di tutorial ini, karena kita sekarang akan fokus ke layouting dengan menggunakan CSS. OK? Catatan 1. Tidak ada satupun kode PHP di tutorial ini, jadi Anda tidak perlu khawatir bila Anda belum menguasai PHP 2. Anda bisa pula mengganti file index.php dengan ekstensi html, menjadiindex.html

Buatlah sebuah file index.php dengan isi sebagai berikut: <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> Simpan file di atas dihttp://localhost/web_css/index.php

Fixed Layout Contoh di sini adalah layout fixed/ice, yang artinya lebar dari halaman web ini adalah tetap dan tidak akan berubah. Misalnya kita mendefinisikan lebar website kita adalah 950px, maka ketika kita melihat web dengan resolusi komputer yang berbeda layout web tersebut tidak akan berubah. Jadi ketika di lihat di monitor dengan resolusi tinggi, web kita akan terlihat kecil, sedangkan di monitor dengan resolusi rendah, web kita terlihat besar. Jadi tergantung resolusi dari monitor, bukan tergantung dari lebar window browser.

Membuat Layout 2 Kolom Anda mengerti maksudnya? ya, untuk tutorial ini kita akan membuat halaman web dengan layout 2 kolom, karena akan terdapat sidebar di sebelah kiri dan ruang untuk konten di sebelah kanan. Layout 2 kolom itu adalah layout standar yang biasa digunakan untuk blog. Coba Anda buat blog baru di wordpress atau blogger, pasti layout defaultnya adalah 2 kolom, yaitu konten di sebelah kiri dan sidebar untuk kategori/arsip di sebelah kanan.

Pembagian Area Pada tutorial kali ini, satu halaman website terdapat 4 bagian ‘area’ utama yang dibuat dengan tag ‘div’, yaitu header, sidebar, content, dan footer. Masing-masing div diberi atribut id dengan nama sesuai dengan nama area, misalnya id=”header” untuk div header, dan seterusnya. Supaya lebih jelas, ayo kita langsung buat kode HTMLnya, tambahkan kode berikut di dalam tag ‘body’ yang ada di dalam file index.php: ...

... Sejauh ini, kita sudah membuat 4 area utama dalam halaman web kita dan ‘terbungkus’ oleh div yg mempunyai id=”wrapper”, wrapper hanya istilah saja, karena fungsinya sebagai container untuk layout ice/fixed, sehingga wrapper ini kita tentukan lebar dan tinggi fix-nya, dan nantinya kita tentukan tinggi, lebar, dan posisi untuk keempat area tersebut di dalam file CSS. Secara default bila kita refresh halaman tersebut, maka sebenernya terdapat 4 tumpukan div dari atas ke bawah secara berurutan. Karena kita belum mengisikan apa2, maka tumpukan tersebut tidak akan terlihat, karena berupa container gaib (div) halah gaib hehe..

Dummy Text Sekarang kita buat dummy text untuk setiap area yang sudah kita buat supaya setiap area terdapat isi sample text. Dummy text adalah sekumpulan kata/kalimat sebagai contoh untuk dijadikan bahan percobaan untuk layout yang kita buat, coba Anda buka http://lipsum.com, di situ terdapat contoh dummy text Lorem Ipsum. HEADER Untuk header, tambahkan teks judul kita yang berupa link, seperti berikut: SIDEBAR Untuk sidebar, kita buat contoh menu, ini hanya pemisalan aja, supaya kita bisa melihat bentuk menu yang akan kita tentukan di CSS. Tambahkan kode html berikut di dalam div sidebar.

href="#">Home href="#">Products href="#">Contact Us href="#">About Us

CONTENT Untuk konten, isikan saja paragraf lorem ipsum supaya kita ga capek mengetik contoh kalimat, hehe… kunjungi http://lipsum.com FOOTER Terakhir untuk footer, tambahkan aja copyright untuk website kita, misalnya copyright © 2010 by Jagocoding.com, kode lengkapnya: Sekarang, tambahkan tag berikut sebelum tag ‘body’ yang berfungsi untuk meload file style.css yang akan kita buat nanti. Nah, jadi kode HTML lengkap untuk file index.php adalah sebagai berikut: <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">

Preview Bila Anda mengikuti langkah2 di atas dengan benar, maka hasilnya sesuai dengan tampilan yang ada di sini. Nah, kasus di sini adalah layout Anda masih belum diberi style, posisi yang belum benar, pewarnaan belum ada, tinggi dan lebar yang belum didefinisikan, dan sebagainya, sekarang ayo kita buat CSSnya supaya benar2 sesuai dengan yang kita inginkan.

style.css Setelah kita mengikuti langkah di atas untuk membuat isi dari halaman web (file index.php), sekarang kita buat style-nya dengan menghubungkan fileindex.php dengan style.css.. Buatlah file style.css satu folder dengan file index.php. 1. DEFAULT STYLE Ga tau istilahnya apa, saya kasih istilah default style, yaitu style default untuk semua elemen/tag yang ada di halaman web, biasanya default style itu untuk jenis font, ukuran font, warna default, dan sebagainya. Penggunaannya dengan menambahkan karakter * di dalam file css sebagai variable. *{ font-size: 12px; font-family: sans-serif; } Coba Anda save, kemudian refresh browser.. maka jenis hurufnya akan berubah menjadi sans serif dan dengan ukuran 12px. Untuk judul, akan kita ubah ukurannya nanti.

2. TAG STYLES Tag style adalah tag yang diterapkan pada setiap tag dengan nama tag yang sesuai dengan variable yang didefinisikan di CSS.. misalnya untuk setiap h1, style hurufnya harus besar, tebal.. style untuk paragraf, misalnya harus alignment justify, ukuran hurufnya 12px, dan sebagainya. Tambahkan syntax CSS tadi dengan syntax di bawah ini: body{ background: #efefef; margin: 0; } a{ text-decoration: none; color: black; } a:hover{ text-decoration: underline; color: #0000cc; } h1{ font-size: 36px; margin: 0; } h2{ font-size: 24px; } Arti dari syntax tersebut adalah: 1. background untuk tag ‘body’ secara default warna putih agak keabuan (#efefef) dan tidak ada margin 2. untuk semua hyperlink, warna hitam dan tidak ada garis bawah 3. hover, ketika mouse melewati setiap hyperlink, maka muncul garis bawah, dan warnanya menjadi biru tua 4. Ukuran setiap h1 adalah 36px, dan setiap h2 adalah 24px 3. LAYOUTING & THEMING Nah, ini yang paling penting, layouting dan theming. Layouting dan Theming adalah pendefinisian posisi untuk tata letak, warna, dan ukuran dari setiap tag div. Pertama kita tambahkan style untuk div yang mempunyai id=”wrapper”, jadi variable di CSSnya dengan ditambahkan awalan karakter pagar (#). #wrapper{ width: 950px; margin: auto; background: #fff; }

Syntax di atas adalah style untuk div yang mempunya id=”wrapper”. Dengan syntax di atas, Anda mengubah lebar wrapper menjadi fix 950 pixel, dengan margin auto yang berarti wrapper akan selalu berada di tengah2, dan mempunyai background berwarna putih, silakan refresh untuk hasilnya. #header{ height: 150px; background: #cdf; } Dengan syntax di atas, Anda telah membuat banner yang mempunyai tinggi 150 pixel dan warna background biru muda. Silakan direfresh! #sidebar{ float: left; width: 200px; border-right: 1px solid #ccc; padding: 5px; } Terlihat di kode di atas ada properti float, itu adalah untuk menentukan posisi untuk sidebar menjadi di sebelah kiri, untuk pembahasan float dan posisi lainnya di CSS, baca Pemahaman Position pada CSS, kemudian sidebar mempunyai lebar 200 pixel, dan ditambahkan padding 5 pixel untuk memberikan jarak dari text yang ada di dalam sidebar ke pinggiran ruang.refresh! #content{ float: left; width: 700px; padding: 5px 5px 5px 20px; border-left: 1px solid #ccc; } Untuk content, diberi float left, karena bertahap, bertumpuk dari kiri,, mempunyai lebar 700 pixel, dan mempunyai padding untuk atas, kanan, dan bawah 5 pixel, sedangkan untuk sebelah kiri 20 pixel untuk memberikan jarak terhadap pinggiran konten sebelah kiri, sehingga terlihat seolah2 garis pinggir di sebelah kiri yang berwarna abu2 adalah pemisah antara content dan sidebar. #footer{ clear: both; background: #bbb; } #footer p{ text-align: center; padding: 20px; color: #fff; font-size: 10px; font-weight: 900;

} Untuk footer, saya memberi clear both, yang artinya membersihkan dari float-float yang ada di atasnya, yaitu sidebar dan content, jika kita tidak memberi clear, maka jika kita menambahkan div di bawah footer, maka penumpukan menjadi kacau, tetapi jika memakai clear, posisi kembali menjadi baru seperti header (posisi footer = header = tidak 2 kolom). Untuk warna latar, saya beri background abu tua (#bbb). Nah, terlihat di syntax itu ada “#footer p”, itu maksudnya adalah style untuk paragraf (p) yang hanya ada di footer, selainnya tidak. Khusus untuk p yang ada di footer, alignmentnya justify, kemudian warna putih, ukurannya 10 pixel dan tebal, kemudian diberi padding 20 pixel supaya jarak ke pinggiranya tidak terlalu rapat. Nah, jadi syntax lengkap CSSnya adalah seperti berikut: *{ font-size: 12px; font-family: sans-serif; } body{ background: #efefef; margin: 0; } a{ text-decoration: none; color: black; } a:hover{ text-decoration: underline; color: #0000cc; } h1{ font-size: 36px; margin: 0; } h2{ font-size: 24px; } #wrapper{ width: 950px; margin: auto; background: #fff; } #header{ height: 150px; background: #cdf; } #sidebar{

float: left; width: 200px; padding: 5px; border-right: 1px solid #ccc; } #content{ float: left; width: 700px; padding: 5px 5px 5px 20px; border-left: 1px solid #ccc; } #footer{ clear: both; background: #bbb; } #footer p{ text-align: center; padding: 20px; color: #fff; font-size: 10px; font-weight: 900; } Disimpan di http://localhost/web_css/style.css. Sekarang coba jalankan http://localhost/web_css. Jika Anda mengikuti tutorial ini dengan benar, maka hasilnya seperti ini: klik di sini Untuk file yang udah jadi, silakan download filenya DI SINI, tapi mending pelajari dulu tutorial di atas, soalnya yang penting ilmunya, bukan hasil dari file yg udah ada Untuk part 1 cukup sekian dulu, untuk styling menu nanti akan dipelajari di tutorial CSS berikutnya. Terima kasih sudah mengikuti tutorial ini. ~ Jagocoding

Tentang Penulis Cecep Yusuf Hi, my name is Cecep Yusuf. However, in the virtual world I am more likely to use the name Cheyuz, which is an abbreviation of two words "Cecep" and "Yusuf". I am founder of Jagocoding.com, u can view more of me in Cheyuz.com