Cara Membuat Hyperlink di HTML

membuat link di html

Assalamu’alaikum sobat Belajar Koding, kali ini kita akan membahas bagaimana cara membuat hyperlink di html. Sebelum nya kita sudah membahas tentang cara memasukkan gambar atau image di html.

Pasti anda sering menjumpai link dalam sebuah website. Link akan membuat konten atau element HTML dapat di klik kemudian diarahkan ke halaman web lain nya. Biasa nya suatu link ditampilkan bewarna biru dan bergaris bawah.

Ada beberapa jenis link di html, saya kelompokkan menjadi 2 jenis :

  1. Link Standar
  2. Link Email

Link Standar

Link di dalam HTML menggunakan tag <a> kemudian didalam tag tersebut kita berikan atribut href lalu kita masukkan nilai atribut nya sesuai kebutuhan kita nanti. Kurang lebih contoh nya seperti ini :

Atribut href disitu berguna untuk menentukan kemana kita setelah mengklik teks yang ada didalam tag <a></a>. Disitu saya contoh kan ketika kita klik teks “Belajar Koding” nanti akan langsung menuju ke website belajar-koding.com (jika anda punya koneksi internet).

Sekarang kita buat contoh kodingan yang lebih lengkap supaya anda bisa lebih mengerti dan langsung mempraktekkan nya.

Buat 1 folder terserah apa aja nama nya, kemudian buat 1 file nama nya main.html lalu buka dengan editor kalian. Kemudian ketik kodingan berikut :

Output dari kodingan diatas :

cara membuat link di html

Ketika kita klik “Profile Saya” akan nampak seperti ini :

cara membuat hyperlink di html

Kenapa ? karena kita mengarahkan nya ke halaman “profile.html” dan halaman tersebut tidak bisa ditemukan karena memang kita belum membuat halaman tersebut., fokus ke kodingan yang ini :

Nilai dari atribut href adalah profile.html yang artinya adalah ketika kita klik teks Profile Saya maka seharus nya kita akan diarahkan ke dalam halaman profile. Nah sekarang kita buat 1 file html lagi nama nya profile.html yang letak nya satu direktori dengan main.html kemudian tuliskan kodingan berikut didalam file profile.html :

Setelah kita buat halaman profile nya, kita buka lagi halaman index yang tadi kemudian kita klik link “Profile Saya” yang sebelum nya tidak ditemukan.

Hasil nya akan pindah ke halaman profile seperti berikut :

cara membuat hyperlink di html

Jika kita klik “Kembali ke halaman index” maka kita akan diarahkan kembali ke halaman index. Lalu bagaimana jika kita ingin misalkan ketika di klik halaman profile, halaman tersebut tampil nya di tab baru ?

Membuat Hyperlink Dengan Tab Baru atau New Tab

Buka kembali file main.html kemudian kita tambahkan atribut target untuk menentukan link nya di buka di tab baru atau tidak.

Berikut kodingan nya :

Buka file main.html nya lagi dengan menggunakan browser anda kemudian klik link “Profile Saya” lalu lihat perbedaan nya. Sebelum nya kita hanya berpindah didalam tab yang sama, sekarang setelah kita klik link “Profile Saya” akan muncul tab baru yang isinya adalah halaman profile.

Membuat Hyperlink Menggunakan Gambar

Sekarang saya akan mencontohkan bagaimana cara membuat hyperlink menggunakan gambar. Buka lagi file main.html nya menggunakan editor anda kemudian siapkan satu file gambar terserah nama nya apa aja, file tersebut harus ada didalam direktori yang sama dengan file main.html biar lebih gampang aja.

Jika masih ada yang bingung dengan cara menyisipkan gambar di html bisa baca postingan saya yang ini :

Balik ke topik, sekarang update kodingan berikut di file main.html :

Output nya akan seperti ini :

cara membuat hyperlink menggunakan gambar

Ketika gambar tersebut di klik nanti akan mengarahkan ke halaman website belajar-koding.com karena kita mengisi nilai atribut href nya adalah “http://belajar-koding.com“.

Link Email

Anda juga dapat membuat link email, link ini berisi alamat email yang ketika diklik, aplikasi untuk mengirim email akan otomatis terbuka dan tujuan email secara otomatis terisi dengan alamat yang telah ditentukan.

Untuk membuat link email, anda tinggal menambahkan mailto:alamat@email di dalam atribut href seperti berikut :

Jika ada yang bermasalah dengan tidak muncul apa apa ketika diklik “Kirim Email“, bisa baca postingan berikut di website stackoverflow :

Mungkin cukup untuk pembahasan cara membuat hyperlink di html. Jika ada yang belum dimengerti bisa ditanyakan di kolom komentar. Terimakasih ^_^ #salamKoding

Leave a Reply

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