Jika kamu mengunjungi suatu website, tentu kamu akan menemukan banyak hyperlink di dalamnya. Contohnya jika kamu klik menu artikel, maka kamu akan diarahkan langsung ke artikel tersebut. Nah itulah yang dinamakan dengan hyperlink. Jadi dapat kita simpulkan bahwa fungsi dari hyperlink adalah mempermudah pengunjung website untuk menemukan sesuatu yang dicari oleh pengunjung website.
Itulah yang dimaksud dan fungsi dari hyperlink pada sebuah website. Sekarang kita akan langsung mencoba membuat hyperlink dalam html. Sebelum memulainya, kita harus mempersiapkan bahan - bahan nya. Untuk membuat hyperlink dalam html, kita bisa menggunakan tag <a href="linktautan"> Situs Saya </a>. Bagaimana cara membuat hyperlink dalam html ? Berikut ini adalah contoh codingan untuk membuat hyperlink dalam html.
<!DOCTYPE html> <html> <head> <title> Cara Membuat Tombol Dengan Tag Button </title> </head> <body> <a href="https://freezegans.blogspot.com"> Kunjungi Situs Saya </a> </body> </html>
Untuk tulisan yang berwarna biru, bisa kamu ganti dengan tautan website kamu, contohnya website kami atau situs kami. Hyperlink diatas merupakan hyperlink default. Default maksudnya adalah belum kita berikan tambahan codingan css. Kita bisa menambahkan codingan css nya agar tulisan "Kunjungi Situs Saya" tidak memiliki garis bawah. Berikut ini adalah contoh codingan css nya.
<style> text-decoration: none; </style>
Kita hanya tinggal menambahkan atribut bukan class css
Maka hasilnya seperti iniContoh saya akan membuat hyperlink yang mengarahkan ke nomor WhatsApp. Tutorial ini sangat cocok untuk kamu yang sedang berbisnis. Berikut ini adalah contoh codingan nya.
<!DOCTYPE html> <html> <head> <title> Hubungi Saya Melalui WhatsApp </title> </head> <body> <a href="https://wa.me/+6281234567899"> WhatsApp </a> </body> </html>
Jika menurutmu tampilan nya kurang menarik, kamu bisa membuatnya seperti button (tombol). Jika kamu ingin membuatnya seperti button, kamu bisa menyalin codingan dibawah ini.
Hasilnya seperti dibawah ini
WhatsApp
Kamu bisa mengganti nomor tersebut dengan nomor WhatsApp mu.
<!DOCTYPE html> <html> <head> <title> Hubungi Saya Melalui WhatsApp </title> </head> <body> <a href="https://wa.me/+6281234567899" style="background-color: #ffffff; text-decoration: none; border-radius: 3px; border: solid #0000ff; padding: 10px;"> WhatsApp </a> </body> </html>
Kamu bisa mengganti nomor tersebut dengan nomor WhatsApp mu.
Selain bisa mengarahkan ke sebuah situs, hyperlink juga bisa mengarahkan ke alamat email. Jika ingin mengarahkan ke alamat email, kita bisa menggunakan mailto.
Untuk penggunaannya, kamu bisa llihat codingan dibawah ini.
Pada tulisan emailkamu@gmail.com bisa kamu ganti dengan alamat email mu. Jadi ketika seseorang klik tulisan email tersebut, maka otomatis akan mengarahkan ke email. Itulah tutorial cara membuat hyperlink dalam Html. Jika memiliki saran dan kritik, sampaikan melalui kolom komentar dibawah. Sekian dari saya kurang lebihnya mohon maaf. Terimakasih _^.
<!DOCTYPE html> <html> <head> <title> Hubungi Saya Melalui Email </title> </head> <body> <a href="mailto:emailkamu@gmail.com"> Email </a> </body> </html>