Myjayvyn.com

Cara Membuat Landing Page: Footer

1  |  794 Views

Cara membuat landing page: footer. Bagian ini adalah bagian penutup dari sebuah website yang dapat berisi informasi seperti lisensi penggunaan, sitemap, link ke website lain dan sebagainya.

  • buka file index.html anda
  • Seperti biasa, kita perlu menandai area footer terlebih dahulu. Tambahkan tag berikut <div id=”footer”> </div> sebelum tag penutup </div> </BODY> </HTML>
  • Berikan sedikit tulisan diantara tag footer tersebut untuk ditampilkan. Contoh:
    <div id=”footer”>
    Copyright 2013<br/>
    Belajar Membuat Landing Page<br/>
    All Rights Reserve
    </div>
  • <p>Jika ku sudah besar nanti Ku pergi dengan ibu Ibu boleh pilih sendiri Kemana yang dituju
    Ibu bisa pilih Jogya, Bandung atau Semarang Aku yang beli karcisnya Karcis Kapal Terbang</p>
                    </div>
                          <div id="footer">
    		          Copyright 2013<br/>
    		          Belajar Membuat Landing Page<br/>
    		          All Rights Reserve
    		      </div>
          </div>
       </BODY>
    </HTML>
  • Lalu save kembali file index.html anda.
  • Berikutnya anda buka file style.css
  • Tambahkan coding berikut untuk mengatur luas daerah footernya dan saya menandai daerah footer dengan memberi warna background hijau dan melakukan pengaturan terhadap kontennya.
  • #footer {
    padding:20px 0px 20px 0px;
    background: #50AC27;
    color: #fff;
    font-family: Arial, verdana, Helvetica, Geneva; 
    font-size: 12px;
    text-align:center;
    }
  • Lakukan Save.
  • Lalu cek tampilan web anda di browser.
    wpb327

Keterangan properti css:
padding memiliki fungsi yang hampir sama dengan margin. Kalo margin mengatur batas jarak luar sedangkan padding mengatur batas jarak dari dalam. Padding: 20px 0px 20px 0px artinya jika dibaca dari kiri ke kanan 20px batas jarak atas, 0px batas jarak kanan, 20px batas jarak bawah, 0px batas jarak kiri.

background tentunya anda sudah memahaminya, sebagai pemberi tampilan wilayah yang bisa berupa warna ataupun gambar. Kode #50AC27 adalah kode warna yang bisa anda dapatkan melalui aplikasi photoshop atau melalui website berikut html-color-codes.com

color berfungsi memberikan warna pada font atau huruf

font-family adalah jenis huruf yang ingin anda gunakan. Jika komputer anda tidak support arial maka browser akan menampilkan website anda dalam huruf verdana, jika arial dan verdana tidak support maka otomatis menampilkan website dalam huruf helvetica dan seterusnya. Untuk jenis huruf yang unik, browser biasanya tidak langsung mengenalinya. Perlu trik khusus untuk mengakalinya.

font-size adalah ukuran huruf

text-align berfungsi untuk mengatur posisi objek tulisan atau gambar.

Author: Agie

Semoga bermanfaat 🙂

More Posts - Website

Follow Me:
TwitterFacebookPinterestGoogle Plus

One Comment

So, what do you think ?