Link yang ditemukan di hampir semua halaman web. Link memungkinkan pengguna untuk mengklik jalan mereka dari halaman ke halaman.
HTML Link Deskripsi
hyperlink, atau hanya link, adalah referensi untuk data yang pembaca dapat langsung mengikuti baik dengan mengklik, menekan, atau melayang.
Sebuah hyperlink menunjuk ke sebuah dokumen keseluruhan atau untuk elemen tertentu dalam dokumen. Hypertext adalah teks dengan hyperlink. Teks yang terhubung dari disebut jangkar teks.
Sebuah sistem perangkat lunak yang digunakan untuk melihat dan menciptakan hypertext adalah sistem hypertext, dan untuk membuat hyperlink adalah hyperlink (atau hanya untuk link). Seorang pengguna hyperlink berikut dikatakan untuk menavigasi atau menelusuri hypertext.
Link HTML - Hyperlink
link HTML adalah hyperlink.
Sebuah hyperlink adalah teks atau gambar Anda bisa klik pada, dan melompat ke dokumen lain.
Link HTML - Sintaks
Dalam HTML, link yang didefinisikan dengan <a> tag:
<a href=" url "> link text </a>
Contoh
<a href="http://www.w3ii.com/html/default.html">Visit our HTML tutorial</a>
Cobalah sendiri " The href atribut menentukan alamat tujuan (http://www.w3ii.com/html/default.html)
Teks link adalah bagian yang terlihat (Visit our HTML tutorial) .
Mengklik pada link teks, akan mengirimkan ke alamat yang ditentukan.
Teks link tidak harus berupa teks. Hal ini dapat gambar HTML atau elemen lain HTML.
Tanpa slash tertinggal pada alamat subfolder, Anda mungkin akan menghasilkan dua permintaan ke server. Banyak server secara otomatis akan menambahkan slash trailing untuk alamat, dan kemudian membuat permintaan baru.
Link lokal
Contoh di atas digunakan URL absolut (A full web address) .
Sebuah link lokal (link to the same web site) ditentukan dengan URL relatif (without http://www.... ) .
Link HTML - Warna
Bila Anda memindahkan mouse di atas link, dua hal yang biasanya akan terjadi:
- Panah mouse akan berubah menjadi tangan kecil
- Warna elemen link akan berubah
Secara default, link akan muncul seperti ini (in all browsers) :
- Link yang belum dikunjungi adalah digarisbawahi dan biru
- Sebuah link dikunjungi adalah digarisbawahi dan ungu
- Link aktif adalah digarisbawahi dan merah
Anda dapat mengubah warna default, dengan menggunakan gaya:
Contoh
<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>
Cobalah sendiri " Link HTML - The target Atribut
The target Atribut menentukan di mana untuk membuka dokumen terkait.
Contoh ini akan membuka dokumen terkait dalam jendela browser baru atau tab baru:
Target Nilai | Deskripsi |
---|---|
_blank | Membuka dokumen terkait di jendela baru atau tab |
_self | Membuka dokumen terkait dalam frame yang sama seperti yang diklik (this is default) |
_parent | Membuka dokumen terkait dalam kerangka induk |
_top | Membuka dokumen terkait dalam tubuh penuh jendela |
framename | Membuka dokumen terkait dalam bingkai bernama |
Jika halaman web Anda terkunci dalam bingkai, Anda dapat menggunakan target="_top" untuk keluar dari frame:
Contoh
<a href="http://www.w3ii.com/html/default.html" target="_top">HTML5 tutorial!</a>
Cobalah sendiri " HTML Link - Gambar sebagai Link
Hal ini umum untuk menggunakan gambar sebagai link:
Contoh
<a href="default.html">
<img src="smiley.gif" alt="HTML tutorial" style="width:42px;height:42px;border:0">
</a>
Cobalah sendiri " border: 0 ditambahkan untuk mencegah IE9 (and earlier) dari menampilkan perbatasan di sekitar gambar.
Link HTML - Membuat Bookmark
bookmark HTML digunakan untuk memungkinkan pembaca untuk melompat ke bagian tertentu dari halaman Web.
Bookmark praktis jika website Anda memiliki halaman.
Untuk membuat bookmark, Anda harus terlebih dahulu membuat bookmark, dan kemudian menambahkan link untuk itu.
Ketika link diklik, halaman akan gulir ke lokasi dengan penunjuk tersebut.
Contoh
Pertama, buat bookmark dengan id atribut:
<h2 id="tips">Useful Tips Section</h2>
Kemudian, menambahkan link ke bookmark ("Useful Tips Section") , dari dalam halaman yang sama:
<a href="#tips">Visit the Useful Tips Section</a>
Atau, menambahkan link ke bookmark ("Useful Tips Section") , dari halaman lain:
Bab Ringkasan
- Gunakan HTML <a> elemen untuk mendefinisikan link
- Gunakan HTML href atribut untuk menentukan alamat link
- Gunakan HTML target atribut untuk menentukan di mana untuk membuka dokumen terkait
- Gunakan HTML <img> elemen (inside <a> ) untuk menggunakan gambar sebagai link
- Gunakan HTML id atribut ( id=" value ") untuk menentukan bookmark di halaman
- Gunakan HTML href atribut ( href="# value ") untuk menghubungkan ke bookmark
Uji Diri dengan Latihan!
Latihan 1 » Latihan 2» Latihan 3 » Latihan 4» Latihan 5 »
HTML Tautan Tags
Menandai | Deskripsi |
---|---|
<a> | Mendefinisikan hyperlink |