Cara Membuat link di HTML (tag a)
Tautan ditemukan di hampir semua halaman web. Tautan memungkinkan pengguna mengeklik jalan mereka dari satu halaman ke halaman lainnya.
Tautan HTML - Hyperlink
Tautan HTML adalah hyperlink.
Anda bisa mengklik link dan melompat ke dokumen lain.
Saat Anda mengarahkan mouse ke atas sebuah link, panah mouse akan berubah menjadi tangan kecil.
Catatan: Tautan tidak harus berupa teks. Ini bisa berupa gambar atau elemen HTML lainnya.
Tautan HTML - Sintaks
Dalam HTML, link didefinisikan dengan tag <a>:
<a href="url">link text</a>
Contoh Code:
<!DOCTYPE html>
<html>
<body>
<h2>HTML Links</h2>
<p><a href="https://nusantaracoding.blogspot.co.id/">Kunjungi HTML Tutorial Kami</a></p>
</body>
</html>
Atribut href menentukan alamat tujuan (https://nusantaracoding.blogspot.co.id/) dari tautan.
Teks link adalah bagian yang terlihat (Kunjungi Tutorial HTML Kami).
Mengklik pada teks link akan mengirimkan Anda ke alamat yang ditentukan.
Catatan: Tanpa garis miring pada alamat subfolder, Anda bisa menghasilkan dua permintaan ke server. Banyak server secara otomatis menambahkan garis miring ke alamat, dan kemudian membuat permintaan baru.
Warna Tautan HTML
Secara default, link akan muncul seperti ini (di semua browser):
- - Tautan yang belum dikunjungi digarisbawahi dan biru
- - Tautan yang dikunjungi digarisbawahi dan berwarna ungu
- - Tautan aktif digarisbawahi dan berwarna merah
Contoh Code:
<!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>Link Colors</h2>
<p>Anda dapat mengubah warna default link</p>
<a href="https://nusantaracoding.blogspot.co.id/" target="_blank">Nusantara Coding</a>
</body>
</html>
Tautan HTML - Atribut target
Atribut target menentukan tempat untuk membuka dokumen terkait.
Atribut target dapat memiliki salah satu dari nilai berikut:
- _blank - Membuka dokumen yang terhubung di jendela atau tab baru
- _self - Membuka dokumen terkait di jendela / tab yang sama seperti yang diklik (ini adalah default)
- _parent - Membuka dokumen terkait dalam bingkai induk
- _top - Membuka dokumen terkait di seluruh jendela
- framename - Membuka dokumen terkait dalam bingkai bernama
Contoh ini akan membuka dokumen terkait di jendela / tab browser baru:
<a href="https://nusantaracoding.blogspot.co.id/" target="_blank">Nusantara Coding</a>
Tip: Jika halaman web Anda terkunci dalam bingkai, Anda dapat menggunakan target = "_ top" untuk keluar dari bingkai:
<a href="https://nusantaracoding.blogspot.co.id/" target="_top">Nusantara Coding</a>
Tautan HTML - Gambar sebagai Tautan
Adalah umum untuk menggunakan gambar sebagai link:
Contoh Code:
<!DOCTYPE html>
<html>
<body>
<h2>Image Links</h2>
<p>Gambar adalah link. Anda bisa klik di atasnya.</p>
<a href="https://nusantaracoding.blogspot.co.id/">
<img src="smiley.gif" alt="HTML tutorial" style="width:42px;height:42px;border:0">
</a>
</body>
</html>
Catatan: border: 0; ditambahkan untuk mencegah IE9 (dan sebelumnya) menampilkan perbatasan di sekitar gambar (saat gambar itu adalah link).
Tautan Title
Atribut Title menentukan informasi tambahan tentang sebuah elemen. Informasi paling sering ditunjukkan sebagai teks tooltip saat mouse bergerak di atas elemen.
Contoh Code:
<!DOCTYPE html>
<html lang="en-US">
<body>
<h2>Link Titles</h2>
<a href="https://nusantaracoding.blogspot.co.id/" title="Go to W3Schools HTML section">Kunjungi HTML Tutorial Kami</a>
</body>
</html>
Tautan HTML - Buat Bookmark
Penanda HTML digunakan untuk memungkinkan pembaca melompat ke bagian tertentu dari halaman Web.
Bookmark bisa bermanfaat jika halaman web Anda sangat panjang.
Untuk membuat bookmark, Anda harus terlebih dulu membuat bookmark, lalu menambahkan link ke sana.
Saat link diklik, halaman akan bergulir ke lokasi dengan bookmark.
Contoh
Pertama, buat bookmark dengan atribut id:
<h2 id="C4">Chapter 4</h2>
Kemudian, tambahkan link ke bookmark ("Langsung ke Bab 4"), dari dalam halaman yang sama:
<a href="#C4">Jump to Chapter 4</a>
Atau, tambahkan link ke bookmark ("Langsung ke Bab 4"), dari halaman lain:
<!DOCTYPE html>
<html>
<body>
<p><a href="#C4">Jump to Chapter 4</a></p>
<h2>Chapter 1</h2>
<p>This chapter explains ba bla bla</p>
<h2>Chapter 2</h2>
<p>This chapter explains ba bla bla</p>
<h2>Chapter 3</h2>
<p>This chapter explains ba bla bla</p>
<h2 id="C4">Chapter 4</h2>
<p>This chapter explains ba bla bla</p>
<h2>Chapter 5</h2>
<p>This chapter explains ba bla bla</p>
<h2>Chapter 6</h2>
<p>This chapter explains ba bla bla</p>
<h2>Chapter 7</h2>
<p>This chapter explains ba bla bla</p>
<h2>Chapter 8</h2>
<p>This chapter explains ba bla bla</p>
<h2>Chapter 9</h2>
<p>This chapter explains ba bla bla</p>
<h2>Chapter 10</h2>
<p>This chapter explains ba bla bla</p>
<h2>Chapter 11</h2>
<p>This chapter explains ba bla bla</p>
<h2>Chapter 12</h2>
<p>This chapter explains ba bla bla</p>
<h2>Chapter 13</h2>
<p>This chapter explains ba bla bla</p>
<h2>Chapter 14</h2>
<p>This chapter explains ba bla bla</p>
<h2>Chapter 15</h2>
<p>This chapter explains ba bla bla</p>
<h2>Chapter 16</h2>
<p>This chapter explains ba bla bla</p>
<h2>Chapter 17</h2>
<p>This chapter explains ba bla bla</p>
</body>
</html>
Eksternal Paths
Halaman eksternal dapat dirujuk dengan URL lengkap atau dengan path relatif ke halaman web saat ini.
Contoh ini menggunakan URL lengkap untuk ditautkan ke halaman web:
<a href="https://nusantaracoding.blogspot.co.id/">HTML tutorial</a>
Contoh ini menautkan ke halaman yang terletak di folder berbeda di folder saat ini:
<a href="HTMLkita/bedafolder.html">HTML tutorial</a>
Contoh ini tertaut ke halaman yang terletak di folder yang sama dengan halaman saat ini:
<a href="absolute.html">HTML tutorial</a>
Anda dapat membaca lebih lanjut tentang path file di dalam Bab HTML File Paths.
Ringkasan Bab
- Gunakan elemen <a> untuk menentukan link
- Gunakan atribut href untuk menentukan alamat link
- Gunakan atribut target untuk menentukan di mana membuka dokumen yang ditautkan
- Gunakan elemen <img> (di dalam <a>) untuk menggunakan gambar sebagai link
- Gunakan atribut id (id = "value") untuk menentukan bookmark di halaman
- Gunakan atribut href (href = "# value") untuk menautkan ke bookmark
HTML Link Tags
| Tag | Description |
|---|---|
| <a> | Mendefinisikan sebuah hyperlink |
Lihat Tutorial HTML Lengkapnya Disini: TUTORIAL HTML
Belajar HTML Secara Lengkap Disini:
1. Tutorial HTML Bagian 1
2. Tutorial HTML Bagian 2