Sekarang kita akan belajar koding HTML tentang cara membuat link di HTML, sebelumnya kita sudah mempelajari cara membuat baris komentar HTML yang tidak dieksekusi oleh web browser.
Link adalah tautan yang menghubungkan antar halaman dalam sebuah website. Tujuan kata Hypertext dari singkatan HTML, seperti yang sudah kita pelajari sebelumnya tentang pengertian HTML.
Cara Membuat Link di HTML
Untuk cara membuat link didalam website, HTML menyediakan sebuah tag khusus untuk melakukan link yakni tag <a>. Tag <a> sendiri berfungsi untuk membuat link html pindah halaman.
Tag <a> termasuk ke dalam inline level element, sehingga ia akan ditampilkan mengikuti baris teks sebelumnya (tidak pindah ke baris baru).
Tag <a> bisa juga dikatakan sebagai anchor element. Seluruh tag <a> harus memiliki atribut href (hypertext reference) yang berisi alamat dari halaman yang ingin dituju.
Untuk lebih jelasnya, kita langsung praktik, silahkan buka text editor dan ketikkan kode dibawah ini, dan simpan link.html
Contoh penggunaannya
<!DOCTYPE html>
<html>
<head>
<title>Cara Membuat Tag Link</title>
<body>
<h1>Tag Link HTML</h1>
<p>Saya belajar koding HTML di website
<a href="https://www.paltycox.com">paltycox.com</a></p>
</body>
</html>
Hasilnya :
Secara default sebuah link akan berwarna biru dan bergaris bawah. Agar link tidak memiliki garis bawah dan berwarna biru, kita perlu merombaknya menggunakan CSS, pada belajar koding CSS.
Jenis Alamat Link HTML
Didalam Link HTML terbagi atas 2 alamat yaitu : Alamat Absolut dan Alamat Relatif
1. Alamat Absolut
Pada contoh diatas, kita membuat sebuah link, dengan alamat link yang lengkap seperti https://www. Penulisan alamat link seperti ini bisa juga dikatakan sebagai external link yang berfungsi memberi link ke domain web lain yang ada di internet. Disebut dengan Alamat Absolut
2. Alamat Relatif
Alamat Relatif adalah alamat file tujuan link didalam struktur folder, alias alamat file yang tidak online atau tidak terkoneksi ke internet.
Untuk membuat alamat relatif ini, kita tidak perlu menuliskan alamat lengkap seperti alamat absolut. Kita hanya menulis alamat file yang dituju didalam file saat ini.
Untuk contoh penggunaan alamat relatif, kita akan membuat link kepada file websiteku.html didalam folder yang sama dan merombak kode html diatas. Lalu kita menggunakan atribut href="websiteku.html". Agar lebih gampang kita mengerti, simak contoh berikut ini.
Kita rombak kode diatas dan simpan dengan Ctrl + S
<!DOCTYPE html>
<html>
<head>
<title>Cara Membuat Tag Link</title>
<body>
<h1>Tag Link HTML</h1>
<p>Untuk melanjutkan halaman kedua klik
<a href="websiteku.html">disini</a></p>
</body>
</html>
Hasilnya :
Lalu buat new file di text editor dengan menekan Ctrl + N dan simpan dengan nama websiteku.html dan ketikkan kode dibawah ini !
<!DOCTYPE html>
<html>
<head>
<title>Websiteku</title>
<body>
<h1>Tag Link Websiteku</h1>
<p>Ini halaman kedua websiteku</p>
</body>
</html>
Hasilnya :
Nah, gimana? gampangkan untuk membuat link di HTML. Yang menjadi pertanyaan, gimana membuat link, jika diklik akan membuka tab baru, oke mari kita bahas.
Link Atribut Target
Untuk membuat link, jika diklik akan terbuka tab baru, hal seperti itu membutuhkan sebuah atribut target.
Kita akan merombak kode html yang diatas dengan menambahkan atribut target="_blank", agar link yang menuju websiteku.html terbuka di tab baru browser.
Contoh link atribut target
<!DOCTYPE html>
<html>
<head>
<title>Cara Membuat Tag Link</title>
<body>
<h1>Tag Link HTML</h1>
<p>Untuk melanjutkan halaman kedua klik
<a href="websiteku.html" target="_blank">disini</a></p>
</body>
</html>
Hasilnya :
Maka setelah diklik link tersebut akan terbuka di tab baru seperti gambar. Tidak seperti link sebelumnya yang akan mereload tab. Untuk pembahasan cara membuat link di HTML, cukup sampai disin
Ada juga yang dinamakan dengan link page anchor. Namun, untuk pembahasan tentang cara membuat link di HTML, cukup sampai disini karena pembahasan kita masih dasar. Kita akan membahas cara membuat page anchor pada belajar koding HTML Lanjutan.
Selanjutnya melanjutkan belajar koding HTML kita ini, membahas tentang cara menampilkan gambar di HTML. Ikuti terus belajar koding HTML ini, agar Kamu cepat mahir dan menjadi programmer profesional.
