Hiperlink (HTML 3)

www.rizkyramadhansttg.wordpress.com
rizky_ramadhan7@yahoo.co.id


Hiperlink
Link merupakan hubungan antar dokumen atau halaman tertentu dalam suatu dokumen. Kita sering berpindah – pindah halaman web dengan hanya mengklik suatu huruf , kata, kalimat, bahkan gambar tertentu di dalam halaman web. Agar dokumen kita memiliki kemampuan seperti itu, kita harus memberikan perintah link.

Link Dengan Teks
Contoh program Link dengan Teks

Buka Notepad dan ketikkan source program berikut:

<HTML>
<head>
<title>Hiperlink Teks dan Gambar</title>
</head>
<body bgcolor=”#d3d3d3″>
<h2><b>HIPERLINK<b></h2>
<font size = 4><p> Hiperlink merupakan ciri khas dari world wide web, dimana informasi<br> yang satu dengan yang lainnnya dihubungkan dalam jaringan internet.</p> <hr>
Klik pada tulisan<a HREF=”D:\Rizky\source1.htm”>Link Teks</a> untuk melihat file Teks. <br>
Klik pada tulisan<a HREF=”D:\Rizky\source2.htm”>Link gambar</a> untuk melihat file gambar.<br>
</HTML>

Simpan dengan nama Source3.htm

Jalankan dengan browser dan hasilnya akan seperti gambar di bawah ini

Keterangan
– Ketika kita meng-klik kata Link Teks, maka kita akan menuju file source1.htm yang berisi teks.
– Ketika kita meng-klik kata Link Gambar, maka kita akan menuju file source2.htm yang berisi teks dan gambar
– File source1.htm dan source2.htm merupakan file yang telah kita buat di latihan sebelumnya dan tergantung dimana letak anda menyimpannya.

Link dengan Gambar
Selain Link dengan Teks, kita pun dapat membuat link dengan gambar sehingga kita tinggal meng-klik gambar tersebut untuk berpindah halaman
Contoh program Link Gambar1
– Buka notepad dan ketikkan perintah berikut:

<HTML>
<head>
<title>Hiperlink Teks dan Gambar</title>
</head>

<body bgcolor=”#d3d3d3″>
<h2><b>HIPERLINK<b></h2>
<font size = 4><p>Gambar ini adalah foto penulis, untuk ke menu berikutnya<br>
silahkan klik foto penulis</p> <hr>
<a HREF=”D:\Education\Web Course\Course 1\Hiperlink\source3c.htm”>
<IMG SRC=”D:\Education\Web Course\Course 1\Hiperlink\Rizky.jpg” align=”left” height=”150″ weight=”100″></a>
</HTML>

Simpan program pertama dengan nama Source3b.htm , lalu buat file baru

Contoh program Link Gambar2

<HTML>
<head>
<title>Hiperlink Teks dan Gambar</title>
</head>
<body bgcolor=”#d3d3d3″>
<h2><b>HIPERLINK<b></h2>
<font size = 4><p>Gambar ini adalah gambar kedua, untuk kembali ke menu sebelumnya<br>
silahkan klik foto penulis</p> <hr>
<a HREF=”D:\Rizky\source3b.htm”><IMG SRC=”D:\Education\Web Course\Course 1\Hiperlink\Rizky2.jpg” align=”left” height=”150″ weight=”100″></a>
</HTML>

Simpan dengan nama Source3c.htm dan buka file pertama dengan browser

Hasil program akan tampak seperti gambar dibawah:

Ketika meng-klik fotonya, maka akan berpindah halaman, lihat hasilnya.

Link Dengan E-Mail
Selain dapat dengan cara teks dan gambar, kita juga dapat melakukan link terhadap e-mail tertentu. Yaitu dengan cara menambahkan atribut mailto:alamat-E-mailke dalam tag <a HREF=”…”>

Contoh:
<A HREF=mailto:rizky_ramadhan7@yahoo.co.id>Kirim E-Mail ke Rizky..</A>

Leave a Reply

Please log in using one of these methods to post your comment:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: