Cara membuat link pada html
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 linkhrefsalah satu atribut html yang digunakan untuk memberikan alamat atau url linkanchoradalah 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:
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:
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 |