28 April 2013,
 51

Link adalah tujuan kata Hypertext dari kepanjangan HTML. Dalam tutorial belajar HTML dasar kali ini kita akan membahas cara membuat link di HTML.


Cara Membuat link di HTML

Tujuan kata Hypertext dari HTML adalah membuat sebuah text yang ketika di-klik akan pindah ke halaman lainnya. HTML menggunakan tag <a>untuk keperluan ini.

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

Agar lebih jelas, kita akan lihat menggunakan contoh. 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


Alamat Absulut dan Alamat Relatif

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

Alamat absolut adalah penulisan alamat file dengan menyertakan nama website, seperti: href=”http://www.duniailkom.com/belajar_html.html”, atau href=”http://www.wikipedia.org”.

Namun jika kita ingin membuat link di dalam situs yang sama, maka tidak perlu menyebutkan alamat lengkap tersebut. Tetapi cukup mencantumkan alamat file yang dituju relatif kepada file saat ini. Jenis alamat ini disebut alamat relatif.

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

Contoh penggunaan tag link <a> untuk alamat relatif:

<!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 tag <a>: target

Atribut penting lainnya dari tag <a> adalah target. Atribut ini digunakan untuk menentukan apakah link yang dituju terbuka di jendela browser saat ini, atau terbuka di jendela baru.

Secara default, setiap link yang kita tulis akan terbuka pada jendela yang sama (menimpa halaman web saat ini). Tetapi apabila kita ingin halaman tersebut terbuka pada tab baru, 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

Jika kita men-klik link tersebut, maka halaman duniailkom.com akan terbuka di tab baru, dan tidak menimpa tab saat ini.

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).

Melanjutkan pembahasan mengenai tutorial belajar HTML dasar, pada tutorial selanjutnya kita akan membahas tentang Cara Menambahkan Gambar di HTML, menggunakan tag <img>.

51 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 :)

  17. Yoshiko says:

    Hallo gan.. saya lagi buat website dgn menggunakan dreamweaver bahasa pemrog html, kalo saya mau masukan berita yg terupdate otomatis gimana yah caranya? Kalo dblog biasanya pasang rss tpi kalo di dreamweaver bigung gan.. mohon bantuannya gan. Trims

    • Andre says:

      Setahu saya dreamweaver cuma sekedar editor untuk mempermudah membuat kode HTML, CSS, dll. File yang dihasilkan tidak akan berbeda dengan file text biasa yang dibuat menggunakan editor standar seperti Notepad. Untuk belajar pemograman web, dremaweaver tidak dianjurkan, karena tampilan visualnya akan mempersulit memahami kode-kode program yang digunakan.

      Untuk menampilkan RSS di website, memang agak repot kalau hanya menggunakan HTML. Sebagai cara alternatif, yoshiko bisa menggunakan aplikasi dari internet seperti http://rss.bloople.net/ atau http://feed2js.org/. Silahkan input alamat RSS yang ingin ditampilkan kedalam situs tersebut. Kedua situs itu akan menghasilkan kode JavaScript untuk selanjutnya dicopy kedalam file HTML.

      Mudah2an bisa membantu :)

  18. indra says:

    Gan mau tanya…
    Kalo mau ngelinkkan file di luar folder gimana ya…
    Contoh

    -Folder B–file2.php
    Folder A -file3.php
    -Folder C –file1.php
    Bagaimana cara melingkan file1.php ke file3.php gan.. Terimakasih…

  19. fay says:

    Terima kasih gan, ane udah coba praktekin

  20. css itu sendiri fungsinya untuk apa boss… di template blog banyak sekali ditemukan, apa perbedaan antara css dan html
    makasih ditunggu jawabannya

    • Andre says:

      Jawabannya bisa panjang gan, tp intinya HTML itu digunakan untuk membuat struktur halaman web, sedangkan CSS digunakan untuk mendesain halaman web agar tampak lebih menarik.

      Keduanya digunakan secara bersama-sama untuk membuat website, namun dipisah sesuai dengan fungsi masing-masing.

  21. risma says:

    bagus .. saya baru belajar , dan ini membantu

  22. jaenal says:

    Ane ingin belajar supaya website kita ranknya tinggi gimana yah?

    • Andre says:

      Rank apa ni gan? google rank atau alexa rank? Kalau saya sih yang penting membuat konten yang original dan bermanfaat. Urusan traffic dan rank nanti bakalan datang sendiri selama website kita bermanfaat.. :)

  23. Rangga Saputra says:

    Maaf kak, mw tanya,

    misalkan saya ingin membuat Halaman Login pada HTML, tetapi permasalahannya misalkan kalau saya enter atau klik ok terus dia masuk ke halaman baru, itu gmna yah kak… tolong bantu donk kak??

    • Andre says:

      Untuk membuat halaman login/register, kita menggunakan form HTML. Pada saat form di submit (klik tombol Ok), secara otomatis memang akan pindah kehalaman baru dimana form itu akan diproses. Proses login ini membutuhkan gabungan HTML dan PHP.

      Untuk membuat form, kita menggunakan HTML dalam merancang tampilannya, seperti di dalam tutorial belajar form dasar HTML. Sedangkan penanganan proses form, bisa menggunakan PHP seperti yang dibahas pada tutorial PHP untuk memproses form.

      Jika rangga kurang memahami HTML dan PHP, di duniailkom sudah tersedia tutorial HTML dan PHP dari awal. Silahkan dipelajari :)

  24. Rangga Saputra says:

    Terima kasih ya kak, aku mw mengetahui ilmu komputer jadi aku harus selalu banyak belajar lagi…. dan bertanya bagaimana solusi sewaktu ada problem pada saat membuat program…

    • Andre says:

      Silahkan rangga… Dunia ilmu komputer memang sangat menarik dan juga menantang karena selalu berkembang dan berubah dari waktu ke waktu. Mari belajar bersama disini :)

  25. marlina says:

    Terimakasih artikelnya sangat bermanfaat, salam sukses…

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>