Tutorial HTML untuk Pemula: 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.

tutorial html untuk pemula

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:

tutorial html untuk pemula

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.

tutorial html untuk pemula


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.

tutorial html untuk pemula

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?

tutorial html untuk pemula

tutorial html untuk pemula


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.



0 Komentar untuk "Tutorial HTML untuk Pemula: Membuat Link di HTML"