HTMLHTML Dasar

Tutorial HTML Part 9: Cara Membuat link di HTML (tag a)

Cara Membuat link di HTML (tag a)

Cara Membuat link di HTML (tag a) – Pada pembahasan sebelumnya, kita sudah membahas tentang cara membuat list dengan menggunakan tag li. Jika anda belum melihat tutorialnya, silahkan lihat disini. Nah, pada pembelajaran kita kali ini, kita akan membahas mengenai link atau bagaimana cara membuat link di HTML menggunakan tag <a>.

Link adalah sebuah tujuan kata hypertext dari dokumen ke dokumen yang lain atau sumber lainnya. Seperti halnya suatu kutipan di dalam literatur. Dikombinasikan dengan sebuah jaringan data dan sesuai dengan protokol, sebuah komputer dapat diminta untuk memperoleh sumber yang direferensikan.


Cara Membuat Link di HTML (tag a)

Tujuan kata Hypertext dari HTML adalah membuat sebuah text yang ketika di klik akan berpindah ke halaman lainnya, seperti penjelasan diatas. Untuk membuat link, HTML telah menyiapkan untuk keperluan ini, yaitu dengan menggunakan tag <a>.

Link ditulis dengan <a> yang merupakan singkatan dari anchor. Setiap tag <a> setidaknya memiliki sebuah atribut href (hypertext reference). Dimana href ini diisi dengan alamat yang dituju.

Supaya lebih jelas dan paham, kita akan langsung menggunakan contoh. Buka text editor anda masing-masing dan ketikkan kode dibawah ini.

<!DOCTYPE html>
<html>
<head>
  <title>Penggunaan Link (tag a)</title>
</head>
<body>
  <h1>Belajar HTML itu Mudah!</h1>
  <p>Saya sedang belajar HTML dari 
  <a href="https://www.iltekkomputer.com">Iltekkomputer</a></p>
</body>
</html>

dan lihat hasilnya pada browser anda. Kira-kira tampilannya seperti ini:

link pada html


Alamat Absolute dan Relatif

Pada contoh diatas kita menuliskan alamat link secara lengkap pada bagian “https://www.”. Penulisan seperti ini disebut juga dengan external link, yang berarti kita membuat link ke alamat lain di jaringan internet, atau lebih dikenal dengan nama alamat absolute.

Alamat absolute adalah penulisan alamat file dengan menyertakan nama website, seperti: href=”https://www.iltekkomputer.com/apa-itu-php.html”, atau href=”https://www.facebook.com”.

TapiĀ  kalau kita ingin membuat link di dalam website yang sama, maka tidak perlu mengetikan alamat lengkap seperti tadi. Cukup dengan mencantumkan alamat file yang dituju kepada file saat ini. Jenis alamat ini disebut alamat relatif.

Sebagai contoh alamat relatif, apabila kita ingin membuat link kepada file index.html pada folder yang sama dengan file saat ini, maka atribut hrefnya berisi href=”hello-world.html”. Berikut adalah contoh kode HTML nya:link pada html

Alamat absolute ditulis dengan lengkap, seperti https://www.iltekkomputer.com atau jika kita menunjuk kepada halaman tertentu, menjadi https://www.iltekkomputer.com/nama_halaman.html.

Sedangkan alamat relatif adalah relatif kepada file tempat kita memanggil link ini. Misalnya nama file kita adalah belajar_programming.html, dan dalam folder yang sama terdapat halaman belajar_pemrograman.html, kita dapat menggunakan href=”belajar_pemrograman.html” untuk membuat link ke halaman belajar_pemrograman.html.

Jadi, jika file tersebut berada di dalam folder belajar_santai, maka alamat relatifnya menjadi href=”belajar_santai/belajar_pemrograman.html”. Tapi bagaimana kalau halaman tersebut berada 2 tingkat dari luar folder saat ini? Kita dapat mengakali dengan menggunakan href=”../../belajar_pemrograman.html”, untuk naik 2 folder diatasnya.


Atribut tag <a>: target

Atribut penting lainnya dari tag <a> adalah target. Atribut ini berfungsi untuk menentukan apakah link yang akan dituju terbuka di jendela browser yang sama atau terbuka pada jendela browser baru.

Defaultnya, setiap link yang ditulis akan terbuka pada jendela yang sama (menimpa halaman web yang sedang dibuka). Tapi apabila kita ingin halaman tersebut terbuka pada jendela browser / tab baru, kita bisa menggunakan atribut target=”_blank”. Untuk lebih jelasnya, silahkan ketik kode dibawah ini pada text editor:

<!DOCTYPE html>
<html>
<head>
  <title>Penggunaan Link (tag a)</title>
</head>
<body>
  <h1>Belajar HTML itu Mudah!</h1>
  <p>Saya belajar html dari <a href="https://www.iltekkomputer.com"
target="_blank">Iltekkomputer</a> dan link ini akan terbuka pada tab baru</p>
</body>
</html>

link pada html

Jika link tersebut di klik, maka website/halaman iltekkomputer.com akan terbuka pada jendela baru.


Sampai sini saya rasa sudah paham untuk pembahasan kali ini, pada tutorial selanjutnya kita akan membahas tentang Cara Menambahkan Gambar di HTML, menggunakan tag <img>.

 

Tags

Brian Harris

Seseorang yang tertarik dengan Dunia IT terutama di bidang Web Programming dan ingin menjadi Full-stack Developer.

Related Articles

Leave a Reply

Your email address will not be published. Required fields are marked *

Back to top button
Close