Definisi hyperlink dilakukan dalam HTML melalui elemen a. Sebelum saya menunjukkan penggunaannya, beberapa petunjuk umum tentang hyperlink. Pertimbangkan teks hyperlink yang baik. Biasanya, hanya dengan kembali tidak akan membantu siapa pun. (Karena jika pengunjung datang dari halaman eksternal, mereka umumnya tidak tahu apa yang dimaksud dengan kembali). Cobalah untuk memilih teks hyperlink yang deskriptif.
Hyperlink selalu mengikuti prinsip yang sama dalam HTML.
<a href="videos.html">Video Aktual</a>
Pada elemen a ditetapkan atribut href. Kemudian, href membutuhkan tujuan hyperlink sebagai nilainya. Pada contoh sebelumnya, palingkup ke file videos.html. File ini berada di direktori yang sama dengan file HTML di mana hyperlink didefinisikan.
Dalam mendefinisikan hyperlink, berlaku aturan yang sama seperti dalam mengaitkan gambar.
Anda sebenarnya tidak hanya bisa mendefinisikan hyperlink internal proyek. Hyperlink juga dapat ditetapkan ke file dan domain eksternal.
<a href="http://www.psd-tutorials.de">PSD-Tutorials.de</a>
Teks yang berada di antara tag pembuka <a> dan penutup </a> adalah teks hyperlink. Secara default, teks ini akan ditampilkan dengan garis bawah oleh peramban.
Menentukan Jendela Tujuan
Ketika mengklik hyperlink, tujuan hyperlink akan dibuka dalam jendela peramban saat ini. Secara normal, ini sepenuhnya wajar. Namun, mungkin Anda telah menetapkan hyperlink ke domain eksternal misalnya. Jika seorang pengunjung mengklik tautan ini, tujuan hyperlink harus dibuka dalam jendela atau tab peramban baru. Keuntungan dari cara ini: Situs web Anda tetap terbuka di latar belakang.
Namun, Anda sebaiknya tidak membuka setiap hyperlink di situs Anda dalam jendela eksternal, karena pengunjung bisa menjadi cepat jengkel.
Melalui atribut target elemen a, Anda dapat menetapkan jendela tujuan di mana tujuan masing-masing hyperlink akan dibuka. HTML menyediakan tiga nilai standar untuk target secara default.
• _blank – Tujuan hyperlink akan ditampilkan dalam jendela peramban baru.
• _self – Membuka tujuan hyperlink dalam jendela peramban saat ini.
• _parent – Di sini Anda dapat keluar dari bingkai. (Harap perhatikan bahwa bingkai tidak didukung dalam HTML5. Sebaiknya Anda tidak lagi menggunakan teknik ini, karena saat ini ada alternatif yang lebih baik. Jika Anda ingin mempelajari lebih lanjut tentang bingkai, Anda akan menemukannya di halaman http://de.wikipedia.org/wiki/Frame_(HTML)).
• _top – Ini juga digunakan dalam konteks bingkai. Anda dapat membuka tujuan hyperlink di luar kerangka halaman.
Berikut adalah contoh penggunaan atribut target:
<a href="http://www.psd-tutorials.de" target="_blank">PSD-Tutorials.de</a>
Dalam kasus ini, tujuan hyperlink http://www.psd-tutorials.de akan dibuka dalam jendela/tab baru. Efek yang sama akan terjadi jika Anda menggunakan nama fantasi seperti halligalli sebagai gantinya untuk nama reservasi _blank. Namun, ketika Anda menggunakan target, sebaiknya menggunakan salah satu nama yang telah disediakan.
Menentukan Basis Hyperlink
Anda dapat menentukan basis hyperlink dalam bagian head file HTML. Basis hyperlink seperti itu akan membuat semua tujuan hyperlink ditampilkan dalam jendela peramban tertentu. Hal ini tentu sangat berguna terutama dalam kaitannya dengan bingkai.
_blank. Bayangkan daftar tautan. Jika tujuan tautan tersebut selalu ingin dibuka dalam jendela baru, maka akan terlihat seperti ini:
<a href="http://www.facebook.com/psdtutorials" target="_blank">http://www.facebook.com/psdtutorials</a> <br /> <a href="http://www.facebook.com/psdDarkArt" target="_blank">http://www.facebook.com/psdDarkArt</a> <br /> <a href="http://www.facebook.com/HowToNetzwerk" target="_blank">http://www.facebook.com/HowToNetzwerk</a>
Jadi, Anda harus menetapkan atribut target untuk setiap definisi a.
Ini tidak efisien, seperti yang Anda lihat. Bahkan lebih tidak efisien jika beberapa bulan kemudian Anda memutuskan untuk tidak membuka tujuan tautan dalam jendela baru. Maka Anda harus menyesuaikan atribut target dari semua tautan. Anda dapat mencegahnya dengan menggunakan basis jendela tujuan. Basis ini ditetapkan melalui elemen base di dalam head. Anda dapat menetapkan atribut target base dengan nilai yang diinginkan. Berikut adalah contoh bagaimana itu bisa terlihat:
<!DOCTYPE html> <html lang="de"> <head> <title>PSD-Tutorials.de</title> <meta charset="UTF-8" /> <base target="_blank"> </head> <body> <a href="http://www.facebook.com/psdtutorials">http://www.facebook.com/psdtutorials</a> <br /> <a href="http://www.facebook.com/psdDarkArt">http://www.facebook.com/psdDarkArt</a> <br /> <a href="http://www.facebook.com/HowToNetzwerk">http://www.facebook.com/HowToNetzwerk</a> </body> </html>
Ini akan menghemat banyak pekerjaan mengetik.
Definisi Anchor
Seperti yang telah Anda lihat, Anda dapat membuat hyperlink ke file lain. Namun, dalam sebuah file HTML, Anda juga dapat mendefinisikan apa yang disebut sebagai Anchor. Kemudian Anda dapat membuat referensi ke anchor tersebut. Ini sangat berguna misalnya untuk halaman yang panjang. Dengan cara ini, Anda dapat membuat daftar isi di bagian awal dokumen, yang memungkinkan pengunjung untuk langsung melompat ke bagian yang relevan bagi mereka, tanpa harus menggulir jendela browser.
Anchor dibuat dengan menggunakan elemen a. Namun, definisi anchor tidak diberikan atribut href, melainkan atribut name.
<a name="seitenanfang">Daftar Isi</a> <a name="kapitel1">Daftar Isi Bab 1</a> <p>Di sini terdapat banyak teks.</p> <a name="kapitel2">Daftar Isi Bab 2</a> <p>Di sini terdapat banyak teks.</p>
Anda dapat memberikan nama anchor sesuai keinginan. Namun, saya sangat menyarankan Anda untuk memilih nama yang singkat, menggunakan huruf kecil saja, dan menghindari penggunaan karakter khusus.
Untuk merujuk ke sebuah anchor, Anda mendefinisikan hyperlink biasa, seperti yang telah ditunjukkan pada awal tutorial ini.
<a href="#seitenanfang">Ke Bagian Atas</a>
Nilai atribut href akan diberikan nama anchor. Yang penting di sini adalah bahwa nama anchor harus dimulai dengan tanda pagar (#).
Anda juga dapat membuat referensi ke anchor di file yang berbeda. Dalam contoh berikut, diasumsikan bahwa ada file news.htm yang berada dalam direktori yang sama dengan file HTML utama. Di dalam news.htm, anchor seitenanfang telah didefinisikan. Untuk merujuk ke sana, tambahkan tanda pagar setelah nama file tujuan (news.htm). Kemudian ikuti dengan nama anchor.
<a href="news.htm#seitenanfang">Ke Bagian Atas</a>
Dengan cara ini, Anda dapat dengan mudah membuat referensi ke anchor dalam berkas apa pun.
