Bagaimana cara membuat hyperlink pada html?

Daftar isi

• Apa Itu Hyperlink?
• Cara Membuat Link Pada HTML.
• Jenis Link Pada HTML.
  • 1. Link Absolute
  • 2. Link Relatif

Apa Itu Hyperlink?

Hyperlink Text atau sering disebut dengan Link merupakan sebuah teks atau gambar yang ketika kamu klik maka akan berpindah ke halaman yang berbeda atau tetap pada halaman yang sama. Jadi intinya link akan membawa kamu berpindah dari satu halaman ke halaman lain, baik itu pada halaman yang berbeda maupun tetap pada halaman yang sama.

Link memudahkan user untuk menelusuri seluruh isi atau informasi yang tersimpan di dalam website yang bersangkutan. Bentuk link biasanya bewarna biru dan bergaris bawah, ketika penunjuk mouse diarahkan ke teks link tersebut, maka penunjuk mouse akan berubah menjadi gambar tangan.

Cara Membuat Link Pada HTML.

HTML menyediakan tag khusus untuk membuat link. Kamu bisa menggunakan tag berpasangan

Setiap tulisan yang diapit menggunakan tag di atas, maka akan berubah menjadi link. Bentuk umum pembuatan link dalam dokumen HTML adalah sebagai berikut:

Text Link

Tag link di atas memiliki atribut href yang berfungsi untuk menentukan halaman mana yang akan dipanggil pada saat link di klik oleh user. Berikut contoh penggunaannya:

	
	


	
	
Demo Membuat Link Menggunakan HTML
	

                           Hay! Kamu lagi nyari tutorial belajar HTML? ayo cek website Mandan Koding. 

		KLIK DISINI UNTUK BELAJAR
	

Pada gambar di atas ketika kamu meng-klik teks “KLIK DISINI UNTUK BELAJAR” maka kamu akan dialihkan ke halaman website Mandan Koding.

Jenis Link Pada HTML.

HTML membedakan jenis link berdasarkan jenis dokumen yang akan diakses. Berikut penjelasannya:

1. Link Absolute

Link Absolute merupakan suatu link yang alamat tujuannya ditulis secara lengkap. Biasanya link ini digunakan untuk mengarah ke halaman website lain. Contohnya kamu membuat suatu artikel yang berisi informasi mengenai cara menyimpan data ke google drive. Dari situ kamu bisa mengaitkan link halaman website google drive di dalam halaman web kamu. Bentuk umum penggunaan link absolute adalah:

Website Google Drive

Link di atas merupakan link absolute, alamat website tujuan ditulis secara lengkap. Berikut adalah contoh penggunaan link absolute:

Nama File: link-absolute.html

	
	


	
Demo Menggunakan Link Absolute

	
Halaman mana yang ingin kamu buka?
	Instagram 

	Facebook 

	Mandan Koding 

Kamu bisa lihat pada hasil di atas, ketika kamu klik Instagram, maka browser akan beralih halaman ke situs http://www.instagram.com. Begitu juga dengan yang lainnya.

2. Link Relatif

Berbeda dengan link absolute, pada link relative kamu tidak perlu menuliskan alamat tujuan secara lengkap menggunakan (http://www) akan tetapi cukup memanggil nama dokumennya saja. Sebagai contoh: kamu hendak membangun sebuah template untuk website impian kamu, pada bagian navbar (menu) kamu akan membuat beberapa menu seperti (beranda artikel, kontak, dan tentang saya). Pada menu tersebut kamu bisa menyisipkan link relatif. perhatihan contoh script berikut.

Artikel

Pada link di atas, kamu cukup menuliskan nama dokumen yang bersangkutan untuk membuat link ketika ingin beralih ke halaman artikel. Begitu juga dengan menu-menu lainnya. Berikut contoh lengkap penggunaan link relatif.

	
	



	
Demo Menggunakan Link Relatif

	
Selamat Datang di Website Mandan Koding

	Beranda
	Artikel
	Kontak
	Tentang Saya

Nama File: artikel.html

	



Demo Menggunakan Link Relatif

Bagaimana Cara Membuat Link Menggunakan HTML?

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Sebagai contoh, disini kita hanya membuat satu dokumen untuk menu artikel. Kamu bisa menambahkan dokumen lain sesuai dengan keinginan kamu. Silahkan simpan dua file di atas di dalam satu folder yang sama. Pertama-tama silahkan jalankan file index.html terlebih dahulu menggunakan web browser, maka hasilnya akan terlihat seperti ini

Pada hasil file index.html yang dijalankan pada web browser diatas, kamu bisa melihat berberapa menu (beranda, artikel, kontak, dan tentang saya) ketika kamu klik menu artikel, maka browser akan mengarahkan kamu ke halaman artikel.html. berikut hasilnya:

Perhatikan halaman artikel di atas, terdapat teks link untuk kembali ke halaman utama yaitu “index.html”. Kamu bisa menambahkan link berikut.

Kembali ke Halaman Utama

Atribut target = “_blank”

Atribut target adalah sebuah atribut yang menentukan tempat untuk membuka dokumen yang ditautkan.

Adapun salah satu nilai dari atribut target yang sering digunakan adalah “_blank”. Atribut target berfungsi untuk membuka link di tab baru. Bentuk umum penggunaan atribut target adalah:

Artikel

Link di atas ketika di klik maka akan membuka tab baru untuk beralih ke halaman yang hendak dituju, jadi halaman awal tidak akan tertimpa.

	
	
	


	
Demo Menggunakan Atribut Target/h2>

	
Selamat Datang di Website Mandan Koding

	Beranda
	Artikel
	Kontak
	Tentang Saya

Silahkan klik menu artikel maka hasilnya akan seperti ini: Pada gambar di atas menunjukkan bahwa tab baru akan dibuka ketika kamu meng-klik menu pada tab halaman pertama. Inilah fungsi dari atribut target.

Struktur File:

Catatan: Pastikan file berada pada 1 folder.

Setelah semuanya selesai, sekarang silahkan kamu jalankan file inde.html, dan lihat hasilnya, selamat mencoba. Sekarang kamu sudah tau konsep dari Hyperlink pada HTML, semoga bermanfaat.

Selamat belajar, dan tunggu tutorial selanjutnya di mandankoding.com 🙏🎉🎉

Bagaimana Cara Menambahkan Hyperlink dalam HTML?

Langkah langkah untuk membuat hyperlink?

Membuat hyperlink ke halaman web.

Pilih sel atau objek yang ingin Anda jadikan hyperlink..

Klik tab Sisipkan, lalu klik Hyperlink..

Klik tab Halaman Web atau File, lalu masukkan alamat dalam kotak Alamat. Anda juga bisa mengklik Pilih dan telusuri ke alamat yang diinginkan..

Klik OK..

Apa itu link pada HTML?

Hyperlink adalah suatu fungsi yang ada di dalam halaman HTML yang mampu membantu para pembaca menuju informasi lainnya secara singkat. Umumnya, teks yang disisipkan dengan hyperlink bisa dilihat secara mudah perbedaannya dalam suatu slide presentasi ataupun website.

Bagaimana cara membuat heading pada HTML?

Cara Membuat Heading di HTML Judul pada HTML dapat kita buat dengan tag sampai . Tag digunakan pada judul level pertama. Lalu tag lainnya digunakan pada sub heading atau level berikutnya. Masing-masing judul akan ditampilkan dengan ukuran teks yang bebeda.