Penulisan tag html yang benar untuk digunakan dalam membuat link relatif adalah

Table of Contents Show

Mengenal Jenis-Jenis Link Pada HTML
Contoh Penerapan Internal Link
Contoh Penerapan Eksternal Link
Bermacam Atribut Untuk Link
Atribut Target
Atribut Title
Apa Lagi Fungsi dari Link?
Membuat Link Buntu
Membuat Link Anchor
Membuat Link Dengan Gambar
Membuat Link Untuk Memanggil Fungsi Javascript
Membuat Link Untuk Mengirim Email
Membuat Link Untuk Mengunduh File
Mengubah Style Default dari Link
Video yang berhubungan

Menurut buka-rahasia.blogspot.com ,

HTML link atau hyperlink, adalah kata, sekumpulan kata, ataupun gambar yang apabila di-klik akan menuju ke dokumen/halaman lain atau bagian lain dari dokumen/halaman yang sama.

Link di dalam dunia web tentu saja selalu kita jumpai dan sering kita fungsikan.

Kali ini saya akan menjelaskan mengenai 3 jenis link pada html , yakni :

Dibuat apabila anda membuat suatu link pada page anda ke page lain pada komputer yang sama, tidak memerlukan menggunakan alamat internet yang lengkap. Jika kedua page pada direktori yang sama, anda dapat menuliskan nama file html sebagai berikut:

<title>Link Relatif</title>

silahkan klik <a href="akronim.html">di sini</a>.

Dibuat apabila anda membuat link ke page web lain yang berada pada web site lain di internet. Dalam hal ini anda harus menuliskan alamat internet secara lengkap. Berikut adalah script nya :

<title>Link Absolut</title>

Anda ingin mengunjungi situs lain saya. Silahkan klik <a href="http://abcdanis.blogsspot.com">di sini</a>.

3. Link ke Bagian Lain dalam Dokumen

Link jenis ini dibuat apabila untuk dokumen yang panjang sekali, sehingga apabila di tampilkan dalam browser web akan mengharuskan kita melakukan scroll layar berulang-ulang. Navigasi untuk penelusuran dokumen dapat dimudahkan dengan membuat link antarbagian, dengan menandai setiap bagian tersebut dengan memberinya nama. Sehingga pada beberapa tempat di dalam dokumen akan ada bagian yang bernama, dan dibagian lainnya dapat diletakkan link untuk menuju bagian-bagian tersebut.

<title>Penggunaan Link Dalam Dokumen</title>

Bab 4 ini menunjukkan tujuan dari link dalam satu halaman.</p>

Bab 5 adalah menjelaskan bla bla bla. </p>

<a href="#top">Kembali ke atas</a>

Mailto digunakan untuk membuat link pada suatu pesan mail (tidak akan bisa bekerja jika mail client tidak terpasang). Script nya adalah sebagai berikut :

<title>Contoh Penggunaan Link Mailto</title>

Anda ingin mengirim tugas pemrograman web bisa melalui <a href="mailto:">email berikut</a>.

Estimasi Waktu Baca: 8 menit

Hyperlink atau link sering digunakan untuk menghubungkan suatu halaman website ke halaman yang lain. Elemen yang menjadi link nantinya dapat diklik, yang mana selanjutnya akan mengarahkan kita ke halaman yang sudah ditentukan.

Untuk membuat link di HTML kita perlu yang namanya tag <a> singkatan dari anchor.

Tag <a> mempunyai atribut khusus yaitu href. Atribut ini digunakan untuk mendefinisikan alamat url yang nantinya akan dituju. Kepanjangan dari href adalah Hypertext Reference.

<!DOCTYPE html> <html> <head> <title>Halaman Depan</title> </head> <body> <h1>Selamat Datang!</h1> <a href="tentang.html">Tentang</a> </body> </html>

Keluaran:

Link yang dibuat akan ditampilkan secara default berwarna biru dan bergaris bawah. Standar ini berlaku di semua browser. Sedangkan jika link sudah pernah diakses maka akan berubah ke warna ungu.

Apakah gaya (style) default dari link bisa diubah?

Bisa, tapi perlu dengan sentuhan CSS yang akan dipraktikan di akhir artikel.

Pastikan ketika menentukan halaman tujuan dari link, file atau dokumen yang dimaksudkan ada. Bila tidak ada akan menimbulkan error:

Untuk menangani masalah di atas maka kita harus buat file dengan nama sesuai dengan nilai yang diberikan pada atribut href. Misal, tentang.html.

