Membuat Link pada HTML

Bagaimana caranya membuat link pada html ?. Saat anda membuka sebuah halaman website, pastilah ketika anda mengklik menu/tulisan apapun, maka anda akan menuju ke halaman lain. Misalnya dari halaman Beranda, lalu anda mengklik menu Produk, secara otomatis terbuka halaman baru, Halaman Produk. Hal ini disebut dengan nama Link / Hyperlink, atau dalam bahasa Indonesia disebut sebagai Hubungan, dimana halaman Beranda dan Produk saling berhubungan.

Teks yang digunakan sebagai media Link ini disebut Hypertext, namun anda juga dapat membuat gambar sebagai Link. Perhatikan gambar berikut.

membuat link pada html

Pada gambar di atas, apabila teks yang dilingkari merah pada halaman 1 di klik, maka akan menuju ke halaman 2. Seperti itulah proses Link, cara penggunaannya adalah sebagai berikut :

  1. Gunakan tag <a>, dan apit objek (teks/gambar) yang kalian ingin jadikan sebagai tautan. Tag <a> ini adalah singkatan dari Anchor / Tautan / Labuh.
  2. Atribut yang umum digunakan adalah atribut href, singkatan dari Hypertext Reference. Atribut ini mendefinisikan Link address yang menjadi tujuan.
  3. Secara default, Link ini akan :
    • Berwarna biru dan bergaris bawah untuk link yang belum dikunjungi. Contoh.
    • Berwarna ungu terhadap link yang sudah pernah di kunjungi. Contoh.
    • Berwarna merah terhadap link yang aktif, yakni saat ditekan. Contoh.

Pembuatan Link

Untuk membuat sebuah Link, tag yang digunakan adalah tag <a>…letakan objek disini…</a>. Lalu gunakan atribut href  untuk mendefinisikan halaman yang akan dituju.

Output :

link unvisited

Pada contoh di atas, apabila teks tersebut di klik akan menuju ke Google.com. Berikut saya berikan contoh apabila kalian menuju ke halaman yang berada pada 1 folder atau di luar folder dari file links saat ini yang anda buat.

Catatan : Apabila URL yang dimasukan merupakan link eksternal, tulis URL-nya seperti ini…

Apabila kalian tulis www.google.com, hypertext itu tidak akan bekerja, karena dianggap URL internal.

Menjadikan Gambar sebagai Link

Tidak hanya Teks, kalian pun dapat menggunakan gambar sebagai link.

Dan di bawah ini adalah hasil dari kode sumber di atas :

membuat gambar memiliki link

Apabila gambar di atas di klik, akan menuju ke situs WordPress.com

Membuat Link Email

Kalian juga dapat membuat Link yang dapat menuju ke sebuah akun Email, namun mengutip Tutorialspoint.com bila menggunakan cara ini akan menjadi penyebab akun email anda terkena spamming/penyampahan. Anda dapat menggunakan cara lain untuk membuat orang lain dapat mengirim email kepada anda, yakni dengan script PHP dan script bahasa pemrograman web lainnya.

Untuk mengaplikasikannya anda hanya tinggal menambahkan nilai atribut mailto: pada atribut href.

Ketika anda mengklik teks dari hasil kode sumber di atas, akan memunculkan aplikasi Email Client seperti Microsoft Outlook contohnya. Apabila pengguna tidak menginstall aplikasi Email Client pada komputernya maka dia tidak dapat mengirim email tersebut.

Membuat Link Bookmarks

Anda juga dapat membuat bookmark pada halaman website dengan meggunakan konsep Links ini.

Pertama – tama, buat dulu objek yang akan dijadikan hyperlink. Kemudian pada atribut href, gunakan tanda id / tanda pagar “#”. Karena tanda inilah yang akan menjadi pemicunya.

Selanjutnya panggil dengan atribut id…

Kurang lebihnya adalah seperti di bawah ini…….

Output….

membuat link bookmark

Andaikan saya mengklik Bab 3 PHP  maka akan menuju ke Bab 3 PHP

Atribut – atribut Target

Terdapat beberapa cara dalam membuka halaman website yang dituju pada konsep Link ini, entah akan membukanya pada jendela baru atau pada halaman yang saat ini digunakan.

Nama Nilai Atribut Keterangan
_blank Membuka halaman pada jendela baru
_self Membuka halaman pada jendela yang sama, secara default semua link akan bernilai ini
_parent Membuka halaman mengikuti jendela parent-nya
_top Membuka halaman juga pada jendela yang sama

Kode Sumber

Silahkan praktekan untuk melihat hasilnya.

Mendesain Hyperlink dengan CSS

Anda juga dapat mendesain Teks maupun Gambar yang dijadikan hyperlink ini dengan CSS sesuai keinginan kalian.

Kode Sumber…

Secara Default Hyperlink akan berwarna biru muda.

visited link

Lalu ketika mouse diarahkan ke teks akan berwarna merah jambu bergaris bawah :

hover link

dan ketika aktif (selang waktu ketika teks di tekan) akan berwarna hijau bergaris bawah,

active link

dan untuk teks yang sudah dikunjungi berwarna abu2…visited link

Leave a comment

Your email address will not be published. Required fields are marked *

X