Jika kamu memiliki kritik dan saran, hubungi kami melalui Kontak Kami

Hyperlink dalam HTML


     Hai semuanya, pada kali ini saya akan memberikan tutorial mengenai Html. Kali ini kita bahas tentang Hyperlink dalam html. Sebelum  memulainya, apakah kamu apa itu Hyperlink ? dan fungsinya pada sebuah website untuk apa sih ? Yukk kita pelajari bersama sama.
     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>
Hasilnya seperti dibawah ini.
     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>
Kemudian tinggal kita tambahkan atribut <style> ke dalam codingan html.

Kita hanya tinggal menambahkan atribut bukan class css

Maka hasilnya seperti ini
Contoh 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>
Hasilnya seperti dibawah ini

WhatsApp

Jika menurutmu tampilan nya kurang menarik, kamu bisa membuatnya seperti button (tombol). Jika kamu ingin membuatnya seperti button, kamu bisa menyalin codingan dibawah ini.
<!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>
Hasilnya seperti dibawah ini

WhatsApp

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.
<!DOCTYPE html>
<html>
  <head>
    <title> Hubungi Saya Melalui Email </title>
  </head>
  <body>
    <a href="mailto:emailkamu@gmail.com"> Email </a>
  </body>
</html>
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 _^.

Posting Komentar

Cookie Consent
We serve cookies on this site to analyze traffic, remember your preferences, and optimize your experience.
Oops!
It seems there is something wrong with your internet connection. Please connect to the internet and start browsing again.
AdBlock Detected!
We have detected that you are using adblocking plugin in your browser.
The revenue we earn by the advertisements is used to manage this website, we request you to whitelist our website in your adblocking plugin.
Site is Blocked
Sorry! This site is not available in your country.