28 April 2013,
 36

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 dengan bagian “http://www”. Penulisan seperti ini disebut juga dengan external link, yang berarti kita membuat link ke alamat lain di internet.

Namun jika halaman web yang kita tuju berada 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 kita adalah belajar_link.html, dan dalam folder yang sama terdapat halaman belajar_list.html, kita dapat menggunakan href=”belajar_list.html” untuk membuat link ke halaman 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 jendela yang sama (menimpa halaman web saat ini), jika ingin halaman tersebut terbuka pada tab lain, gunakan 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 3 

Selain digunakan untuk menghubungkan halaman HTML, Tag <a> juga bisa digunakan untuk dihubungkan ke bagian lain dari halaman yang sama, atau disebut Internal Link. Cara pembuatan internal link adalah dengan membuat link berisi atribut id dari tag lain. Untuk lebih jelasnya, akan kita bahas pada tutorial HTML Lanjutan: Cara Membuat Internal Link ke Bagian Lain Dokumen (atribut id).

36 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?

    • Andre says:

      Sangat bisa nur, tinggal mengganti alamat pada atribut href nya, misalnya menjadi href=”http://www.namablogsaya.com”.

      Semoga bisa membantu..:)

  7. Andre says:

    Membantu banget kaka …
    Makasih sebelumnya gak perlu bawa buku repot repot kalau gini hehe…..

  8. efandamar says:

    gan gimana bikin supaya tampil didalam ihalaman yang sama ,namun ukurannya kecil ,mohon dibalas ya soalny penting

    • Andre says:

      Kalau ingin membuat link yang terbuka dihalaman yang sama tetapi ukuran jendelanya lebih kecil (pop-up windows), harus menggunakan javascript. Penjelasan tentang ini cukup panjang, mungkin nanti akan saya bahas dalam tutorial tersendiri di bagian javascript.

      Namun pop-up windows ini tidak disarankan karena umumnya web browser akan mem-blok jendela tersebut (biasanya digunakan untuk menampilkan iklan).

  9. Toko Ayuan says:

    Terimakasih Gan Informasinya bagus,.. Akan Saya Cuba,.

  10. kodewebsite says:

    sipp gan, kunjung balik ya.barang kali kamu mau menuangkan / berbagi demo tutorial kamu :D

  11. Rizal says:

    nah saya mau tanya, klo buat link lebih jauh misal ke >>> http://www.duniailkom.com/belajar-html-cara-membuat-link-di-html-tag-a/
    gimana gan? thx sebelumnya

    • Andre says:

      Kalau untuk membuat link (seberapapun panjangnya), kita tinggal meletakkan alamat link tersebut ke atribut href, seperti contoh berikut ini:

      <a href=”http://www.duniailkom.com/link-yang-sangat-panjang-sehingga-membutuhkan-beberapa-baris/dan-masih-belum-berakhir.html”>Link Ke Sebuah Halaman</a>

      Semoga bisa membantu

  12. putriesti says:

    sangat membantu… thanks ya..

  13. vimax says:

    infonya sangat bermanfaat sekali gan, makasih.

  14. neng says:

    cara membuat link form….??

  15. Candra says:

    Langkah langkah membuat web itu bagaimana gan?
    Makasih . . .

    • Andre says:

      Untuk membuat website sederhana dan statis, candra hanya butuh mempelajari HTML dan sedikit CSS. Namun untuk membuat website modern dan dinamis, butuh tambahan bahasa pemograman seperti PHP dan JavaScript.

      Selanjutnya agar website bisa diakses di internet, kita perlu menyewa penyedia hosting dan membeli nama domian seperti http://www.duniailkom.com.

      Atau jika candra hanya butuh ‘web‘ yang langsung online tanpa harus mempelajari pemrograman, bisa menggunakan situs online blog seperti blogger atau wordpress.

  16. abdu says:

    gan, kalo ngelink ke file html lain tapi file tersebut di luar folder.

    misal :
    > html 1
    > html 2
    – file1
    – file 2

    jadi dalam file1 itu saya ingin link kan ke file2. gimana ya gan?
    itu.. file1 di folder html2, file 2 di folder html1, dan folder html2 ada di dalam folder html1

    Terima Kasih.

    • Andre says:

      Kira-kira model foldernya seperti ini y gan?

      > html1
      > file2.html
      —-> html2
      –—> file1.html

      Di dalam HTML, untuk membuat link ke folder ‘1 level diatas’, kita mengunakan format “../” (tanda titik dua kali dan sebuah garis miring). Jadi, di dalam contoh diatas, untuk membuat link dari file1 ke file2, adalah: <a href=”../file2.html”>Link ke file 2</a>.

      Apabila di atas folder tersebut masih ada folder lain, kita tinggal menambahkan tanda ../, seperti berikut ini: <a href=”../../../file2.html”>Link ke file 2</a>.

      Mudah2an bisa membantu :)

Leave a Reply

Your email address will not be published.

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>