Memang bermacam-macam cara untuk membuat webisite agar kelihatan lebih menarik, salah satunya dengan menggunakan CSS (
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
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..!
wah dapet ilmu baru nie thakn ya
BalasHapus@sprei monggo mas di coba mayan buat belajar utak utik css..terima kasih sudah berkunjung :D
BalasHapusterimakasih 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
BalasHapus@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
BalasHapusterima kasih mas jawabannya..
BalasHapuswah makasih infonya gan. Sangat bermanfaat sekali buat saya. Salam kenal dari saya. Di tunggu juga kunjungan anda di
BalasHapusBELAJAR SEO BLOGSPOT makasih..
Mantap niy tutorial nya... trims dah share...
BalasHapusThanks sudah berbagi pengetahuan, Bila sempat kunjungan balik ya sob
BalasHapusWalking bloging, berhenti disini dan mendapatkan ilmu baru :-)
BalasHapusthanks gan tutorial nya,ane tinggal nunggu tutorial buat body nya nih gan :D
BalasHapusreferensi yang sukup bagus untuk menambah wawasan
BalasHapusoya mas kalo cara memasukkan css ke frame gimana caranya?
amazing mas brow.....nah kalo meletakkan ke blog caranya gimana?
BalasHapusmaz aku udah buat tapi aku pengen yg ada anaknya ituloh ke bawah kaya dropdown biza ditambahin codenya ga??? mila tunggu infonya
BalasHapusterima kasih infonya :)
BalasHapusmkasih yah artikelnya sngat membantu.. :)
BalasHapuskunbal k blog aku dongse >> rima-yunida.blogspot.com
follow backnya jgn lupa juga yahh.. udh aku follow tuh blog u.. :)