Myjayvyn.com

Cara Membuat Landing Page: Background

6  |  796 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 <==



Bahasan berikutnya kita akan bermain-main di tag <BODY> … </BODY>. Seperti yang sudah dijelaskan sebelumnya bahwa tag <BODY> ini berfungsi untuk menampilkan isi dari dokumen HTML. Pada sebuah browser, tag <BODY> ini meliputi seluruh display area browser.

Sekarang, mari kita sederhanakan lagi desain halaman web LP kemaren. Didalam <BODY> … </BODY> biasanya akan dibagi lagi menjadi 3 bagian juga, yaitu header, content dan footer. Masing-masing bagian tersebut memiliki luas area yang dapat kita atur sesuai keinginan. Anda nanti bisa mengatur tinggi ataupun lebar bagian header, content maupun footernya.

layout

Karena setiap bagian memiliki luas area masing-masing, berarti setiap bagian memiliki batas wilayah untuk membedakan daerah kekuasaannya masing-masing. Mengetahui batas wilayah sangat penting agar kita tidak salah meletakan perintah pada dokumen HTML.

Berikutnya kita akan coba menambahkan sebuah wilayah berbentuk kotak persegi panjang dan memberikan warna pada wilayah body background.

  • Panggil kembali aplikasi notepad
  • Kali ini buka style.css dari folder kerja anda
  • Lalu tambahkan script berikut
body{
background-color: #dcfcd3;
}

#main
{

width:828px;
height:1500px;
background-position:center;
margin: 80px auto 80px auto;
background-color: #ffffff;
	}
  • Klik save.

terjemahan

Kalo anda perhatikan pada style.css ada tulisan margin: 80px auto 80px auto; cara pembacaannya dimulai dari atas searah jarum jam margin: atas kanan bawah kiri. Atau penulisannya bisa juga dipecah menjadi:
margin-top: 80px;
margin-right: auto;
margin-bottom: 80px;
margin-left:auto;

  • Silakan buka file index.html kembali melalui browser, cek apakah ada perubahan warna body background dan penambahan wilayah berbentuk kotak persegi panjang?
  • Jawabnya tentu belum ada bos, karena keberadaan file style.css harus ditautkan dulu dengan file index.html. Caranya mudah juga, tambahkan script berikut diantara <HEAD> … </HEAD> pada file index.html.
<link rel="stylesheet" type="text/css" href="style.css">
  • Lalu tambahkan pula tag pembuka <DIV> persis setelah tag <BODY> dan tag penutup </DIV> persis sebelum tag </BODY> gunanya untuk membuat wilayah baru dan memanggil fungsi yang sudah diatur dalam file style.css
<div id="main">
</div>
  • Perubahan script pada index.html akan menjadi seperti ini:
<!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">
           <P>Mamah.. Papah.. aku lagi diajarin bikin web lho!</P>
           <P>Sponsor: http://jayvyn-host.com</P>
      </div>
   </BODY>
</HTML>

Nah bagaimana? apakah anda mendapatkan tambahan ilmu dari artikel ini? Tampilan index.html anda harusnya seperti gambar dibawah ini…

fag

Bersambung lagi….

Author: Agie

Semoga bermanfaat :)

More Posts - Website

Follow Me:
TwitterFacebookPinterestGoogle Plus

6 Comments

  1. Elfitra Azliyanti

    Pak, di aku kok gak muncul ya kotaknya. Udah di reload. Mnculnya

    Mamah.. Papah.. aku lagi diajarin bikin web lho!

    Sponsor: http://jayvyn-host.com

    trus kosong… Kira2 salahnya apa ya pak?

    Thanks

So, what do you think ?