Cara Membuat Link Di HTML

View Categories

Cara Membuat Link Di HTML

Link atau tautan banyak dipakai pada suatu dokumen HTML. Fungsi link adalah untuk membuka dokumen HTML lain. Link adalah implementasi dari konsep utama dari revolusi website sebab elemen ini adalah implementasi dari konsep hyperlink. Link tidak harus diletakkan pada suatu text tapi juga bisa diletakkan pada gambar atau tag lain pada dokumen HTML.

Cara Penulisan

Link menggunakan tag a.

<a href="url">link text</a>

Atribut penting tag link adalah atribut href, atribut href berisi alamat URL dokumen HTML yang akan dibuka apabila link tersebut diklik. Bagian “link text” adalah bagian yang terlihat pada web browser dalam bentuk text.

Contoh di bawah memperlihatkan link yang membuka dokumen HTML dengan alamat URL https://nextgen.co.id.

 <a href="https://nextgen.co.id/">Visit Nextgen!</a>

Jalankan Contoh

Web browser menampilkan link dengan aturan sebagai berikut :

  • Link yang belum pernah diklik ditampilkan dengan text bergaris bawah dan berwarna biru.
  • Link yang sudah pernah diklik ditampilkan dengan text bergaris bawah dan berwarna purple.
  • Link yang aktif ditampilkan dengan text bergaris bawah dan berwarna merah.

Atribut target

URL dokumen HTML yang akan dibuka normalnya dibuka pada tab atau window yang sama dengan dokumen HTML yang sekarang. Atribut target digunakan untuk mengubah ketentuan tersebut. Nilai dari atribut target dapat berupa :

  • _self, membuka URL dokumen HTML pada tab/window yang sama, nilai ini adalah nilai default dari atribut target.
  • _blank, membuka URL dokumen HTML pada tab/window yang baru.

Di bawah ini adalah contoh penggunaan target _blank

 <a href="https://nextgen.co.id/" target="_blank">Visit Nextgen!</a>

Jalankan Contoh

Absolute URL dan Relative URL

Absolute URL adalah URL dokumen HTML pada link dengan menyebutkan alamat URL secara lengkap. Sedangkan relative URL adalah URL dokumen HTML pada link dengan menyebutkan posisi halaman relative terhadap URL yang sekarang.

Beda Relative Link Dan Absolute Link

<h2>Absolute URLs</h2>
<p><a href="https://www.google.com/">Google</a></p>

<h2>Relative URLs</h2>
<p><a href="html_links_2.html">Previous Example</a></p>

Jalankan Contoh

Menggunakan Gambar Sebagai Link

Untuk menggunakan gambar sebagai link kita dapat meletakkan tag img di dalam tag a.

<a href="https://www.google.com/">
<img src="nextgen.jpg" alt="Google" style="width:42px;height:42px;">
</a>

Jalankan Contoh

Link Dengan Tujuan Email

Link juga dapat berfungsi untuk membuat email dengan tujuan alamat email tertentu. Link ini akan otomatis membuka aplikasi default yang dipakai untuk mengirimkan email pada komputer pengguna.

 <a href="mailto:[email protected]">Send email</a>

Jalankan Contoh

Tutorial sebelumnya : Format Text HTML
Tutorial setelahnya : Cara Menambahkan Gambar Di HTML
Semua Tutorial HTML : Tutorial HTML 

Tinggalkan Balasan