Cara Membuat Link dgn Kode HTML

Posted on April 1, 2008 by Syahuri

Sudah beberapa orang dan beberapa kali temen-temen saya nanya ke saya tentang cara membuat link. Yaitu teks/gambar yang ketika di klik, akan membawa si ‘tukang klik’ menuju ke alam baka…..eh..salah…menuju ke suatu alamat web tertentu!). Seperti misalnya, saya sering nyelipkan gambar di testimonial profile temen, saat gambar itu di klik, browser langsung mengarahkan user ke alamat tertentu.
Padahal saya masih pemula dalam hal begituan. Belajarnya pun tidak secara akademis seperti di sekolah, kampus ato di tempat less, melainkan belajar
cilet-cilet di http://www.w3schools.com. Repot juga sih jelasin ke temen beberapa kali, apalagi ada temen
yang nanya via sms dan saya sedang offline, wah…terpaka deh nih jempol nari-nari ngetik script html. So, saya posting aja di sini, ntar kalo ada yang nanya lagi, saya kasih url postingan ini aja, lebih praktis, InsyaAllah. Sekalian, untuk mengikat ilmu saya tentang HTML. Jadi, mohon maaf bila postingan saya tentang tutorial html agak kacau dan tidak teratur. Maklum, masih pemula nih.
Ini saya kasih contoh dulu, gambar yang udah saya ‘jampi-jampi’ menjadi link menuju blog saya.
Sedangkan contoh teks linknya adalah:
Blog Syahuri
Oke, ayo kita mulai proses pembuatannya!

Untuk membuat link pada gambar

• Sediakanlah gambar. Bisa berbentuk jpg, gif, png, dsb. Kemudian upload ke hostingan pribadi sobat. Bisa di photo bucket, image shack, atau google pages. Saya anggap sobat sudah mempunyai hostingan sendiri. Kalo belum, segeralah mendaftar di salah satu media penyimpanan file online itu. Uploadlah file gambar yang ingin sobat jadikan link nantinya. Catat alamat/url gambar itu! Misalnya, gambar saya dengan file name vista_inspirat.jpg sudah saya upload ke googlepages dengan alamat http://syahur.ashshiddiq.googlepages.com/vista_inspirat.jpg.
• Buka aplikasi teks editor sobat. Misalnya Notepad yang ada pada XP. Start-All Programs-Accesories-Nodepad. Kalo gak nemu, klik aja Start-Run-ketik NOTEPAD-Tekan Enter InsyaAllah!
• Ketik atau copy-paste kode berikut ini di notepad:
  

  
  href="http://www.test-coba.com/" target="_blank" title="test coba">

• Simpan dengan bentuk file *.htm. Misalnya gambarku.htm.
• Eksekusi aja file htm yang baru kita buat tadi, bisa dengan Mozilla Firefox, Internet Explorer, atau browser apa aja lah…Praktisnya, double klik aja file itu. Maka insyaAllah hasilnya akan seperti ini:

Keterangan:

• href | adalah url/link tujuan. Silakan ubah sesuai dengan url/alamat web yang hendak Anda tuju!
• target=”_blank” | artinya, jika gambar di klik, halaman yang akan terbuka tidak akan menimpa halaman yang sedang terbuka saat ini, tapi akan mengarah ke tab baru (new tab/new windows).
• title=”judul” | saat mouse (cursor) menyorot/fokus pada gambar, akan keluar keterangan singkat yang Anda isi pada tag title ini.
• alt=”alt text” | teks alternatif bila gambar yang dimaksud belum/tidak muncul
• border=”0″ | bila tidak menggunakan tag ini, pada gambar akan muncul garis pinggir (border)

Adapun untuk membuat teks link, tidak lebih sulit daripada membuat gambar sebagai link.
Caranya:


• Buka notepad
• Ketik kode berikut sebagai percobaan:
  

  TEKS YANG DITAMPILKAN

  Dengan script seperti itu, tulisan TEKS YANG DITAMPILKAN akan membawa user ke http://www.ashshiddiq.blogspot.com.com saat TEKS YANG DITAMPILKAN di klik. Misalnya:
  

  TEKS YANG DITAMPILKAN

Selesai!