Scribd Logo
Unggah

Selamat datang di Scribd!

  • Header Css Tak Biasa

    Diunggah oleh

    windyadmojo
    6 tayangan3 halaman

    Hak Cipta

    © Attribution Non-Commercial (BY-NC)

    Format Tersedia

    PDF, TXT atau baca online dari Scribd

    Apakah menurut Anda dokumen ini bermanfaat?

    Apakah konten ini tidak pantas?

    Laporkan Dokumen Ini

    Hak Cipta:

    Attribution Non-Commercial (BY-NC)
    Unduh sebagai PDF, TXT atau baca online dari Scribd
    Tandai sebagai konten tidak pantas
    6 tayangan3 halaman

    Header Css Tak Biasa

    Diunggah oleh

    windyadmojo

    Hak Cipta:

    Attribution Non-Commercial (BY-NC)
    Unduh sebagai PDF, TXT atau baca online dari Scribd
    Tandai sebagai konten tidak pantas
    dari 3

    Membuat Header yang Tidak Biasa pada Situs Web

    Mungkin sebagian dari Anda tidak mengenal apa itu header pada situs web. Header adalah sebuah tempat dimana logo, banner, dan tombol (top menu) berada. Dengan header, pengunjung dapat mengetahui logo dan slogan dari suatu situs web. Dengan header pula, keindahan sebuah situs bisa dilihat sepintas karena letaknya di atas dan pertama kali dilihat oleh pengunjung, apalagi jika dalam header tersebut terdapat sebuah top menu yang berisi tombol-tombol yang berguna bagi pengunjung. Maksud yang tidak biasa di sini adalah tata letaknya. Biasanya header (logo, banner, dan tombol) letaknya satu garis horizontal. Namun, kali ini Anda akan diajak untuk membuat header yang tidak biasa letaknya. Perhatikan gambar di bawah ini:

    Bagaimanakah cara membuatnya? Kelihatannya cukup sulit :(. Tenang, cara untuk membuatnya cukup simpel kok, yaitu: 1. Pertama, buat file style.css. Ketikkan listing berikut ini:
    /* Created by Romtoni */ /* Layout Web */ #layout { heigth: 1100px; width:925px; margin: 18px; padding: 10px; z-index: 2; } #main { float:left; height: 1100px; width: 925px; } /* ----------Header dimulai dari sini----------- */ /* Logo */ div#main div#logo { background-color: #077ff0; float: left; height: 175px; width: 175px; }

    /* Banner */ div#main div#banner { background-color: #ff7700; float: left; height: 135px; width: 750px; } /* Top Menu */ div#main div#buttonbar { float: left; height: 40px; width: 750px; } /* Tombol forum di Top Menu */ div#buttonbar div#forum{ background-color: #77ff77; height: 40px; width: 150px; float: left; } /* Tombol About Us di Top Menu */ div#buttonbar div#about { background-color: #7777ff; height: 40px; width: 150px; float: left; } /* Tombol Gallery di Top Menu */ div#buttonbar div#gallery { background-color: #77f0f0; height: 40px; width: 150px; float: left; } /* Tombol Weblog di Top Menu */ div#buttonbar div#weblog { background-color: #7f7f00; height: 40px; width: 150px; float: left; } /* Tombol Download di Top Menu */ div#buttonbar div#download{ background-color: #7f00f7; height: 40px; width: 150px; float: left; } /* ----------Header sampai di sini----------- */

    2.

    Kedua, buat file index.html Ketikkan listing berikut ini:


    <html> <head> <title>Membuat Header Tidak Biasa</title> <link href="style.css" rel="stylesheet" type="text/css"> </head> <body> <div id="layout"> <div id="main"> <div id="logo">Logo</div> <div id="banner">Banner</div> <div id="buttonbar"> <div id="about">Tombol About</div> <div id="gallery">Tombol Gallery</div> <div id="weblog">Tombol Weblog</div> <div id="download">Tombol Download</div> <div id="forum">Tombol Forum</div> </div> </div> </div> </body> </html>

    3. Jalankan file index.html, maka Anda akan melihat tampilan yang cukup bagus :)Sampai pada tahap ini, header telah jadi. Anda bisa memodifikasinya menjadi lebih baik lagi dengan menambah gambar dan lain-lain. Selamat berkreasi!.

    Screenshot dari header web yang tidak biasa.

    Anda mungkin juga menyukai