Home / PEMROGRAMAN / Apa itu Link di HTML?

Apa itu Link di HTML?

 

Link atau Hyperlink adalah sebuah elemen HTML ( Hypertext Markup Language ) yang berfungsi untuk menghubungkan suatu halaman web satu ke halaman web yang lain.

link ini nanti bisa diklik kemudian akan membuka halaman lain sesui alamat URL yang diberikan.

Nanti kita akan bahas ini lebih dalam..

Sekarang kita akan membuat halamn link

Silahkan lanjutkan membaca:

Cara Membuat Link di HTML

Link di HTML dibuat dengan tag <a>, lalu tag ini memiliki atribut href untuk menentukan alamat URL yang akan dituju oleh link.

Bentuk sederhananya seperti ini:





Contoh: link.html

<!DOCTYPE html>

<html lang="en">

    <head>

        <title>Tutorial Link di HTML</title>

    </head>

    <body>

        <p>Untuk lebih lengkapnya, silahkan buka:

            <a href="about.html">About us</a>

        </p>

    </body>

</html>

Why alamat URL di atribut href ditulis dengan nama file?

<a href="about.html">About us</a>

kenapa tidak alamt lengkap  yang pakai http bla bla?

Nah karena  link yang kita buat ini adalah internal link terus juga file about.html masih berada dalam satu folder dengan file link.html. otomatisi boleh menuliskan langsung nama filenya, tanpa harus lengkap dengan http.

Untuk lebih jelasnya, yuk mari kita pelajari jenis-jenis link dalam HTML.

Jenis-jenis Link pada HTML

Berdasarkan alamat URL yang dituju, link pada HTML dibagi menjadi dua kelompok:

  1. Internal Link: adalah link yang menuju ke domain atau halaman web itu sendiri;
  2. External Link: adalah link yang menuju domain lain.
Jelaskan sampai sini???

Internal link biasanya digunakan oleh developer untuk menghubungkan halaman yang satu dengan halaman yang lainnya yang masih dalam satu website atau domain atau masih 1 halaman.

Sementara untuk eksternal link, digunakan untuk menghubungkan atau membuka web atau domain lain. Misalnya ni: kamu akan membuka halaman facebook, membuka chat whatsapp, membuka instagram, dan sebagainya.

Nah apa intinya??????

Selama link tersbut membuka web lain, maka link itu adalah external. Tapi kalau tetap membuka web itu sendiri dalam satu page maka itu internal.


Mudah bukan??

Biar lebih jelas, mari kita coba membuatnya di HTML:

Contoh Internal Link

Buatlah file baru bernama index.html kemudian isi dengan kode berikut:

<!DOCTYPE html>

<html lang="en">

    <head>

        <title>Tutorial Link di HTML</title>

    </head>

    <body>

      <h1>Selamat Datang</h1>

        <p>

          <a href="index.html" >Home</a> |

          <a href="contact.html" >Contact</a> |

          <a href="about.html" >About</a>

        </p>

        <hr>

        <p>

          Selamat datang di websiteku. Coba klik menu di atas,

          maka kamu akan membuka halaman yang berbeda. Semua

          link di atas adalah internal link.

        </p>

        <hr>

        <div>Copyright &copy; 2020 by RPL SMKN 2</div>

    </body>

</html>

Kemudian buat lagi file baru bernama contact.html dengan isi sebagai berikut:

<!DOCTYPE html>

<html lang="en">

    <head>

        <title>Tutorial Link di HTML</title>

    </head>

    <body>

      <h1>Contact</h1>

        <p>

          <a href="index.html" >Home</a> |

          <a href="contact.html" >Contact</a> |

          <a href="about.html" >About</a>

        </p>

        <hr>

        <p>

          Kamu bisa menghubungi saya melalui nomer WA: 08671111111

          atau juga alamat email: email@contoh.com.

        </p>

        <hr>

        <div>Copyright &copy; 2020 by RPL SMKN 2</div>

    </body>

</html>

Terakhir, buat file about.html dengan isi sebagai berikut:

<!DOCTYPE html>

<html lang="en">

    <head>

        <title>Tutorial Link di HTML</title>

    </head>

    <body>

      <h1>About</h1>

        <p>

          <a href="index.html" >Home</a> |

          <a href="contact.html" >Contact</a> |

          <a href="about.html" >About</a>

        </p>

        <hr>

        <p>

          Ini adalah halaman about dari website saya.

          Jadi ini adalah contoh cara membuat link internal di HTML.

        </p>

        <hr>

        <div>Copyright &copy; 2020 by RPL SMKN 2</div>

    </body>

</html>

Pastikan semua file ini disimpan dalam satu folder.

INGAT YAA SEMUA FILE HARUS JADI 1 DALAM FOLDER KALIAN

Nah sekarang coba buka index.html dengan browser.

Maka hasilnya: SIlahkan dicoba sendiri :)

2. Contoh Eksternal Link

Cara membuat eksternal link  sama saja seperti internal link. Perbedaanya terletak pada alamat URL yang ditulisakan

Sebagai contoh seperti ini, kita akan membuat link ke facebook

<a href="https://www.facebook.com/bestitalic">Facebook</a>

Hasilnya:

Facebook

Maka saat link tersebut diklik, kita akan membuka halaman facebook kita

Contoh lain lagi:

Link CTA (call to action) untuk whatsapp.

<a href="https://api.whatsapp.com/send?phone=6287111&text=Hi">Chat dengan Saya</a>

Hasilnya:

Chat dengan Saya silahkan dicoba sendiri

Pada link tersebut, kita memberikan alamat URL whatsapp dan nantinya akan membuka halaman tersebut. 

Oh iya, di sana kita juga memberikan parameter berupa nomer handphone dan juga teks.

