Link yang ditemukan di hampir semua halaman web. Link memungkinkan pengguna untuk mengklik jalan mereka dari halaman ke halaman.
HTML Links - Hyperlink
link HTML adalah hyperlink.
Anda dapat mengklik link dan melompat ke dokumen lain.
Bila Anda memindahkan mouse di atas link, panah mouse akan berubah menjadi tangan kecil.
Catatan: Sebuah link tidak harus berupa teks. Hal ini dapat gambar atau elemen HTML lainnya.
HTML Links - Sintaks
Hyperlink didefinisikan dengan HTML
<a>
tag:
<a href="url">link text</a>
Contoh
<a href="https://www.w3schools.com/html/">Visit our HTML tutorial</a>
The
href
atribut menentukan alamat tujuan ( https://www.w3schools.com/html/ ) link.
The link teks adalah bagian yang terlihat (Kunjungi kami HTML tutorial).
Mengklik pada link teks akan mengirimkan ke alamat tertentu.
Catatan: Tanpa garis miring pada akhir alamat subfolder, Anda mungkin akan menghasilkan dua permintaan ke server. Banyak server secara otomatis akan menambahkan garis miring ke akhir alamat, dan kemudian membuat permintaan baru.
Link lokal
Contoh di atas digunakan URL absolut (alamat web penuh).
Sebuah link lokal (link ke situs web yang sama) ditentukan dengan URL relatif (tanpa https: // www ....).
Contoh
<a href="html_images.asp">HTML Images</a>
HTML Link - Target Atribut
The
target
menspesifikasikan atribut mana untuk membuka dokumen terkait.
The
target
atribut dapat memiliki salah satu dari nilai berikut:_blank
- Membuka dokumen terkait di jendela baru atau tab_self
- Membuka dokumen terkait dalam jendela yang sama / tab seperti itu diklik (ini adalah default)_parent
- Membuka dokumen terkait dalam kerangka induk_top
- Membuka dokumen terkait dalam tubuh penuh jendela- framename - Membuka dokumen terkait dalam bingkai bernama
Contoh ini akan membuka dokumen terkait dalam jendela browser / tab baru:
Contoh
<a href="https://www.w3schools.com/" target="_blank">Visit W3Schools!</a>
Tip: Jika halaman Web Anda terkunci dalam bingkai, Anda dapat menggunakan
target="_top"
untuk keluar dari frame:Contoh
<a href="https://www.w3schools.com/html/" target="_top">HTML5 tutorial!</a>
HTML Link - Image sebagai sebuah Link
Hal ini umum untuk penggunaan gambar sebagai link:
Contoh
<a href="default.asp">
<img src="smiley.gif" alt="HTML tutorial" style="width:42px;height:42px;border:0;">
</a>
Catatan:
border:0;
ditambahkan untuk mencegah IE9 (dan sebelumnya) dari menampilkan perbatasan di sekitar gambar (ketika gambar adalah link).Tombol sebagai sebuah Link
Untuk menggunakan tombol HTML sebagai link, Anda harus menambahkan beberapa kode JavaScript.
JavaScript memungkinkan Anda untuk menentukan apa yang terjadi di acara-acara tertentu, seperti klik tombol:
Contoh
<button onclick="document.location = 'default.asp'">HTML Tutorial</button>
Link Judul
The
title
Atribut menentukan informasi tambahan tentang elemen. Informasi ini paling sering ditampilkan sebagai teks tooltip ketika mouse bergerak di atas elemen.Contoh
<a href="https://www.w3schools.com/html/" title="Go to W3Schools HTML section">Visit our HTML Tutorial</a>
Jalur eksternal
halaman eksternal dapat dirujuk dengan URL penuh atau dengan path relatif ke halaman web saat ini.
Contoh ini menggunakan URL lengkap untuk link ke halaman web:
Contoh
<a href="https://www.w3schools.com/html/default.asp">HTML tutorial</a>
Contoh ini link ke halaman yang terletak di folder html di situs web saat ini:
Contoh
<a href="/html/default.asp">HTML tutorial</a>
Contoh ini link ke halaman yang terletak di folder yang sama dengan halaman saat:
Contoh
<a href="default.asp">HTML tutorial</a>
Bab Ringkasan
- Gunakan
<a>
elemen untuk mendefinisikan link - Gunakan
href
atribut untuk menentukan alamat link - Gunakan
target
atribut untuk menentukan di mana untuk membuka dokumen terkait - Gunakan
<img>
elemen (dalam <a>) untuk menggunakan gambar sebagai link
Latihan HTML
HTML Tautan Tags
Tag | Description |
---|---|
<a> | Defines a hyperlink |
Tidak ada komentar:
Posting Komentar