Link banyak ditemukan hampir pada semua halaman web. HTML Link atau hyperlink biasanya digunakan untuk berpindah menuju halaman tertentu. Link tidak hanya berupa text tetapi juga bisa berupa gambar.

Hyperlink pada HTML ditulis dengan menggunakan tag <a>.

Format penulisan:

<a href="url">link text</a>

Contoh pembuatan link:

<a href="https://penakode.com">Tutorial Pemrograman dan Web</a>

Hasilnya sebagai berikut:

Tutorial Pemrograman dan Web

href : Atribut yang digunakan untuk alamat tujuan (https://penakode.com) dari sebuah link.

Link text : text yang ditampilkan, apabila di klik maka akan menuju ke alamat url yang ada pada href.

Atribut target menentukan tempat untuk membuka dokumen yang ditautkan.

Atribut target yang dapat digunakan adalah sebagai berikut:

_blank : membuka halaman yang ditautkan (link) pada tab baru.
_self  : membuka halaman yang ditautkan (link) pada tab yang sama (default).
_top   : membuka link dokumen web dengan fullscreen
_parent: membuka link dokumen web dalam rangka induk

Untuk membuat link atau hypertext di HTML menggunakan tag <a> yang memiliki atribut href yang berisi url (alamat yang dituju).

href merupakan singkatan dari hypertext reference.

Untuk lebih jelasnya, langsung saja buka text editor dan ketik perintah dibawah ini.

contoh penulisan tag link

<!DOCTYPE html>
<html>
<head>
    <title>Contoh Penggunaan Link</title>
</head>
<body>
    <h1>Belajar Membuat Tag Link</h1>
    <p>Belajar HTML di <a href="https://penakode.com">penakode</a> menyenangkan</p>
</body>
</html>

Hasilnya dapat dilihat di browser menjadi seperti ini.

link-html

Atribut title pada link digunakan untuk memberikan informasi yang akan muncul seperti “tools tip” ketika mouse tepat berada diatas link.

Contoh:

<a href="https://penakode.com" title="Tutorial pemrograman dan web">Penakode</a>

Coba jalankan pada contoh sebelumnya kita tambahkan title.

<!DOCTYPE html>
<html>
<head>
    <title>Contoh Penggunaan Link</title>
</head>
<body>
    <h1>Belajar Membuat Tag Link</h1>
    <p>Belajar HTML di <a href="https://penakode.com" title="Tutorial pemrograman dan web">penakode</a> menyenangkan</p>
</body>
</html>

Hasil tampilannya di browser seperti ini.

html-link

Link pada HTML bisa digunakan untuk membuat link menuju internal ke halaman yang sama, halaman dalam 1 folder yang sama ataupun eksternal ke web lain.

Contoh link eksternal:

=><a href="https://penakode.com">Tutorial Pemrograman dan Web</a>

Contoh link internal:

=><a href="/list.html">Cara Membuat List HTML</a>

Bagaimana, mudah bukan?

Apabila sudah mengerti cara membuat link dengan menggunakan tag <a> di HTML.

Link bisa dibuat tidak hanya menggunakan text seperti cara diatas, tetapi bisa menggunakan gambar sebagai link atau button.

Untuk membuat gambar sebagai link dan car insert gambar di HTML akan dibahas pada tutorial berikutnya.

Contoh Link Menggunakan Button

Penggunaan Link pada button dengan menggunakan css.

Untuk contoh penggunaan link pada button dengan menggunakan css akan dibahas saat belajar tentang CSS.