Tautan HTML

Dalam tutorial ini akan belajar cara membuat link ke halaman lain dalam HTML.

Membuat Tautan dalam HTML

Tautan atau hyperlink adalah koneksi dari satu sumber daya web ke sumber daya web lainnya. Tautan memungkinkan pengguna untuk berpindah dengan mulus dari satu halaman ke halaman lain, di server mana pun di mana pun di dunia.

Tautan memiliki dua ujung, yang disebut anchors (jangkar). Tautan dimulai dari sumber anchor dan mengarah ke anchor tujuan, yang dapat berupa sumber daya web apa pun, misalnya, gambar, klip audio atau video, file PDF, dokumen HTML, atau elemen di dalam dokumen itu sendiri, dan seterusnya pada.

Secara default, tautan akan muncul sebagai berikut di sebagian besar browser:

• Tautan yang belum dikunjungi digarisbawahi dan berwarna biru.
• Tautan yang sudah dikunjungi digarisbawahi dan berwarna ungu.
• Tautan aktif digarisbawahi dan berwarna merah.

Namun, Kalian dapat menimpa ini menggunakan CSS. Pelajari lebih lanjut tentang tautan gaya.

Sintaks Tautan HTML

Tautan ditentukan dalam HTML menggunakan tag <a>.

Tautan atau hyperlink bisa berupa kata, kelompok kata, atau gambar.

<a href="url">Teks tautan</a>

Apa pun di antara tag <a> pembuka dan tag </a> penutup menjadi bagian dari tautan yang dilihat dan diklik pengguna di browser. Berikut adalah beberapa contoh tautan:

<a href="https://www.google.com/">Google Penelusuran</a>
<a href="https://madao-code.web.app/">Madao Code</a>
<a href="images/kites.jpg">
  <img src="kites-thumb.jpg" alt="kites" />
</a>

Atribut href menentukan target tautan. Nilainya bisa berupa URL absolut atau relatif.

URL absolut adalah URL yang mencakup setiap bagian dari format URL, seperti protokol, nama host, dan jalur dokumen, misalnya https://www.google.com/, https://www.example.com/form.php, dll. Sementara, URL relatif adalah jalur relatif halaman, misalnya contact.html, images/smiley.png, dan seterusnya. URL relatif tidak pernah menyertakan awalan http:// atau https://.

Menetapkan Target untuk Tautan

Atribut target memberi tahu browser tempat membuka dokumen tertaut. Ada empat target yang ditentukan, dan setiap nama target dimulai dengan karakter garis bawah(_):

• _blank — Membuka dokumen tertaut di jendela atau tab baru.
• _parent — Membuka dokumen tertaut di jendela induk.
• _self — Membuka dokumen tertaut di jendela atau tab yang sama dengan dokumen sumber. Ini adalah default, maka tidak perlu secara eksplisit menentukan nilai ini.
• _top — Membuka dokumen tertaut di jendela browser lengkap.

Cobalah contoh berikut untuk memahami cara kerja target tautan pada dasarnya:

<a href="/about-us.php" target="_top">Tentang Kami</a>
<a href="https://www.google.com/" target="_blank">Google</a>
<a href="images/sky.jpg" target="_parent">
  <img src="sky-thumb.jpg" alt="Cloudy Sky" />
</a>

TIP

Jika halaman web Kalian ditempatkan di dalam iframe, Kalian dapat menggunakan target="_top" pada tautan untuk keluar dari iframe dan menampilkan halaman target di jendela browser penuh.

Membuat Anchor (Jangkar) Bookmark

Kalian juga dapat membuat jangkar bookmark untuk memungkinkan pengguna melompat ke bagian tertentu dari halaman web. Bookmark sangat membantu jika Kalian memiliki halaman web yang sangat panjang.

Membuat bookmark adalah proses dua langkah: pertama tambahkan atribut id pada elemen tempat Anda ingin melompat, kemudian gunakan nilai atribut id yang didahului dengan tanda hash (#) sebagai nilai atribut href dari tag <a> , seperti yang ditunjukkan pada contoh berikut:

<a href="#sectionA">Langsung ke Bagian A</a>
<h2 id="sectionA">Bagian A</h2>
<p>Lorem ipsum dolor sit amet, conectetur adipiscing elit...</p>

TIP

Kalian bahkan dapat melompat ke bagian halaman web lain dengan menentukan URL halaman tersebut bersama dengan jangkar (yaitu #elementId) di atribut href, misalnya,
<a href="mypage.html#topicA">Go ke TopikA</a>.

Membuat Tautan Unduh

Kalian juga dapat membuat tautan unduhan file dengan cara yang persis sama dengan menempatkan tautan teks. Arahkan saja URL tujuan ke file yang Kalian inginkan tersedia untuk diunduh.

Dalam contoh berikut, kami telah membuat tautan unduhan untuk file ZIP, PDF, dan JPG.

<a href="downloads/test.zip">Unduh file Zip</a>
<a href="downloads/masters.pdf">Unduh file PDF</a>
<a href="downloads/sample.jpg">Unduh file Gambar</a>

CATATAN

Saat Kalian mengklik tautan yang mengarah ke file PDF atau gambar, file tersebut tidak langsung diunduh ke hard drive Kalian. Itu hanya akan membuka file di browser web Kalian. Selanjutnya Kalian dapat menyimpan atau mengunduhnya ke hard drive Anda secara permanen.