Link HTML

Hyperlink adalah penghubung antar halaman website dan sangat berguna untuk navigasi.

Jika kita ingin membuat halaman website yang saling terhubung, kita bisa membuat setiap halaman saling terhubung dengan menggunakan link.

Link pada sebuah website memiliki peran yang sangat penting. bayangkan jika halaman website tidak memiliki link, maka pengguna atau pengunjung website tersebut harus mengetik url website secara manual untuk berpindah halaman.

Dengan adanya link pada setiap halaman, pengguna bisa melakukan klik pada setiap link halaman yang ingin dituju.

Untuk membuat link pada HTML, kita bisa menggunakan tag <a> .. </a>.

Tag yang digunakan untuk membuat link pada HTML adalah tag <a> .. </a>.

Cara penulisan link :

  1. Diawali dengan tag <a> pembuka dan diakhiri dengan tag </a> penutup.
  2. Tulis link tujuan pada atribut href="" dalam tag <a> pembuka.
  3. Letakkan nama link diantara tag <a> pembuka dan tag </a> penutup.

Contoh penulisan link HTML yang benar

<a href="https://www.codingan.id/">Klik saya</a>

Contoh di atas adalah contoh link yang akan mengalihkan halaman ke website https://www.codingan.id/ pada saat diklik.

Link dibagi menjadi 2 jenis, yaitu :

  1. Link internal
  2. Link eksternal

Link internal adalah link yang menuju halaman lain (masih di website yang sama). Penggunaan link internal biasanya ada pada menu navigasi website.

Link yang ada pada menu navigasi biasanya mengarah ke halaman lain dalam website, misal link yang menuju halaman kontak, halaman artikel, dan lain-lain.

Berikut contoh sederhananya:

<a href="halaman.html">Teks Tautan Internal</a>

Link eksternal adalah link yang mengarah ke halaman wesite lain yang berada di luar situs website kita.

Contoh penggunaan link eksternal biasanya untuk membuat link informasi sosial media. Misal link mengarah ke profil instagram kita, atau mengarah ke profil github kita, atau link yang mengarah ke situs referensi yang ingin kita cantumkan pada website kita.

Contoh:

<a href="https://www.malasngoding.com">Teks link Eksternal</a>

Kita juga bisa menyisipkan gambar pada link yang kita buat.

Misal saat gambar tertentu diklik, maka halaman akan dialihkan ke halaman lain.

Untuk menampilkan gambar pada HTML, kita bisa menggunakan tag <img>.

Siapkan sebuah file gambar dan letakkan dengan file HTML teman-teman. pada contoh ini saya menyiapkan sebuah file html dengan nama belajar.html.

Dan menyediakan sebuah file gambar dengan nama gambar.jpg yang berada 1 folder yang sama dengan file belajar.html.

Maka cara membuat link menggunakan gambar adalah sebagai berikut.

<a href="halaman.html">
   <img src="gambar.jpg">
</a>

Perhatikan pada contoh di atas. saat gambar diklik, maka akan dialihkan ke file halaman.html.

Contoh menampilkan gambar di sini adalah contoh sederhana saja. 

Silahkan baca tutorial cara menampilkan gambar pada HTML pada tutorial gambar HTML.

Terkadang kita menginginkan link tujuan dibuka pada tab baru dalam browser saat diklik.

HTML juga telah menyediakan caranya. yaitu kita bisa menggunakan atribut target="_blank".

Perhatikan contoh cara membuat link yang dibuka pada tab baru berikut.

<a href="halaman.html" target="_blank">Link akan dibuka pada tab baru</a>

Kita juga bisa membuat link untuk mengalihkan halaman ke halaman pengiriman email.

Yaitu dengan cara menambahkan “mailto:” dalam atribut href="".

Kemudian isi alamat email tujuan.

Contoh :

<a href="mailto:halo@codingan.id">Kirim Email</a>

Untuk memahami link lebih jauh. kita akan belajar membuat link antar halaman website.

Dengan kata lain kita akan membuat menu navigasi sederhana.

Buatlah 2 buah file HTML dengan nama index.html dan tentang.html dalam sebuah folder dengan nama belajar_html.

index.html

<!DOCTYPE html>
<html>
<head>
	<title>Home - codingan.id</title>
</head>
<body>
	<a href="index.html">Home</a>
	<a href="tentang.html">Tentang</a>

	<h1>Home</h1>
	<p>Halo, selamat datang di halaman utama website saya</p>	
	<p>Saya sedang belajar hyperlink HTML di codingan.id</p>	
</body>
</html>

tentang.html

<!DOCTYPE html>
<html>
<head>
	<title>Tentang - codingan.id</title>
</head>
<body>
	<a href="index.html">Home</a>
	<a href="tentang.html">Tentang</a>

	<h1>Tentang</h1>
	<p>ini adalah halaman tentang kami</p>	
	<p>codingan.id adalah situs tempat belajar pemrograman paling kece</p>	
</body>
</html>

Silahkan buka file index.html. dan coba klik pada menu sederhana tersebut.

Selanjutnya silahkan teman-teman kembangkan dan bereksperimen sendiri lebih jauh untuk lebih memahami cara membuat hyperlink pada HTML dan kegunaannya.

Kesimpulan

Untuk membuat link pada HTML, kita bisa menggunakan tag anchor. yaitu tag <a> .. </a>.

Cara penulisannya diawali dengan tag <a> pembuka dan tag </a> penutup.

Tulis url tujuan dalam atribut href="".

Dan tambahkan atribut target="_blank" jika ingin link dibuka pada tab baru saat diklik.

Sekian tutorial link HTML. Silahkan lanjut ke tutorial HTML selanjutnya.