HYPERLINK PADA HTML

Hyperlink biasa disingkat dengan link merupakan elemen HTML yang berfungsi menghubungkan halaman web ke halaman web yang lain. Jika Elemen diklik akan membuka halaman lain sesuai alamat URL yang diberikan.

Selain digunakan untuk menghubungkan halaman, link juga mempunyai fungsi lain seperti scroll top, download file, menjalankan fungsi javascript, dll.

A. Membuat Link di HTML

Link pada HTML dapat dibuat dengan tag <a>, kemudian tag ini harus memiliki atribut href untuk menentukan alamat URL tujuan dari link. secara default link akan berwarna biru dan garis bawah, warna ini dapat diubah dan akan dibahas pada bagian D. Mengubah Warna Link di HTML

<!DOCTYPE html>
<html lang="en">
    <head>
        <title>www.syaiflash.com Link di HTML</title>
    </head>
    <body>
        <p>Tutorial membuat link dengan html, klik link berikut:
            <a href="http://www.syaiflash.com/">syaiflash</a>
        </p>
    </body>
</html>

B. Jenis-jenis Link pada HTML

Terdapat dua macam link dalam html

  • Internal Link: adalah link yang menuju ke domain atau halaman web itu sendiri, internal link tidak perlu dibuat lengkap dengan http://www. dst, namun cukup ditulis nama file yang dituju, sebelum dibuat link, harus disiapkan file yang akan dipanggil, contoh dibawah ini harus ada file dalam satu folder yang bernama link.html
<!DOCTYPE html>
<html lang="en">
    <head>
        <title>www.syaiflash.com Hyperlink Internal</title>
    </head>
    <body>
        <p>Contoh Hyperlink Internal dengan html, klik link berikut:
            <a href="link.html">link internal</a>
        </p>
    </body>
</html>
  • External Link: adalah link yang menuju domain lain. contoh Hyperlink.html diatas merupakan contoh External link
<!DOCTYPE html>
<html lang="en">
    <head>
        <title>www.syaiflash.com Link di HTML</title>
    </head>
    <body>
        <p>Tutorial membuat link dengan html, klik link berikut:
            <a href="http://www.syaiflash.com/">syaiflash</a>
        </p>
    </body>
</html>

C. Atribut-atribut Link HTML

Selain atribut href terdapat juga beberapa atribut yang sering ditambahkan pada link, seperti: target, title, rel, style, dan lain-lain.

Atribut target

Atribut ini berfungsi untuk menentukan target dari pembukaan link. Ada beberapa target yang biasanya digunakan:

  • _blank akan membuka link pada jendela atau tab baru;
  • _self akan membuka link pada halaman itu sendiri (default target);
  • _top menuju bagian paling atas pada halaman;
  • _parent membuka link pada frame induk;
  • nama-frame akan membuka link pada <iframe> dengan nama tertentu;
<!DOCTYPE html>
<html lang="en">
    <head>
        <title>www.syaiflash.com Hyperlink target blank</title>
    </head>
    <body>
        <a href='www.syaiflash.com/' target='_blank'>syaiflash target blank</a>
    </body>
</html>
<!DOCTYPE html>
<html lang="en">
    <head>
        <title>www.syaiflash.com Hyperlink Atribut Target nama-frame</title>
    </head>
    <body>
        <p>
            <a href="http://www.syaiflash.com/" target="namaframe">Link Frame</a>
        </p>
        <p>
            <!-- Frame yang akan menjadi target link -->
            <iframe name="namaframe" width="600" height="400"></iframe>
        </p>
    </body>
</html>

Atribut title

Atribut  title berfungsi untuk membuat tooltips. Tooltips adalah informasi tambahan yang akan tampil saat link disentuh pointer atau saat kita menahan tap di hp.

<!DOCTYPE html>
<html lang="en">
    <head>
        <title>www.syaiflash.com Hyperlink Atribut title</title>
    </head>
    <body>
        <a href="http://www.syaiflash.com/" title="Menuju ke halaman www.syaiflash.com">syaiflash</a>
    </body>
</html>

D. Mengubah Warna Link di HTML

