Konsep Hyperlink dalam HTML

 Di dalam situs web biasanya akan terlihat teks yang warnanya berbeda, bergaris bawah, atau berada dalam kotak (tombol). Inilah yang disebut hyperlink atau link. Jika bagian ini diklik, Anda akan dibawa ke halaman web lainnya. Anda akan mengetahui bahwa teks tersebut aktif (link) karena jika melewatkan pointer mouse di atasnya, pointer itu berubah menjadi pointing finger. Pranala atau hipertaut (Inggris: hyperlink) adalah sebuah acuan dalam dokumen hiperteks (hypertext) ke dokumen yang lain atau sumber lain, seperti halnya suatu kutipan di dalam literatur. Dikombinasikan dengan sebuah jaringan data dan sesuai dengan protokol akses, sebuah komputer dapat diminta untuk memperoleh sumber yang direferensikan.

A. Format Kaitan Pada Halaman Web

    Ada beberapa cara (format) untuk menampilkan pranala pada halaman web. Jika pengunjung website sedang mengeklik suatu kata atau gambar yang  mengandung hyperlink, ia akan diarahkan untuk menuju ke alamat URL yang  ada di dalam hyperlink tersebut. Sebuah embedded link (pranala yang tersimpan) adalah salah satu dari beberapa cara yang biasa digunakan dengan tipe/gaya teks khusus. Hyperlink adalah sebuah fungsi khusus untuk menghubungkan setiap masing-masing halaman website satu sama lainnya atau kc website yang lain.

l. Konsep Hyperlink dalam HTML 

    Link berguna untuk menghubungkan antardokumen HTML. Link merupakan singkatan dari hyperlink, yang identik dengan sebuah fungsi dalam HTML yang digunakan untuk memudahkan user untuk menelusuri seluruh isi atau informasi yang tersimpan dalam website bersangkutan. Dalam HTML, sebuah obj ek teks yang berupa link akan ditampilkan dengan font berwarna biru style underline (bergaris bawah). J ika pointer mouse ditujukan ke link tersebut, pointer mouse akan berubah menjadi telunjuk tangan. Selanjutnya, jika sebuah link sudah pernah diakses atau dikunjungi, warna dari teks/objek link tersebut akan berubah menjadi ungu.

a. Mengenal Jenis Link 

    Link dalam suatu objek dapat berupa teks atau gambar yang dipakai dalam kode HTML untuk menuju dari suatu bagian ke bagian yang lain pada halaman yang sama atau menuju ke halaman (tile) yang berbeda. Browser web akan menyorot (highlight) teks atau gambar yang didefinisikan sebagai link dengan warna dan garis bawah untuk  menunjukkan bahwa itu adalah hyperlink atau link.

1) Link Absolut 

    Link absolut adalah link yang mengarah langsung pada website tertentu, di mana sebuah dokumen dikunci pada alamat valid sebuah website dan tidak tergantung pada direktori lokasi dokumen html berada. Oleh sebab itu, alamat dapat digunakan pada website lain selama alamat tersebut masih valid. Perhatikan contoh berikut.

<a href="https://ngodingbarengg.blogspot.com/">belajar link</a>.

    Sebenarnya, sebuah link tidak harus ke halaman lain. Pada dasarnya, penggunaan atribut href dapat juga ditujukan pada ID sebuah tag. Oleh sebab itu, jika diklik akan menuju pada ID tersebut dan tidak ke halaman lain meskipun dapat mengarahkan ke halaman lain dengan atribut ID pada halaman tujuan dan secara otomatis browser akan mengarah ke bagian elemen pemilik ID. 

2) Link Relatif 

    Link relatif adalah link yang mengarah langsung pada lokasi path atau direktori tuj uan yang tersimpan pada web server atau komputer tanpa diawali dengan alamat domain website tersebut. Oleh sebab itu, pengunaannya sangat tergantung pada lokasi file berada. Apabila ingin mundur selangkah pada lokasi halaman sekarang ke halaman sebelumnya, Anda harus menggunakan “../” agar dapat pindah ke halaman pada direktori di atasnya atau ke halaman sebelumnya.

3) Sintaks Link 

    Sintaks link adalah <a href=”belajar.html”>belajar</a>. Link dapat dibuat pada suatu teks atau gambar dengan cara meletakkan teks atau gambar tersebut di antara tag pembuka < A HREF> dan tag penutup </A>.

2. Tag-Tag untuk Hyperlink

    Peran link dalam halaman web sangat besar dan selalu dibutuhkan untuk memudahkan pengguna web dalam berinteraksi dengan halaman-halaman web yang ada. Link dalam HTML ditandai dengan tag <A> (Anchor), yang terdiri atas atribut HREE yang digunakan untuk menuliskan lokasi tujuan (file) dari link dan variabel NAME yang digunakan untuk menyimpan nama variabel kunci sebagai lokasi (bagian) 'yang akan dituju“ oleh link. Links tag identik dengan sebuah tag pada html yang digunakan untuk menghubungkan dokumen satu dengan dokumen lainnya yang bersumber dari dalam (internal) maupun dari luar (external).

a. <a> 

<a> berfungsi dalam mendefmisikan sebuah hyperlink yang digunakan untuk menghubungkan halaman satu ke halaman lain. Tidak semua elemen yang ditulis antara tag <a> menjadi sebuah hyperlink. Pembuatan link dengan tag <a> ini bergantung pada atribut href. Jika sebuah teks atau gambar didefinisikan dengan menggunakan tag <a> dan tidak memiliki atribut href di dalamnya, elemen tersebut menunjukan sebuah placeholder. Berikut ini atribut-atribut yang digunakan pada <a>.

Atribut	Value	Deskripsi	Keterangan
charet	char_encoding	menentukan character set pada dokumen yang terhubung	optional
coord	coordinates	menentukan koordinat link	optional
download	filename	menentukan bahwa target akan di download ketika pengguna mengeklik hyperlink	optional
href	URL	menentukan url dari halaman yang akan dituju	wajib
target	_blank,_parent, _self,_top	menentukan dimana dokumen yang dituju akan dibuka	optional
name	section_name	menentukan nama anchor (tag <a>)	optional

b. <link> 

    <link> berfungsi untuk menghubungkan dokumen yang bersangkutan dengan sumber file yang berasal dari luar (external). Berikut ini atribut-atribut yang digunakan pada <link>.

Atribut	Value	Deskripsi	Keterangan
charet	char_encoding	menentukan pengodean karakter dari dokumen yang terhubung	optional
crossorigin	anonymous use-credentials	menentukan bagaimana sebuah elemen menangani permintaan cross-origin	optional
rel	alternative; author;icons; stylesheet; next; search	mentukan hubungan antara dokumenyang berjalan dan dokumen terkait	optional
href	URL	menentukan lokasi dokumen yang akan dihubungkan	wajib
target	_blank,_parent, _self,_top	menentukan dimana dokumen yang terhubung harus dimuat	optional
Sizes	Height x widht any	menetukan ukuran file yang terhubung (hanya untuk atribut rel yang bernilai "icon")	optional

c. Mailto

    Kadang-kadang, Anda ingin memudahkan pengguna untuk mengirimkan e-mail ke suatu alamat e-mail tertentu. Hal ini mudah dilakukan dengan tag hyperlink ini, yaitu dengan menambah “mailto” dan alamat e-mail tujuan.