Bagaimana cara membuat hyperlink di html?

Hyperlink atau link adalah objek pada HTML (bisa berupa teks, gambar, atau multimedia lainnya) yang jika diklik membawa ke halaman lain. Fungsi dari link adalah untuk menghubungkan satu halaman dengan halaman lain agar mudah diakses.

Table of Contents Show

Cara Membuat Link di HTML
Atribut href
Membuat link menuju alamat absolute
Membuat link menuju alamat relatif
Membuat Link HTML dalam Satu Halaman
Membuat Link ke protokol lain
Atribut target
Atribut rel
Cara Membuat Button Link di HTML
Cara Membuat Link Gambar di HTML
Bagaimana Cara Membuat hyperlink pada HTML?
Bagaimana cara membuat link URL?
Apa itu A dalam HTML?
Bagaimana cara menampilkan gambar pada HTML?

Cara Membuat Link di HTML

Untuk membuat link di HTML dapat menggunakan tag <a> dan atribut href sebagai alamat tujuan. Tag <a> mengapit objek seperti teks, gambar atau tombol yang dapat diklik pada link HTML di web browser. Agar lebih jelas, berikut ini struktur link pada HTML:

<html>
<head><title>Belajar Hyperlink</title></head>
<body>
	<a href="https://www.google.com/">Kunjungi Google</a>
</body>
</html>

Hasil tampilan pada browser:

Pada contoh potongan kode di atas, teks “Kunjungi Google” jika di-klik akan membuka Google. Penulisan isi atau value dari atribut href harus benar dan bisa diakses karena jika salah, link tidak akan bekerja. Lalu bagaimana cara menulis isi atau value dari atribut href? Mari kita bahas.

Atribut href

Atribut href adalah atribut yang digunakan untuk menentukan alamat yang akan dituju pada sebuah link. Atribut ini harus ada jika kita ingin membuat link. Cara penulisan dan alamat tujuannya beraneka ragam dan hampir sama dengan penulisan value src pada saat kita belajar menambahkan gambar di HTML. Untuk memudahkan memahaminya saya rangkum menjadi 4 jenis link yaitu link absolute, link relative, link dalam satu halaman dan link ke protokol lain.

Membuat link menuju alamat absolute

