Sebuah hyperlink atau link adalah kata, kelompok kata, atau gambar yang dapat Anda klik untuk melompat ke dokumen baru atau bagian baru dalam dokumen HTML. Bila Anda memindahkan kursor ke suatu link di halaman web, tanda panah akan berubah menjadi tangan kecil. Link yang ditentukan dalam HTML menggunakan tag <a>. Tag <a> dapat digunakan dalam dua cara :
- Untuk membuat link ke dokumen lain, dengan menggunakan atribut href
- Untuk membuat bookmark dalam dokumen, dengan menggunakan nama atribut
| <a href="url"> teks link </ a> |
Atribut href menentukan tujuan link, sebagai contoh :
| <a href="http://www.jerrylovers.co.cc/">Kunjungi BLOG - JERRY</ a> |
1. HTML Link - Atribut Target
Atribut target menentukan di mana untuk membuka dokumen yang terhubung.
Contoh di bawah ini akan membuka dokumen terkait dalam jendela browser bar.
| <html> <body> <a href="http://www.jerrylovers.co.cc" target="_blank">kunjungi BLOG-JERRY</a> <p>Jika Anda menetapkan atribut target untuk "_blank", link akan terbuka di jendela browser / tab baru.</p> </body> </html> |
Tampilannya adalah sebagai berikut.
2. HTML Link - Atribut Nama
Atribut name menentukan nama anchor. Atribut name digunakan untuk membuat bookmark dalam dokumen HTML. Bookmark tidak ditampilkan dalam cara khusus tapi terlihat bagi pembaca. Contohnya :
Sebuah named anchor dalam sebuah dokumen HTML.
| <a name="tips">Bagian Tips Berguna</ a> |
Buat link ke "Bagian Tips Berguna" di dalam dokumen yang sama.
| <a href="#tips">Kunjungi Bagian Tips Berguna</ a> |
Membuat link ke "Bagian Tips Berguna" dari halaman lain.
| <a href="http://www.microsoft.com/html_links.htm#tips">Kunjungi Bagian Tips Berguna </ a> |
3. Gambar sebagai Link
Contoh bagaimana cara menggunakan gambar sebagai link.
| <html> <body> <p>Buat link dari gambar : <a href="http://www.jerrylovers.co.cc/search/label/HTML"> <img src="html.png" alt="HTML" width="32" height="32" /> </a></p> <p>Tidak ada perbatasan di sekitar gambar, tapi masih link : <a href="http://www.jerrylovers.co.cc/search/label/HTML"> <img border="0" src="html.png" alt="HTML" width="32" height="32" /> </a></p> </body> </html> |
Tampilannya adalah sebagai berikut.
4. Link ke lokasi pada halaman yang sama
Contoh bagaimana cara menggunakan link berpindah pada bagian lain pada halaman yang sama.
| <html> <body> <p> <a href="#B5">Lihat Bab 5.</a> </p> <h2>Bab 1</h2> <p>Bab ini menjelaskan ba bla bla</p> <h2>Bab 2</h2> <p>Bab ini menjelaskan ba bla bla</p> <h2>Bab 3</h2> <p>Bab ini menjelaskan ba bla bla</p> <h2>Bab 4</a></h2> <p>Bab ini menjelaskan ba bla bla</p> <h2><a name="B5">Bab 5</h2> <p>Bab ini menjelaskan ba bla bla</p> <h2>Bab 6</h2> <p>Bab ini menjelaskan ba bla bla</p> <h2>Bab 7</h2> <p>Bab ini menjelaskan ba bla bla</p> <h2>Bab 8</h2> <p>Bab ini menjelaskan ba bla bla</p> <h2>Bab 9</h2> <p>Bab ini menjelaskan ba bla bla</p> <h2>Bab 10</h2> <p>Bab ini menjelaskan ba bla bla</p> </body> </html> |
Tampilannya adalah sebagai berikut.
5. Link untuk kelar dari Frame
Contoh bagaimana cara untuk keluar dari Frame (jika situs Anda terkunci dalam Frame).
| <html> <body> <p>Terkunci dalam Frame</p> <a href="http://www.jerrylovers.co.cc/" target="_top">Klik disini!</a> </body> </html> |
Tampilannya adalah sebagai berikut.
6. Membuat Link Mailto
Contoh bagaimana cara untuk membuat link ke pesan email (hanya akan bekerja jika Anda memiliki email diinstal).
| <html> <body> <p> Ini adalah link email : <a href="mailto:jerry@contoh.com?Subject=Tanya%20Jawab"> Kirim Surat</a> </p> <p> <b>Note:</b> Spasi di antara kata-kata harus diganti dengan %20 untuk memastikan bahwa browser akan menampilkan teks dengan benar. </p> </body> </html> |
Tampilannya adalah sebagai berikut.
7. Membuat link yang tidak digarisbawahi
Contoh bagaimana cara membuat suatu link yang tidak digarisbawahi.
| <html> <body> <a href="http://www.jerrylovers.co.cc" style="text-decoration:none">Ini adalah Link</a> <p> Link diatas tidak digaris bawahi.</p> </body> </html> |
Tampilannya adalah sebagai berikut.
0 comments:
Post a Comment