Belajar HTML – Part 7 : Membuat Link di HTML

Dalam HTML, link atau tautan digunakan untuk menghubungkan satu halaman web ke halaman lainnya, baik dalam satu situs maupun ke situs lain.

HTML menyediakan elemen <a> (anchor) untuk membuat link.

Link merupakan elemen HTML yang sangat umum digunakan dalam pembuatan website, misalnya ketika kita sedang membaca artikel di Wikipedia, lalu mengklik link yang membawa kita ke halaman lain yang membahas topik terkait.

Berikut panduan lengkap untuk membuat link di HTML.

1. Dasar Pembuatan Link

Tag <a> digunakan untuk membuat hyperlink dengan atribut href yang menentukan alamat tujuan. Link ini dapat digunakan untuk navigasi ke berbagai lokasi, baik dalam maupun luar situs.

Misalnya, kamu sedang mencari informasi di Google, kamu cukup mengetikkan kata kunci di kolom pencarian, lalu mengklik salah satu link yang muncul di hasil pencarian. Nah, itulah fungsi utama dari hyperlink!

Contoh Penggunaan:

<a href="https://babacoding.com">Kunjungi Babacoding</a>

Hasilnya: Kunjungi Babacoding

2. Link ke Halaman dalam Situs yang Sama

Bayangkan kamu sedang membuka website toko online dan ingin tahu tentang sejarah perusahaan tersebut.

Biasanya kamu cukup klik link “Tentang Kami”, dan halaman akan langsung berpindah ke bagian profil perusahaan.

Jika ingin membuat link ke halaman lain dalam satu situs, cukup gunakan path relatif. Path relatif digunakan untuk merujuk pada file di dalam struktur direktori situs tanpa menggunakan domain lengkap.

Contoh:

<a href="about.html">Tentang Kami</a>

Jika file about.html berada dalam sebuah folder, misal nama foldernya adalah page, maka harus ditulis seperti berikut:

<a href="page/about.html">Tentang Kami</a>

3. Link ke Bagian Tertentu dalam Halaman

Kadang kita ingin langsung melompat ke bagian tertentu dalam sebuah halaman, seperti saat kita membaca FAQ (Frequently Asked Questions) dan ingin langsung menuju jawaban dari pertanyaan yang kita cari.

Nah, kita bisa menggunakan atribut id untuk itu.

Contoh:

<h2 id="section1">Bagian 1</h2>
<a href="#section1">Lompat ke Bagian 1</a>

Saat link diklik, halaman akan otomatis menggulir ke elemen yang memiliki id="section1".

Contohnya seperti ini : Lompat ke penjelasan awal

4. Link ke Email dan Nomor Telepon

HTML juga mendukung link ke email dan nomor telepon dengan mailto: dan tel:. Ini sering digunakan dalam halaman kontak perusahaan atau customer service.

Jika kamu melihat tombol “Hubungi Kami” di sebuah website bisnis, biasanya mereka menggunakan tag HTML ini.

Contoh:

<a href="mailto:info@example.com">Kirim Email</a>
<a href="tel:+628123456789">Hubungi Kami</a>

5. Membuka Link di Tab Baru

Kadang kita tidak ingin pengguna meninggalkan halaman utama ketika mengklik sebuah link. Untuk itu, kita bisa menggunakan target="_blank".

Misal ketika kamu membaca artikel menarik di sebuah blog, lalu ada link ke referensi lain.

Agar kamu tetap bisa membaca artikel utama, link tersebut akan terbuka di tab baru.

Contoh:

<a href="https://babacoding.com" target="_blank">Kunjungi Situs di Tab Baru</a>

Hasilnya seperti ini : Kunjungi Situs di Tab Baru

6. Link ke File Download

Kadang kita ingin menyediakan dokumen atau file untuk diunduh, seperti brosur perusahaan atau ebook gratis.

Contoh:

<a href="dokumen.pdf" download>Unduh Dokumen</a>

Jika kamu mengklik tombol “Unduh Dokumen”, file akan otomatis tersimpan di perangkatmu.

7. Link dengan Gambar

Gambar juga bisa dijadikan link agar lebih menarik.

Contohnya kamu pasti sering melihat logo perusahaan di website yang bisa diklik untuk kembali ke halaman utama.

Contoh:

<a href="https://www.google.com">
    <img src="logo.png" alt="Google" width="100">
</a>

Contohnya seperti ini, coba kamu klik gambar dibawah:

8. Membuat Link Tidak Aktif (Disabled Link)

Kadang kita butuh link yang tidak bisa diklik, misalnya tombol “Coming Soon”.

Atau kamu melihat tombol “Beli Sekarang” di website toko online, tetapi tombol tersebut berwarna abu-abu dan tidak bisa diklik karena stok barang habis. Begitulah cara kerja disabled link.

Contoh:

<a href="#" style="pointer-events: none; color: gray; text-decoration: none;">Link Nonaktif</a>

Hasilnya seperti ini:

9. Atribut Tambahan Pada Link

10. Kombinasi Link dan JavaScript

Kamu juga menambahkan efek interaktif pada link menggunakan JavaScript.

Contoh:

<a href="#" onclick="alert('Halo, Anda mengklik link ini!')">Klik Saya</a>

Ketika link ini diklik, akan muncul pop-up yang menampilkan pesan “Halo, Anda mengklik link ini!”.

Hasilnya seperti ini, coba kamu klik link dibawah:

Kesimpulan

Dengan elemen <a> di HTML, kamu bisa membuat berbagai jenis link seperti link ke halaman lain, bagian dalam halaman, email, nomor telepon, hingga file yang bisa diunduh.

Selain itu, kamu juga bisa menggunakan atribut tambahan untuk menyesuaikan cara kerja link.

Jika diperlukan, link juga bisa digabungkan dengan JavaScript untuk membuat interaksi lebih dinamis.

Jadi, setiap kali kamu browsing internet dan berpindah dari satu halaman ke halaman lain, ingatlah bahwa semua itu bekerja berkat tag <a> ini.

Semoga panduan ini bermanfaat!