Tautan HTML - Hyperlinks
Tautan HTML adalah hyperlink.
Anda dapat mengklik tautan dan melompat ke dokumen lain.
Ketika Anda mengarahkan mouse ke tautan, panah mouse akan berubah menjadi tangan kecil.
1. LIKS
* HTML Links - Syntax
```html
<a href="url">teks tautan</a>
```
Atribut paling penting dari elemen `<a>` adalah atribut `href`, yang menunjukkan tujuan tautan.
Teks tautan adalah bagian yang akan terlihat oleh pembaca.
Contoh
Contoh ini menunjukkan cara membuat tautan ke W3Schools.com:
```html
<a href="https://www.w3schools.com/">Visit W3Schools.com!</a>
```
Secara default, tautan akan muncul seperti berikut di semua browser:
- Tautan yang belum dikunjungi di bawahgaris dan berwarna biru.
- Tautan yang sudah dikunjungi di bawahgaris dan berwarna ungu.
- Tautan aktif di bawahgaris dan berwarna merah.
Contoh codingan :
* HTML Links - The target Attribute
Example
Use target="_blank" to open the linked document in a new browser window
<a href="https://www.w3schools.com/" target="_blank">Visit W3Schools!</a>
Atribut target menentukan di mana membuka dokumen yang ditautkan.
Atribut target dapat memiliki salah satu dari nilai berikut:
- `_self`: Default. Membuka dokumen dalam jendela/tab yang sama seperti yang diklik.
- `_blank`: Membuka dokumen dalam jendela atau tab baru.
- `_parent`: Membuka dokumen dalam frame induk.
- `_top`: Membuka dokumen dalam seluruh area jendela.
* Absolute URLs vs. Relative URLs
Kedua contoh di atas menggunakan URL absolut (alamat web lengkap) dalam atribut href.
Tautan lokal (tautan ke halaman dalam situs web yang sama) ditentukan dengan URL relatif (tanpa bagian "https://www") seperti berikut
<!DOCTYPE html>
<html>
<body>
<h2>Absolute URLs</h2>
<p><a href="https://www.w3.org/">W3C</a></p>
<p><a href="https://www.google.com/">Google</a></p>
<h2>Relative URLs</h2>
<p><a href="html_images.asp">HTML Images</a></p>
<p><a href="/css/default.asp">CSS Tutorial</a></p>
</body>
</html>
KESIMPULAN
Gunakan elemen `<a>` untuk menentukan tautan.
Gunakan atribut href untuk menentukan alamat tautan.
Gunakan atribut target untuk menentukan tempat membuka dokumen yang ditautkan.
Gunakan elemen `<img>` (di dalam `<a>`) untuk menggunakan gambar sebagai tautan.
Gunakan skema mailto: di dalam atribut href untuk membuat tautan yang membuka program email pengguna.
2. Link Colors
Secara default, tautan akan muncul seperti ini (di semua browser):
* HTML links Colors
- Tautan yang belum dikunjungi di bawahgaris dan berwarna biru.
- Tautan yang sudah dikunjungi di bawahgaris dan berwarna ungu.
- Tautan aktif di bawahgaris dan berwarna merah.
Berikut adalah contoh di mana tautan yang belum dikunjungi akan berwarna hijau tanpa garis bawah. Tautan yang sudah dikunjungi akan berwarna pink tanpa garis bawah. Tautan aktif akan berwarna kuning dan bergaris bawah. Selain itu, saat mengarahkan mouse ke tautan (a:hover), tautan akan menjadi merah dan bergaris bawah:
```html
<style>
a:link {
color: green;
text-decoration: none;
}
a:visited {
color: pink;
text-decoration: none;
}
a:hover {
color: red;
text-decoration: underline;
}
a:active {
color: yellow;
text-decoration: underline;
}
</style>
```
* Link Buttons
Sebuah tautan juga dapat diubah gayanya menjadi tombol menggunakan CSS:
```html
<!-- Ini adalah tautan sebagai tombol -->
<a href="#">Ini adalah tautan</a>
<style>
a:link, a:visited {
background-color: #f44336;
color: white;
padding: 15px 25px;
text-align: center;
text-decoration: none;
display: inline-block;
}
a:hover, a:active {
background-color: red;
}
</style>
```
Dalam contoh ini, tautan yang belum dikunjungi dan yang sudah dikunjungi akan memiliki latar belakang warna merah tua dengan teks putih. Saat tautan dihover atau diaktifkan, warna latar belakangnya akan berubah menjadi merah cerah.
* Link Tags
| Tag | Description |
|---|---|
| <a> | Defines a hyperlink |
