11. Link

HTML Dasar: Link

Sebuah situs web umumnya adalah kumpulan dari dokumen-dokumen HTML. Masing-masing halaman/dokumen saling berkaitan satu sama lain.

Contoh yang paling dasar adalah: sebuah halaman web biasanya memiliki minimal 3 buah halaman:

  1. Halaman home di url /index.html
  2. Halaman tentang kami di url /tentang-kami.html
  3. dan Halaman kontak di url /kontak.html

Sebagai user, kita bisa mengunjungi halaman-halaman tersebut langsung dengan menuliskan alamatnya di dalam browser. Akan tetapi cara ini tentu saja tidak efisien, selain kita harus buang waktu untuk mengetik url, kita juga harus menghafal url-url tersebut.

Oleh karena itu HTML memberikan kita sebuah fitur yang bernama hyperlink atau anchor tag.

Hyperlink merupakan sebuah teks atau tombol di dalam dokumen HTML yang kalau kita klik, ia akan membawa kita menuju halaman lain.

Jadi kalau kita misalkan mengklik menu Home, browser akan membawa kita ke halaman home. Jika kita mengklik menu About, browser akan membawa kita ke halaman about dan seterusnya, maka menu-menu tersebut dikatakan sebuah hyperlink atau lebih singkatnya sering juga disebut sebagai link.

Di dalam HTML, link didefinisikan dengan tag <a> yang merupakan singkatan dari anchor yang berarti jangkar.

Atribut href

Tag <a> setidaknya harus memiliki satu atribut yaitu atribut href, di mana pada atribut tersebut kita akan mendefinisikan URL dari link yang kita buat.

Perhatikan contoh berikut:

<p>Kita bisa mengunjungi sosial media melalui link berikut:</p>

<p>
  <a href="https://facebook.com">Facebook</a> <br>
  <a href="https://instagram.com">Instagram</a> <br>
  <a href="https://twitter.com">Twitter</a>
</p>

Hasil keluaran:

Jika kita mengklik link-link di atas, browser akan mengarahkan kita ke URL yang terdapat pada atribut href.

Secara default, link pada setiap browser akan ditampilkan dengan ketentuan berikut:

  • Link yang belum pernah dikunjungi akan ditampilkan dengan warna biru dan memiliki garis bawah.
  • Link yang sudah pernah dikunjungi akan ditampilkan dengan warna ungu dan memiliki garis bawah.
  • Dan link yang dalam keadaan aktif akan berwarna merah dan memiliki garis bawah.

Untuk mencoba link yang sedang aktif, kita bisa mengklik sebuah link lalu menahannya, kemudian link yang kita tahan tersebut warnanya akan berubah menjadi merah.

Tentu saja, kita bisa mengatur tampilan sebuah link dengan CSS.

Perhatikan contoh berikut:

<a
  href="http://facebook.com"
  style="background-color: #3b5998; color: white;
    padding: .5rem 1.25rem; border-radius: .3rem;
    text-decoration: none">
  Facebook
</a>

Hasil keluaran:

Lebih terlihat seperti tombol bukan?

Atribut target

Berikutnya, tag <a> memiliki atribut target yang bisa kita isi dengan beberapa nilai:

  • _self - ini adalah default. Link akan dibuka di halaman yang sedang aktif.
  • _blank - link akan dibuka dalam tab baru.
  • _parent - link akan dibuka pada parent frame (jika suatu dokumen dimuat dalam <iframe>)
  • _top - link akan dibuka pada frame paling atas (jika suatu dokumen dimuat dalam <iframe> bertingkat)

Perhatikan contoh berikut:

<h1>Contoh link berdasarkan targetnya:</h1>

<p>
  <a href="https://jagongoding.com/web/html/dasar/overview">
    Tutorial HTML Dasar (self)
  </a>
</p>
<p>
  <a
    href="https://jagongoding.com/web/php/dasar/overview"
    target="_blank">
    Tutorial PHP Dasar (blank)
  </a>
