Myjayvyn.com

Cara Membuat Landing Page: Text Content

2  |  506 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…
Jika anda sudah berhasil pada tahap sebelumnya, yang perlu dilakukan selanjutnya adalah menuliskan konten untuk landing page tersebut. Bisa diawali dengan mencari ide, kira-kira  tulisan apa yang akan anda tampilkan di landing page tersebut. Untuk itu saya beri waktu 5 menit untuk mengarang, selesai ga selesai dikumpulkan… dimulai dari sekarang… tik.. tok.. tik.. tok..

Time’s up!!! hehe…
Saya akan memberi contoh, bagaimana menambahkan tulisan pada bagian konten di file index.html. Seperti pelajaran sebelumnya, kita perlu buatkan dulu daerah untuk menuliskan konten tersebut.

  • Bukalah kembali file index.html anda
  • Tambahkan kembali tag div dengan memanggil fungsi “content” untuk pengaturannya, misalnya <div id=”content”>  </div>. Letakan setelah tag penutup header dan diantara tulisan “mamah… dan sponsor…” seperti berikut 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">
               <div id="header"> 
               </div>
                    <div id="content"> 
                    <P>Mamah.. Papah.. aku lagi diajarin bikin web lho!</P>
                    <P>Sponsor: http://jayvyn-host.com</P>
                    </div>
          </div>
       </BODY>
    </HTML>
  • Anda bisa hapus tulisan “mamah… sponsor…” dan menggantinya dengan karya tulisan yang anda miliki. Misalkan saya memiliki 3 paragraph tulisan, maka setiap paragraph tersebut dibungkus oleh tag <p> dan </p>
  • <!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>
                    <div id="content"> 
    
    <p>Bila kuingat lelah ayah bunda, Bunda piara piara akan daku sehingga aku besarlah
    Waktuku kecil hidupku amatlah senang senang dipangku dipangku dipeluknya serta dicium dicium dimanjakan namanya kesayangan</p>
    
    <p>Kasih ibu, kepada beta tak terhingga sepanjang masa
    Hanya memberi, tak harap kembali, Bagai sang surya, menyinari dunia.</p>
    
    <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>
       </BODY>
    </HTML>
  • Save dan coba lihat hasilnya di browser
  • wpb96

Nah kalo sudah, supaya tampilannya lebih ciamik lagi kita bisa atur beberapa hal seperti posisi tulisannya, ukuran font, jenis font dan sebagainya di file style.css

  • Buka file style.css
  • Tambahkan pengaturan “content” dibawah ini
  • #content{
    width:788px;
    height: 1100px;
    margin: 20px 20px 20px 20px;
    text-align:center;
    font-family: verdana;
    font-size: 20px;
    background-color: #cecece;
    }
  • Lakukan save dan reload kembali file index.html pada browser.
  • content1
  • Ukuran font bisa anda rubah sendiri sesuai keinginan, jenis font diatur di font-family. Tidak semua jenis font bisa ditampilkan oleh browser, standarnya jenis font diantaranya times new roman, arial, verdana, tahoma, georgia. Untuk jenis font yang unik bisa menggunakan font yang disediakan oleh google. Perlu bab khusus untuk membahas penggunaan font google tersebut.
  • Anda bisa menghapus warna background abu-abu jika tidak memerlukannya.

Pada bab berikutnya kita akan coba menambahkan gambar pada bagian konten.

Bersambung lagi…

Author: Agie

Semoga bermanfaat :)

More Posts - Website

Follow Me:
TwitterFacebookPinterestGoogle Plus

2 Comments

So, what do you think ?