Myjayvyn.com

Cara Membuat Landing Page: Text Link dan Image Link

1  |  803 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…

Sambil nunggu laga Belanda versus Timnas Indonesia gatel pengen ngasih tambahan lagi buat belajar cara membuat landing page. Gimana-gimana??? Sampe seri ke 8 kemaren bisa diikutikah? Alhamdulillah yaa..

Nah kita kan sudah belajar memasang teks dan gambar sebagai konten pada halaman index.html, pastinya ada yang bertanya tanya dong gimana caranya supaya kalo suatu teks ataupun gambar ketika diklik trus ngelink ke alamat web lain?
Biasanya dikenal dengan sebutan hyperlink.

Gunakan tag <a></a> untuk menjawab pertanyaan diatas. Lebih lengkapnya dituliskan seperti ini:

Text Link :
<a href=”URL ATAU ALAMAT WEB YANG DITUJU” target=”_blank”>TEKS YANG DITAUTKAN</a>

Image Link:
<a href=”URL ATAU ALAMAT WEB YANG DITUJU” target=”_blank”>
<img src=”
URL GAMBAR YANG DITAUTKAN“></a>

Atribut target=”_blank” fungsinya halaman web yang dituju akan dibuka di tab baru atau jendela baru pada browser.

Mari kita praktekan pada file index.html yang telah kita buat.
Saya akan tambahkan hyperlink di teks “namanya kesayangan” yang ditautkan ke alamat http://jayvyn-host.com dan “gambar3.jpg” ditautkan ke alamat http://www.dbc-network.com/?act=daftar&id=jayvyn270204

Codingnya akan seperti ini..

untuk teks “namanya kesayangan” :
<a href=”http://jayvyn-host.com” target=”_blank”>namanya kesayangan</a>

untuk gambar3.jpg :
<a href=”http://www.dbc-network.com/?act=daftar&id=jayvyn270204” target=”_blank”>
<img src=”
images/gambar3.jpg“></a>

Paham??? Mudah-mudahan ada gambaran yaa.. coding lengkapnya seperti berikut:

<!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 <a href="http://jayvyn-host.com" target="_blank">namanya kesayangan</a></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"> <a href="http://www.dbc-network.com/?act=daftar&id=jayvyn270204" target="_blank"><img src="images/gambar3.jpg"></a>

<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>

Saat kursor mouse diarahkan ke Text link atau Image link, akan ditandai dengan berubahnya gambar cursor mouse dari tanda panah menjadi tangan menunjuk keatas. Teks link juga kadang ditandai dengan warna berbeda dan bergaris bawah.

Cara Membuat Landing Page: Text Link dan Image Link

Cara Membuat Landing Page: Text Link dan Image Link

Catatan! Ketika menuliskan kode jangan sampai lebih atau ada yang kurang seperti tanda kutip, kurung buka maupun tutup. Kesalahan tersebut akan menimbulkan kekacauan tampilan halaman web di browser atau bahkan tidak tampil sama sekali. Jadi harap hati-hati dan lebih teliti yaaa…

Segitu aja deh.. soalnya pertandingan Belanda lawan Timnas Indonesia 5 menit lagi mulai hehehe…
Silakan menambahkan text link dan image link sesuai kebutuhan anda, caranya persis sama seperti yang saya ajarkan diatas yaaa…

Bersambung again…

Author: Agie

Semoga bermanfaat :)

More Posts - Website

Follow Me:
TwitterFacebookPinterestGoogle Plus

One Comment

So, what do you think ?