28 April 2013,
 12

Link adalah tujuan dari kata Hypertext dari HTML. Dalam tutorial belajar HTML cara membuat link di HTML, kita akan membahas cara penulisannya.

Tujuan kata Hypertext dari HTML adalah membuat sebuah text jika di-klik akan pindah ke halaman lainnya. HTML menggunakan tag link untuk keperluan ini.

Tag link ditulis dengan <a>, singkatan cari anchor (jangkar)

Setiap tag link setidaknya memiliki sebuah atribut href. Dimana href akan berisi alamat yang dituju. (href adalah singkatan dari hypertext reference). Silahkan buka text editor dan buat kode seperti dibawah ini.

Contoh penggunaan tag link <a>:

<!DOCTYPE html>
<html>
<head>
<title>Penggunaan Tag Link </title>
</head>
<body>
<h1>Belajar Tag Link</h1>
<p>Saya sedang belajar HTML dari <a href="http://www.duniailkom.com">Duniailkom</a></p>
</body>
</html>

Cara Membuat link di HTML

Contoh diatas menggunakan alamat absolut, artinya kita menuliskan alamat link dengan lengkap.

Namun jika halaman web yang kita tuju adalah di dalam folder tempat kita menjalankan file ini, tidak perlu menuliskan alamat lengkap dari link tersebut, atau disebut juga alamat relatif.

Seandainya kita ingin membuat link kepada file hello.html pada folder yang sama, kode HTMLnya akan menjadi :

Contoh penggunaan tag link <a>:

<!DOCTYPE html>
<html>
<head>
<title>Penggunaan Tag Link </title>
</head>
<body>
<h1>Belajar Tag Link</h1>
<p>Halaman HTML pertama saya adalah <a href="hello.html">Hello</a></p>
</body>
</html>

Cara Membuat link di HTML Relative

alamat absolute ditulis dengan lengkap, seperti http://www.duniailkom.com, atau jika kita merujuk kepada halaman tertentu, menjadi http://www.duniailkom.com/nama_halaman.html.

Alamat relatif maksudnya adalah relatif kepada file tempat kita memanggil link ini. Seandainya nama file adalah belajar_link.html, dan dalam folder yang sama terdapat halaman belajar_list.html, kita dapat menggunakan href=”belajar_list.html”.

Jika file tersebut berada di dalam folder lagi_belajar, maka alamat relatifnya menjadi href=”lagi_belajar/belajar_list.html. Namun bagaimana jika halaman tersebut berada 2 tingkat di luar folder saat ini? Kita dapat menggunakan href=”../../belajar_list.html, untuk naik 2 folder diatasnya.

Atribut penting dari lainnya tag link adalah target.

Secara default, setiap link yang kita tulis akan terbuka pada halaman itu juga, jika ingin halaman tersebut terbuka pada tab lain, tunakan atribut target=”_blank”.

Contoh penggunaan tag link <a> dengan atribut target:

<!DOCTYPE html>
<html>
<head>
<title>Penggunaan Tag Link </title>
</head>
<body>
<h1>Belajar Tag Link</h1>
<p>Saya sedang belajar html dari <a href="http://www.duniailkom.com" 
target=”_blank”>Duniailkom</a> dan akan terbuka pada tab baru</p>
</body>
</html>

Cara Membuat link di HTML 3Lebih lanjut tentang atribut target untuk tag link, akan kita pelajari pada Tutorial HTML Lanjutan

12 responses on “Belajar HTML Dasar Part 10: Cara Membuat link di HTML (tag a)

  1. h@fiz says:

    thank’s,,,,,sangat membantu

  2. rahmat says:

    bingungg… kk kl mau masukin alamat website gimana ?

    • Andre says:

      Maksudnya gimana mas rahmat? kalau ingin memasukkan alamat website, tinggal ganti isi dari elemen href saja dengan alamat situs yang diinginkan…

  3. Zahra says:

    Terimakasih ^^

  4. puji says:

    ya kebebetulan lagi nyari-nyari,,, nemu disini… makasih yah

  5. mksh telah berbagi ilmu dengan sesama,,,,

  6. nuraini says:

    kalau link yang dituju blog bisa ngga?

Tiada kesan tanpa pesan