Tautan HTML - Tag Jangkar

Tautan HTML memungkinkan kami bernavigasi di situs web, berpindah dari satu halaman ke halaman lainnya dengan mengklik teks atau gambar dengan mouse.

Mari kita lihat tautan teks sederhana:

< A  href = "http://geekprank.com/" > Geek Prank </ a >

Ini akan ditampilkan seperti ini di browser web Anda:

Geek Prank

Kami menggunakan sebuah  tag inline untuk membuat link yang merupakan singkatan jangkar. Bagian yang berada di antara tag anchor pembuka dan penutup akan dapat diklik pada halaman. 

Tag tautan pembuka memiliki parameter href yang menentukan di mana tautan akan dialihkan. Anda dapat memasukkan alamat web atau URL apa saja (Uniform Resource Locator) di antara tanda kutip.

Kemungkinan dengan Tautan

Gunakan tagar untuk menghubungkan ke melompat ke ID di halaman yang sama.

< div  id = "top" > Bagian atas halaman </ div >
...
< A  href = "#top" > Langsung ke atas </ a >

Tautan di bawah ini akan membuka klien email pengguna untuk mengirim pesan ke alamat yang ditentukan. Setiap kali Anda membuat tautan ke alamat email, Anda selalu harus meletakkan mailto: di depan.

< A  href = "mailto: bob@ilearnhtml.com" > E-mail Bob </ a >

 Contoh di bawah ini akan memicu panggilan telepon ketika diklik pada perangkat seluler:

< A  href = "tel: 0036012345678" > 36 012 345 678 </ a >

Tautan Relatif Dan Mutlak

Dalam pelajaran ini kita akan berbicara tentang tautan relatif dan absolut. Cukup banyak tautan relatif yang terlihat seperti ini:

< A  href = "/ contact /" > Hubungi Kami! </ a >

Dan tautan absolut mungkin terlihat seperti ini:

< A  href = "https://ruwix.com/contact/" > Hubungi Ruwix </ a >

Seperti namanya, tautan relatif mengarahkan ulang di suatu tempat, relatif ke lokasi saat ini. Tautan absolut termasuk nama domain situs web.

Katakanlah Anda menambahkan tautan ke dua situs web yang berbeda. Mereka semua akan menautkan ke halaman kontak situs web saat ini. Jika Anda menambahkan contoh tautan absolut kami ke situs web mana pun maka mereka semua akan menautkan ke halaman kontak Ruwix.

Disarankan untuk menggunakan tautan relatif karena mereka akan tetap berfungsi, bahkan jika Anda memindahkan situs web Anda ke domain baru atau ke komputer lokal Anda.

Atribut tag tautan

Saya telah menyebutkan sebelum atribut href tetapi kami dapat menyesuaikan tautan kami dengan atribut tag di bawah ini.

< A  title = "HTML Editor"  href = "https://htmlg.com/"  Target = "_blank"  rel = "external" > HTML G </ a >

Judul

Ini akan menjadi tooltip saat Anda mengarahkan mouse di atas tautan.

Target

Menentukan tempat untuk membuka dokumen yang ditautkan.

• _blank - di jendela atau tab baru
• _self - jendela / tab yang sama dengan yang diklik (ini default)
• _parent - bingkai induk
• _top - jendela penuh
• framename - dalam bingkai bernama

Rel

Atribut ini menentukan hubungan antara dokumen saat ini dan yang ditautkan.

• alternate - tautan ke representasi dokumen alternatif (mis. halaman cetak, terjemahan, atau mirror)
• penulis - tautan ke penulis dokumen
• bookmark - URL yang digunakan untuk bookmark
• eksternal - dokumen yang direferensikan bukan bagian dari situs yang sama dengan dokumen saat ini
• help - tautan ke dokumen bantuan
• lisensi - tautan ke informasi hak cipta untuk dokumen
• selanjutnya - tautan ke dokumen berikutnya dalam seri
• nofollow - tautan ke dokumen yang tidak didukung, seperti tautan berbayar. Dengan cara ini Anda dapat meminta spider pencarian Google untuk tidak mengikuti tautan itu.
• noreferrer - browser tidak boleh mengirim header referer HTTP jika pengguna mengikuti hyperlink
• noopener - konteks penelusuran apa pun yang dibuat dengan mengikuti hyperlink tidak boleh memiliki konteks penelusuran pembuka
• prev - dokumen sebelumnya dalam suatu seleksi
• search - tautan ke alat pencarian untuk dokumen
• tag - kata kunci (tag) untuk dokumen saat ini

Menata Tautan

Kami dapat menetapkan gaya CSS terpisah untuk tautan yang dikunjungi, digerakkan dan aktif (sedang ditekan). Anda akan menemukan detail lebih lanjut tentang ini di pelajaran CSS.

< style >
 a , a : tautan {
   color : blue ;
  teks-dekorasi : garis bawah ;
}
a : visited {
     color : black ;
}
a : hover {
   text-decoration : none ;
}
a : aktif {
    latar belakang : kuning ;
}
</ style >

Mulai penghasil tautan HTML