Translate

Jan 3, 2013

Link HTML

Pernah melihat teks dalam sebuah halaman web dimana ketika diklik akan membawa kehalaman lain atau alamat situs berbeda?

Nah, Teks tersebut dinamakan hypertext link atau hyperlink. Link berfungsi sebagai penghubung antara satu dokumen dengan dokumen lainnya dalam web. Biasanya browser akan membedakan link dengan teks biasa menurut warna ataupun garis bawah ketika kursor menyorot link tersebut.

Contohnya seperti ini

Menurut jenisnya, link dibagi menjadi 3, yaitu:

  • link relatif
  • link absolut
  • link dalam dokumen yang sama
Link Relatif
Link relatif digunakan jika ingin menghubungkan dua dokumen pada satu komputer yang sama. Tidak perlu alamat internet yang lengkap jika membuat link relatif ini. Anda hanya perlu menuliskan nama file html, asalkan kedua file html tersebut terletak pada direktori yang sama. Contoh skripnya sebagai berikut:

<a href="file.html">klik disini</a>

Link Absolut
berbeda dengan link relatif, untuk membuat link absolut anda harus menuliskan alamat web lengkap dengan http:// nya, karena link ini digunakan untuk menghubungkan halaman yang berada pada website lain di internet. Contoh skripnya:
<a href="http://www.google.co.id">link</a>

Link dalam dokumen yang sama.
Link ini dimaksudkan untuk menghubungkan bagian dalam suatu dokumen. Misalnya dokumen yang sangat panjang hingga mengharuskan penggunanya menggulung layar berkali-kali. Nah, link ini memudahkan dalam navigasi antar judul, karena link ini akan menuju bagian tertentu yang telah diberi nama dalam dokumen yang sama. misalnya seperti ini, coba klik disini untuk menuju judul link relatif . Nah, pasti halaman akan langsung scroll atau menggulung ke teks yang dituju, yaitu judul link relatif tsb. Untuk membuatnya, terlebih dahulu anda harus memberi nama pada judul atau teks yang akan dijadikan target.Mara memberi namanya cukup mudah, tinggal sisipkan tag <a name="namabagian">....</a> ke bagian dokumen tsb. Lalu buatlah link target dengan nama bagian yang tadi telah dibuat. Jangan lupa tambahkan tanda # (pagar) sebelum link targetnya, yang menandakan target ada dalam dokumen yang sama. Contoh linknya:
<a href="#namabagian">link</a>

Variasi link

Membuka link pada tab baru
jika anda mengarahkan pengunjung dari website anda ke alamat lain, akan lebih baik jika anda membuat linknya membuka di jendela baru, agar pengunjung anda tidak akan meninggalkan halaman asal. Contohnya klik disini. Untuk membuatnya, anda hanya harus menyisipkan target="_blank"pada linknya. Contoh skripnya:
<a href="http://jurusan-multimedia.blogspot.com" target="_blank">klik disini</a>

Link Hover
link ini cocok untuk link adsense atau periklanan karena pengunjung tidak akan sadar kalau telah membuka sebuah link. Link tsb akan membuka jika kursor berada diatasnya. Untuk membuatnya, anda tinggal menambah kan skrip onMouseover="window.location=this.href" pada link yang anda buat.

<a href="http://jurusan-multimedia.blogspot.com" onMouseover="window.location=this.href">klik disini</a>

Untuk demonya silahkan letakan kursor anda diatas link dibawah ini:
ini adalah link ini adalah link ini adalah link ini adalah lin kini adalah link

Keluar dari suatu frame
Sama seperti variasi-variasi sebelumnya, yaitu anda hanya tinggal menambahkan beberapa teks ke kode linknya. Pada variasi keluar dari frame ini anda tinggal menyisipkan  target="_top" ke tag dari linknya.
<a href="http://jurusan-multimedia.blogspot.com" onMouseover="window.location=this.href">klik disini</a>
Demonya bisa anda lihat link dibawah:

Ini adalah link

Tanpa garis bawah
tambahkan style="text-decoration:none" pada link yang bersangkutan. contoh skripnya:
<a href="http://jurusan-multimedia.blogspot.com" style="text-decoration:none">klik disini</a>
Demo, silahkan lihat link dibawah:
klik disini

1 komentar: