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="https://www.duniailkom.com">Duniailkom</a></p> </body> </html>
Alamat Absolute 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="https://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>
Alamat absolute ditulis dengan lengkap, seperti https://www.duniailkom.com, atau jika kita merujuk kepada halaman tertentu, menjadi https://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="https://www.duniailkom.com" target="_blank">Duniailkom</a> dan akan terbuka pada tab baru</p> </body> </html>
Jika kita men-klik link tersebut, maka halaman duniailkom.com akan terbuka di tab baru, dan tidak menimpa tab saat ini.
Melanjutkan pembahasan mengenai tutorial belajar HTML dasar, pada tutorial selanjutnya kita akan membahas tentang Cara Menambahkan Gambar di HTML, menggunakan tag <img>.
joss kakacih
sippp
Terima kasih ya om, saya belajar banyak dari website ini hehe. sangat membantu untuk saya yang baru mulai belajar html walaupun telat sepertinya hehe. terima kasih om
Siip, semoga bisa bermanfaat :)
pak andre ada kendala
ko duniailkom ga bisa di klik yaa ?
ada solusi ?
padahal bener saya sourcenya hehe
Yakin g ada yang salah ketik? Soanlya tutorial ini sudah dibaca ribuan orang dan semuanya bisa jalan :)
Hehehe
5 menit aku inget2 cara bikin link ga ketemu-ketemu. Akhirnya baca artikel ini aja deh. makasih gann udah mengembalikan memori lamaku tentang link.
Siip, semoga bisa bermanfaat..
tuh kan inget lagi… hehehe
thanks om
Terimakasih ilmunya om, sekarang ini sudah banyak yang tidak paham dengan code html, karena sadah ada wordpress yang lebih mudah. Termasuk saya. Tapi ilmu seperti ini harus di pelajari.. Sekali lagi, terimaksih ya ilmunya. Semoga bermanfaat dan berkah..
Sama2 :)
Untuk sekedar menggunakan wordpress, memang tidak perlu paham coding sama sekali. Tapi jika pengen utak-atik tampilannya, memang harus paham web programming terutama HTML dan CSS.
ini menggunakan tag title struktur html keseluruhan
kalau membuat anchor text yg bukan seperti di atas, gimana om?
krn yg saya coba di atas gak bisa. apa ada kode lain?
Untuk membuat link di HTML memang cuma pakai tag <a>. Jika tidak bisa, besar kemungkinan tag tersebut di proteksi. Ini adalah hal yang umum untuk kontent blog seperti kolom komentar agar tidak jadi ajang spam.
Ternyata jika menggunakan browser internet explorer 8 tidak bisa membuka link ke tab baru, melainkan membuka link ke browser baru. Ketika _blank digunakan, halaman yg akan tampil terbuka di browser ie baru. Bukan di tab baru dalam 1 browser yg sama. Sedangkan untuk browser mozila dapat bekerja normal dengan menampilkan halaman di tab baru dalam 1 browser yg sama.
Salam.
Makasih gan… dpt ilmu baru saya…
tanya mas, kalau halaman web sudah banyak dan ingin menambah link bagaimana cara melakukannya supaya tidak satu persatu halaman?
Note:halaman di buat dengan html
Kalau dibuat pakai HTML, terpaksa memang mesti diubah satu persatu.
Mau nanya mas, kalau untuk membuat game dengan format html5, aplikasi apa saja yang harus kita miliki?
Skill yang dibutuhkan adalah HTML, CSS dan JavaScript. Di JavaScript ini yang harus dipelajari secara mendalam, termasuk framework seperti jQuery dan HTML5 API.
mantap mas…
tolong ditambah lagi tutorial dasar & koleksi e-book nya ya…
Siap…
setiap saya mau buat anchor text selalu ngintip di blog ini :)
Terima kasih ya
selamat sore mas,
Saya ingin bertanya, kalau saya membuat link dn apabila diklik link tersebut akan muncul kalimat dibawahnya.. itu gimana ya mas..
sedangkan kl buka menu tersebut hanya ada kalimat link tidak ada kalimat lain di bawah nya.. kalau di klik baru muncul kalimat lain di bawah link tersebut.
Mohon pencerahannya.
Tq
Untuk membuat efek interaktif seperti ini, sudah bagiannya JavaScript. Contoh sederhananya bisa kesini: https://www.duniailkom.com/cara-menampilkan-hasil-form-html-dengan-javascript/
Apakah ini berlaku untuk platform bloger mas?
Saya agak ragu karena blogger memang membatasi beberapa kode program. Tapi bisa saja di coba.
bang gimana caranya buka link yang ada di tag <a> dengan cara mengklik gambar
Caranya dengan menempatkan tag <img> di dalam tag <a>, seperti berikut:
<a href="https://www.duniailkom.com"><img src="https://www.duniailkom.com/wp-content/uploads/2015/11/DuniaIlkom_logo.png"></a>
Nanti tinggal ganti isi atribut href untuk link dan isi atribut src untuk alamat gambar.
makasih mas saya sangat terbantu,ini website memang top dah,responnya sangat baik,semiga kedepannya lebih bermanfaat.
Mkasih banyak ilmu nya gan. Sangat bermanfaat bagi saya yg ingin belajar. Mantafff
bang.. sori masih newbie soalnya… kalo kita masukin tag a ke tag image misalnya kita pencet picture langsung menuju link yg udh kita tulis.. bisa gk bang??
Yup bisa, dan ini sangat sering dipakai. Tapi di tulis sebagai tag <img> di dalam tag <a>, misalnya:
<a href="https://www.duniailkom.com"><img src="logo.jpg"></a>
pak mau tanya kalau membuat path hyperlink dari html tapi mengarahnya ke Excel atau ppt gimana yah?
Kalau yang diinginkan ketika link di klik, langsung terbuka excel atau ppt, setahu saya tidak bisa. Yang bisa hanya me-link ke file .xls dan .ppt, yang ketika di klik yang akan tampil menu download. Contohnya seperti ini:
<a href="tugas_kuliah.ppt">Tugas Kuliah</a>
Ini baru akan berjalan jika file tugas_kuliah.ppt ada di folder yang sama dengan file HTML.
Ternyata bisa pak, tapi harus menggunakan IE (11), dia bisa langsung masuk ke folder atau file yang kita inginkan seperti ppt, words atau excel.
Siip, itu sebenarnya lebih ke pengaturan web browser. Hasilnya bisa beda2 antar web browser tergantung web browsernya di setting seperti apa.
Sama seperti file pdf, jika di klik ada yang tampil menu download, ada juga yang langsung menampilkan file pdf di web browser (apabila di komputernya sudah terinstall aplikasi pdf reader).
Aaaaa seneng banget nemu nih website, thanks yaa mas saya belajar banyak dari sini.
Siip, semoga bisa bermanfaat…
cara membuat link menjadi button gimana bang?
Cukup banyak property yang harus diubah, misalnya bisa seperti ini:
a:link, a:visited {
background-color: #f44336;
color: white;
padding: 14px 25px;
text-align: center;
text-decoration: none;
display: inline-block;
}
a:hover, a:active {
background-color: red;
}
perlu beberapa jam nongkrong diblog ini untuk bisa sedikit memahami,,,,terimakasih telah berbagi
salam kenal mas andre..
terima kasih sudah membagikan ilmunya..
apa bisa kalau buat link di excel kita arahkan ke website dengan kode html?
Salam kenal juga… kalau untuk membuat link di excel, bisa pakai menu yang ada di excel saja. Bisa coba cari menu "Insert Link" atau "Insert Hyperlink".
Min jika seseorang yg mudah lupa apakah bisa belajar html?:v, sedangkan html itu banyak sekali teks yg harus di hapal
G masalah… programming ini lebih ke pemahaman, bukan hapalan. Dan HTML ini sebenarnya juga masih sedikit jika dibandingkan materi web programming lain seperti CSS, PHP dan JavaScript.
Saya sendiri juga masih sering 'nyontek' struktur penulisan HTML (g hapal semua). Tapi karena sudah paham fungsi2nya, tinggal copas sana sini saja. Yang tidak dianjurkan itu asal copas tapi tidak tau itu fungsi kodenya untuk apa.
Min hebat banget bikin blognya , bermanfaat banget ilmunya…lengkap isinya, kuncinya gmn min buat blog begini, terinspirasi banget, min bikin untuk tes cpns min dong , pasti banyak yang cari kalo lagi seleksi cpns, bermanfaat banget ini
Hehe, terimakasih… Tapi kebetulan saya juga tidak punya ilmu di tes CPNS, jadi juga bingung apa yang mau di share untuk bidang tersebut.
makasih akan ilmunya,sangat membantu untuk pelajaran baru buat saya akan bikin link tex
Thanks informasinya. Usefull.
Kak mau nanya, kalau mau mencet link terus opennya bukan new tab tapi new window secara otomatis dari html langsung, itu berarti ada perubahan gak ya di atribut target ?.
Kalau pengen menampilkan di jendela baru (new window), itu biasanya di buat menggunakan JavaScript. Kalau dari tag <a>, hampir semua web browser akan membukanya di tab baru, bukan jendela baru. Teknik ini biasa dipakai untuk iklan2 pop up yang terus terang akan sangat mengganggu user.
mas kok saya bikin tag anchor udah sama tapi itu tulisan ga jadi link gimana ya cara ngatasinnya?
mantap tutor nya .. mudah di pahami.. sukses selalu
Boleh nanya gan..saya mau buat link dari total harga gimana yah…jadi rencana total harga saya mau buat link dari totalnya aja saya mau simpan posisinya di atas..padahal total stok sudah ada di bawah….nah rencana saya taruh juga di atas dengan tabel besar hanya jumlah nya saja …bisa nggak di buat dengan link jadi isi dari total harga di link ke tabel yang lain begitu..
makasi tips nya gan, saya baru mulai bangun blogspot, jadi sangat terbantu
mau tanya kalo linknya agar lebih kelihatan seperti tombol gimana caranya?
ada yang suudah nanya ka diatas
Maaf mas andre saya mau tanya, alamat absolut dan relatif itu apa ya?
Boleh dicontohkan yang lebih mudah lagi mas?
Saya belum paham…
Alamat absolut seperti ini ya:
<a href="https://www.duniailkom.com">Duniailkom</a>
Berarti kita membuat link untuk menuju ke alamat tersebut ya mas?
Terus alamat relatif seperti ini ya:
href="../../belajar_list.html"
Berarti kita mau menuju kemana ya mas?
Itu kan ada 3 bagian ../../belajar_list.html
Saya masih bingung?
Terima kasih atas jawabannya mas…
Saya mau tanya mas, Saya masih bingung tentang alamat absolut dan relatif…
Boleh dicontohkan yang lebih mudah mas?
Saya mau tanya mas, Saya masih bingung tentang alamat absolut dan relatif…
Boleh dicontohkan yang lebih mudah mas?
https://www.duniailkom.com
Berarti ini alamat absolut ya?
https://www.duniailkom.com/nama_halaman/nama_halaman
Berarti ini alamat relatif ya?
Alamat absolut menyertakan nama domain, misalnya href="https://www.duniailkom.com/belajar.html", sedangkan alamat relatif tidak menyertakan domain seperti href="belajar.html"