<!DOCTYPE html> <html> <head> <title>Halaman Tentang</title> </head> <body> <h1>Tentang Website</h1> <p>Website ini dibuat untuk keperluan edukasi</p> </body> </html>

Pastikan file tentang.html disimpan pada folder yang sama dengan file index.html. Kemudian jalankan.

Mengenal Jenis-Jenis Link Pada HTML

Mengapa alamat URL pada atribut href di atas dinamai dengan nama filenya?

Bukankah kita harus menulis alamat URL-nya secara lengkap menggunakan http://…….?

Hal ini karena pada contoh kasus di atas halaman tentang.html merupakan internal link, terlebih lagi file tentang.html masih dalam satu folder dengan file index.html.

Untuk penulisan alamat secara lengkap ini biasa juga disebut dengan penulisan alamat absolut. Yaitu penulisan suatu alamat file dengan disertai nama websitenya.

Sedangkan untuk penulisan alamat pada kasus tentang.html biasa dikenal dengan alamat relatif.

Dalam HTML yang namanya link terbagi atas dua jenis yaitu internal link dan eksternal link.

Apa itu internal link dan eksternal link?

Internal link merupakan jenis link yang mengarahkan kita ke halaman yang masih dalam domain atau website itu sendiri.

Contohnya, pada saat ini kita buka halaman tutorial html dan kemudian berpindah ke halaman tutorial css yang masih tetap berada dalam satu website.

Eksternal link merupakan jenis link yang mengarahkan kita ke halaman yang dimiliki oleh domain atau website lain.

Contohnya, kita ingin berbagi halaman tutorial html dari website ini ke facebook, yang mana saat link berbagi di klik maka akan mengarahkan kita ke facebook.

Sederhananya, bila link tersebut masih membuka website itu sendiri maka disebut internal. Sedangkan bila yang dibuka sudah ranah website lain berarti eksternal.

Nah sekarang kita coba praktikan melalui kode HTML supaya lebih paham.

Contoh Penerapan Internal Link

Edit file index.html sebelumnya dengan isi di dalamnya sebagai berikut.

Kemudian buat file tentang.html dan kontak.html dengan isi masing-masing sebagai berikut:

File tentang.html

File kontak.html

<!DOCTYPE html> <html> <head> <title>Kontak</title> </head> <body> <h1>Kontak Website</h1> <p>Pilih Menu</p> <a href="index.html">Beranda</a> || <a href="tentang.html">Tentang</a> || <a href="kontak.html">Kontak</a> <p> No. Telp: 0123456789<br> Email: [email protected] Alamat: Surabaya </p> </body> </html>

Pastikan semua file berada dalam satu folder.

Jika sudah, selanjutnya jalankan.

Contoh Penerapan Eksternal Link

Sudah dijelaskan sebelumnya bahwasanya kedua jenis link ini memiliki perbedaan pada alamat URL yang dituju. Suatu link dikatakan eksternal bila URL yang dituju mengarah ke website atau domain berbeda dari sebelumnya.

Untuk itu coba buka kembali file tentang.html dan edit isi di dalamnya menjadi seperti ini:

<!DOCTYPE html> <html> <head> <title>Tentang</title> </head> <body> <h1>Tentang Website</h1> <p>Pilih Menu</p> <a href="index.html">Beranda</a> || <a href="tentang.html">Tentang</a> || <a href="kontak.html">Kontak</a> <p>Website ini dibuat untuk keperluan edukasi dan berbagi proyek open source. Untuk mendownload proyek-proyek open source dari website kopiding.in, ikuti link di bawah ini</p> <a href="https://github.com/Kopidingin" target="_blank">GitHub Kopiding.in</a> </body> </html>

Pada percobaan di atas kita akan diarahkan menuju halaman website github kopiding.in.

Berbeda dengan contoh sebelum-sebelumnya, untuk contoh kali ini link yang dituju dibuka dengan menambah tab baru.

Hal ini bisa dilakukan dengan penggunaan fungsi atribut target.

Apa itu atribut target?

Untuk mengetahui lebih jelasnya simak pembahasan selanjutnya.

Bermacam Atribut Untuk Link

Selain menggunakan atribut khusus seperti href. Tag <a> nyatanya dapat bekerja dengan bermacam atribut lain di bawah ini:

Atribut Target

Atribut target digunakan untuk menentukan target dimana link akan dibuka, ada bermacam value atau nilai untuk atribut ini seperti:

