Cara membuat link pada html

membuat sebuah link sederhana

Link pada HTML digunakan untuk beralih dari satu halaman ke halaman yang lainnya, atau melompat ke bagian tertentu dari halaman web. Link sendiri jika dikelompokan terbagi 2 yaitu:

  • Link External adalah link yang menuju ke luar halaman
  • Link internal adalah link yang menuju ke halaman itu sendiri
  • <a> salah satu elemen html yang digunakan untuk mendefinisikan sebuah link
  • href salah satu atribut html yang digunakan untuk memberikan alamat atau url link
  • anchor adalah hyperlink yang bisa diklik atau terlihat. Anchor bisa berupa gambar, video atau teks.

Link external berguna untuk menuju ke luar halaman.

Contoh:

<!DOCTYPE html>
<html>
    <head>
        <title>Judul post</title>
    </head>
    <body>
        <a href="https://www.facebook.com/">Facebook</a>
    </body>
</html>

Hasilnya:

Link internal adalah link yang menuju ke halaman itu sendiri.
Kita akan menggunakan atribut ID pada html untuk melompat kebagian bawah.

Anda akan belajar lebih dalam tentang atribut ID pada html

contoh:

<!DOCTYPE html>
<html>
    <head>
        <title>Judul post</title>
    </head>
    <body>
        <a href="#membuat-gambar-berlink">Internal</a>
    </body>
</html>

Hasilnya:

Didalaman elemen <a> terdapat sebuah atribut yang bisa Anda gunakan sesuai keinginan Anda. Ini bersifat opsional. target atribut menentukan di mana untuk membuka dokumen terkait.

  • _blank – Membuka dokumen yang ditautkan di jendela atau tab baru
  • _self – Membuka dokumen yang ditautkan di jendela / tab yang sama seperti yang diklik (ini adalah default)
  • _parent – Membuka dokumen yang ditautkan dalam bingkai induk
  • _top – Membuka dokumen yang ditautkan di seluruh jendela
  • framename – Membuka dokumen yang ditautkan dalam bingkai bernama

Contoh:

Atribut: _blank

<!DOCTYPE html>
<html>
    <head>
        <title>Judul post</title>
    </head>
    <body>
        <a href="https://www.hendky.com/" target="_blank">Hallo blank!</a>
    </body>
</html>

Atribut: _self

<!DOCTYPE html>
<html>
    <head>
        <title>Judul post</title>
    </head>
    <body>
        <a href="https://www.hendky.com/" target="_self">Hallo self!</a>
    </body>
</html>

Atribut: _parent

<!DOCTYPE html>
<html>
    <head>
        <title>Judul post</title>
    </head>
    <body>
        <a href="https://www.hendky.com/" target="_parent">Hallo parent!</a>
    </body>
</html>

Atribut: _top

<!DOCTYPE html>
<html>
    <head>
        <title>Judul post</title>
    </head>
    <body>
        <a href="https://www.hendky.com/" target="_top">Hallo top!</a>
    </body>
</html>

Hasilnya:

Hallo blank!
Hallo self!
Hallo parent!
Hallo top!

Silakan Anda coba link diatas satu per satu.

Anda bisa membuat link dengan anchor yang di isi menggunakan gambar.

Contoh:

<!DOCTYPE html>
<html>
    <head>
        <title>Judul post</title>
    </head>
    <body>
        <a href="https://www.hendky.com/">
            <img src="https://hendky.com/wp-content/uploads/2019/06/kucing-malas.jpg" width="500" height="400" alt="kucing gendut yang lucu" >
        </a>
    </body>
</html>

Hasilnya:

Ringkasan pembelajaran

Elemen / AtributKegunaanya
<a>Mendefinisikan sebuah tautan atau link
hrefsalah satu atribut html yang digunakan untuk memberikan alamat atau url link
anchortext yang bisa di klik atau terlihat pada sebuah link
targetMembuka dokumen yang ditautkan dalam bingkai induk
_blankMembuka dokumen yang ditautkan di jendela atau tab baru
_selfMembuka dokumen yang ditautkan di jendela (default)
_parentMembuka dokumen yang ditautkan dalam bingkai induk
_topMembuka dokumen yang ditautkan di seluruh jendela

Leave a Reply

Your email address will not be published. Required fields are marked *