Anda tentunya sudah tidak asing lagi dengan istilah “link” karena di berbagai website Anda bisa menemukan link baik berupa teks ataupun gambar. Yang menjadi pertanyaan adalah bagaimana cara membuat link di suatu dokumen HTML ? Untuk menjawab pertanyaan tersebut, pada artikel ini saya akan menjelaskan tentang bagaimana memasukkan link ke dokumen HTML dan hal – hal lainnya yang berkaitan dengan link. Show
Link digunakan sebagai penghubung antara satu halaman dengan halaman yang lainnya. Lebih jelasnya, penggunaan link pada HTML yaitu untuk menghubungkan dokumen HTML tersebut ke halaman lain yang merupakan alamat tujuan. Link merupakan teks atau gambar yang terkait dengan suatu alamat tertentu. Agar Anda lebih memahami materi “Link”, simaklah penjelasan dibawah ini: a. Penggunaan tag <a>Penggunaan link pada dokumen HTML ditandai dengan penggunaan elemen anchor yaitu tag berpasangan <a> …… </a>. Pada browser, link umumnya ditandai dengan teks berwarna biru yang memiliki garis bawah. Jika Anda mengklik teks atau gambar yang mengandung link, maka path dari link tersebut akan dibuka baik di tab itu sendiri ataupun di tab baru. Adapun atribut yang ada pada tag <a> adalah sebagai berikut:
Berikut contoh sederhana penggunaan link di HTML :
Setelah Anda menjalankan kode HTML diatas di browser maka akan tampil seperti gambar dibawah ini: b. Atribut idAtribut href pada tag <a> digunakan untuk menyatakan suatu file tujuan. Path tujuan HTML yang berada di dalam tag <a> dapat diikuti dengan menggunakan atribut id yang digunakan untuk membawa pembaca ke suatu bagian tertentu dalam dokumen. Agar lebih mudah dimengerti, coba tulis “#tentang” pada atribut href di link dan tulis atribut id=”tentang” pada tag <p>. Untuk contoh kode penulisannya bisa anda lihat dibawah ini :
Hasilnya di browser akan seperti ini: Saya sengaja menggunakan banyak tag <br> untuk mempermudah Anda memahami fungsi dari atribut ini. Ketika Anda klik link “Tentang”, Anda akan langsung diarahkan ke bagian kalimat ini “Nesabamedia.com merupakan seputar tutorial komputer………”. c. Atribut titleSelanjutnya, jika Anda menggunakan atribut title, maka akan ditampilkan isi title tersebut sebagai tooltip yang akan muncul jika Anda mengarahkan kursor pada linknya. Berikut contoh penulisannya di HTML :
Setelah anda menjalankan kode diatas, anda akan melihat tampilan seperti dibawah ini ketika mengarahkan kursor di link Biografi: d. Perbedaan external link dan local linkExternal link digunakan untuk membuka web page yang berada pada website lain (berbeda domain), biasanya diikuti dengan penulisan alamat path tujuan secara lengkap dengan bagian “http://”. Berikut contoh penulisan dan penggunaannya di HTML :
Setelah kode HTML tersebut dijalankan di browser, maka tampilannya akan seperti dibawah ini : Berbeda dengan local link digunakan untuk membuka web page pada website atau document root yang sama. Misalkan alamat website anda www.nesabamedia.com dan pada website tersebut terdapat halaman bernama belajarpiano.html. Jika anda ingin membuat link yang menuju halaman tersebut, maka anda tidak perlu menulis urlnya secara lengkap seperti www.nesabamedia.com/belajarpiano.html pada atribut href, cukup menuliskan belajarpiano.html saja. Contoh penulisannya seperti dibawah ini:
Contoh lainnya seperti ini, misalkan kita mempunyai folder bernama BelajarHTML. Di dalam folder tersebut terdapat 2 file html dan 2 folder yang masing-masing mempunyai 1 file html. Lebih jelasnya, struktur foldernya seperti ini: Jadi begini, anggap saja saat ini saya sedang mengedit file yang bernama webku.html dan saya ingin membuat link yang mengarah ke halaman kisahku.html, maka saya cukup menuliskan kode HTMLnya seperti ini:
Anggap saya masih sedang mengedit file webku.html tapi kali ini saya ingin membuat link yang mengarah ke halaman karirku.html, maka kode HTMLnya menjadi seperti ini:
Masih mengedit file webku.html. Jika saya ingin membuat link yang mengarah ke halaman posting.html, maka kode HTMLnya seperti ini:
Dengan menggunakan local link, anda tidak perlu menulis secara lengkap alamat halaman yang ingin dituju. Menjadikan gambar sebagai linkAda kalanya kita ingin menjadikan gambar sebagai link untuk kebutuhan tertentu seperti membuat tombol yang mengarah ke halaman lain, dimana tombol tersebut sejatinya terbuat dari gambar. Untuk contoh kode HTMLnya bisa Anda lihat dibawah ini:
Setelah Anda menjalankan kode HTML diatas di browser, maka tampilannya seperti dibawah ini: Ketika anda klik gambar tombol, maka anda akan diarahkan ke halaman posting.html. Oh ya, untuk penulisan <img scr=”alamatgambar”…. pastikan benar ya, kalau salah gambarnya tidak akan muncul. Pada kode HTML diatas, file tombol.jpg saya letakkan dalam satu folder dengan file htmlnya, makanya saya hanya menulis <img src=”tombol.jpg”…. tidak perlu menuliskan alamat lengkap file gambarnya. Dan untuk file htmlnya saya beri nama gambar.html sedangkan file gambarnya saya beri nama tombol. Jika anda memahami konsep local link yang sudah saya bahas sebelumnya, anda tidak akan bingung pada step ini. d. Atribut target pada linkAtribut target digunakan untuk menentukan atau menetapkan bagaimana suatu path tujuan ditampilkan setelah link diklik seperti apakah dibuka pada tab/ jendela saat ini atau pada tab/ jendela baru. Berikut nilai pada atribut target yang dapat Anda gunakan :
Perlu diingat, pada HTML5, penggunaan “_parent” dan “_top” sudah deprecated karena website sekarang sudah tidak ditulis berdasarkan frame atau frameset. Selain itu kedua atribut ini jarang sekali digunakan. Jika Anda tidak menentukan atribut target pada link, maka secara default web page tujuan akan dibuka di tab atau jendela yang saat itu dibuka (“_self”). Berikut contoh kode penulisan dan penggunaan atribut target=”_blank” di HTML :
Setelah Anda menjalankan kode diatas di browser maka akan tampil seperti gambar dibawah ini: Itulah tutorial cara membuat link di HTML beserta penjelasan mengenai tag dan atribut apa saja yang berhubungan dengan link di HTML. Materi selanjutnya yang perlu anda
pelajari adalah cara menambahkan gambar di HTML. Editor: Muchammad Zakaria “If you’re doing your best, you won’t have any time to worry about failure.” H. Jackson Brown, Jr. Apa tag HTML yang benar untuk membuat hyperlink?Cara Membuat Link di HTML
Link pada HTML dapa dibuat dengan tag <a> , kemudian tag ini harus memiliki atribut href untuk menentukan alamat URL tujuan dari link. Link akan ditampilkan dengan warna biru dan garis bawah. Ini adalah style standar dari setiap browser. Tentu saja ini bisa kita ubah-ubah sesusi selera.
Apa itu tag hyperlink?Apa itu Hyperlink atau Anchor Tag? Hyperlink merupakan sebuah teks atau tombol di dalam dokumen HTML yang kalau kita klik, ia akan membawa kita menuju halaman lain. Jadi kalau kita misalkan mengklik menu Home, browser akan membawa kita ke halaman home.
Tag A digunakan untuk apa?Tag <a> adalah tag untuk membuat link. Tag ini mewajibkan menambahkan atribut href untuk menyatakan halaman tujuan dari link. Jumlah atribut pada elemen bisa lebih dari satu. Atribut src adalah atribut khusus untuk tag <img> yang fungsinya untuk menentukan gambar yang akan ditampilkan.
Manakah yang termasuk ke dalam atribut hyperlink adalah?atribut yang digunakan hyperlink atau yang berada di dalam tag <a> yaitu, atribut href, target & rel, fungsi atribut ini untuk mengarahkan ke halaman website yang dituju.
|