Home › html › Cara membuat link pada html

Cara membuat link pada html

Diperbaharui: 18 October 2020

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

Penjelasan link

<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

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:

Facebook

Link internal

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:

Internal

Link atribut

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.

Link gambar

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 / Atribut	Kegunaanya
<a>	Mendefinisikan sebuah tautan atau link
href	salah satu atribut html yang digunakan untuk memberikan alamat atau url link
anchor	text yang bisa di klik atau terlihat pada sebuah link
target	Membuka dokumen yang ditautkan dalam bingkai induk
_blank	Membuka dokumen yang ditautkan di jendela atau tab baru
_self	Membuka dokumen yang ditautkan di jendela (default)
_parent	Membuka dokumen yang ditautkan dalam bingkai induk
_top	Membuka dokumen yang ditautkan di seluruh jendela