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.
Sebuah hyperlink adalah teks atau gambar yang bisa diklik, dan melompat ke dokumen lain.
Tautan HTML - Sintaks
Dalam HTML, link didefinisikan dengan tag <a>:
<a href="url"> teks tautan </a>
Contoh
<a href="http://www.kodelover.blogspot.co.id/html/"> Kunjungi tutorial HTML kami </a>
Atribut href menentukan alamat tujuan (http://www.kodelover.blogspot.co.id/html/)
Teks link adalah bagian yang terlihat (Kunjungi tutorial HTML kami).
Mengklik teks link, akan mengirimkan ke alamat yang ditentukan.
Catatan Teks tautan tidak harus berupa teks. Ini bisa berupa gambar HTML atau elemen HTML lainnya.
Catatan Tanpa garis miring pada alamat subfolder, bisa menghasilkan dua permintaan ke server. Banyak server secara otomatis akan menambahkan garis miring ke alamat, dan kemudian membuat permintaan baru.
Tautan Lokal
Contoh di atas menggunakan URL absolut (alamat web lengkap).
Tautan lokal (tautan ke situs web yang sama) ditentukan dengan URL relatif (tanpa http: // www ....).
Contoh
<a href="html_images.asp"> Gambar HTML </a>
Tautan HTML - Warna
Saat mengarahkan mouse ke atas sebuah link, dua hal biasanya akan terjadi:
Panah panah akan berubah menjadi tangan kecil
Warna elemen link akan berubah
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
dapat mengubah warna default, dengan menggunakan gaya:
Contoh
<Style>
a: link {warna: hijau; Background-color: transparan; Hiasan teks: tidak ada}
a: dikunjungi {warna: pink; Background-color: transparan; Hiasan teks: tidak ada}
a: hover {warna: merah; Background-color: transparan; Hiasan teks: garis bawah}
a: aktif {warna: kuning; Background-color: transparan; Hiasan teks: garis bawah}
</ Style>
Tautan HTML - Atribut target
Atribut target menentukan tempat untuk membuka dokumen yang ditautkan.
Contoh ini akan membuka dokumen yang ditautkan di jendela browser baru atau di tab baru:
Contoh
<a href="http://www.kodelover.blogspot.co.id/" target="_blank"> Kunjungi kodelover! </a>
Nilai Sasaran Nilai
_blank Membuka dokumen yang terhubung di jendela atau tab baru
_self Membuka dokumen terkait dalam bingkai yang sama seperti yang diklik (ini adalah default)
_parent Membuka dokumen yang terhubung dalam bingkai induk
_top Membuka dokumen terkait di seluruh jendela
Framaame Membuka dokumen terkait dalam bingkai bernama
Jika halaman web terkunci dalam bingkai, dapat menggunakan target = "_ top" untuk keluar dari bingkai:
Contoh
<a href="http://www.kodelover.blogspot.co.id/html/" target="_top"> tutorial HTML5! </a>
Tautan HTML - Gambar sebagai Tautan
Adalah umum untuk menggunakan gambar sebagai link:
Contoh
<a href="default.asp">
<Img src = "smiley.gif" alt = "tutorial HTML" style = "width: 42px; height: 42px; border: 0">
</a>
Catatan border: 0 ditambahkan untuk mencegah IE9 (dan sebelumnya) menampilkan perbatasan di sekitar gambar.
Tautan HTML - Buat Bookmark
Penanda HTML digunakan untuk memungkinkan pembaca melompat ke bagian tertentu dari halaman Web.
Bookmark berguna jika situs memiliki halaman yang panjang.
Untuk membuat bookmark, harus terlebih dahulu 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 = "tips"> Tip Berguna Bagian </ h2>
Kemudian, tambahkan link ke bookmark ("Useful Tips Section"), dari dalam halaman yang sama:
<a href="#tips"> Kunjungi Bagian Tip Berguna </a>
Atau, tambahkan link ke bookmark ("Useful Tips Section"), dari halaman lain:
Contoh
<a href="html_tips.html#tips"> Kunjungi Bagian Tip Berguna </a>
Ringkasan
Gunakan elemen <a> HTML untuk menentukan link
Gunakan atribut HTML href untuk menentukan alamat link
Gunakan atribut target HTML untuk menentukan tempat untuk membuka dokumen yang ditautkan
Gunakan elemen <img> HTML (dalam <a>) untuk menggunakan gambar sebagai link
Gunakan atribut id HTML (id = "value") untuk menentukan bookmark di halaman
Gunakan atribut HTML href (href = "# value") untuk menautkan ke bookmark
Tag Tautan HTML
Deskripsi Tag
<a> Mendefinisikan sebuah hyperlink
Out Of Topic Show Konversi KodeHide Konversi Kode