Hyperlink dalam Html
Anatomi hyperlink
Salah satu
kelebihan dokumen HTML adalah memiliki kemampuan untuk saling terkait dengan
dokumen lain. Link (sebutan singkat dari hyperlink text) adalah suatu metode
yang digunakan dalam HTML untuk membuat hubungan antar halaman yang terdapat
dalam satu situs web. Semua halaman web yang ada di internet hampir bisa
dipastikan memiliki link. Secara umum, fungsi link adalah untuk memudahkan
pengunjung web dalam menulusuri/menjelajahi seluruh isi atau informasi yang
tersimpan dalam situs web bersangkutan.
Dalam keadaan default (normal), suatu link
akan ditandari dengan teks berwarna biru yang memiliki garis bawah. Meskipun
demikian, kita dapat mengubah warna dan gaya link sesuai dengan kebutuhan dan
keinginan kita melalui pembuatan kode CSS.jika kita mengarahkan kursor ke suatu
link tertentu, maka penunjuk mouse akan berubah menjadi gambar tangan dengan
satu jari yang sedang menunjuk, seperti yang ditunjukkan oleh gambar di bawah
ini.
Konsep atau cara kerja link dalam HTML
dapat diilustrasikan melalui gambar berikut :
Pada gambar diatas, masing-masing
halaman memiliki keterkaitan satu sama lain. Artinya, masing-masing halaman
tersebut dapat dipanggil atau ditampilkan dari halaman manapun. Hal ini bisa
terjadi jika setiap halaman di atas memiliki link.
Mengenal Tag
<a> (anchor)
Untuk membuat
suatu link, HTML menyediakan satu tag khusus, yaitu tag <a>, yang
berpasangan dengan </a>. Setiap teks yang diapit oleh tag ini akan
ditampilkan sebagai link. Bentuk umum pembuat link dalam dokumen HTML adalah
sebagai berikut :
Atribut HREF dalam tag <a>
berfungsi untuk menentukan dokumen atau halaman mana yang akan dipanggil saat
link tersebut di klik atau dipilih oleh pengunjung web.
Contoh :
<a
href=”index.html”>Home</a><br />
<a href=”about.html”>Tentang
Kami</a><br />
<a href=”contact.html”>Kontak</a>
Pada contoh diatas kita membuat tiga
buah link dengan teks : Home, Tentang kami, dan kontak. Ketika pengunjung
melakukan klik terhadap link pertama
<a
href="DokumenLain">Teks Link</a>
(home), web browser akan menampilkan dokumen
yang disimpan dalam file index.html. Begitu juga dengan link kedua (Tentang
Kami) dan ketiga (Kontak), setiap di klik akan menjadikan web browser
menampilkan dokumen yang terdapat pada file about.html dan contact.html.
Berikut ini ada beberapa hal yang perlu
diperhatikan dalam pemberian nama dokumen web, agar link dapat berfungsi dengan
baik :
·
Penamaan file dengan huruf kecil semua
·
Jangan ada spasi serta hindari non-karakter alphabet
Jenis-jenis Link dalam HTML
Dalam HTML, link dibedakan menjadi 3
jenis, yaitu :
·
Link absolut
·
Link relatif
·
Link ke bagian dokumen tertentu
HTML membedakan ketiga jenis link
diatas berdasarkan lokasi atau alamat dokumen yang akan diakses. Dengan
demikian, perbedaannya hanya terletak pada nilai atribut HREF-nya saja.
Link Absolut
Link Absolut
adalah link yang akan menunjuk ke halaman dari situs web lain. Penulisan
alamatnya pun harus ditulis secara lengkap. Sebagai contoh, jika tema atau isi
dari situs web yang kita buat adalah pemrograman HTML, maka kita dapat membuat
link ke situs web lain yang memiliki tema yang sama atau relevan. Tujuannya
adalah agar pengunjung bisa memperoleh informasi lebih tentang tema tersebut
yang ‘mungkin’ tidak/belum kita bahas pada situs web kita.
Contoh :
<a href=http://www.w3.org/>W3</a>
Pada contoh diatas, tujuan link yang dibuat akan mengarah ke situs web http://www.w3.org
Link Relatif
Link Relatif
adalah link yang tujuannya mengarah ke dokumen-dokumen lain yang masih berada
di dalam satu situs web yang sama (komputer yang sama). Penulisan alamat
tujuannya pun tidak perlu ditulis secara lengkap, cukup nama dokumennya saja,
dan nama direktorinya (jika ada).
Perhatikan contoh kode berikut :
<a
href=”kontak.html”>Kontak</a>
<a href=”images/jeep/sahara.jpg”>Lihat
Foto Jeep Wrangler Sahara</a>
Link ke Bagian Dokumen Tertentu
Untuk membuat
link internal dalam suatu halaman - misalnya daftar isi di atas dengan link ke
setiap bab . Yang perlu digunakan adalah atribut yang disebut id (identifikasi)
dan simbol “#”.
Gunakan atribut id untuk menandai
elemen yang ingin ditautkan/link. Sebagai contoh:
<h1
id="heading1">heading 1</h1>
Sekarang kita dapat membuat link ke
elemen dengan menggunakan ”#” di atribut link. Tanda “#” harus diikuti dengan
id dari tag yang ingin ditautkan/link. Sebagai contoh:
<a href="#heading1">
Menuju ke heading 1</a>
Berikut ini contoh bila ada beberapa
link internal
<html>
<head> </head>
<body>
<a
href="#heading1">Link ke heading 1</a>
Link ke bagian dokumen tertentu dapat di
bedakan lagi menjadi dua jenis, yaitu :
·
Link ke bagian tertentu dalam dokumen yang sama
·
Link ke bagian tertentu dalam dokumen lain
Link ke Bagian
Tertentu dalam Dokumen yang sama
Untuk membuat link semacam ini,
terlebih dahulu kita perlu memberikan id atau nama pada bagian teks atau gambar
tertentu sebagai bagian yang akan dituju. Pemberian id tersebut dilakukan
dengan cara menuliskan kode berikut :
<a id=”tujuanLink”>Teks atau
gambar</a>
Selanjutnya untuk membuat link yang
akan mengarah ke teks atau gambar yang telah di namai tersebut adalah dengan
menuliskan kode seperti berikut :
<a href=”#Tujuanlink”>Teks atau
gambar</a>
Tanda # di atas menunjukan bahwa tujuan
link adalah nama bagian, bukan berupa file.
Link ke Bagian
Tertentu Dalam Dokumen Lain
Selain bagian
yang berada dalam satu dokumen, link dapat juga mengarah ke sesuatu bagian
tertentu yang terdapat dalam dokumen lain. Untuk membuat link semacam ini,
bagian tertentu dalam dokumen lain tersebut harus di tantai dengan pemberian id
seperti pada sub-bab sebelumnya. Perbedaan hanya terletak pada penulisan tujuan
link-nya saja. Pada kasus seperti ini, kita perlu menambahkan id bagian pada
tujuan link, seperti berikut:
<a href=”namafile#idBagian”>Teks
atau gambar</a>
1) Menentukan Target Link
Target atau
tujuan yang dihubungkan melalui suatu link dapat ditentukan sendiri oleh kita.
Target yang di maksud di sini adalah dimana dokumen akan ditempatkan atau
ditampilkan. Dalam keadaan default (ketika atribut TARGET tidak di sertakan),
dokumen baru yang ditampilkan pada saat link dipilih akan menutup atau menimpa
dokumen lama (dokumen yang mengandung link bersangkutan). Untuk melakukan hal,
kita hanya perlu menambahkan atribut TARGET di dalam tag <a>, yang
memiliki bentuk umum penulisan seperti berikut:
<a href=”NamaDokumen”
target=”NamaTarget”>Teks/Gambar<a/>
NamaDokumen adalah namadokumen yang
akan di tampilkan jika link bersangkutan dipilih/diklik dan NamaTarget adalah
target atau tempat tujuan dari dokumen yang akan ditampilkan. NamaTarget bisa
bernilai _BLANK maupun nama frame (jika layar web kita bagi dengan menggunakan
frame)
2) Link Email
Selain
menghubungkan antara halaman dan antara bagian-bagian dari satu halaman, tag <a> memungkinkan kita untuk link ke
alamat email. Ini adalah cara paling sederhana untuk memungkinkan pengunjung
halaman web kita untuk "mengirim pesan" kepada kita. Dengan
memberikan link yang dapat diklik ke alamat email kita, maka mudah bagi
pengunjung untuk mengirim pesan dan
pengunjung tidak perlu mengetikkan alamat email. Cara penulisan link HTML ke alamat email
adalah seperti berikut :
<a
href="mailto:nama@yourdomain.com"> Kirim pesan email</a>
Kata-kata “Kirim pesan email” akan
muncul seperti link <a> lainnya .
Jika kita ingin orang melihat alamat
email kita yang sebenarnya ( sehingga mereka dapat mencatat atau mengirim pesan
menggunakan program email yang berbeda ), adalah seperti ini :
<a
href="mailto:nama@yourdomain.com">nama@yourdomain.com</a>
Dalam kebanyakan web browser, bila seseorang mengklik link tersebut , maka
terbuka sebuah jendela di mana dia dapat mengetik pesan email yang segera
dikirimkan kepada kita
Kita juga dapat memberikan beberapa
informasi tambahan di link sehingga subjek dan isi pesan juga langsung
tertulis. Yaitu dengan menambahkan variabel subject (perihal) dan body (isi
pesan). Pisahkan variabel dari alamat email dengan tanda tanya ( ? ) , Nilai
dari variabel dengan tanda sama dengan ( = ) , dan kemudian memisahkan
masing-masing variabel dan nilai pasangan dengan ampersand ( & ). Berikut
adalah contoh menentukan subjek dan body untuk contoh email sebelumnya :
<a href =
"mailto:author@somedomain.com?subject=Pertanyaan & body=Kapan edisi
berikutnya keluar ?"> Author@somedomain.com </a>
Ketika pengguna mengklik link ini ,
pesan email dibuat dengan author@somedomain.com sebagai penerima, “Pertanyaan”
sebagai subject/perihal , dan Kapan edisi berikutnya keluar ? sebagai isi pesan
.
3) Link
Telepon
Kita juga dapat
membuat link telepon di dokumen web kita. Hal ini karena banyak pengunjung web
menggunakan smartphone untuk mengakses website kita, sehingga dapat digunakan
untuk melakukan panggilan telepon ! Jadi kita dapat menuliskan nomor telepon,
sehingga pengunjung dapat langsung klik untuk menghubungi nomor telepon
terebut. Cara penulisannya adalah seperti contoh berikut :
<a
href="tel:0123456789">Hubungi kami di (012) 3456789 </a>
Ketika pengguna ponsel menekan link
tersebut, mereka mendapatkan kotak peringatan meminta mereka untuk mengkonfirmasi
bahwa mereka ingin melakukan panggilan
telepon ke nomor tersebut . Fitur ini didukung pada perangkat mobile yang
paling baru, termasuk iOS , Android , Blackberry , Symbian , Internet Explorer
, dan Opera Mini .
iPad dan iPod Touch tidak dapat membuat
panggilan , tetapi akan menawarkan untuk membuat kontak baru dari nomor
tersebut.
Sedangkan untuk pengguna desktop tidak
terjadi apa-apa untuk link tersebut. Ada beberapa cara terbaik untuk
menggunakan link telepon :
·
Dianjurkan agar memasukkan nomor lengkap panggilan internasional
, termasuk kode Negara, seperti +62 untuk Indonesia, karena tidak diketahui di
Negara mana pengguna akan mengakses web kita .
·
menuliskan nomor telepon ke dalam isi link sehingga jika
link tidak bekerja , nomor telepon masih terbaca .
·
Android dan iPhone memiliki fitur yang dapat mendeteksi
nomor telepon dan secara otomatis mengubah mereka menjadi link. Sayangnya ,
beberapa nomor 10 - digit yang bukan nomor telepon mungkin akan berubah menjadi
link juga. Jika dokumen kita memiliki string angka yang mungkin akan dideteksi
sebagai nomor telepon, kita dapat mengaktifkan auto - deteksi off dengan
memasukkan elemen meta berikut dalam kepala dokumen kita .
<meta
name="format-detection" content="telephone=no">
§ Untuk perangkat
Blackberry , menggunakan berikut:
<meta
http-equiv="x-rim-auto-match" content="none">
Untuk lebih
lanjutnya bila ada pertanyaan , anda dapat mengisi kolom kometar yang ada di
bawah nanti.Dan anda juga dapat memperoleh materi e-book Pemrograman Web di sini
Sekian
Terimakasih , Semoga Membantu Bagi yang Membutuhkan
Komentar
Posting Komentar