Dalam
HTML, link dibedakan menjadi 3 jenis, yaitu :
1.
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>
2. 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>
Menjadikan
Gambar sebagai LinkSelain link
berupa teks, gambar juga dapat dijadikan sebagai link. Konsepnya sebenarnya sama saja dengan
link berupa teks, perbedaannya hanya perlu mengganti teks yang dijadikan sebagai link
dengan tag <img>.Link yang berupa
teks:<a
href=”dokumenlain”>teks link</a>
Link yang berupa
gambar:
<a href=”dokumenlain”><img
src=”NamaFileGambar” /></a>
Contoh :
<a
href=”detail-sahara.html”>
<img
src=”images/jeep/saharal.jpg” />
</a>
Pada contoh di
atas kita menjadikan gambar sahara1.jpg yang tersimpan di dalam direktori
images\jeep
sebagai link untuk menuju ke dokumen detail-sahara.html.
3. Link kebagian
ke document tertentu
Link dapat
berperan untuk mengarahkan ke bagian teks atau gambar tertentu yang masih
berada dalam
satu dokumen yang sama. Link seperti ini biasanya pada halaman web yang
memiliki informasi
yang panjang atau pada dokumen yang memiliki daftar isi di bagian
atasnya.
Tujuannya adalah agar para pengunjung tidak perlu melakukan scrolling pada
halaman tersebut
untuk menuju/kembali tertentu dalam dokumen bersangkutan.
Sapat juga
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>
<a
href="#heading2">Link ke heading 2</a>
<h1
id="heading1">heading 1</h1>
<h1
id="heading2">heading 2</h1>
</body>
</html>
Link ke bagian
dokumen tertentu dapat di bedakan lagi menjadi dua jenis, yaitu :
A. 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.
B. 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>
C. 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)
1. 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
mencata 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 .
2. 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 seperticontoh
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">
Tidak ada komentar:
Posting Komentar