Myjayvyn.com

Cara Membuat Landing Page: Image Content

2  |  593 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 <==



hoho… pagi ini saya begitu bersemangat untuk menulis lanjutan cara membuat landing page, ga kerasa juga udah sampe seri #8
Fiuuhh…

Langsung aja, kita masih utak atik seputar konten. Kalo kemaren kita belajar menambahkan text content, kali ini dilanjut dengan cara membuat landing page: image content.
Anda siapkan 3 buah image atau gambar atau banner, usahakan ukurannya tidak lebih dari lebar daerah content nya (788px) karena bila itu terjadi gambar anda akan merangsek keluar daerah kontennya. Kecilkan saja dulu gambarnya kalo memang besar, ada banyak tools yang bisa digunakan. Kalo saya selain menggunakan photoshop menggunakan tools ini klik disini.

Atau anda bisa download 3 gambar yang saya sediakan disini sebagai sarana latihan, lalu simpan di folder kerja anda folder images.

gambar1 gambar2

gambar3

Kalo sudah mari kita belajar bagaimana cara memanggil gambar tersebut agar tampil di browser. Kenalan dulu sama yang namanya tag <img>, sebenarnya saya sudah pernah membahas tag ini sebelumnya klik disini

Jadi untuk menampilkan gambar, misalkan kita akan menampilkan gambar1.jpg aturan penulisannya seperti ini:

<img src=”images/gambar1.jpg”>

img src atau image source artinya URL sumber atau lokasi gambar yang akan kita tampilkan. src adalah salah satu atribut dari tag <img>, anda bisa menambahkan atribut lain seperti mengatur width dan height gambar, contohnya:

<img src=”images/gambar1.jpg” width=”150px” height=”100px”>

Masih banyak atribut lain yang bisa ditambahkan ke dalam tag <img>, untuk lengkapnya bisa dilihat di w3schools.com. Yang perlu dicatat bahwa tag <img> tidak memerlukan tag penutup seperti ini </img>.

Yuk kita coba tambahkan di file index.html…

  • Buka file index.html
  • Tambahkan ketiga gambar tersebut pada posisi-posisi yang anda inginkan. Contoh:
  • <!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>
    
    <img src="images/gambar1.jpg">
    
    <p>Kasih ibu, kepada beta tak terhingga sepanjang masa
    Hanya memberi, tak harap kembali, Bagai sang surya, menyinari dunia.</p>
    
    <img src="images/gambar2.jpg"> <img src="images/gambar3.jpg">
    
    <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>
  • Jangan lupa disave setiap kali melakukan perubahan pada file index.html.
  • Buka deh file index.html nya lewat browser, cek apakah ketiga gambar tersebut sudah muncul???

wpb101

Bersambuuuunnnggg…

Author: Agie

Semoga bermanfaat :)

More Posts - Website

Follow Me:
TwitterFacebookPinterestGoogle Plus

2 Comments

So, what do you think ?