Warna default link adalah biru, Warna teks dan latar belakang (background) dapat diubah sesuai kebutuhan dengan cara menambahkan atribut style kemudian isi dengan style untuk mengubah warna, yakni color (untuk teks) dan background-color (untuk latar).

<!DOCTYPE html>
<html lang="en">
    <head>
        <title>www.syaiflash.com Hyperlink merubah warna</title>
    </head>
    <body>
      <h1>Selamat Datang</h1>
        <p>
          <a href="http://www.syaiflash.com/" style="color:red">Home</a> |
          <a href="http://www.syaiflash.com/category/internet/koding/html/" style="color:green">Coding HTML</a> |
          <a href="http://www.syaiflash.com/category/internet/koding/javascript/" style="color:deeppink;">Coding JavaScript</a> |
          <a href="http://www.syaiflash.com/category/internet/wordpress/" style="color:white;background-color: orange;">Coding WordPress</a>
        </p>
        <hr>
        <p>
          Selamat datang di belajar koding,
          silahkan pilih menu-menu diatas untuk belajar koding
        </p>
    </body>
</html>

E. Link Anchor

Link anchor adalah link yang menuju ke suatu elemen tertentu. Cara membuat link anchor adalah dengan mengisi alamat URL dengan tanda pagar (#), lalu diisi dengan nama id dari elemen yang akan dituju.

<!DOCTYPE html>
<html lang="en">
    <head>
        <title>www.syaiflash.com Hyperlink Anchor</title>
    </head>
    <body>
      <h1>Contoh Link Anchor</h1>
        <p>Coba klik link ini:
            <a href="#penutup">Meluncur ke Penutup</a> 
        </p>
        <h2>misalnya disini paragraf pertama yang panjang</h2>
        <p>
          Alinea 1 www.syaiflash.com www.syaiflash.com 
          www.syaiflash.com www.syaiflash.com www.syaiflash.com 
          www.syaiflash.com www.syaiflash.com www.syaiflash.com 
          www.syaiflash.com www.syaiflash.com www.syaiflash.com 
          www.syaiflash.com www.syaiflash.com www.syaiflash.com 
        </p>
        <p>
          Alinea 2 www.syaiflash.com www.syaiflash.com 
          www.syaiflash.com www.syaiflash.com www.syaiflash.com 
          www.syaiflash.com www.syaiflash.com www.syaiflash.com 
          www.syaiflash.com www.syaiflash.com www.syaiflash.com 
          www.syaiflash.com www.syaiflash.com www.syaiflash.com 
        </p>
        <p>
          Alinea 3 www.syaiflash.com www.syaiflash.com 
          www.syaiflash.com www.syaiflash.com www.syaiflash.com 
          www.syaiflash.com www.syaiflash.com www.syaiflash.com 
          www.syaiflash.com www.syaiflash.com www.syaiflash.com 
          www.syaiflash.com www.syaiflash.com www.syaiflash.com  
        </p>
        <p>
          Alinea 4 www.syaiflash.com www.syaiflash.com 
          www.syaiflash.com www.syaiflash.com www.syaiflash.com 
          www.syaiflash.com www.syaiflash.com www.syaiflash.com 
          www.syaiflash.com www.syaiflash.com www.syaiflash.com 
          www.syaiflash.com www.syaiflash.com www.syaiflash.com  
          </p>
          <p>
          Alinea 5 www.syaiflash.com www.syaiflash.com 
          www.syaiflash.com www.syaiflash.com www.syaiflash.com 
          www.syaiflash.com www.syaiflash.com www.syaiflash.com 
          www.syaiflash.com www.syaiflash.com www.syaiflash.com 
          www.syaiflash.com www.syaiflash.com www.syaiflash.com  
          </p>
          <p>
          Alinea 6 www.syaiflash.com www.syaiflash.com 
          www.syaiflash.com www.syaiflash.com www.syaiflash.com 
          www.syaiflash.com www.syaiflash.com www.syaiflash.com 
          www.syaiflash.com www.syaiflash.com www.syaiflash.com 
          www.syaiflash.com www.syaiflash.com www.syaiflash.com  
          </p>
          <p>
            Alinea 7 www.syaiflash.com www.syaiflash.com 
          www.syaiflash.com www.syaiflash.com www.syaiflash.com 
          www.syaiflash.com www.syaiflash.com www.syaiflash.com 
          www.syaiflash.com www.syaiflash.com www.syaiflash.com 
          www.syaiflash.com www.syaiflash.com www.syaiflash.com  
          </p>
          <p>
          Alinea 8 www.syaiflash.com www.syaiflash.com 
          www.syaiflash.com www.syaiflash.com www.syaiflash.com 
          www.syaiflash.com www.syaiflash.com www.syaiflash.com 
          www.syaiflash.com www.syaiflash.com www.syaiflash.com 
          www.syaiflash.com www.syaiflash.com www.syaiflash.com  
          </p>
          <p>
          linea 9 www.syaiflash.com www.syaiflash.com 
          www.syaiflash.com www.syaiflash.com www.syaiflash.com 
          www.syaiflash.com www.syaiflash.com www.syaiflash.com 
          www.syaiflash.com www.syaiflash.com www.syaiflash.com 
          www.syaiflash.com www.syaiflash.com www.syaiflash.com  
          </p>
        <h2 id="penutup">Bagian Penutup</h2>
        <p>
          Alinea Penutup www.syaiflash.com www.syaiflash.com 
          www.syaiflash.com www.syaiflash.com www.syaiflash.com 
          www.syaiflash.com www.syaiflash.com www.syaiflash.com 
          www.syaiflash.com www.syaiflash.com www.syaiflash.com 
          www.syaiflash.com www.syaiflash.com www.syaiflash.com 
        </p>
        <p>
            <a href="#top">Kembali ke Awal</a>
        </p>
    </body>
</html>

E. Link untuk Memanggil Fungsi Javascript

Link HTML dapat digunakan untuk memanggil fungsi Javascript. Pemanggilan fungsi Javascript dilakukan dengan atribut even seperti onclickonmouseoveronmouseout, dan sebagainya.

<!DOCTYPE html>
<html lang="en">
    <head>
        <title>www.syaiflash.com Hyperlink merubah warna</title>
</head>
    <body>
      <a href="#" onclick="alert('Hello World!')">Jalankan JS</a>
      <br>
      <br>
      <a href="#!" onmouseover="alert('link sudah kamu sentuh!')">Coba Sentuh Link ini</a>
      </p>
</body>
</html>

F. Link dengan Gambar

Membuat gambar sebagai link sering dilakukan dalam web. Cara membuatnya sisipkan tag <img> dengan tag <a>.

<!DOCTYPE html>
<html lang="en">
    <head>
        <title>www.syaiflash.com Hyperlink dengan Gambar</title>
</head>
    <body>
       <a href="http://www.syaiflash.com/"><img src="html.png" /></a>
    </body>
</html>

G. Link Untuk Download file

Link dapat digunakan sebagai link untuk download file. Cara membuatnya sangat mudah, dengan memasukkan alamat URL dari file yang akan di-download

<!DOCTYPE html>
<html lang="en">
    <head>
        <title>www.syaiflash.com Hyperlink Download File</title>
    </head>
    <body>
        <p>Silakan Download File:
            <a href="https://drive.google.com/file/d/1OolCXvB4NxoMWOfziKl6xRNwoCZWtNgz/view?usp=sharing">Download File</a>
        </p>
    </body>
</html>

H. Link Mengirim Email

Untuk membuat link email Ubah URL tujuan dari link dengan mailto, diikuti dengan alamat email yang akan menerima email. Jika menggunakan browser Google Chrome, maka akan terbuka Gmail. Jika dibuka di Firefox, akan memilih aplikasi email yang tersedia di komputer.

<!DOCTYPE html>
<html lang="en">
    <head>
        <title>www.syaiflash.com Hyperlink Mengirim email</title>
    </head>
    <body>
        <p>
            Kirim pesan melalui email:
           <a href="mailto:contoh@gmail.com" 
           title="kirim email ke Admin">Hubungi Saya</a>
        </p>
    </body>
</html>

Be the first to comment

Leave a Reply

Your email address will not be published.


*