Tautan HTML

HTML menggunakan tautan untuk terhubung dengan dokumen lain di jaringan.

Tautan dapat ditemukan hampir di semua halaman web. Klik tautan untuk melompat ke halaman lain.

Contoh

Buat Tautan Super
Contoh ini menunjukkan bagaimana membuat tautan di dokumen HTML.
Gunakan gambar sebagai tautan
Contoh ini menunjukkan bagaimana menggunakan gambar sebagai tautan.

(Lebih banyak contoh dapat ditemukan di bawah halaman ini.)

Tautan Super HTML (tautan)

Tautan dapat berupa karakter, kata, atau kelompok kata, atau juga gambar, Anda dapat mengklik konten ini untuk melompat ke dokumen baru atau bagian yang spesifik di dokumen saat ini.

Ketika kursor mouse Anda bergerak ke atas tautan di halaman web, panah akan berubah menjadi tangan kecil.

Kami menggunakan tag <a> untuk membuat tautan di HTML.

Ada dua cara untuk menggunakan tag <a>:

  1. Membuat tautan ke dokumen lain - Menggunakan atribut href
  2. Membuat tanda buku di dalam dokumen - Menggunakan atribut name

Baca lebih lanjut:Apa itu teks hiperteks?

Syarat Tautan HTML

Kode HTML tautan sangat sederhana. Itu seperti ini:

<a href="url">Teks tautan</a>

Atribut href menentukan tujuan tautan.

Teks di antara tag awal dan akhir digunakan sebagai tautan untuk ditampilkan.

Contoh

<a href="http://www.codew3c.com/">Kunjungi CodeW3C.com</a>

Baris kode di atas akan ditampilkan seperti ini:Kunjungi CodeW3C.com

Klik tautan ini akan membawa pengguna ke halaman utama CodeW3C.com.

Petunjuk:"Teks tautan" tidak harus selalu teks. Gambar atau elemen HTML lainnya juga dapat menjadi tautan.

HTML Tautan - Atribut target

Dengan menggunakan atribut Target, Anda dapat menentukan dimana dokumen yang dihubungkan akan ditampilkan.

Baris ini akan membuka dokumen di jendela baru:

<a href="http://www.codew3c.com/" target="_blank">Kunjungi CodeW3C.com!</a>

Coba sendiri

HTML Tautan - Atribut name

Atribut name menentukan nama referensi (anchor).

Anda dapat membuat tanda buku di dalam halaman HTML menggunakan atribut name.

Tanda buku tidak akan ditampilkan dengan cara khusus, dan untuk pembaca ia tak terlihat.

Ketika menggunakan referensi yang dinamai (named anchors), kami dapat membuat tautan yang langsung ke referensi yang dinamai (seperti sub-bab di halaman), sehingga pengguna tidak perlu menggulir halaman berulang-ulang untuk mencari informasi yang mereka butuhkan.

Syarat penamaan referensi:

<a name="label">Referensi (teks yang ditampilkan di halaman)</a>

Petunjuk:Nama referensi dapat berupa apa pun yang Anda sukai.

Petunjuk:Anda dapat menggunakan atribut id untuk menggantikan atribut name, penamaan referensi tetap berlaku.

Contoh

Pertama, kami menamai referensi di dalam dokumen HTML (membuat tanda buku):

<a name="tips">Perhatian dasar - Tips yang berharga</a>

Lalu, kami membuat tautan ke referensi ini di dalam dokumen yang sama:

<a href="#tips">Tips yang berharga</a>

Anda juga dapat membuat tautan ke referensi ini di halaman lain:

<a href="http://www.codew3c.com/html/html_links.asp#tips"">Petunjuk yang bermanfaat</a>

Dalam kode di atas, kita menambahkan tanda # dan nama penanda ke akhir URL, sehingga dapat langsung menghubungkan ke penanda yang dinamai 'tips'.

Efek khusus:Petunjuk yang bermanfaat

Perhatian dasar - Petunjuk yang bermanfaat:

Komentar:Silakan selalu menambahkan garis miring ke belakang ke direktori anak. Jika menulis tautan seperti ini: href="http://www.codew3c.com/html". maka akan menghasilkan dua permintaan HTTP ke server. Ini karena server akan menambahkan garis miring ke belakang ke alamat ini, lalu membuat permintaan baru seperti ini: href="http://www.codew3c.com/html/".

Petunjuk:Penanda yang dinamai sering digunakan untuk membuat daftar pustaka di awal dokumen yang besar. Bisa memberikan penanda untuk setiap bab, lalu menempatkan tautan ke penanda ini di atas dokumen. Jika sering mengakses Wikipedia, Anda akan menemukan hampir setiap entri menggunakan cara navigasi seperti ini.

Petunjuk:Jika peramban tidak dapat menemukan penanda yang telah ditentukan, maka akan menempatkan ke puncak dokumen. Tidak akan ada kesalahan yang terjadi.

Beberapa Contoh Lain

Buka tautan di jendela browser baru
Buka tautan di jendela browser baru, sehingga pengunjung tidak perlu meninggalkan situs Anda.
Menghubungkan ke lokasi yang berbeda di halaman yang sama
Contoh ini menunjukkan bagaimana menggunakan tautan untuk melompat ke bagian lain dokumen.
Keluar dari Kerangka
Contoh ini menunjukkan bagaimana keluar dari kerangka, jika halaman Anda disesuaikan di dalam kerangka.
Buat Tautan Email
Contoh ini menunjukkan bagaimana menghubungkan ke email (contoh ini akan berfungsi setelah program klien email diinstal.).
Buat Tautan Email 2
Contoh ini menunjukkan tautan email yang lebih kompleks.

Tanda Tautan HTML

Tanda Deskripsi
<a> Definisi penanda.