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