_blank – membuka link pada tab baru
_self – membuka link pada halaman itu sendiri. Nilai ini digunakan sebagai nilai default atribut target.
_top – membuka link dengan menuju bagian paling atas pada halaman
_parent – membuka link pada frame induk
nama-frame – membuka link pada <iframe> dengan nama tertentu.

Atribut Title

Atribut title digunakan untuk membuat tooltips. Tooltips merupakan informasi tambahan yang akan ditampilkan saat pointer menyentuh link.

Tambahkan atribut title di setiap link pada halaman index.html.

<!DOCTYPE html> <html> <head> <title>Beranda</title> </head> <body> <h1>Selamat Datang di Beranda!</h1> <p>Pilih Menu</p> <a href="index.html" title="Halaman Beranda Website">Beranda</a> || <a href="tentang.html" title="Halaman Tentang Website">Tentang</a> || <a href="kontak.html" title="Halaman Kontak Website">Kontak</a> </body> </html>

Hasil:

Tidak hanya pada link saja, tooltip juga dapat ditampilkan pada beberapa elemen lain seperti paragraf, heading, dan lain sebagainya asalkan elemen-elemen tersebut diberi atribut title.

Apa Lagi Fungsi dari Link?

Fungsi link tidak hanya digunakan untuk menghubungkan antar halaman website saja. Lebih dari itu link memiliki fungsi lain yang nantinya akan berguna saat kita membuat suatu website.

Membuat Link Buntu

Link buntu merupakan link yang tidak akan mengarah kemanapun, artinya ketika link ini diklik maka ia tidak akan melakukan reaksi apapun.

Link buntu sering digunakan hanya sebagai sampel atau placeholder saja.

