Tautan HTML


Tautan pada HTML merupakan sebuah hyperlink yang sering kali banyak ditemukan pada sebuah halaman website. Link memungkinkan kita untuk berpindah dari satu halaman ke halaman lainnya. Untuk mengetahui sebuah elemen memiliki tautan, arahkan mouse ke bagian tersebut, jika pointer atau penunjuk mouse berubah menjadi simbol tangan maka dapat dipastikan elemen tersebut memiliki sebuah tautan.


Sintak Tautan


Tautan atau link dalam HTML menggunakan tag <a> dengan atribut href="url" untuk mengarahkan atau mengalihkan user ke alamat tujuan.

<a href="https://kopiding.in/" title="Mampir yuk!" target="_blank"> Kunjungi Kopiding.in </a>
 Kunjungi Kopiding.in 
Elemen Keterangan
<a> Mendefinisikan hyperlink atau tautan
href Menentukan URL untuk halaman atau dokumen yang akan diakses
title Menentukan teks tambahan pada sebuah elemen
target Menentukan target tempat untuk membuka halaman atau dokumen yang akan diakses

Bermacam Nilai dari Atribut Target Tautan


Atribut target memiliki 5 nilai antara lain:

Nilai Keterangan
_blank Membuka dokumen yang ditautkan pada tab atau jendela baru
_self Membuka dokumen yang ditautkan pada tab atau jendela yang sama dengan yang diklik (default)
_parent Membuka dokumen yang ditautkan pada parent frame
_top Membuka dokumen yang ditautkan pada seluruh jendela
framename Membuka dokumen yang ditautkan pada frame dengan nama tertentu

Tautan Lokal


Pada contoh sebelumnya kita mencoba untuk mengakses halaman menggunakan URL penuh dengan mencantumkan semua alamat web (https://….), ini bisa juga disebut URL absolut. Namun kita juga dapat mengakses halaman tanpa menggunakan https://… jika posisi kita saat ini berada pada halaman yang masih satu folder dengan halaman yang lain. Contoh misalkan dalam website kopiding.in terdapat halaman pengenalan-html.html yang mana halaman ini ada di dalam folder tutorial-html/. Maka kita tidak perlu menulis URL nya secara utuh seperti ini.

<a href="https://kopiding.in/tutorial-html/pengenalan-html.html"> Belajar HTML</a>

Kita bisa menuliskannya seperti ini. Kode di bawah ini akan menghubungkan kita ke halaman yang terletak pada folder html di situs web saat ini.

<a href="/html/tutorial-html.html"> Belajar HTML</a>

Sedangkan jika ingin menghubungkan halaman yang berada dalam folder yang sama pada halaman saat ini.

<a href="tutorial-html.html"> Belajar HTML</a>

Kombinasi Elemen Link dengan Elemen Lain


Di bawah ini akan diberikan contoh kombinasi dari penggunaan elemen link dengan elemen lain yang akan sering kita jumpai pada halaman website dan akan sering kita gunakan juga dalam pembuatan aplikasi berbasis web.


Tautan Pada Tombol


Elemen button atau tombol dapat kita beri tautan dengan cara seperti berikut.

<a href="https://kopiding.in/" title="Mampir yuk!" target="_blank"> Kunjungi Kopiding.in </a>
 Kunjungi Kopiding.in 

Tautan Pada Gambar


Selain elemen button, elemen image atau gambar juga sering diberi tautan. Penerapan ini bisa kita lihat pada iklan dalam sebuah website.

 Kunjungi Kopiding.in 
 Kunjungi Kopiding.in