Belajar HTML Part 13 - Membuat Link (Hyperlink) di HTML

Link HTML - Hyperlink

Link HTML adalah hyperlink. Link ditemukan hampir disemua halaman web. Link memungkinkan pengguna untuk mengklik dan sebagai penghubung antara halaman satu ke halaman lain.

Kita dapat mengklik link dan melompat ke dokumen lain atau halaman lain. Apabila kita memindahkan mouse/kursor di atas link, panah mouse/kursor akan berubah menjadi tangan kecil.

Catatan: Sebuah link tidak harus berupa teks. Link juga bisa berupa gambar atau elemen lain HTML.

Sintaks Hyperlink

Dalam HTML, untuk membuat sebuah link gunakan tag <a>! Seperti berikut:

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

Atribut href menentukan alamat yang dituju oleh hyperlink
Mengklik pada link teks akan mengirimkan ke alamat yang ditentukan

Catatan: Tanpa garis miring pada alamat subfolder, Anda mungkin akan menghasilkan dua permintaan ke server. Banyak server secara otomatis akan menambahkan garis miring ke alamat, dan kemudian membuat permintaan baru.

Contoh

<!DOCTYPE html>
<html>
<head>
<title>Title Halaman</title>
</head>
<body>

    <a href="https://king-octahasan.blogspot.com/search/label/Tutorial%20HTML5?&max-results=8">Kunjungi tutorial HTML</a>

</body>
</html>

Hasilnya:

HTML Warna Link

Ciri-ciri link pada HTML:

Link yang belum dikunjungi digarisbawahi dan berwarna biru
Link yang sudah pernah dikunjungi digarisbawahi dan berwarna ungu
Link aktif adalah digarisbawahi dan berwarna merah

Anda dapat mengubah warna default, dengan menggunakan style berikut:

Contoh

<!DOCTYPE html>
<html>
<head>
<style>
a:link {
    color: green;
    background-color: transparent;
    text-decoration: none;
}
a:visited {
    color: pink;
    background-color: transparent;
    text-decoration: none;
}
a:hover {
    color: red;
    background-color: transparent;
    text-decoration: underline;
}
a:active {
    color: yellow;
    background-color: transparent;
    text-decoration: underline;
}
</style>
</head>
<body>

<h2>Warna pada Link</h2>

<p>Kita bisa mengubah warna default link</p>

<a href="https://king-octahasan.blogspot.com/" target="_blank">Blog KING-OCTAHASAN</a> 

</body>
</html>

Hasilnya:

Berdasarkan contoh diatas:

Link normal masih berwarna hijau
Ketika Link tersebut sudah pernah dikunjungi, maka akan beruwah menjadi warna pink
Link akan berubah menjadi warna merah saat mouse / kursor digerakkan di atas link tersebut
Link aktif akan berubah warna menjadi kuning. Link aktif artinya saat link tersebut di klik lalu ditahan.

Atribut Target / Sasaran

Atribut target / sasaran link menentukan di mana letak halaman web pada saat kita membukanya.

Atribut link hanya bisa memiliki salah satu dari value berikut:

_blank - Membuka halaman di jendela baru atau tab baru
_self - Membuka halaman di jendela yang sama
_parent - Membuka halaman terkait dalam kerangka induk
_top - Membuka dalam tampilan penuh pada jendela
framename - Membuka halaman dalam framename

Contoh ini akan membuka dokumen terkait dalam jendela browser / tab baru:

Contoh

<!DOCTYPE html>
<html>
<head>
<title>Title Halaman</title>
</head>
<body>

    <a href="https://king-octahasan.blogspot.co.id/" target="_blank">Kunjungi blog king-octahasan!</a>

</body>
</html>

Jika halaman Web kita terkunci dalam bingkai, kita dapat menggunakan target = "_ top" untuk keluar dari bingkai tersebut.

Contoh

<!DOCTYPE html>
<html>
<head>
<title>Title Halaman</title>
</head>
<body>

    <a href="http://king-octahasan.blogspot.co.id/2018/02/belajar-html-part-13-hyperlink-di-html.html" target="_top">Tutorial HTML5!</a>

</body>
</html>

Membuat Link Gambar

Untuk membuat hyperlink, boleh juga menggunakan gambar sebagai link:

Contoh

<!DOCTYPE html>
<html>
<head>
<title>Title Halaman</title>
</head>
<body>

    <a href="king-octahasan.blogspot.com">

    <img src="nama_gambar.jpg" alt="Tutorial HTML" style="width:42px;height:42px;border:0;">

</a>

</body>
</html>

Catatan: border: 0; ditambahkan untuk mencegah IE9 (dan versi sebelumnya) dari menampilkan border di sekitar gambar (ketika gambar adalah link).

Membuat Bookmark

Bookmark HTML digunakan untuk melompat ke bagian tertentu dalam satu halaman Web. Bookmark dapat berguna jika halaman Web kita sangat panjang.

Untuk membuat bookmark, kita perlu untuk menambahkan link ke lokasi yang dituju. Ketika link diklik, halaman akan gulir ke lokasi yang dituju tersebut.

Contoh
Pertama, buat bookmark dengan atribut id! Seperti berikut:

<!DOCTYPE html>
<html>
<head>
<title>Title Halaman</title>
</head>
<body>

      <h2 id="Chapter4">Chapter 4</h2>
      <h2 id="Chapter6">Chapter 6</h2>
      <h2 id="Chapter8">Chapter 8</h2>
</body>
</html>

Kemudian, menambahkan link ke bookmark ( "Langsung ke Chapter 4, 6, dan 8"), di dalam halaman yang sama:
Contoh


<!DOCTYPE html>
<html>
<head>
<title>Membuat Bookmart</title>
</head>
<body>

<p><a href="#Chapter4">Lompat ke Chapter 4</a></p>
<p><a href="#Chapter6">Lompat ke Chapter 6</a></p>
<p><a href="#Chapter8">Lompat ke Chapter 8</a></p>

<h2>Chapter 1</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>

<h2>Chapter 2</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>

<h2>Chapter 3</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>

<h2 id="Chapter4">Chapter 4</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>

<h2>Chapter 5</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>

<h2 id="Chapter6">Chapter 6</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>

<h2>Chapter 7</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>

<h2 id="Chapter8">Chapter 8</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>

<h2>Chapter 9</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>

<h2>Chapter 10</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>

<h2>Chapter 11</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>

<h2>Chapter 12</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>

<h2>Chapter 13</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>

<h2>Chapter 14</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>

<h2>Chapter 15</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>

<h2>Chapter 16</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>

</body>
</html>

Rangkuman

Gunakan elemen <a> untuk membuat link HTML
Gunakan atribut href untuk menentukan alamat link
Gunakan atribut target untuk menentukan sasaran dimana untuk membuka dokumen yang terkait
Gunakan elemen <img> (dalam tag <a>) untuk menggunakan gambar sebagai link
Gunakan atribut id (id = "value") untuk menentukan bookmark di halaman
Gunakan atribut href (href ="#value") untuk menghubungkan ke bookmark