Alamat absolute adalah alamat yang lengkap mulai dari protokol yang digunakan ( http:// atau https:// ), nama domain, dan dilengkapi dengan alamat halaman atau file yang dituju, misalnya: https://itkoding.com/hubungi-kami/

Maka kode HTMLnya adalah:

<a href="https://itkoding.com/hubungi-kami/">Hubungi Kami</a>

Alamat absolute biasanya digunakan untuk membuat link ke website lain. Namun disarankan untuk selalu menggunakan alamat absolute untuk semua link pada website meskipun link tersebut menuju ke halaman website kita sendiri karena alamat absolute memiliki keunggulan dari segi SEO. Kita akan membahasnya pada topik tersendiri. Baca juga materi lainnya cara membuat ordered list html.

Membuat link menuju alamat relatif

Alamat relatif adalah alamat yang hanya menunjukkan nama file dan direktorinya. Berbeda dengan absolute, alamat relatif tidak perlu memasukkan protokol dan nama domain.

Penjelasan: Folder praktek terdiri dari 2 file (index.html dan single.html) dan 2 folder (laptop dan smartphone. Folder laptop terdiri dari 2 file (asus.html dan samsung.html). Folder smartphone terdiri dari 2 file (android.html dan iphone.html).

Dengan contoh struktur folder di atas, berikut ini cara menulis alamat relatif:

1. Tujuan link berada pada folder yang sama.

Contohnya jika kita menulis kode HTML pada file “index.html” dan ingin membuat link ke file “single.html” yang berada pada folder yang sama yaitu folder praktek maka cara penulisan value dari atribut href adalah hanya nama filenya saja.

Kode pada file index.html :

<a href="single.html">Link ke single</a>

Jika file “index.html” dibuka di web browser kemudian teks “Link ke single” di-klik maka akan membuka file “single.html”.

2. Tujuan link berada dalam folder.

Contohnya jika kita membuat file “index.html” dan ingin membuat link ke file “asus.html” maka kita harus menulis nama foldernya terlebih dahulu yaitu “laptop” kemudian tanda / lalu nama filenya yaitu “asus.html“. Sehingga jika disatukan menjadi “laptop/asus.html”.

Kode pada file index.html :

<a href="laptop/asus.html">Link ke asus</a>

3. Tujian link berada di luar folder.

Contohnya jika kita membuat file “android.html” dan ingin membuat link ke “index.html” maka kita harus menambahkan tanda ../ yang artinya “naik satu direktori”, kemudian kita tambahkan nama filenya yaitu “index.html”. Jika digabungkan menjadi “../index.html“.

Kode pada file android.html:

<a href="../index.html">Link ke index</a>

Membuat Link HTML dalam Satu Halaman

Link HTML dalam satu halaman dapat dibuat dengan menambahkan atribut id pada elemen HTML yang dituju lalu id tersebut ditulis pada atribut href link HTML. Penulisan pada atribut href didahului dengan tanda pagar #. Link jika di-klik akan menuju elemen tersebut tanpa pindah halaman.

Contoh:

<html>
<head><title>Belajar Link Satu Halaman</title></head>
<body>
	Jika klik ini akan berpindah ke tempat 2:
	<a href="#tempat-2">Tempat 2</a>
	<br />
	Jika klik ini akan berpindah ke tempat 3:
	<a href="#tempat-3">Tempat 3</a>
	<br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
	<br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
	<h2 id="tempat-1">Tempat 1</h2>
	<p>kamu sudah berpindah ke tempat 1.</p>
	<br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
	<br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
	<h2 id="tempat-2">Tempat 2</h2>
	<p>kamu sudah berpindah ke tempat 2.</p>
	<br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
	<br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
	<h2 id="tempat-3">Tempat 3</h2>
	<p>kamu sudah berpindah ke tempat 3.</p>
	<br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
	<br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
</body>
</html>

Penjelasan kode:

Link pada baris ke-5 jika di-klik akan menuju ke <h2 id="tempat-2">Tempat 2</h2> pada baris ke-15. Ini bukan berpindah halaman tetapi seperti scroll ke elemen tujuan.

Begitu juga pada baris ke-8, jika di-klik akan menuju ke <h2 id="tempat-3">Tempat 3</h2> pada baris ke-19.

Dapat dilihat bahwa penulisan id dan href harus sama. Baris ke-5 href-nya sama dengan id pada baris ke-15 yaitu “tempat-2”. baris ke-8 href-nya sama dengan id pada baris ke-19 yaitu “tempat-3”. Lihat juga struktur dasar html.

Membuat Link ke protokol lain

Selain http dan https, kita juga bisa membuat link dengan tujuan protokol lainnya seperti email, ftp, dan lainnya. Berikut ini cara membuat link email pada HTML:

<a href="mailto:?Subject=Halo%20bro">Kirim email!</a>

Kode di atas jika di-klik akan membuka aplikasi e-mail client yang ada pada komputer anda untuk mengirimkan email dengan subjek “Halo bro” ke .

Lihat juga: cara membuat tabel di HTML

Atribut target

Atribut target berfungsi untuk menentukan tempat membuka link. Terdapat 2 macam value yang paling sering digunakan untuk atribut ini, yaitu:

_self digunakan untuk membuka link pada tab web browser yang sama. Value ini adalah nilai default, jika kita tidak memberi atribut target maka link akan dibuka pada tab yang sama atau tab yang sedang digunakan saat itu.
_blank digunakan untuk membuka link pada tab baru.

Contoh penggunaan atribut target:

<a href="https://www.google.com/" target="_blank">Buka Google di tab Baru</a>

Atribut rel

Atribut rel berfungsi untuk menentukan hubungan halaman yang menjadi tujuan dari link tersebut. Berikut ini value yang penting untuk diketahui dan paling sering digunakan:

rel=”nofollow” menunjukkan bahwa link tersebut tidak kita dukung atau tidak memiliki hubungan dengan website kita. Nofollow memberi info kepada search engine seperti Google bahwa link tersebut tidak perlu diikuti. Dalam SEO ini dilakukan jika kita tidak ingin menambahkan poin plus kepada website tersebut dimata Google.
rel=”sponsored” menunjukkan bahwa link tersebut adalah link sponsor. Value ini adalah value baru dari Google yang diperkenalkan pada akhir tahun 2019.
rel=”ugc” menujukkan bahwa link tersebut adalah link yang dibuat oleh user. Ini sangat cocok untuk website yang berbentuk forum di mana konten dibuat oleh user.
rel=”noreferrer” digunakan untuk melarang web browser mengirimkan header referrer.
rel=”noopener” digunakan untuk mencegah penggunaan windows opener. Ini digunakan untuk meningkatkan keamanan website. noopener dan noreferrer sebaiknya digunakan saat membuat link dengan target _blank atau link yang dibuka pada tab baru.

<a href="https://www.google.com/" target="_blank" rel="noreferrer noopener">Link ke Google</a>

Cara Membuat Button Link di HTML

Button link di HTML dapat dibuat dengan menggunakan tag <button> lalu ditambahkan atribut onclick yang berisi javascript location href. Value yang digunakan pada location href adalah link yang dituju.

Berikut ini kode HTML untuk membuat button link:

<button onclick="location.href='https://www.google.com/'" type="button">Kunjungi Google</button>

Pelajari juga materi tag untuk membuat heading.

Cara Membuat Link Gambar di HTML

Link gambar di HTML dapat dibuat menggunakan tag <a> dan atribut href. Di dalam tag <a> ditambahkan elemen <img>. Perpaduan antara tag <a> dan <img> akan membuat gambar dapat di-klik.

Berikut ini kode HTML untuk membuat link gambar:

<a href="https://www.facebook.com/"><img src="https://www.facebook.com/images/fb_icon_325x325.png"></a>

Jika ada penjelasan yang tidak bisa dipahami pada tutorial HTML tentang membuat link HTML ini silahkan kirimkan pertanyaan melalui kolom komentar. Begitu juga jika terdapat kekeliruan penyampaian materi silahkan kirim komentar.

Web developer yang juga suka dengan dunia sysadmin. Pernah belajar Teknik Informatika di Indonesia.

Bagaimana Cara Membuat hyperlink pada HTML?

Cara Membuat Link di HTML Link pada HTML dapa dibuat dengan tag <a> , kemudian tag ini harus memiliki atribut href untuk menentukan alamat URL tujuan dari link. Link akan ditampilkan dengan warna biru dan garis bawah. Ini adalah style standar dari setiap browser. Tentu saja ini bisa kita ubah-ubah sesusi selera.

Bagaimana cara membuat link URL?

Cara membuat link URL sendiri dengan Bitly.

Klik Create..

Masukkan link panjang..

Tempel link yang ingin dibuat..

Tampilan akan berubah ke mode edit..

Klik bagian Customize Back-Half..

Klik Save..

Edit link ke penamaan sendiri..

Tunggu notifikasi alamat link URL tersedia atau tidak..

Apa itu A dalam HTML?

Deskripsi. Penjelasan HTML a (anchor link) a menunjukkan sebuah anchor. Apa itu anchor? Anchor adalah teks yang menunjukkan awalan dan akhiran sebuah hypertext link. HTML <a> element digunakan untuk mendefinisikan sebuah hyperlink. Link dapat merujuk ke halaman yang sedang terbuka ataupun ke halaman lain (website lain) ...

Bagaimana cara menampilkan gambar pada HTML?

Dalam HTML, tag yang berfungsi untuk menampilkan gambar adalah tag <img>, singkatan dari image. Tag <img> merupakan jenis tag yang berdiri sendiri atau dalam konteks elemen, merupakan elemen tanpa tag penutup (empty element). Tag <img> memiliki atribut khusus yaitu src singkatan dari source yang berarti sumber.