Salah satu cara yang tidak terlalu rumit untuk menggunakan perintah-perintah CSS adalah dengan menggunakan software dreamweaver. Ketika Anda mengetikan code-code CSS pada dreamweaver secara otomatis akan mucul code-code CSSnya disana.
Memang bermacam-macam cara untuk membuat webisite agar kelihatan lebih menarik, salah satunya dengan menggunakan CSS (colek sana sini ). Dengan code CSS, selain membuat halaman webiste Anda enak di pandang mata, Code CSS lebih ringan loadingnya dari pada Java Script.
Lalu bagaimana cara menggunakan CSS, apakah kita harus hapal dengan code-codenya?, Tidak perlu sampai hapal, saya pun tidak pernah hapal dengan yang namanya code css, dengan keinginan yang kuat untuk belajar CSS pasti Anda juga bisa, dengan modal colek sana sini seperti halnya saya, lama-lama juga pasti Anda memahaminya. Salah satu cara yang tidak terlalu rumit untuk menggunakan perintah-perintah CSS adalah dengan menggunakan software dreamweaver. Ketika Anda mengetikan code-code CSS pada dreamweaver secara otomatis akan mucul code-code CSSnya disana.
Langsung saja kita kembali ke topi awal yaitu membuat header home page dengan CSS. Langkah - langkahnya sebagai berikut :
- Supaya gampang silahkan Anda gunakan Gambar Headernya disini, Save as dengan nama file header.jpg
- Copy-Paste code html di bawah ini, Kemudian simpan dengan nama header.html :
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /> <title>Untitled Document</title> <style type="text/css" media="screen"> </style> </head> <body> <div id="container"> <h1> <a href="/"><img src="header.jpg" alt="Sitename"a></a> </h1> <ul id="topnav"> <li><a href="#">Home</a></li> <li><a href="#">About</a></li> <li><a href="#">Services</a></li> <li><a href="#">Staff</a></li> <li><a href="#">Portfolio</a></li> <li><a href="#">Contact</a></li> </ul> </div> </body> </html> - Agar code html di atas sesuai dengan apa yang Anda inginkan maka Anda perlu menambahkan code CSS seperti di bawah ini, Code css di bawah ini tambahkan di antara code <style type="text/css" media="screen"> dan </style>
body{ margin: 0; padding: 0; text-align: center; font: 85% arial, helvetica, sans-serif; background: #B0BFC2; color: #444; } #container{ text-align: left; margin: 0 auto; width: 800px; background: #FFF; } h1{ margin: 0; padding: 0; border-bottom: 1px solid #fff; } h1 img{ display: block; border: 0; } ul#topnav{ margin: 0; padding: 5px 10px; list-style-type: none; background: #387A9B; } ul#topnav li{ display: inline; background: url(header-bullet.gif) no-repeat 0 50%; padding: 0 10px 0 8px; } ul#topnav li a:link, ul#topnav li a:visited{ text-decoration: none; color: #fff; } ul#topnav li a:hover, ul#topnav li a:active{ text-decoration: none; color: #387A9B; background: #fff; } - Selesai
Catatan : Supaya tidak terjadi masalah error, Letakan file header.jpg dan header.html dalam satu folder..!
Ingin artikel seperti ini langsung ke Email anda? Silahkan masukan alamat email anda untuk berlangganan.
14 Your Comment:
wah dapet ilmu baru nie thakn ya
@sprei monggo mas di coba mayan buat belajar utak utik css..terima kasih sudah berkunjung :D
terimakasih tutorialnya , boleh saya tanya,,, ni ada web http://cakraindah.net untuk mengembangkan suatu web agar menarik apakah perlu dilihat jg siapa sasaran , kemudian tampilan n warna yg sesuai .. apakah berpengaruh??? mohon sarannya y mas eko.. trimss
@putra : betul sekali mas, jika kita ingin membuat web untuk desain tentunya ya di sesuaikan dengan sasaranya. kemudian kalau mengenai warna juga sangat berpengaruh, karena warna merupakan ciri khas dari sebuah website. Memilih warna sebaiknya di sesuaikan dengan tema. Thanks
terima kasih mas jawabannya..
wah makasih infonya gan. Sangat bermanfaat sekali buat saya. Salam kenal dari saya. Di tunggu juga kunjungan anda di
BELAJAR SEO BLOGSPOT makasih..
Mantap niy tutorial nya... trims dah share...
Thanks sudah berbagi pengetahuan, Bila sempat kunjungan balik ya sob
wow nice steady interesting and useful info, really nice blog
sprei anak
sprei murah
bed cover murah
Walking bloging, berhenti disini dan mendapatkan ilmu baru :-)
thanks gan tutorial nya,ane tinggal nunggu tutorial buat body nya nih gan :D
referensi yang sukup bagus untuk menambah wawasan
oya mas kalo cara memasukkan css ke frame gimana caranya?
amazing mas brow.....nah kalo meletakkan ke blog caranya gimana?
maz aku udah buat tapi aku pengen yg ada anaknya ituloh ke bawah kaya dropdown biza ditambahin codenya ga??? mila tunggu infonya
Poskan Komentar