Pada dasarnya semua halaman web memiliki tautan untuk berpindah dari halaman yang sama ke halaman lainnya. Link atau tautan pada intinya adalah sebuah hyperlink, jadi ketika Anda menggerakan tetikus (mouse) ke arah tautan maka tetikus tersebut menjadi tangan kecil.

Daftar isi:

• Tautan dasar HTML
• Bermain di atribut target
• Menggunakan atribut title
• Arahkan tautan ke alamat email
• Bonus tautan

Tautan dasar HTML

Hal yang paling terpenting untuk membuat tautan yaitu tag <a> dan atribut href. Berikut contohnya:

<a href="http://sekolahprogram.com">Kunjungi sekolahprogram.com</a>

Bermain di atribut target

Ada beberapa nilai secara bawaan untuk atribut target dan Anda hanya diperbolehkan menggunakan salah satunya. Berikut nilainya:

• _self -> nilai bawaan, akan membuka halaman di jendela yang sama.
• _blank -> akan dibuka pada jendela baru.
• _parent -> alan membuka halaman di bingkai (frame) induk.
• _top -> akan membuka halaman diseluruh badan jendela.

<a href="http://sekolahprogram.com" taget="_blank">Kunjungi sekolahprogram.com</a>

Catatan: Secara pribadi saya hanya menggunakan _blank jika ingin membuka di jendela baru, sedangkan untuk dihalaman yang sama tidak perlu menggunakan atribut target karena nilai bawaan sudah _self.

Menggunakan atribut title

Menambahkan atribut title memungkinkan kita untuk menambahkan elemen tambahan, biasanya akan tampil sebagai informasi teks tooltip saat tetikus digerakan diatas tautan. Berikut contohnya:

<a href="http://sekolahprogram.com" title="Klik untuk mengunjungi Sekolah Program">Kunjungi sekolahprogram.com</a>

Arahkan tautan ke alamat email

Tautan juga bisa mengarahkan ke alamat email tujuan jika diperlukan dengan menambah nilai di awal email mailto:. Berikut contohnya:

<a href="mailto:name@example.com">Kirim pesan email</a>

Bonus tautan

Menggunakan tautan bukan hanya berupa tampilan teks, Anda bisa menggunakannya untuk menambahkan elemen lain di dalam tag <a>. Berikut contohnya

<a href="http://sekolahprogram.com">
    <img src="..." alt="gambar">
</a>

Baca juga: Menampilkan Gambar di HTML

Catatan: Isilah ... pada contoh di atas untuk memasukan tautan gambar.