Untuk membuatnya kita hanya perlu menambahkan nilai berupa tanda pagar (#) di atribut href

<!DOCTYPE html> <html> <head> <title>Beranda</title> </head> <body> <h1>Selamat Datang di Beranda!</h1> <p>Pilih Menu</p> <a href="#">Beranda</a> || <a href="#">Tentang</a> || <a href="#">Kontak</a> </body> </html>

Keluaran:

Sebenarnya tanda pagar ini merupakan anchor atau jangkar. Kegunaan anchor ini akan membawa kita ke lokasi tertentu dalam dokumen HTML tersebut. Namun bila hanya didefinisikan tanda pagar saja, maka ia tidak akan mengarahkan kita kemana-mana.

Membuat Link Anchor

Sudah disinggung sedikit sebelumnya bahwa link anchor adalah link yang akan membawa kita ke lokasi tertentu pada dokumen HTML itu sendiri. Dinamakan link ancor atau jangkar karena cara kerjanya persis dengan jangkar kapal. Ketika jangkar dikaitkan otomatis kita akan ikut terbawa ke arah sana.

Untuk membuat link jangkar ini kita memerlukan tanda pagar (#) ditambah nilai dari atribut id untuk menetapkan elemen mana yang nantinya akan dituju.

<!DOCTYPE html> <html> <head> <title>Beranda</title> </head> <body> <h1>Selamat Datang di Beranda!</h1> <p>Pilih Menu</p> <a href="index.html">Beranda</a> || <a href="tentang.html">Tentang</a> || <a href="kontak.html">Kontak</a> <h2>Daftar Isi</h2> <ol> <li><a href="#sub-1">Mengenal Link di HTML</a></li> <li><a href="#sub-2">Membuat Link di HTML</a></li> <li><a href="#sub-3">Mengenal Jenis-Jenis Link Pada HTML</a></li> </ol> <h2 id="sub-1">Mengenal Link di HTML</h2> <p> Hyperlink atau link merupakan elemen HTML yang sering digunakan untuk menghubungkan suatu halaman website ke halaman yang lain. Elemen yang menjadi link atau tautan nantinya dapat diklik dan selanjutnya akan mengarahkan kita ke halaman yang sudah ditentukan. </p> <h2 id="sub-2">Membuat Link di HTML</h2> <p> Untuk membuat link di HTML kita perlu yang namanya tag <a> singkatan dari anchor. Tag <a> mempunyai atribut khusus yaitu href. Atribut ini digunakan untuk mendefinisikan alamat yang akan dituju. Kepanjangan dari href adalah Hypertext Reference. </p> <h2 id="sub-3">Mengenal Jenis-Jenis Link Pada HTML</h2> <p> Mengapa alamat URL pada atribut href di atas dinamai dengan nama filenya? Bukankah kita harus menulis alamat URL-nya secara lengkap menggunakan http://.......? <br> Hal ini karena pada contoh kasus di atas halaman tentang.html merupakan internal link terlebih lagi file tentang.html masih dalam satu folder dengan file tautan.html.<br> Penulisan alamat secara lengkap ini biasa juga disebut dengan penulisan alamat absolut. Yaitu penulisan suatu alamat file dengan disertai nama websitenya. </p> <a href="#top">Kembali ke atas</a> </body> </html>

Keluaran:

Membuat Link Dengan Gambar

Link tidak hanya bisa dikaitkan dengan teks, tapi ia juga dapat dikaitkan dengan gambar.

Tujuannya untuk menginformasikan kepada pengguna kemana selanjutnya link tersebut akan mengarah.

Untuk contoh penerapan, coba edit file tentang.html menjadi seperti berikut:

<!DOCTYPE html> <html> <head> <title>Tentang</title> </head> <body> <h1>Tentang Website</h1> <p>Pilih Menu</p> <a href="index.html">Beranda</a> || <a href="tentang.html">Tentang</a> || <a href="kontak.html">Kontak</a> <p>Website ini dibuat untuk keperluan edukasi dan berbagi proyek open source. Untuk mendownload proyek-proyek open source dari website kopiding.in, klik gambar di bawah ini</p> <a href="https://github.com/Kopidingin" target="_blank" title="Link GitHub Kopiding.in"><img src="github-icon.svg" width="100px" height="100px"></a> </body> </html>

Pada kode di atas kita masukkan gambar logo github dengan menggunakan tag <img> yang selanjutnya diapit oleh elemen <a>.

Hasilnya:

Membuat Link Untuk Memanggil Fungsi Javascript

Link juga dapat digunakan untuk memanggil fungsi javascript. Pemanggilan fungsi ini biasanya dilakukan dengan atribut event seperti onclick, onmouseover, onmouseout, dan lain-lain.

<!DOCTYPE html> <html> <head> <title>Belajar HTML 5</title> </head> <body> <p> <a href="#" onclick="alert('Selamat Datang')">Klik di sini</a> </p> </body> </html>

Keluaran:

Membuat Link Untuk Mengirim Email

Link juga dapat digunakan untuk mengirim email. Untuk membuatnya ganti URL tujuan dari link dengan mailto dan selanjutnya diikuti dengan alamat email yang akan menerima email.

<!DOCTYPE html> <html> <head> <title>Belajar HTML 5</title> </head> <body> <p> Jika ingin bertanya sesuatu bisa hubungi saya di sini: <a href="mailto:[email protected]">Kirim Email</a> </p> </body> </html>

Ketika link di atas diklik maka selanjutnya secara otomatis akan membuka aplikasi email yang secara default terpasang pada pc. Contoh pada penerapan di bawah ini akan membuka aplikasi Thunderbird.

Membuat Link Untuk Mengunduh File

Link sering juga digunakan untuk link download atau unduh file. Cara membuatnya sangat mudah.

Hanya perlu memasukkan alamat file yang akan didownload. Bila file unduhan berada satu lokasi dengan file dari halaman website saat ini, maka kita tinggal saja tuliskan nama file beserta ekstensinya.

<!DOCTYPE html> <html> <head> <title>Download File</title> </head> <body> <p> Unduh file di sini <a href="download.zip">Download</a> </p> </body> </html>

Keluaran:

Sedangkan jika berada di lokasi yang berbeda, maka tuliskan alamat url-nya beserta nama berkas dan ekstensinya secara lengkap.

Mengubah Style Default dari Link

Nah, sesuai janji kita akan coba buktikan bahwa style default dari hyperlink ini bisa diubah.

Buat file baru dengan nama index.html. Selanjutnya salin kode di bawah ini.

<!DOCTYPE html> <html> <head> <title>Beranda</title> </head> <body> <h1>Selamat Datang di Beranda!</h1> <p>Pilih Menu</p> <a href="index.html" style="color: red;">Beranda</a> || <a href="tutorial.html" style="color: blue; text-decoration: none;">Tutorial</a> || <a href="blog.html" style="background-color: pink;">Blog</a> || <a href="tentang.html" style="color: black; background-color: yellow;">Tentang</a> || <a href="kontak.html" style="color: white; background-color: green; text-decoration: none;">Kontak</a> </body> </html>

Keluaran: