Cara menggunakan tautan html

Sebuah situs web umumnya merupakan kumpulan dokumen HTML. Setiap halaman/dokumen saling terkait satu sama lain

Contoh paling mendasar adalah. Sebuah halaman web biasanya memiliki minimal 3 halaman

1. Beranda di url /index.html
2. Tentang kami halaman di url /tentang-kami.html
3. dan halaman Kontak di url

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

   0

Sebagai pengguna, kita dapat mengunjungi halaman tersebut secara langsung dengan menuliskan alamatnya di browser. Namun cara ini tentu tidak efisien, selain kita harus membuang waktu mengetik url, kita juga harus menghafal url tersebut.

Oleh karena itu HTML memberi kita fitur yang disebut hyperlink atau tag jangkar

Apa itu Hyperlink atau Tag Jangkar?

Hyperlink adalah teks atau tombol dalam dokumen HTML yang jika kita klik akan membawa kita ke halaman lain

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

Dalam HTML, link didefinisikan dengan tag

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

Atribut href

Tag

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

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

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 tautan di atas, browser akan mengarahkan kita ke URL yang terdapat di atribut

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

Tautan Tampilan

Secara default, link pada masing-masing browser akan ditampilkan dengan ketentuan sebagai berikut

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

Untuk mencoba link yang aktif, kita bisa mengklik link tersebut dan menahannya, kemudian link yang kita pegang akan berubah warna 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 mirip tombol kan?

Atribut target

Selanjutnya tag

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

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

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

  7 - ini adalah default. Tautan akan terbuka di halaman aktif

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

  8 - tautan akan terbuka di tab baru

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

  9 - tautan akan dibuka pada bingkai induk (jika dokumen dimuat di

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

  0)

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

  1 - tautan akan terbuka di bingkai atas (jika dokumen dimuat di

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

  0)

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

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

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

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

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

Atribut judul

Selanjutnya kita dapat menambahkan atribut

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

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

Fungsi dari atribut

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

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, Anda dapat menempatkan kursor di atas teks berikut, browser akan menampilkan tooltip dengan teks Tutorial Python

URL Relatif vs URL Absolut

Berikutnya adalah perbedaan antara URL relatif dan URL absolut

URL absolut adalah URL yang ditulis lengkap mulai dari domain dan jalurnya

Ada juga relative URL yaitu URL yang hanya dituliskan path saja tanpa domain. Dan secara otomatis browser akan menganggap domain dari link tersebut sebagai domain situs yang 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

Buat tautan dalam bentuk gambar

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

Caranya sangat sederhana yaitu kita hanya perlu memasukkan tag

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

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

Perhatikan contoh berikut

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

Hasil keluaran

Buat Tautan ke Alamat Email

Selain tautan yang mengarah ke halaman web (dengan protokol

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

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

Kita dapat melakukannya dengan menulis

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

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

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 Anda mengklik tautan email di atas, sistem akan mengarahkan Anda ke aplikasi pembuka email (tergantung konfigurasi OS masing-masing pengguna)

Membuat Tautan ke Nomor Telepon

Last but not least, kita juga bisa membuat link yang mengarah ke nomor telepon. Yang mana jika link tersebut kita klik maka browser akan menginstruksikan kita untuk langsung menghubungi (call) nomor tersebut (tentunya ini hanya bisa dilakukan jika dokumen HTML dibuka melalui perangkat mobile)

Untuk membuat link yang mengarah ke nomor telepon, kita dapat menuliskan

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

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

Perhatikan contoh berikut

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

Hasil keluaran

Kode Program Lengkap

Bagi anda yang ingin mendapatkan kode program lengkapnya silahkan kunjungi repositori html-dasar di github

Jangan lupa kasih ⭐⭐

Pertemuan Lanjutan

Insya Allah pada pertemuan berikutnya akan dibahas berbagai cara menampilkan gambar pada dokumen HTML

Bagaimana cara membuat tautan dalam HTML?