Myjayvyn.com

Cara Membuat Landing Page: header

6  |  822 Views
Advertisement
7 Ibu rumah tangga DAN mantan karyawan
BEKERJA online DARI RUMAH

DAN KINI BERPENGHASILAN 7-20jt per bulan


Yuk cari tahu bisnis mereka
==> Follow My Facebook <==



Lanjutan…
Hari ini saya akan menambahkan header pada daerah #main yang sudah kita buat sebelumnya di file index.html dan diatur di style.css. Dimana ukuran header tersebut akan saya set dengan lebar 828px (mengikuti lebar #main) dan tinggi 250px. Jika anda memiliki ukuran sendiri, silakan ubah ukurannya sesuka anda. Caranya:

  • buka kembali file index.html anda
  • tambahkan tag berikut <div id=”header”> </div> persis setelah tag <div id=”main”>.
  • <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
       "http://www.w3.org/TR/html4/strict.dtd">
    <HTML>
       <HEAD>
          <link rel="stylesheet" type="text/css" href="style.css">
          <TITLE>Belajar Bikin LP</TITLE>
       </HEAD>
       <BODY>
          <div id="main">
    	  <div id="header"> </div>
              <P>Mamah.. Papah.. aku lagi diajarin bikin web lho!</P>
              <P>Sponsor: http://jayvyn-host.com</P>
          </div>
       </BODY>
    </HTML>
  • Lalu save kembali file index.html anda.
  • Berikutnya anda buka file style.css
  • Tambahkan coding berikut untuk mengatur luas daerah headernya dan saya menandai daerah header dengan memberi warna background pink.
  • #header{
    width:828px;
    height: 250px;
    background-color: #ff90f3;
    }
  • Lakukan Save.
  • Lalu cek tampilan web anda di browser. Hasilnya harus seperti gambar berikut ini:
  • header1
  • Rubahlah warna background header sesuka anda.

Baiklah mudah-mudahan sampe disini anda bisa menangkap hal-hal yang memang seharusnya anda tangkap haha.. minimal anda mengerti fungsi dari kedua file tersebut.

Bagaimana seandainya jika ingin mengganti warna latar header tersebut dengan sebuah gambar atau logo? Gampanglah..

  • Pertama-tama, buka folder kerja anda. Lalu buatlah folder baru dengan judul “images”
  • wpb94
  • Lalu siapkan gambar yang sesuai dengan ukuran daerah header yaitu width 828px dan height 250px, kalo belum punya anda bisa download gambar berikut klik disini dan simpan didalam folder images.
  • Nah langkah selanjutnya memberitahukan browser adanya gambar tersebut dengan menuliskan codingnya di style.css menjadi seperti ini
  • #header{
    width:828px;
    height: 250px;
    background: url('images/housewife.jpg') no-repeat;
    }
  • Perhatikan kita tidak lagi menuliskan background-color: tapi menggantinya dengan background: url (‘lokasi gambar’). No-repeat artinya gambar hanya dimunculkan satu kali tidak berulang.
  • Jangan lupa disave file style.css nya supaya kita bisa melihat perubahan yang terjadi pada browser.
  • header2

Bagaimana bisa ditelan mentah-mentahkah teman-teman? hehe…

Bersambung…

Author: Agie

Semoga bermanfaat :)

More Posts - Website

Follow Me:
TwitterFacebookPinterestGoogle Plus

6 Comments

  1. risma

    ko belum berubah ya warna header dan gambarnya juga. masukin kode

    #header{
    width:828px;
    height: 250px;
    background-color: #ff90f3;
    }
    setelah } yg main itu bukan pa?

  2. Ayah Jayvyn

    mungkin belum direload/refresh utk melihat tampilan barunya..

    #main
    {
    width:828px;
    height:1500px;
    background-position:center;
    margin: 80px auto 80px auto;
    background-color: #ffffff;
    }

    body{
    background-color: #dcfcd3;
    }

    #header{
    width:828px;
    height: 250px;
    background:url(‘images/housewife.jpg’) no-repeat;
    }

  3. ati khalif

    pak, saya udah coba bbrp kali, tapi pas masukin kode untuk headernya gak ada perubahan, nggak nongol warna pink headernya. saya sudah copy kode seperti ini di stlye.css nya
    body{
    background-color: #dcfcd3;
    }

    #main
    {

    width:828px;
    height:1500px;
    background-position:center;
    margin: 80px auto 80px auto;
    background-color: #ffffff;

    #header{
    width:828px;
    height: 250px;
    background-color: #ff90f3;
    }

    sedangkan di index.html nya kodenya spt ini

    </HTML
    kira2 kesalahannya dimana ya?
    makasih banget atas jawabannya

  4. luky

    saya coba mengubah gambar header dengan gambar saya sendiri kok tidak bisa ya pak?

    #main
    {
    width:828px;
    height:1500px;
    background-position:center;
    margin: 80px auto 80px auto;
    background-color: #ffffff;
    }

    body{
    background-color: #dcfcd3;
    }

    #header{
    width:828px;
    height: 250px;
    background:url(‘images/onstore.jpg’) no-repeat;
    }

So, what do you think ?