Membuat link (tautan) di HTML adalah salah satu dasar penting dalam pembuatan website. Link memungkinkan pengguna untuk berpindah dari satu halaman ke halaman lain, atau ke berbagai sumber eksternal di internet. Dalam HTML, link dibuat menggunakan tag <a>. Berikut adalah cara dan beberapa aspek penting dalam membuat link HTML.
1. Tag <a>: Dasar Membuat Link
Untuk membuat link di HTML, gunakan tag <a> (anchor) dengan atribut href. Struktur dasar tag <a> adalah sebagai berikut:
<a href="URL">Teks Link</a>href: Atribut yang menentukan URL tujuan.- Teks Link: Teks yang terlihat dan dapat diklik oleh pengguna.
Contoh:
<a href="https://www.example.com">Kunjungi Situs Contoh</a>Link ini akan menampilkan teks “Kunjungi Situs Contoh” yang akan membawa pengguna ke “https://www.example.com” saat diklik.
2. Membuat Link Internal dan Eksternal
Link dalam HTML dapat berupa link internal (menuju halaman dalam situs yang sama) atau link eksternal (menuju halaman di luar situs). Berikut cara membuat kedua jenis link:
| Jenis Link | Keterangan | Contoh |
|---|---|---|
| Link Internal | Menuju halaman di situs yang sama | <a href="halaman2.html">Halaman Kedua</a> |
| Link Eksternal | Menuju halaman di situs lain | <a href="https://www.google.com">Google</a> |
Catatan: Untuk link internal, pastikan Anda menggunakan path relatif jika file berada di direktori yang sama, seperti halaman2.html.
3. Membuka Link di Tab Baru
Untuk membuat link terbuka di tab atau jendela baru, tambahkan atribut target="_blank" pada tag <a>. Ini berguna jika Anda ingin menjaga pengguna tetap berada di situs Anda sambil membiarkan mereka melihat konten eksternal di tab lain.
Contoh:
<a href="https://www.example.com" target="_blank">Buka di Tab Baru</a>Atribut target="_blank" memberi tahu browser untuk membuka link di tab baru.
4. Link Email dan Nomor Telepon
Selain link URL, Anda juga dapat membuat link untuk menghubungi alamat email atau nomor telepon.
| Jenis Link | Atribut href |
Contoh |
|---|---|---|
mailto:email@example.com |
<a href="mailto:info@example.com">Email Kami</a> |
|
| Telepon | tel:nomor_telepon |
<a href="tel:+6281234567890">Hubungi Kami</a> |
Ketika link email diklik, klien email default akan terbuka. Begitu pula untuk link telepon, ponsel pengguna akan membuka aplikasi panggilan.
5. Menambahkan Title untuk Link
Atribut title memungkinkan Anda memberikan informasi tambahan tentang link saat pengguna mengarahkan kursor ke teks link. Ini berguna untuk meningkatkan aksesibilitas dan memberikan konteks tambahan.
Contoh:
<a href="https://www.example.com" title="Kunjungi Situs Contoh">Contoh</a>Ketika pengguna mengarahkan kursor pada teks “Contoh”, akan muncul teks “Kunjungi Situs Contoh”.
6. Menambahkan Ikon atau Gambar pada Link
Selain teks, Anda juga dapat menambahkan ikon atau gambar ke dalam link menggunakan tag <img>. Hal ini bisa membuat link lebih menarik dan mudah dikenali.
Contoh:
<a href="https://www.example.com">
<img src="ikon.png" alt="Kunjungi Situs Contoh">
</a>Pada contoh di atas, gambar “ikon.png” akan berfungsi sebagai link.
Dengan memahami berbagai cara membuat link HTML di atas, kita dapat membuat website yang lebih dinamis dan interaktif. Sekian dari analisiwnter.com, semoga panduan ini bermanfaat!
