Monday, June 23, 2008

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 :


  1. Supaya gampang silahkan Anda gunakan Gambar Headernya disini, Save as dengan nama file header.jpg

  2. 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>


  3. 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;
    }

  4. Selesai



Catatan : Supaya tidak terjadi masalah error, Letakan file header.jpg dan header.html dalam satu folder..!


18 comments:

duan said...

pas ngebuka weblog ini kirain punya mas Agus...mirip bgt, ngebukanya cepet bgt..

OOM said...

Sip ko jadi ngiler lihat post pre nya :)

@duan : mirip ya hehehe

Rohman said...

wah dah mulai merambah dunia colek sana sini rupanya eko nih... :)

Ketika Cinta Bertasbih said...

Wah Thanxs Bangt Infonya, Bisa na,bah ilmu

persikers said...

susah ga ya? hehehehe ga mudeng css an soale

thanks infonya

Hendro said...

Informasi yang sangat bermanfaat nih....

muji said...

wah buat blogspot aja ya? buat wordpress bisa gak ya?

selebritis palsu said...

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???

.: AngeL :. said...

sip info nya mas :) mau dicoba dulu nih :)

D i d i said...

Mantap ... tap tap !

Si bos, emang ngerti kesulitan ane ...
Update terbaru dari INFO-BARU emang layak ditunggu nih ... beribu2 terima kasih nih !

tipis said...

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

Fachia said...

weks..mantabs. Keren abis nih ternyata templatenya pake ada fitur nampilin css dan htm code..

Muzik Untuk Hidup said...

i have question...

can you convert wordpress theme into blogger theme???

seezqo said...

good info :) makin expert aja nih kayaknya

A u d e e said...

Bagus tuh tutorialnya!
Salam kenal buat semuanya :D

Life is Wonderful said...

nice info bro ..
mampir di blog ane yha..
;;)

batikkukuh said...

mampir juga ya di blog aq hehehe

sholeh said...

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