RSS Feed
Twitter
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 modalcolek 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 :
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..!
18 comments:
pas ngebuka weblog ini kirain punya mas Agus...mirip bgt, ngebukanya cepet bgt..
Sip ko jadi ngiler lihat post pre nya :)
@duan : mirip ya hehehe
wah dah mulai merambah dunia colek sana sini rupanya eko nih... :)
Wah Thanxs Bangt Infonya, Bisa na,bah ilmu
susah ga ya? hehehehe ga mudeng css an soale
thanks infonya
Informasi yang sangat bermanfaat nih....
wah buat blogspot aja ya? buat wordpress bisa gak ya?
wahhh muantab!!!
siang mas eko!!!, barusan sempat terkejut nihhh pas lihat profil n fotonya mas eko yang di pojok kanan bawah, kok gambarnya bisa bergerak-gerak gimana ya cara bikinnya???
sip info nya mas :) mau dicoba dulu nih :)
Mantap ... tap tap !
Si bos, emang ngerti kesulitan ane ...
Update terbaru dari INFO-BARU emang layak ditunggu nih ... beribu2 terima kasih nih !
mas eko kan emang mengidolakan mas agus jadi wajarlah kl desain blognya mirip2 gitu, namanya juga fans berat :D . btw tutorialnya mantab, mangkin jago aja nih codingnya :D
weks..mantabs. Keren abis nih ternyata templatenya pake ada fitur nampilin css dan htm code..
i have question...
can you convert wordpress theme into blogger theme???
good info :) makin expert aja nih kayaknya
Bagus tuh tutorialnya!
Salam kenal buat semuanya :D
nice info bro ..
mampir di blog ane yha..
;;)
mampir juga ya di blog aq hehehe
siiip gan tapitetep aku susah banget ya untu dimengerti lain kali kalo bisa tutor dasar dasar perintah css nya dong dijelasin.
Post a Comment
Please left your comment below