Keberadaan Hyperlink sangatlah penting di dalam halaman HTML karena fungsi dari hyperlink ini yang nanti akan menghubungkan halaman-halaman yang ada pada website anda antara satu halaman dengan halaman lain. Untuk membuat Hyperlink tag yang diperlukan adalah anchor atau kepanjangan dari <a> . Setiap tag <a> pasti memiliki atribut href yang berfungsi sebagai sebagai tempat informasi alamat yang akan dituju. Dalam penulisan hiperlink terdapat dua cara yaitu absolut dan relatif. Penulisan alamat Absolut adalah penulisan alamat yang lengkap sedangkan Relatif penulisan alamatnya singkat saja. Berikut penjelasannya,
1. Link Relatif
Membuat Link dalam halaman satu ke halaman yang lain dalam satu folder. Link Relatif sangat tergantung pada lokasi penyimpanan file. Contoh :Buatlah Folder di Drive D dengan Nama Coba Kemudian Buka Aplikasi Notepad Kemudian Ketikan :
Anda ingin menuju <a href=“halaman2.html”>ke Halaman 2</a>Setelah selesai simpan pada folder coba yang sudah anda buat dengan nama halaman1.html
Catatan : anda tentunya sudah menyiapkan halaman yang akan dituju yang filenya sudah anda beri nama halaman2.html pada folder coba tersebut.
2. Link Absolut
Membuat link dari situs website ke situs website lainya. Link Absolut tidak terhubung dengan lokasi file dimana dia berada. Link ini akan mengunci lokasi tujuan pada URL tertentu. Oleh karena itu link ini bebas dipakai dan ditempatkan di halaman manapun asal merujuk ke halaman yang valid. Sebagai contoh anda ingin menuju ke alamat blog auradesignweb.com maka linknya seperti berikut ini:<a href=http://www.auradesignweb.com>Blog Tutorial Design Web</a>
Jadi Perbedaan antara link absolut dengan link relatif terletak pada lengkap atau tidaknya hiperlink tersebut link absolut selalu menyertakan nama domain website "http://www/" , Sedangkan link relatif hanya arahkan ke file atau path file yang berada di folder yang sama. Hyperlink juga bisa diletakkan dalam gambar. Caranya sama persis seperti meletakan hyperlink pada tulisan hanya saja tag <a> dan </a> menjepit tag gambar <img>. Sekarang perhatikan kode di bawah ini.
<a href="http://auradesignweb.com"><img src="gambar.jpg"></a>Kode diatas adalah contoh hyperlink dimana ketika gambar di klik maka website auradesignweb.com akan terbuka. Catatan anda harus mempunyai file gambar pada folder tersebut yang anda beri nama gambar.jpg Selain itu anda juga dapat menambahkan atribut title dan target pada link yang dibuat. Title sebagai keterangan jika link anda tunjuk sedangkan target akan membuka tab baru atau halaman baru untuk tujuan link anda.
Lihat contoh:
<a href="http://auradesignweb.com" title=”Tutorial Design Web” target="_blank">Cara Design Web</a>
Apabila anda menginginkan halaman baru dibuka di jendela yang lain maka gunakan target=”_blank” sedangkan apabila kalian menginginkan halaman yang dibuka pada halaman itu juga maka hilangkan atribut target maka ia secara default akan membuka pada halaman itu sendiri. Untuk lebih jelasnya contoh penggunaan tag <a> silahkan coba latihan dibawah ini.
!DOCTYPE html> <html> <head> <title>Penggunaan Hiperlink </title> </head> <body> <h1>Belajar Tag Link</h1> <p>Ini adalah halaman website saya, yang isinya seputar tentang <a href="http://auradesignweb.com" title=”Tutorial Design Web” target="_blank">Tutorial Design Web</a> semoga banyak manfaatnya bagi sahabat aura</p> </body> </html>
Tags:
Tips