</p>
<p>
  <a
    href="https://jagongoding.com/python/dasar/overview"
    target="_parent">
    Tutorial Python Dasar (parent)
  </a>
</p>
<p>
  <a
    href="https://jagongoding.com/python/menengah/overview"
    target="_top">
    Tutorial Python Menengah (top)
  </a>
</p>

Hasil keluaran:

Pada contoh di atas mungkin nilai _self, _top dan _parent tidak terlihat bedanya. Ketiganya sama-sama membuka link pada halaman yang sedang aktif (halaman yang sedang teman-teman buka sekarang). Akan tetapi jika kita mengklik link dengan target _blank, browser akan membawa kita menuju sebuah tab baru.

Atribut title

Berikutnya kita bisa menambahkan atribut title pada tag <a>.

Fungsi dari atribut title adalah untuk menampilkan sebuah tooltip ketika user mengarahkan kursornya ke atas sebuah link.

Perhatikan contoh berikut:

<p>
  Untuk lebih lengkapnya silakan kunjungi
  halaman <a href="https://jagongoding.com/python"
  title="Tutorial Python">berikut</a>
</p>

Hasil keluaran:

Teman-teman bisa mengarahkan kursor di atas tulisan berikut, nanti browser akan menampilkan sebuah tooltip dengan tulisan Tutorial Python.

URL Relatif vs URL Absolut

Berikutnya adalah perbedaan antara URL relatif dan URL absolut.

URL absolut adalah URL yang ditulis secara lengkap mulai dari domain dan path-nya.

Ada pun URL relatif adalah URL yang hanya ditulis path-nya saja tanpa domain. Dan browser akan otomatis menganggap domain dari link tersebut adalah domain dari situs yang sedang kita buka.

Perhatikan contoh berikut:

<h4>Contoh URL lengkap</h4>

<a href="https://jagongoding.com/python/dasar/overview">
  Tutorial Python
</a>

<h4>Contoh URL relatif</h4>

<a href="/web/php/dasar/overview">
  Tutorial PHP
</a>

Hasil keluaran:

Selain link berupa teks, kita juga bisa membuat link yang berupa gambar.

Caranya sangat mudah yaitu kita hanya perlu meletakkan tag <img> di dalam tag <a>.

Perhatikan contoh berikut:

<a href="/">
  <img src="https://jagongoding.com/images/jagongoding-logo-full.png">
</a>

Hasil keluaran:

Selain link yang mengarah ke sebuah halaman web (dengan protokol http mau pun https), sebuah link juga bisa mengarah ke sebuah email.

Kita bisa melakukan hal tersebut dengan menulis mailto:{alamat-email} di dalam atribut href.

Perhatikan contoh berikut:

<p>
  Silakan hubungi email berikut:
</p>

<a href="mailto:indonesiagoid@mail.​kominfo.go.id">
  indonesiagoid@mail.​kominfo.go.id
</a>

Hasil keluaran:

Jika kalian klik link email di atas, sistem akan mengarahkan ke aplikasi pembuka email (tergantung dari konfigurasi OS masing-masing pengguna).

Yang terakhir tapi bukan yang paling akhir, kita juga bisa membuat link yang mengarah ke sebuah nomor telpon. Yang mana jika kita klik link tersebut, browser akan mengarahkan kita untuk langsung menghubungi (menelpon) nomor tersebut (tentunya hal ini hanya bisa dilakukan jika dokumen HTML dibuka lewat perangkat ponsel).

Untuk membuat link yang mengarah ke sebuah nomor telpon, kita bisa menulis tel:{nomor-telpon} pada atribut href.

Perhatikan contoh berikut:

Silakan hubungi ambulan di nomor
telpon <a href="tel:118">118</a>

Hasil keluaran:

Kode Program Lengkap

Bagi kalian yang ingin mendapatkan kode program lengkap, silakan kunjungi repository html-dasar di github.

Jangan lupa kasih ⭐⭐

Pertemuan Selanjutnya

Insyaallah pada pertemuan selanjutnya kita akan membahas tentang macam-macam cara menampilkan gambar pada dokumen HTML.

Stay tune!