Hyperlink HTML

Hyperlink digunakan untuk menghubungkan antar dokumen di dalam web. Tag HTML Hyperlink biasa disebut dengan anchor (a) kemudian diikuti dengan href sebagai alamat tujuan dari link tersebut. Berikut adalah contoh-contoh Hyperlink di dokumen HTML:

Jika anda ingin mengunjungi YouTube <a href="https://www.youtube.com/">klik disini</a>

Jika anda ingin mengunjungi YouTube klik disini

<a href="https://www.yahoo.com/">Link ini</a> akan membawa anda ke Yahoo.com

Link ini akan membawa anda ke Yahoo.com

Agar hyperlink dibuka pada jendela browser yang baru tambahkan atribut target

<a href="https://www.microsoft.com/" target="_blank">websitenya Microsoft</a>

Link berikut akan terbuka di jendela baru websitenya Microsoft

Agar hyperlink tidak bergaris bawah tambahkan properti text-decoration

<a href="https://www.youtube.com/"target="_blank" style="text-decoration: none">YouTube</a>

Untuk membuat hyperlink dengan menggunakan gambar. Pastikan gambar tersebut berada pada folder yang sama dengan dokumen html anda dan harus tahu nama dan ektensinya, kemudian ganti ke atribut yang bertuliskan scr, misalkan jika nama gambar tersebut adalah yahoo.gif, maka :

<a href="https://www.yahoo.com"><img src="yahoo.gif" border="0" width="147" height="31"></a>



Tag img adalah tag untuk menyisipkan gambar pada dokumen HTML, border adalah garis yang mengelilingi sisi gambar, width dan height merupakan lebar dan tinggi dari image.

Kreatiflah untuk menganti nilai yang ada diantara tanda "..." sehingga anda akan lebih mengerti. Untuk memposisikan gambar, tambahkan dengan atribut align="...", left= kiri, center= tengah dan right= kanan.

<a href="https://www.yahoo.com"> <img src="yahoo.gif" border="0" width="147" height="31" align="right"></a>



Sekarang coba geser mouse anda ke gambar di atas, jangan di-klik, perhatikan akan ditampilkan suata tulisan singkat mengenai gambar tersebut, ini disebut dengan screen tips, cara membuatnya adalah menambahkan atribut title pada tag anchor (a) sehingga menjadi:

<a href="https://www.yahoo.com" title="Hai... klik gambar ini maka anda akan dibawa ke Yahoo.com"><img src="yahoo.gif" border="0" width="147" height="31" align="right" alt="yahoo"></a>

Agar cepat mengakses internet kita boleh mengatur browser untuk tidak menampilkan gambar. Dan semua gambar akan ditampilkan dengan teks alternatif (alt), jika gambar tesebut tidak memiliki alternatif teks maka hanya akan dilambangkan dengan lambang x.

<a href="https://www.yahoo.com"> <img border="0" src="missing.jpg" width="120" height="30" align="left" alt="Text Alternatif Yahoo.com"></a>

Dalam contoh ini src atau source gambar yaitu missing.jpg sengaja dihapus agar alt-nya ditampilkan, maka hasilnya adalah seperti berikut ini:

Text Alternatif Yahoo.com

Atribut border dan align merupakan deprecated atribut jika di gunakan di dalam tag <img> jadi kita dapat menggantinya dengan atribut style dengan properti border untuk atribut border dan properti float untuk atribut align.

<a href="https://www.yahoo.com" title="Hai... klik gambar ini maka anda akan dibawa ke Yahoo.com"><img src="yahoo.gif" style="border:none;float:left" width="147" height="31" alt="yahoo"></a>

yahoo

Thumbnail Link.

Thumbnail link digunakan untuk gambar yang berukuran besar. Caranya dengan membuat duplikat dari gambar tersebut dengan ukuran yang jauh lebih kecil yang disebut dengan thumbnail. Jadi gambar ukuran besar tersebut baru ditampilkan setelah kita mengklik gambar tumbnail tersebut.

<a href="gambar-besar-1160X700px.jpg"><img src="gambar-kecil-150X100px.jpg" style="border:none" width="150" height="100" title="Klik untuk melihat gambar original" alt="contoh tumbnail"></a>

contoh tumbnail link

Membuat link di dalam satu halaman website.

Pada tulisan ini tepatnya pada bagian atas setelah titel Hyperlink HTML saya menambahkan tag di bawah ini:

<a name="top"></a>

Dengan tag tersebut kita dapat membuat link ke lokasi tersebut dengan membuat link seperti berikut ini:

Klik link berikut untuk <a href="#top">Kembali ke atas</a>

Klik link berikut untuk Kembali ke atas

Dengan cara diatas kita juga bisa membuat link ke suatu halaman website dan langsung melompat ke topik tertentu di dalam satu halaman.

Link berikut akan membawa anda ke artikel tentang Format teks dan tulisan tentang <a href="https://internet-teknologi-informasi.blogspot.com/2014/05/format-teks-dan-tulisan-html.html#Membuat tulisan bergaris bawah">membuat tulisan bergaris bawah</a>.

Link berikut akan membawa anda ke artikel tentang Format teks dan tulisan tentang membuat tulisan bergaris bawah.

Contoh diatas dapat dibuat dengan menambahkan tag berikut sebelum tulisan "membuat tulisan bergaris bawah" pada halaman tujuan seperti contoh diatas adalah https://internet-teknologi-informasi.blogspot.com/2014/05/format-teks-dan-tulisan-html.html

<a name="Membuat tulisan bergaris bawah"></a>

Atau bisa juga dengan menambahkan atribut "id" di dalam tag link tujuan. Seperti contoh, bila tulisannya berada di dalam tag <h3> jadi kita bisa menuliskan:

<h3 id="Membuat tulisan bergaris bawah">Membuat tulisan bergaris bawah</h3>

Untuk membuat link ke lokasi tersebut kita harus membuat link ke halaman utamanya dulu baru kemudian di ikuti dengan nama atau id dengan format: "#nama-link".

<a href="https://internet-teknologi-informasi.blogspot.com/2014/05/format-teks-dan-tulisan-html.html#Membuat tulisan bergaris bawah">membuat tulisan bergaris bawah</a>

Membuat Email Link.

<a href="mailto:alamat email">link teks</a>

Jika ada masalah silahkan kirim <a href="mailto:support@nama-domain.com">Email</a> ke bagian pelayanan.

Jika ada masalah silahkan kirim Email ke bagian pelayanan.

Demikianlah cara-cara membuar hyperlink pada dokumen HTML.


2 comments:

  1. gan, kalo mau buat link dalam tabel tapi setelah diklik tampilnya di tabel tersebut juga, mohon infonya gan

    ReplyDelete
    Replies
    1. Bisa dicoba seperti contoh ini gan menggunakan css
      http://jsfiddle.net/6W7XD/

      Delete