--> Skip to main content

Cara Membuat Link di HTML

Halo gan. Di postingan sebelumnya kita sudah membahas cara membuat list di HTML. Kali ini kita akan membahas cara membuat link di HTML.

Membuat Link di HTML

Cara membuat link di HTML

Link atau tautan adalah objek yang memiliki tujuan alamat tertentu. Objeknya dapat berupa teks atau gambar.

Di HTML, link dapat dibuat dengan tag <a>. a tersebut adalah singkatan dari anchor.

..tag <a> selalu diikuti dengan atribut hrefhref inilah yang memuat alamat yang dituju. href singkatan dari hypertext reference.

Mari kita coba.

Kita akan membuat sebuah link yang akan menuju ke halaman google.

Berikut kodenya:
<!DOCTYPE html>
<html>
  <head>
    <title>Membuat link di HTML</title>
  </head>

  <body>
    Klik di <a href="http://www.google.co.id">sini</a> untuk membuka google.
  </body>
</html>

Hasilnya akan seperti berikut:

Membuat Link di HTML

Kalo linknya kita klik, maka kita akan dibawa ke alamat yang dituju (nilai atribut href), yakni halaman google.co.id. Halaman di atas akan berubah menjadi halaman google.co.id.

Membuat Link di HTML

Agar tampilannya nggak berubah, ada caranya. Kalo linknya di klik, dia akan otomatis membuka tab baru.

..caranya adalah dengan menambahkan atribut target="_blank" pada tag <a>.

Coba kita tambahkan atribut target ke kode HTML di atas.
<!DOCTYPE html>
<html>
  <head>
    <title>Membuat link di HTML</title>
  </head>

  <body>
    Klik di <a href="http://www.google.co.id" target="_blank">sini</a> untuk membuka google.
  </body>
</html>

Hasilnya, akan ada 2 tab di web browser. Tab pertama berisi halaman link yang kita buat dan tab kedua berisi halaman google.co.id.

Membuat Link di HTML

Link absolute dan link relatif

Link absolute berisi alamat web yang ditulis lengkap. Contohnya seperti di atas: http://www.google.co.id.

Contoh lain yang lebih panjang: http://www.aneiqbal.com/2016/11/membuat-list-di-html.html. Intinya adalah link absolute mengandung alamat suatu website.

Sedangkan..

Link relatif berisi alamat file yang relatif yang mana alamat linknya mengarah ke file halaman dari web itu sendiri.

Misalnya, di dalam folder belajar_html ada file home.html dan contact.html. Kalo kita ingin membuat link yang mengarah ke halaman contact.html dari home.html, kita cukup ketik:
<a href="contact.html">Link ke halaman contact.html</a>

Lalu bagaimana kalo kita ingin membuat link yang mengarah ke home.html dari file contact.html sedangkan file home.html berada di folder belajar_html dan contact.html berada di folder belajar_html/folder/folder2?

Membuat Link di HTML

Membuat Link di HTML

Maka kode yang kita tulis adalah:
<a href="../../home.html">Link ke halaman home.html</a>

Tanda ../../ digunakan untuk naik 2 tingkat folder.. artinya naik ke folder2 lalu naik lagi ke folder.

Kalo naik satu tingkat folder? hapus saja menjadi ../

Alamat filenya relatif kan? makanya disebut link relatif.

Sampai sini selesai bahasan kita cara membuat link di HTML.

Selanjutnya, kita akan membahas cara memasukkan gambar di HTML.


Comment Policy: Silakan tuliskan komentar Anda yang sesuai dengan topik postingan halaman ini. Komentar yang berisi tautan tidak akan ditampilkan sebelum disetujui.
Buka Komentar
Tutup Komentar