HTML digunakan untuk membangun struktur dasar website, dan salah satu elemen penting dalam HTML adalah link atau tautan. Dalam artikel ini, kita akan membahas cara menambahkan link pada website dengan HTML dasar.
|
| Gambar 10.1 : Ilustrasi Menambahkan Link dengan Tag HTML |
Daftar Isi
Apa itu Link?
Link atau tautan adalah elemen HTML yang memungkinkan pengguna untuk berpindah dari satu halaman ke halaman lain dengan mengeklik teks atau gambar. Link biasanya digunakan untuk menghubungkan halaman yang saling terkait, sehingga memudahkan navigasi pengguna dalam menjelajahi website.
Membuat Link Dasar
Untuk membuat link dasar pada HTML, kita perlu menggunakan tag <a> (anchor) dan atribut href (hypertext reference). Berikut ini adalah contoh penggunaan tag <a> dengan atribut href:
<a href="https://www.sobatcoder.com">Contoh Website</a>
Menambahkan Target pada Link
Target pada link digunakan untuk menentukan di mana halaman baru akan dibuka. Secara default, target link akan membuka halaman baru pada tab yang sama. Namun, kita dapat menentukan target link untuk membuka halaman baru pada tab yang berbeda atau jendela yang berbeda. Berikut ini adalah contoh penggunaan target pada link:
<a href="https://www.sobatcoder.com" target="_blank">Contoh Website</a>
Dalam contoh di atas, teks "Contoh Website" akan menjadi link yang mengarah ke halaman https://www.sobatcoder.com dan akan membuka halaman baru pada tab yang berbeda.
Menambahkan Link pada Gambar
Selain teks, link juga dapat ditempatkan pada gambar. Untuk menambahkan link pada gambar, kita perlu menempatkan tag img (image) di dalam tag a dengan atribut href. Berikut ini adalah contoh penggunaan tag a dengan tag img:
<a href="https://www.sobatcoder.com">
<img src="gambar.jpg" alt="Contoh Gambar">
</a>
Dalam contoh di atas, gambar.jpg akan menjadi gambar yang dijadikan link yang mengarah ke halaman https://www.sobatcoder.com. Pastikan untuk mengganti URL gambar dan atribut alt sesuai dengan kebutuhan website Anda.
Menambahkan Link Internal
Link internal adalah link yang mengarah ke halaman lain dalam website yang sama. Untuk membuat link internal, kita perlu menuliskan URL halaman tersebut pada atribut href, namun dengan menggunakan path relatif. Berikut ini adalah contoh penggunaan path relatif untuk membuat link internal:
<a href="halaman.html">Halaman Internal</a>
Dalam contoh di atas, teks "Halaman Internal" akan menjadi link yang mengarah ke halaman halaman.html yang berada dalam website yang sama dengan halaman yang sedang dibuka.
Menambahkan Link ke Email
Selain menghubungkan halaman website, link juga dapat digunakan untuk mengarahkan pengguna ke aplikasi email. Untuk membuat link ke email, kita perlu menuliskan alamat email pada atribut href dengan menggunakan format mailto:. Berikut ini adalah contoh penggunaan format mailto:
<a href="mailto:contoh@email.com">Kirim Email</a>
Menambahkan Link ke Dokumen
Selain menghubungkan halaman website, link juga dapat digunakan untuk mengarahkan pengguna ke dokumen yang terkait, seperti file PDF atau dokumen Word. Untuk membuat link ke dokumen, kita perlu menuliskan URL dokumen pada atribut href. Berikut ini adalah contoh penggunaan link untuk mengarahkan pengguna ke dokumen:
<a href="dokumen.pdf">Unduh Dokumen</a>
Dalam contoh di atas, teks "Unduh Dokumen" akan menjadi link yang mengarahkan pengguna ke file dokumen.pdf yang dapat diunduh.
Menerapkan Link pada Berbagai Elemen
Selain teks dan gambar, link juga dapat diterapkan pada berbagai elemen HTML lainnya seperti tombol dan navigasi. Berikut ini adalah contoh penggunaan link pada tombol dan navigasi:
<button onclick="window.location.href='https://www.sobatcoder.com'">Klik Tombol</button>
<nav>
<ul>
<li><a href="index.html">Beranda</a></li>
<li><a href="tentang.html">Tentang Kami</a></li>
<li><a href="kontak.html">Kontak Kami</a></li>
</ul>
</nav>
Dalam contoh di atas, tombol "Klik Tombol" akan menjadi link yang mengarah ke halaman https://www.sobatcoder.com dan navigasi akan terdiri dari tiga link yang mengarah ke halaman berbeda dalam website yang sama.
Kesimpulan
Link adalah elemen penting dalam pembuatan website yang memungkinkan pengguna untuk berpindah dari satu halaman ke halaman lainnya dengan mudah. Dalam HTML dasar, link dapat ditambahkan dengan menggunakan tag a dan atribut href. Selain itu, kita juga dapat menambahkan link pada gambar, dokumen, email, tombol, dan navigasi. Selamat mencoba!