Halaman web modern dibangun dengan menggunakan bahasa pemrograman seperti HTML, CSS, dan JavaScript. Setiap halaman web memiliki elemen yang berbeda, seperti teks, gambar, video, dan hyperlink. Hyperlink adalah tautan yang menghubungkan halaman web satu dengan yang lainnya. Hyperlink sangat penting dalam dunia web karena membantu pengguna untuk menavigasi dari satu halaman ke halaman lainnya.
Apa itu Hyperlink?
Hyperlink adalah tautan atau jembatan yang menghubungkan halaman web satu dengan yang lainnya. Hyperlink dapat berupa teks, gambar, atau objek yang dapat diklik oleh pengguna untuk membuka halaman web lainnya. Hyperlink biasanya berwarna biru dan memiliki garis bawah. Saat pengguna mengarahkan kursor mouse ke hyperlink, warnanya akan berubah menjadi ungu atau merah muda.
Jenis-jenis Hyperlink
Ada beberapa jenis hyperlink yang umum digunakan dalam desain web, yaitu:
- Hyperlink internal: menghubungkan halaman web yang sama atau berbeda di dalam situs web yang sama.
- Hyperlink eksternal: menghubungkan halaman web dari situs web yang berbeda.
- Hyperlink email: menghubungkan email dengan halaman web untuk mengirim email.
- Hyperlink file: menghubungkan file seperti dokumen, gambar, atau video dengan halaman web.
Cara Membuat Hyperlink
Ada beberapa cara untuk membuat hyperlink di dalam halaman web, yaitu:
- Menggunakan tag anchor HTML: teks hyperlink
- Menggunakan tombol hyperlink:
- Menggunakan gambar sebagai hyperlink:
Dalam contoh di atas, “url” adalah alamat halaman web yang akan dihubungkan, “teks hyperlink” adalah teks yang akan ditampilkan sebagai hyperlink, dan “gambar” adalah gambar yang akan ditampilkan sebagai hyperlink.
Memahami Absolute dan Relative URL
URL (Uniform Resource Locator) adalah alamat unik yang digunakan untuk mengidentifikasi halaman web di internet. Ada dua jenis URL yang umum digunakan, yaitu:
- Absolute URL: URL lengkap yang mencakup protokol, nama domain, direktori, dan nama file. Contoh: https://www.contoh.com/direktori/namafile.html
- Relative URL: URL yang hanya mencakup direktori dan nama file. Contoh: /direktori/namafile.html
Absolute URL digunakan untuk menghubungkan halaman web dari situs web yang berbeda, sedangkan relative URL digunakan untuk menghubungkan halaman web yang sama atau berbeda di dalam situs web yang sama.
Menggunakan Hyperlink Internal
Hyperlink internal digunakan untuk menghubungkan halaman web yang sama atau berbeda di dalam situs web yang sama. Untuk membuat hyperlink internal, kita perlu mengetahui alamat URL dari halaman web yang akan dihubungkan.
Misalnya, jika kita ingin membuat hyperlink ke halaman “tentang kami” di dalam situs web kita, kita perlu mengetahui alamat URL dari halaman tersebut. Jika alamat URL dari halaman tersebut adalah https://www.contoh.com/tentang-kami.html, kita dapat menggunakan tag anchor HTML seperti berikut:
Dalam contoh di atas, “https://www.contoh.com/tentang-kami.html” adalah alamat URL dari halaman “tentang kami”, dan “Tentang Kami” adalah teks yang akan ditampilkan sebagai hyperlink.
Kita juga dapat menggunakan relative URL untuk menghubungkan halaman web yang sama atau berbeda di dalam situs web yang sama. Misalnya, jika kita ingin membuat hyperlink dari halaman “beranda” ke halaman “tentang kami” di dalam situs web kita, kita dapat menggunakan relative URL seperti berikut:
Dalam contoh di atas, “/tentang-kami.html” adalah relative URL dari halaman “tentang kami”, dan “Tentang Kami” adalah teks yang akan ditampilkan sebagai hyperlink.
Menggunakan Hyperlink Eksternal
Hyperlink eksternal digunakan untuk menghubungkan halaman web dari situs web yang berbeda. Untuk membuat hyperlink eksternal, kita perlu mengetahui alamat URL dari halaman web yang akan dihubungkan.
Misalnya, jika kita ingin membuat hyperlink ke halaman “kontak kami” di situs web lain, kita perlu mengetahui alamat URL dari halaman tersebut. Jika alamat URL dari halaman tersebut adalah https://www.contohlain.com/kontak-kami.html, kita dapat menggunakan tag anchor HTML seperti berikut:
Dalam contoh di atas, “https://www.contohlain.com/kontak-kami.html” adalah alamat URL dari halaman “kontak kami” di situs web lain, dan “Kontak Kami” adalah teks yang akan ditampilkan sebagai hyperlink.
Menggunakan Hyperlink Email
Hyperlink email digunakan untuk menghubungkan email dengan halaman web untuk mengirim email. Untuk membuat hyperlink email, kita perlu mengetahui alamat email yang akan dihubungkan.
Misalnya, jika kita ingin membuat hyperlink untuk mengirim email ke alamat “info@contoh.com”, kita dapat menggunakan tag anchor HTML seperti berikut:
Dalam contoh di atas, “mailto:info@contoh.com” adalah alamat email yang akan dihubungkan, dan “Kirim Email” adalah teks yang akan ditampilkan sebagai hyperlink. Saat pengguna mengklik hyperlink tersebut, program email default pada perangkat pengguna akan terbuka dengan alamat email “info@contoh.com” sudah terisi.
Menggunakan Hyperlink File
Hyperlink file digunakan untuk menghubungkan file seperti dokumen, gambar, atau video dengan halaman web. Untuk membuat hyperlink file, kita perlu mengetahui alamat URL dari file yang akan dihubungkan.
Misalnya, jika kita ingin membuat hyperlink untuk menampilkan gambar “logo.png” di halaman web kita, kita perlu mengetahui alamat URL dari gambar tersebut. Jika alamat URL dari gambar tersebut adalah https://www.contoh.com/logo.png, kita dapat menggunakan tag anchor HTML seperti berikut:
Dalam contoh di atas, “https://www.contoh.com/logo.png” adalah alamat URL dari gambar “logo.png”, dan “Logo” adalah teks yang akan ditampilkan sebagai hyperlink. Saat pengguna mengklik hyperlink tersebut, gambar “logo.png” akan ditampilkan di halaman web.
Menggunakan Hyperlink dengan Target Baru
Saat pengguna mengklik hyperlink, halaman web baru akan terbuka di jendela atau tab yang sama dengan halaman web yang sedang dibuka. Namun, kita juga dapat membuat hyperlink dengan target baru sehingga halaman web baru akan terbuka di jendela atau tab yang berbeda dengan halaman web yang sedang dibuka.
Untuk membuat hyperlink dengan target baru, kita perlu menambahkan atribut “target” pada tag anchor HTML dan mengatur nilainya menjadi “_blank”. Contohnya seperti ini:
Dalam contoh di atas, “https://www.contoh.com/tentang-kami.html” adalah alamat URL dari halaman “tentang kami”, dan “Tentang Kami” adalah teks yang akan ditampilkan sebagai hyperlink dengan target baru
ArtikelAntar Halaman Web Dihubungkan Menggunakan: Tutorial Lengkap
© Copyright 2023 TEKNOBGT.COM
