Yayan Mulyana <uchiha_yans@yahoo.com> CSS merupakan materi yang WAJIB kita kuasai sebagai web Designer, karena dengan CSS kita bisa membangun sebuah website dengan rancangan desain yang efektif dan fleksibel
Kali ini kita akan membuat sebuah layout untuk halaman website yang akan kita buat. Ditutorial ini, kita akan membuat 2 buah file yaitu index.php dan style.css dengan nama folder root mislanya web_css. Jadi URL yang akan kita gunakan untuk tutorial ini adalah http://localhost/web_css. Ditutorial ini tidak akan dijelaskan tentang XAMPP dan lain sebagainya, karena kita akan focus sama layout yangakan kita buat. Mari kita mulai. <ngobrol wae atuhnya hehe> Buatlah sebuah file dengan nama index.php di folder root yang isinya sebagai berikut : <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <head> <meta http-equiv="content-type" content="text/html; charset=windows-1250"> <meta name="generator" content="pspad editor, www.pspad.com"> <title>tutorial CSS Layout 2 Kolom Yayan Mulyana</title> </head> <body> </body> </html> Nah supaya style bisa dipakai diberbagai browser, maka kita harus menambahkan doctype yang ditambahkan sebelum tag html, mengapa demikian?? (hayoooo kenapa ), karena doctype adalah instruksi untuk web browser tentang versi markup language (HTML) yang ada di halaman tersebut. Disini kita menambahkan doctype untuk mendefinisikan bahwa versi dari markup language di halaman ini adalah XHTML, sehingga semua browser bisa style yang sama. Pada tutorial ini, satu halaman website terdapat 4 bagian area utama yang dibuat dengan tag div, yaitu header, sidebar, content, dan footer. Masing-masing div diberi attribute id dengan nama sesuai dengan nama area, misalnya id= header untuk header dan seterusnya. Supaya lebih jelas mari kita buat kode HTMLnya, tambahkan kode berikut didalam tag body yang ada dalam file index.php:
<body> <div id="wrapper"> <div id="header"> <div id="sidebar"> <div id="content"> <div id="footer"> </body> Sejauh ini kita sudah membuat 4 area utama dalam halaman website kita dan terbungkus oleh div yang mempunyai id= wrapper, wrapper hanya istilah saja, karena fungsinya hanya 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 didalam file CSS. Secara default kalau kita refresh halaman tersebut, maka sebenernya terdapat 4 tumpukkan div dari bawah keatas secara berurutan. Karena kita belum mengisikan apa-apa, maka tumpukkan tersebut tidak akan terlihat, karena hanya berupa container. Sekarang kita buat dummy text untuk area yang sudah kita buat supaya setiap area terdapat sample text. Dummy text adalah sekumpulan kalimat sebagai contoh untuk dijadikan bahan percobaan untuk layout yang kita buat, coba anda buka Ms. Office Word lalu ketikkan =lorem(2,4) (diketik tanpa tandak petik), maka akan muncul sample text. Untuk header tambah text kita disitu, seperti berikut : <div id="header"> <h1>tutorial CSS 2 Kolom </h1> Untuk sidebar, kita buat contoh menu, supaya kita bisa melihat bentuk menu yang akan kita tentukan di CSS. Tambahkan kode berikut didalam tag sidebar : <div id="sidebar"> <h3>menu</h3> <ul> <li><a href="#">home</a></li> <li><a href="#">products</a></li> <li><a href="#">contact Us</a></li> <li><a href="#">about US</a></li> </ul>
Untuk conten isikan saja dummy text lorem ipsum supaya kita ga capek ngetik contoh kalimat..hihihi seperti berikut: <div id="content"> <h2>selamat Datang </h2> <p> Lorem Ipsum is simply dummy text. Dst</p> Terakhir untuk footer, tambahkan saja copyright untuk web kita, misalnya copyright by Uchiha Yans, berikut kode lengkapnya : <div id="footer"> <p>copyright Uchiha Yans </p> Sekarang kita tambahkan tag berikut sebelum tag body yang berfungsi untuk meload file style.css yang akan kita buat nanti. Nah, jadi kode html lengkapnya untuk file index.php seperti berikut : <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <head> <meta http-equiv="content-type" content="text/html; charset=windows-1250"> <meta name="generator" content="pspad editor, www.pspad.com"> <link href="style.css" rel="stylesheet" type="text/css"> <title>tutorial CSS Layout 2 Kolom Yayan Mulyana</title> </head> <body> <div id="wrapper"> <div id="header"> <h1>tutorial CSS 2 Kolom </h1> <div id="sidebar"> <h3>menu</h3> <ul> <li><a href="#">home</a></li> <li><a href="#">products</a></li> <li><a href="#">contact Us</a></li> <li><a href="#">about US</a></li> </ul> <div id="content"> <h2>selamat Datang</h2> <p>lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the
1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum </p> <div id="footer"> Copyright Uchiha Yans </body> </html> Jika anda mengikuti langkah-langkah dari awal maka hasilnya akan tampil seperti dibawah ini : Nah masalahnya sekarang layout kita masih biasa aja karena belum kita kasih style, posisi belum benar dan pewarnaan tidak ada, tinggi dan lebar belum didefinisikan, dan sebagainya. Sekarang ayo kita buat CSS nya supaya benar-benar sesuai yang kita inginkan.
Setelah kita membuat file index.php sebagai halaman utama web kita, maka sekarang kita akan membuat stylenya dengan menghubungkan antara index.php dengan style.css. Buatlah file style.css disimpan satu folder dengan file index.php 1. Default Style Yaitu style default untuk semua elemen/tag yang ada dihalaman web, biasanya default style itu untuk jenis font, ukuran font, warna default dan sebagainya. Penggunaanya menggunakan * didalam file css sebagai variable. Kita lihat kode CSS nya sebagai berikut : *{ font-family:sans-serif; font-size:12px; Coba simpan, kemudian refresh halaman web anda, maka jenis hurufnya akan berubah menjadi sans-serif dengan ukuran huruf 12px. Untuk judul kita akan rubah ukurannya nanti. 2. Tag Style Tag style adalah tag yang diterapkan pada setiap tag dengan nama tag yang sesuai dengan variable yang didefinisikan di CSS. Misalnya kita akan menentukan tag h1 dengan huruf besar jenis hurufnya apa dan sebagainya Tambahkan syntac CSS tadi dengan syntac dibawah 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; Penjelasan : - Background untuk tag body warna putih agak ke abu-abuan (#efefef) dan tidak ada margin - Untuk semua hyperlink, warna hitam dan tidak ada garis bawah - Hover, ketika mouse melewati semua hyperlink, maka muncul garis bawah dan warnaya biru tua. - Ukuran setiap h1 adalah 36px dan h2 adalah 24px. 3. Layouting dan Theming Nah, ini yang paling penting, layouting dan theming adalah untuk pendefenisian posisi untuk tata letak, warna dan ukuran untuk setiap div. Pertama kita tambahkan style untuk tag yang mempunyai id= wrapper, jadi variable di CSSnya dengan ditambahkan awalan karakter pagar (#). #wrapper{ width:950px; margin:auto; background:#fff; Sintaks diatas adalah style untuk div yang mempunyai id= wrapper. Dengan sintaks diatas, kita merubah lebar wrapper menjadi pix 950 pixel, dengan margin auto yang berarti wrapper akan selalu ada ditengah-tengah dan mempunyai beackground berwarna putih, silahkan refresh halaman web anda sebagai hasilnya. Sekarang buat headernya : #header{ height:150px; background:#cdf;
Dengan sintaks diatas, maka kita telah membuat sebuah banner dengan tingginya 150 pixel dan backgroundnya biru muda, silahkan simpan dan refresh halaman webnya. Sekarang buat sidebarnya : #sidebar{ float:left; width:200px; border-right:1px solid #ccc; padding:5px; Terlihat sintaks diatas ada property float, itu adalah untuk menentukkan posisi dari sidebar menjadi sebelah kiri, kmudian sidebar mempunyai lebar 200 pixel dan ditambahkan padding 5 pixel untuk memberi jarak dari text dari dalam sidebar ke pinggiran ruang. Kemudian refresh lagi halaman web nya. Sekarang buat content : #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 atas, kanan dan bawah 5 pixel, sedangkan untuk sebelah kiri 20 pixel untuk memberikan jarak terhadap pinggiran content sebelah kiri, sehingga terlihat seolah-olah garis pinggir dsebelah kiri yang berwarna abu-abu adalah pemisah antara content dan sidebar, kemudian simpan dan refresh. Sekarang kita buat footernya : #footer{ clear:both; background:#bbb;
#footer p{ text-align:center; padding:20px; color:#fff; font-size:10px; font-weight:900; Untuk footer kita memberi clear both, yang artinya membersihkan dari floatfloat yang ada diatasnya, yaitu sidebar dan content, jika kita tidak beri clear, maka jika kita menambahkan div dibawah footer, maka penumpukkan manjadi kacau, tetapi jika memakai clear, posisi kambali menjadi baru. Untuk warna backgroundnya kita beri warna abu-abu(#bbb). Nah, terlihat juga ada footer p, itu maksudnya style untuk paragraph(p) yang hanya ada di footer, selainnya tidak. Khusus untuk p yang ada di footer, aligntnya justify, text warna putih, ukurannya 10 pixel dan tebal, kemudian diberi padding 20 pixel supaya jarak ke pinggirnya tidak terlalu dekat. Nah sekarang coba jalankan : http://localhost/web_css Jika anda mengikuti tutorial ini dengan benar maka hasilnya pasti seperti ini : Ok.. terima kasih udah mengikuti tutorial ini, semoga bermanfaat Silahkan hubungi email saya kalo ada sesuatu yang ditanyakan : uchiha_yans@yahoo.com