Nah, biar jelas.. kita akan coba tambahkan eksternal link pada file contact.html.

Silahkan buka file contact.html kemudian silahkan diubah kodenya menjadi seperti ini:

<!DOCTYPE html>

<html lang="en">

    <head>

        <title>Tutorial Link di HTML</title>

    </head>

    <body>

      <h1>Contact</h1>

        <p>

          <a href="index.html" >Home</a> |

          <a href="contact.html" >Contact</a> |

          <a href="about.html" >About</a>

        </p>

        <hr>

        <p>

          Kamu bisa menghubungi saya melalui nomer WA:

          <a href="https://api.whatsapp.com/send?phone=6287111&text=Hi">+6287111</a>

          atau juga alamat email: mail@contoh.com.

        </p>

        <p>

          Jangan lupa follow juga fan page saya ya:

          <a href="https://www.facebook.com/urlfacebookkalian">Facebook</a>

        </p>

        <hr>

        <div>Copyright &copy; 2020 by RPL SMKN 2</div>

    </body>

</html>

 

Hasilnya:

Silahkan dicoba sendiri

Atribut-atribut untuk Link

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

Menggunakan Atribut target

Atribut target berfungsi untuk menentukan target yang untuk membuka 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;

Contoh:

<a href=' https://www.facebook.com/wulansasasa/' target='_blank'>Facebook</a>

Hasilnya:

Silahkan dicoba sendiri

 

Saat link tersebut diklik, maka akan membuka tab baru. Ini karena kita memberikan atribut target dengan nilai _blank.

Nah sekarang, kita akan mencoba menampilkan link ke dalam sebuah frame.

Buatlah file baru bernama link-frame.html, kemudian isi kodenya seperti ini:

<!DOCTYPE html>

<html lang="en">

 

<head>

  <title>Tutorial Link di HTML</title>

</head>

 

<body>

  <p>

    <a href="http://smkn2trenggalek.sch.id/" target="myframe">Sebuah Link</a>

  </p>

  <p>

    <!-- Frame yang akan menjadi target link -->

    <iframe name="myframe" width="600" height="400"></iframe>

  </p>

</body>

 

</html>

Hasilnya:

Dicoba sendiri

Menggunakan Atribut title

Atribut title berfungsi untuk membuat tooltips. Tooltips adalah informasi tambahan yang akan tampil saat link disentuh pointer , ngerti pointer kan ya kaliann??? itu kursor :D atau saat kita menahan tap di hp.

Contoh:

<!DOCTYPE html>

<html lang="en">

    <head>

        <title>Tutorial Link di HTML</title>

    </head>

    <body>

        <p>Untuk lebih lengkapnya, silahkan buka:

            <a href="about.html" title="Menuju ke halaman about">About us</a>

        </p>

    </body>

</html>

Hasilnya:

Dicoba Sendiri

Cara Mengubah Warna Link di HTML

link ini default warnanya adalah biru, ini bisa kita ubah dengan style CSS. Warna bisa kita berikan untuk teks dan latar belakang (background).

Caranya gimana???

Tambahkan atribut style kemudian isi dengan style css untuk mengubah warna, yakni color (untuk teks) dan background-color (untuk latar).

Contoh:

<!DOCTYPE html>
<html lang="en">
    <head>
        <title>Tutorial Link di HTML</title>
    </head>
    <body>
      <h1>Selamat Datang</h1>
        <p>
          <a href="index.html" style="color:red">Home</a> |
          <a href="contact.html" style="color:green">Contact</a> |
          <a href="about.html" style="color:deeppink;">About</a> |
          <a href="download.html" style="color:white;background-color: orange;">Download</a>
        </p>
        <hr>
        <p>
          Selamat datang di websiteku. Coba klik menu di atas,
          maka kamu akan membuka halaman yang berbeda. Semua
          link di atas adalah internal link.
        </p>
        <hr>
        <div>Copyright &copy; 2020 by Petani Kode</div>
    </body>
</html>

Hasilnya:

DIcoba Sendiri

Link bisa digunakan untuk memanggil fungsi dari Javascript.

Fungsi Javascript biasanya dapat dipanggil dengan atribut even seperti onclick, onmouseover, onmouseout, dan sebagainya.

Contoh:

<!DOCTYPE html>
<html lang="en">
    <head>
        <title>Tutorial Link di HTML</title>
    </head>
    <body>
        <p>
            <a href="#" onclick="alert('Hello World!')">Jalankan JS</a>
            <br>
            <a href="#!" onmouseover="alert('aha kamu sudah sentuh aku!')">Coba Sentuh Link ini</a>
        </p>
    </body>
</html>

Hasilnya:

Dicoba sendiri


Nah demikian pengenalan dasar link, untuk selebihnya bisa kalian kembang kan sendiri

Apa itu Link di HTML? Apa itu Link di HTML? Reviewed by bestitalic on Oktober 02, 2020 Rating: 5

You May Also Like

Tidak ada komentar:

Langganan: Posting Komentar ( Atom )
  • Menampilkan gambar di kode HTML
    Kalian bisa membayangkan apabila website tidak ada gambarnya dan hanya tulisan saja??? Pasti sangat membosankan bukan? Nah dipelajaran ini k...
  • Apa itu Link di HTML?
      Link atau  Hyperlink  adalah sebuah elemen HTML ( Hypertext Markup Language ) yang berfungsi untuk menghubungkan suatu halaman web satu ke...
  • Membuat Template Web Responsive Dengan Bootstrap
    Template Web Responsive dengan Bootstrap Pada kesempatan kali ini saya akan membagikan cara membuat tampilan web sederhana dengan tema  blog...
Diberdayakan oleh Blogger.